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

npm install svelte-fragment-component

And then import it:

// 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).

<!-- UNPKG -->
<script src="https://unpkg.com/svelte-fragment-component"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/svelte-fragment-component"></script>

<script>
  <!-- And then grab it off the global like so: -->
  const Fragment = svelteFragment
</script>

Hotlinking from unpkg: (no build tool needed!)

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

Usage

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

import Fragment from 'svelte-fragment-component'

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

This allows to simplify testing of context API:

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

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

// or using the context property
const Lifecycle = (
  <Fragment context={{ 'some context key': theValue }}>
    children can now access this context value
  </Fragment>
)

API

The component renders only the default slot children.

Properties

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.

Develop

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

NPM Statistics

License

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

UPDATED TO SVELTE4

This package is originally written by kenoxa (Sascha Tandel). I edited personally to be using Svelte v4 since non updated was published yet.