UI Kit for building applications Preact, Htm, Robot
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
Tom a6e03f9ee1 first commit vor 1 Jahr
src first commit vor 1 Jahr
.gitignore first commit vor 1 Jahr
README.md first commit vor 1 Jahr
bundle.js first commit vor 1 Jahr
example.html first commit vor 1 Jahr
package.json first commit vor 1 Jahr
rollup.config.js first commit vor 1 Jahr
yarn.lock first commit vor 1 Jahr

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