JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 84325
  • Score
    100M100P100Q160681F
  • License MIT

Helper for svelte components to ease development

Package Exports

  • svelte-dev-helper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-dev-helper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-dev-helper

Build Status

Helper for svelte components to ease development. Used under the hood by svelte-loader.

Usage

This is meant to be used under the hood for creating a build toolchain, or a dev helper based on Svelte components.

import {Registry, configure, createProxy} from 'svelte-dev-helper';
import Component from './Component.html'; //some svelte component

configure(configOptions);

const id = someUniqueID();

Registry.set(id, {
  rollback: null,
  component: Component,
  instances:[]
});

export createProxy(id);

The component returned by createProxy now has the following features:

  1. Adds a <!--<Component>--> comment marker in the DOM just above where the component's DOM starts
  2. You can access the component instance using $0.__component__ in devtools after higlighting the comment marker from above.
  3. You can access all rendered instances of a particular component using Registry.get(id).instances
  4. All instances have a _rerender method
  5. If you switch the component in the registry (using Registry.set(id, Registry.get(id).component = newComponent)) all future renders of the component will use the newly switched component.
  6. Following a switch as per above, you can switch all rendered components by first accessing the instances and then calling _rerender on them.
  7. The rollback property in any Registry item can be used to hold the last good version of a component. If there is an error instantiating a switched component, it will try to use the component version stored in rollback

The Registry is also available at window.__SVELTE_REGISTRY__