<script>
import {onMount} from 'svelte'
const defaultDelay = 1200
let text = '', subtext = '';
let classes = ''
const steps = [
{type: 'caption', text: "Refactoring from React to Svelte", subtext: "A step by step view", delay: 2000},
{type: "delay"},
{type: 'caption', text: "Remove function wrapping", subtext: "Component name is implied by filename.", class: "unwrapping-fn"},
{type: 'style', class: "unwrapped-fn"},
{type: 'caption', text: "Remove return", subtext: "Returning HTML is implied.", class: "removing-return"},
{type: 'style', class: "removed-return"},
{type: 'caption', text: "Wrap JavaScript code in a <script> tag", subtext: "This file now resembles an HTML file", class: "highlight-script-wrap"},
{type: 'style', class: "script-wrapping"},
{type: 'style', class: "script-wrapped"},
{type: 'caption', text: "Remove hooks", subtext: "Use a regular variable instead.", class: "removing-hooks"},
{type: 'style', class: "removed-hooks"},
{type: 'style', class: "after-removed-hooks", delay: 500},
{type: 'caption', text: "Replace call to set()", subtext: "Use assignment instead.", class: "removing-setter"},
{type: 'style', class: "removed-setter"},
{type: 'style', class: "after-removed-setter", delay: 500},
{type: 'caption', text: "Adjust event handler syntax", subtext: "Use semicolon instead", class: "adjusting-handler"},
{type: 'style', class: "adjusted-handler"},
{type: 'style', class: "after-adjusted-handler", delay: 500},
{type: 'caption', text: "Move preventDefault call", subtext: "Use declarative syntax instead.", class: "adjusting-prevent-handler"},
{type: 'style', class: "adjusted-prevent-handler"},
{type: 'style', class: "after-adjusted-prevent-handler", delay: 500},
{type: 'caption', text: "Inline events handler", subtext: 'Event handler is much simpler now.', class: "inlining-events"},
{type: 'style', class: "inlined-events"},
{type: 'style', class: "after-inlined-events"},
{type: 'caption', text: "No need for wrapper", subtext: "Root node not required.", class: "removing-root"},
{type: 'style', class: "removed-root", delay: 500},
{type: 'caption', text: "All done!", class: 'done', delay: 3000},