Svelte component that renders its children with lifecycle hooks to simplify testing using svelte4
npm install svelte4-fragment-component> A svelte component that renders its children with lifecycle hooks.







Declarative version of Svelte component inspired by reach-ui/component-component.
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._
``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'
> The examples below are using svelte-jsx for the jsx syntax support.
`js
import Fragment from 'svelte-fragment-component'
const Lifecycle = (
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 = (
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
)
`
The component renders only the default slot children.
> 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
- [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
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.
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.
- npm test: Run test suitenpm run build
- : Generate bundlesnpm run lint
- : Lints code

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
This package is originally written by kenoxa (Sascha Tandel). I edited personally to be using Svelte v4 since non updated was published yet.