Actions
Tying everything together
You can use the <Action>
component to step through the presentation, and run code that updates the presentation:
<script lang="ts">
import { Presentation, Slide, Code, Action } from '@animotion/core'
let code: Code
</script>
<Presentation>
<Slide class="h-full place-content-center place-items-center">
<Code
bind:this={code}
lang="svelte"
theme="poimandres"
code={`
<script>
let count = $state(0)
<\/script>
<button onclick={() => count++}>
{count}
</button>
`}
/>
<Action do={() => code.selectLines`2`} />
<Action do={() => code.selectToken`5 count ++`} />
<Action do={() => code.selectToken`{count}`} />
<Action do={() => code.selectLines`*`} />
</Slide>
</Presentation>
Undo
You can pass an optional undo
prop with a callback to the <Action>
component that runs when you go back a step if you need to revert to some previous state:
<Action
do={() => /* ... */}
undo={() => /* ... */}
/>