UI Kit for building applications Preact, Htm, Robot
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

35 lines
660B

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Foo</title>
  5. </head>
  6. <body>
  7. <script type="module">
  8. import { html, preact, robot, useMachine } from './bundle.js'
  9. const { render } = preact
  10. const { createMachine, state, transition } = robot
  11. const machine = createMachine({
  12. on: state(
  13. transition('toggle', 'off')
  14. ),
  15. off: state(
  16. transition('toggle', 'on')
  17. )
  18. })
  19. function App() {
  20. const [current, send] = useMachine(machine)
  21. return html`
  22. <h1>Status: ${current}</h1>
  23. <button onClick=${e => send('toggle')}>Toggle</button>
  24. `
  25. }
  26. render(html`<${App} />`, document.body)
  27. </script>
  28. </body>
  29. </html>