UI Kit for building applications Preact, Htm, Robot
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
Tom a6e03f9ee1 first commit il y a 1 an
src first commit il y a 1 an
.gitignore first commit il y a 1 an
README.md first commit il y a 1 an
bundle.js first commit il y a 1 an
example.html first commit il y a 1 an
package.json first commit il y a 1 an
rollup.config.js first commit il y a 1 an
yarn.lock first commit il y a 1 an

README.md

twilson63-ui-kit

twilson63 UI Kit is a combination of htm, preact, and robot to create a single bundle that can be imported either from a cdn or a single file. The bundled esm module is bundle.js

Usage

<!doctype html>
<html>
  <head>
    <title>Foo</title>
  </head>
  <body>
<script type="module">
  import { html, preact, robot, useMachine } from './bundle.js'
  const { render } = preact
  const { createMachine, state, transition } = robot

  const machine = createMachine({
    on: state(
      transition('toggle', 'off')
    ),
    off: state(
      transition('toggle', 'on')
    )
  })

  function App() {
    const [current, send] = useMachine(machine)
    
    return html`
      <h1>Status: ${current}</h1>
      <button onClick=${e => send('toggle')}>Toggle</button>
    `
  }

  render(html`<${App} />`, document.body)
</script>
  </body>
</html>

Build

yarn
yarn build