UI Kit for building applications Preact, Htm, Robot
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
Tom a6e03f9ee1 first commit 1年前
src first commit 1年前
.gitignore first commit 1年前
README.md first commit 1年前
bundle.js first commit 1年前
example.html first commit 1年前
package.json first commit 1年前
rollup.config.js first commit 1年前
yarn.lock first commit 1年前

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