lit-element-effector
Minimal mixin to attach an Effector Store to lit-element.
- Automatically request element update on effector store change.
- Supports typescript.
- Just a tiny wrapper, about 1kB minified.
- Supports a pattern for inheritance.
- Safe: makes a copy of the store into the custom element.
- Built with best practices in mind.
/!\ currently there is an issue with ts-loader, but rollup and standalone webpack work.
Usage
EffectorMxn BaseClass, Store, FxAPI? )
The mixin takes as input parameters a BaseClass
which must inherit from a LitElement
, an Effector Store
and an optional object, FxAPI
.
This last one is meant as dependency injection of the custom-element's effect interface, its values are expected to be
either effector effects
or events
(or functions).
const store01 = ; LitElement store { // the store state is available with the `$` property return html` world! ` } customElements;
The provided store is reflected to the LitElement property $. Supports any store types, from boolean to objects. The store state is deeply-copied to $. Direct assignment to the property $ should be avoided, altough it cannot affect the state.
Event and Effect API Helper
const evnt = ;const Fx = ; store01; const API = changeGreetings: evnt networkCallFx: Fx ; LitElement store01 API { return html` world! ` } { // the effects API is available under `dispatch` prop thisdispatch; }
If defined, the effect API is injected into the dispatch
getter property. This is no more than a recommendation,
it helps to keep the custom-element decoupled from the app-state (see an example in the test section below).
In some cases can be more convenient to override the dispatch
getter, if you do so is a good practice to return
a shallow copy of the API object (since it could be used in multiple places).
React on Store change with user defined function
LitElement store /* Do something on update */ { /* render component */ }
If defined, the function on_store_update
will be executed any time a store change is triggered.
The only argument passed to the function is a copy of the current store. This function will run after the property $ is
set, but before any of the element's update/render.
Inheritance
;const store02 = const combinedStore = ; // here applying the mixing to the previous example classexample01 combinedStore // adding a reflected attribute on top of the inherited ones @ type = "dark"; { return html ` This is . ` }
LitElement makes sure that reflected properties of inherited classes are present and functioning. One thing to notice is that when applying the mixin multiple times the store is actually swapped, so the provided store of a child class must be a combination of the parent store and the additional wanted properties.
Testing Helpers
it"Detaches from current store, send fake data", ;
There are a few convenient helpers to aid testing a custom-element with attached store. A function replaceStore
is provided to swap the store with a fake one.
The store_update_handler
function can be used to simulate a store update with fake data, you can also use this to initialize the element before appending the element to DOM.
;
Many times during testing we would mock or stub effects that make network calls, here you can simply reassign the instance API injecting a different function.
The dispatch
getter returns a shallow copy of the effect-API, this means that you can swap the keys of that instance with fakes without
affecting the overall element class nor the original effect-API.