ekhaledsvelte-dev-helper
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:
- Adds a
<!--<Component>-->comment marker in the DOM just above where the component's DOM starts - You can access the component instance using
$0.__component__in devtools after higlighting the comment marker from above. - You can access all rendered instances of a particular component using
Registry.get(id).instances - All instances have a
_rerendermethod - If you switch the
componentin the registry (usingRegistry.set(id, Registry.get(id).component = newComponent)) all future renders of the component will use the newly switched component. - Following a switch as per above, you can switch all rendered components by first accessing the instances and then calling
_rerenderon them. The
rollbackproperty in anyRegistryitem 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 inrollbackThe
Registryis also available atwindow.__SVELTE_REGISTRY__