Have ideas to improve npm?Join in the discussion! »

    svelte-fragment-component
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    svelte-fragment-component

    A svelte component that renders its children with lifecycle hooks.

    License Latest Release View changelog

    CI Coverage Status PRs Welcome Conventional Commits

    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:

    Related Projects

    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

    NPM

    License

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

    Install

    npm i svelte-fragment-component

    DownloadsWeekly Downloads

    139

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    86.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar