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 2 ans
src first commit il y a 2 ans
.gitignore first commit il y a 2 ans
README.md first commit il y a 2 ans
bundle.js first commit il y a 2 ans
example.html first commit il y a 2 ans
package.json first commit il y a 2 ans
rollup.config.js first commit il y a 2 ans
yarn.lock first commit il y a 2 ans

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