svelte-hyperscript

> use hyperscript to create svelte components



What?

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

Why?

This is the core for [svelte-jsx] and [svelte-htm]. These packages allow to simplify svelte testing code especially slot handling.

Installation

``sh
npm install svelte-hyperscript
`

And then import it:

`js
// using es modules
import h from 'svelte-hyperscript'

// common.js
const h = require('svelte-hyperscript')
`

Alternatively use UNPKG or jsDelivr packages:

With script tags and globals:

`html




`

Hotlinking from unpkg: _(no build tool needed!)_

`js
import h from 'https://unpkg.com/svelte-hyperscript?module'
`

Usage

`js
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,
})
`

The above example written in [jsx] using [svelte-jsx]:

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

let clicked = 0
const LabeledButton = (
(clicked += 1)}>
Click Me!

)

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

or using [svelte-htm]:

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

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

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

API

We aim to support all svelte features. In some cases this is not possible due to the static nature of hyperscript. For those cases we provided feasible workarounds:

$3

To allow reactivity the following properties accept a writable store:

- bind:property
- bind:group
- bind:this
- \

\ additionally accepts a function which is called with the current value.

This allows to for example to access the value if an input:

`js
import { test } from '@jest/globals'
import { render } from '@testing-library/svelte'
import userEvent from '@testing-library/user-event'

import { writable, get } from 'svelte/store'

import h from 'svelte-hyperscript'

test('write into an input', () => {
const text = writable()
const { getByRole } = render(h('input', { 'bind:value': text }))

const input = getByRole('textbox')

await userEvent.type(input, 'some text')

expect(get(text)).toBe('some text')
})
`

The tests are a good source of how to use this feature.

$3

The action feature of svelte is supported but lacks the possibility to pass parameters to the action. This can still be achieved using a factory function as action:

`js
import h from 'svelte-hyperscript'

import action from 'some-action-module'

h('div', { 'use:action': (node) => action(node, parameters) })
`

Related Projects

- [svelte-jsx] - write svelte components using [jsx]
- [svelte-htm] - Hyperscript Tagged Markup for svelte
- [svelte-fragment-component] - a utility component

Feature Set

- [x] plain html children
- [x] readable store children
- [x] on:eventname
- [x] on:eventname modifiers
- [x] bind:property but using writable store
- [x] bind:property on components
- [x] bind:property on html elements
- [x] bind:group
- [x] bind:this
- [x] use:action
- [x] class:name
- [ ] transition:fn
- [ ] in:fn/out:fn
- [x]
- [x]
- [x] but using setter or writable store
- [x] {property} when using a writable store
- [x] context propagation
- [ ] svelte:self
- [ ] svelte:component
- [ ] svelte:window
- [ ] svelte:body
- [ ] svelte:head

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.

$3

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

NPM Statistics

![NPM](https://nodei.co/npm/svelte-hyperscript/)

License

svelte-hyperscript` is open source software licensed as MIT.

[jsx]: https://reactjs.org/docs/introducing-jsx.html
[svelte-jsx]: https://www.npmjs.com/package/svelte-jsx
[svelte-hyperscript]: https://www.npmjs.com/package/svelte-hyperscript
[svelte-fragment-component]: https://www.npmjs.com/package/svelte-fragment-component