assert/code/hello-fun.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="/logo.svg">
    <title>🚐💨Hello Van</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script type="module">
      import van from "./van-latest.min.js"

      const {button, div, pre} = van.tags

      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

      const Run = ({sleepMs}) => {
        const steps = van.state(0)
        ;(async () => { for (; steps.val < 40; ++steps.val) await sleep(sleepMs) })()
        return pre(() => `${" ".repeat(40 - steps.val)}🚐💨Hello VanJS!${"_".repeat(steps.val)}`)
      }

      const Hello = () => {
        const dom = div()
        return div(
          dom,
          button({onclick: () => van.add(dom, Run({sleepMs: 2000}))}, "Hello 🐌"),
          button({onclick: () => van.add(dom, Run({sleepMs: 500}))}, "Hello 🐢"),
          button({onclick: () => van.add(dom, Run({sleepMs: 100}))}, "Hello 🚶‍♂️"),
          button({onclick: () => van.add(dom, Run({sleepMs: 10}))}, "Hello 🏎️"),
          button({onclick: () => van.add(dom, Run({sleepMs: 2}))}, "Hello 🚀"),
        )
      }

      van.add(document.body, Hello())
    </script>
  </body>
</html>