Precompiled components don't animate

[lilnasy]

I am using the React renderer with precompiled tokens. The tokenization, serialization, and rendering all seem to work fine, but the transitions are all immediate, not animated.

video.mp4

The component looks like this:

const CodePage: React.FC = () => {
    const [step, setStep] = useState(0)

    return <>
        <ShikiMagicMovePrecompiled
            steps={compiledCode}
            step={step}
            animate={true}
            options={{ duration: 750, stagger: 7, lineNumbers: true }}
        />
        <button onClick={() => setStep(step === 1 ? 0 : 1)}>Animate</button>
    </>
}

compiledCode is generated using this code:

const machine = createMagicMoveMachine(
    code => codeToKeyedTokens(highlighter, code, {
        lang: "tsx",
        theme: "vitesse-light",
    })
)

const compiledCode = [
`function greet() {
    console.log('Hello, World!');
}
greet();`,
`const name = 'Alice';
function greet() {
    console.log('Hello, ' + name + '!');
}
greet();`
].map(code => machine.commit(code).current)

• A full reproduction can be seen at reproduction for #39 #38

[lilnasy]

• This may appear as a duplicate of React example not working #32, but that issue is fixed by including shiki-magic-move's stylesheet. This issue remains with the stylesheet included.

[lilnasy]

I noticed that the component was being re-rendered unnecessarily. Maybe an extra re-render was cancelling the animation abruptly.

Looking at the code, I noticed that the useMemo was updating a value it depended on. Recognizing that as a "loop-happy" pattern, I updated the memo's dependencies.

  const result = React.useMemo(() => {
    const res = syncTokenKeys(
      previous,
      steps[Math.min(step, steps.length - 1)],
      options,
    )
    setPrevious(res.to)
    return res
- }, [previous, steps, step, options])
+ }, [steps, step, options])

Preview in the PR.
I don't understand the intention behind the hook, but this also allowed the code block to animate.