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.
Tom a6e03f9ee1 first commit 1 jaar geleden
src first commit 1 jaar geleden
.gitignore first commit 1 jaar geleden
README.md first commit 1 jaar geleden
bundle.js first commit 1 jaar geleden
example.html first commit 1 jaar geleden
package.json first commit 1 jaar geleden
rollup.config.js first commit 1 jaar geleden
yarn.lock first commit 1 jaar geleden

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