An HTML WebComponent capable of propagating a context across the DOM tree.
yarn add @mcastiello/html-context
npm install @mcastiello/html-context
The component is able to propagate a context across the DOM tree by passing it between children on the same branch.
It also allows you to pass a store element which, whenever the state is updated, it will trigger the render function
import { ActionDefinition, createStore, Reducer } from "@mcastiello/simple-store";
import { HTMLContextElement, WebComponentEvents } from "@mcastiello/html-context";
enum Action {
Update,
}
type Definitions = {
[Action.Update]: ActionDefinition<Action.Update, string>;
};
type State = {
value?: string;
};
type Context = {
emptyValue: string;
};
class ContextComponent extends HTMLContextElement<Context, State, Action> {
constructor() {
super();
this.addEventListener(WebComponentEvents.Initialised, () => {
this.innerHTML = "<span></span>";
});
}
render() {
const span = this.querySelector("span");
if (span) {
span.textContent = this.state?.value || this.context?.emptyValue || null;
}
}
}
customElements.define("ctx-component", ContextComponent);Once you created your component, you can simply add it to the DOM and let the context element propagate the data.
import { createStore, Reducer } from "@mcastiello/simple-store";
document.body.innerHTML = `
<html-context class="context">
<div class="container">
<ctx-component class="component"></ctx-component>
</div>
</html-context>
`;
const container = document.body.querySelector(".context") as HTMLContextElement<Context, State, Action>;
const reducer: Reducer<State, Definitions> = (state = {}, action) => {
switch (action.type) {
case Action.Update:
return {...state, value: action.payload};
}
};
const store = createStore(reducer);
container.context = {
emptyString: "-",
};
container.store = store;
console.log(document.body.querySelector(".component span").textContent); // "-";
store.dispatch(Action.Update, "test");
console.log(document.body.querySelector(".component span").textContent); // "test";