search

antfu / retypewriter

Replay the steps of your changes at ease.
https://marketplace.visualstudio.com/items?itemName=antfu.retypewriter
MIT License
729 stars 12 forks source link

Cannot handle new lines when playing SVG #2

Open cyberalien opened 1 year ago

cyberalien commented 1 year ago

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

michael-azogu commented 1 year ago

could it be a tabs v spaces problem

martiliones commented 1 year ago

Made it work by changing file extension to not existing. I think vs code autocomplete breaks it

@antfu can the extension disable autocomplete until it does work?