antfu / retypewriter

Replay the steps of your changes at ease.

reTypewriter

Replay the steps of your changes at ease.
A diff based typing simulator.

Gif Demo | Install VS Code Extension

Made possible by my Sponsor Program 💖

Sponsors

License

MIT License © 2022 Anthony Fu

retypewriter's Issues

retype step by step

Clear and concise description of the problem

As a shareholder,I want retypewritter can retype step by step,I would like retypewritter can add a button whenever the user click this button, it will retype only one snapshot.I intend to submit a PR for this issue.

Suggested solution

Add a button in the menus when etypewritter isplaying, if the user does not click the button, retypewriter will retype as common,if the user click it, retypewritter will stop when current snapshot is done.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

I have some additions - PRs welcome?

Clear and concise description of the problem

Hi there 👋

I've been using retypewriter a bit, but I required some things for myself and implemented them on my fork. I'm not sure if they would be welcome as PRs and before I do the additional effort of cleaning them up for PRs, I wanted to know which of those you would like.

I have implemented:

• a new speed option that allows to set the timeout multiplier for key strokes to a different value than 1.2
• a bugfix so that actually all "default headers" are now applied
• the Take/Discard Snapshot popup on start is now omitted when the code is at the start or end of the sequence (was only at the end before)
• implemented a "go one step back" feature. This one needed quite a lot of changes to allow for commands from the UI to be sent into the animateSteps generator. This one has the most changes - it might be very handy, but it's a bit hacky.

Suggested solution

Here are all my changes in "rough" form - please let me know if you'd like a PR for any of them :)

https://github.com/antfu/retypewriter/compare/main...phryneas:retypewriter:main?expand=1

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Cannot handle new lines when playing SVG

Describe the bug

Diff fails to handle new lines when rendering SVG, resulting in rather messy replay.

SVG file and .retypewriter file to test:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
	<g fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0 22)">
		<path d="M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z">
			<animateMotion path="M0 0v-22" calcMode="linear" dur="0.6s" fill="freeze" />
		</path>
	</g>
</svg>

reTypewriter Snapshots v1

--01----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
</svg>

--02----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
</svg>

--03----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
	<g fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0 22)">
		<path d="M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z">
			<animateMotion path="M0 0v-22" calcMode="linear" dur="0.6s" fill="freeze" />
		</path>
	</g>
</svg>

--------------

When playing this demo, extension ends up showing this (scroll horizontally to see full mess):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4"><		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;l" /g>
</svg>

Reproduction

See steps above

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 50.66 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Cannot stop process, cannot restart if switching tabs

Describe the bug

There is no option to stop playing, so I tried to stop by switching editor tabs. That stopped process, but also threw error. After that, attempting to start player shows reTypewriter: Already playing even though it is not playing.

Steps to reproduce:

1. Start playing
2. While plugin is playing, switch tab. That should stop player and throw error.
3. Click play button again. That should throw another error

Reproduction

Follow steps in description

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 50.66 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

in vscode version 1.70.0 can't install

Describe the bug

Reproduction

in vscode version 1.70.0 can't install

System Info

Version: 1.70.0 (user setup)
Commit: da76f93349a72022ca4670c1b84860304616aaa2
Date: 2022-08-04T04:38:16.462Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Windows_NT x64 10.0.19044

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Unable to re-use .retypewriter file from another system

Describe the bug

When I click the Play button, I get the error message 'Invalid snapshot file'.

I think it might be an EOL bug, the parse function does not handle it.

It's possible to set Eol to \n before reading the file, and to set Eol to before after reading the file.

Reproduction

Follow the description

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 2.17 GB / 15.87 GB
  Binaries:
    Node: 14.20.0 - ~\AppData\Local\Volta\tools\image\node\14.20.0\node.EXE
    Yarn: 1.22.19 - ~\AppData\Local\Volta\tools\image\yarn\1.22.19\bin\yarn.CMD
    npm: 9.1.2 - ~\AppData\Local\Volta\tools\image\npm\9.1.2\bin\npm.CMD
    Watchman: 20201213.172817.0 - D:\watchman-v2020.12.14.00-windows\watchman-v2020.12.14.00-windows\bin\watchman.EXE
  Browsers:
    Chrome: 109.0.5414.120
    Edge: Spartan (44.22000.120.0), Chromium (109.0.1518.61)
    Internet Explorer: 11.0.22000.120

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Snapshots not reset by deleting .retypewriter unless VSCode is restarted

Describe the bug

While making snapshots, I delete the .retypewriter file and expect the next snapshot to start from scratch. It doesn't, it just continues with next step as if file was still present. It gets recreated and next snapshot added.

If I delete a .retypewriter file and restart VSCode, it works as expected.

Is this by design or just a flaw?

EDIT: moved video to reproduction

Reproduction

2022-10-06.08-48-10.mp4

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
    Memory: 1.20 GB / 7.90 GB
  Binaries:
    Node: 18.9.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 105.0.5195.127
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.34)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.