svelte-fragment-component

> A svelte component that renders its children with lifecycle hooks.



What?

Declarative version of Svelte component inspired by reach-ui/component-component.

Why?

Because sometimes (within tests) you want a lifecycle or some state but don't want to create a new component.

_This is most likely only useful for libraries like svelte-jsx or svelte-htm._

Installation

``sh
npm install svelte-fragment-component
`

And then import it:

`js
// using es modules
import Fragment from 'svelte-fragment-component'

// common.js
const Fragment = require('svelte-fragment-component')
`

Or use script tags and globals (UNPKG | jsDelivr).

`html




`

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

`js
import Fragment from 'https://unpkg.com/svelte-fragment-component?module'
`

Usage

> The examples below are using svelte-jsx for the jsx syntax support.

`js
import Fragment from 'svelte-fragment-component'

const Lifecycle = (
onCreate={() => {}}
onMount={() => {}}
beforeUpdate={() => {}}
afterUpdate={() => {}}
onDestroy={() => {}}
>
some content

)
`

This allows to simplify testing of context API:

`js
import Fragment from 'svelte-fragment-component'
import { setContext } from 'svelte'

const Lifecycle = (
onCreate={() => {
setContext('some context key', theValue)
}}
>
children can now access this context value

)

// or using the context property
const Lifecycle = (

children can now access this context value

)
`

API

The component renders only the default slot children.

$3

> All properties are optional.

- context: an key-value object where each pair is passed to setContext

Except for onCreate these functions are passed to their corresponding svelte lifecycle method and have the same call signature ({ props }): void where props are the $$restProps:

- onCreate: called during component initialization
- onMount
- beforeUpdate
- afterUpdate
- onDestroy

Related Projects

- [svelte-jsx] - write svelte components using [jsx]
- [svelte-htm] - Hyperscript Tagged Markup for svelte; a [jsx]-like syntax using [Tagged Templates]
- @testing-library/svelte - helps to test UI components in a user-centric way

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-fragment-component/)

License

svelte-fragment-component` is open source software licensed as MIT.

[tagged templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates
[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-htm]: https://www.npmjs.com/package/svelte-htm