svelte-hyperscript

svelte-hyperscript

use hyperscript to create svelte components

Installation

npm install svelte-hyperscript

CDN: UNPKG | jsDelivr (available as window.svelteHyperscript)

Usage

This package exposes an hyperscript compatible function: h(tag, properties, ...children) which returns a svelte component.

import h from 'svelte-hyperscript'

import Button from '../src/Button.svelte'

let clicked = 0
const LabeledButton = h(Button, { 'on:click': () => (clicked += 1) }, h('span', null, 'Click Me!'))

const button = new LabeledButton({
  target: document.body,
})

This project is the core for svelte-jsx and svelte-htm.

The above example written in jsx using svelte-jsx:

import Button from '../src/Button.svelte'

let clicked = 0
const LabeledButton = (
  <Button onClick={() => (clicked += 1)}>
    <span>Click Me!</span>
  </Button>
)

const button = new LabeledButton({
  target: document.body,
})

or using svelte-htm:

import html from 'svelte-htm'
import Button from '../src/Button.svelte'

let clicked = 0
const LabeledButton = html`<${Button} on:click=${() => (clicked += 1)}><span>Click Me!</span><//>`

const button = new LabeledButton({
  target: document.body,
})

Feature Set

• plain html children
• readable store children
• on:eventname
• on:eventname modifiers
• bind:property but using setter/getter or writable store
• use:action
• transition:fn
• in:fn/out:fn
• <slot>
• <slot name="name">
• <slot let:name={setter}> but using setter or readable store
• <slot let:name={property}>{property}</slot>
• Client-side component API
  • component.$set(props)
  • component.$on(event, callback)
  • component.$destroy()
• context propagation
• Lifecycle component: <Component init={() => setContext()}>...<//>

Support

This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.

Contribute

Thanks for being willing to contribute!

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

We are following the Conventional Commits convention.

Develop

• npm test: Run test suite
• npm run build: Generate bundles
• npm run lint: Lints code

NPM Statistics

License

svelte-hyperscript is open source software licensed as MIT.