kontxt
v0.4.1kontxt
Minimal multi-state (context) management tool.
Motivation
The main idea behind kontxt is to provide some simple state management for lit-html
between renders. All kontxt
updates are executed on the same execution frame but listener invokation is scheduled to the next available execution frame thus preventing unnecessary re-renders. You can update as many contexts as many times you like within an execution frame.
This way lit-html
& kontxt
can provide a React Function Component/Hooks-like development experience but in a simpler, cleaner way (no context providers/consumers, reducers, etc...).
However, kontxt
isn't bound to the DOM or lit-html
so it can be used for anything.
Example
Template (or function component if you will)
Counter.ts
import { html } from 'lit-html';
import { createContext } from 'kontxt';
const Count = createContext<number>(0);
export function Counter() {
const count: number = Count(); // read value
return html`
<span>${count}</span>
<button @click=${() => Count.set(Count() + 1) /* set value */}></button>
`;
}
index.ts
import { html, render } from 'lit-html';
import Counter from './Counter';
const $root: Element = document.getElementById('root');
const updateDOM = addListener(function () {
render(Counter(), $root)
});
updateDOM();
Creating a context
Value of a context can be of any data type.
// create context with default value
const Hello = createContext('World');
Using a context
Contexts are simple functions, no dark-magic, just call them when you want to retrieve the latest value.
console.log(Hello());
Subscribing and Unsusbscribing to/from context changes
Any context update will update the listeners
import { addListener, removeListener } from 'kontxt';
// adding a listener
const listener = addListener(() => {
// TODO something
});
// removing the listener
removeListener(listener);
Updating a context
Simple update:
You can update the context by passing the desired value as the argument. The internal value will be updated immediately and listener invokaction will be scheduled to the next available execution frame.
Hello('World!');
You may also want to use objects as context values and update their property individually - you can do that with updater functions:
const User = createContext({
firstName: 'John',
lastName: 'Doe',
})
// set user details - replace/set value
User.set({
firstName: 'Jane',
});
// merge user details - partial update value - only for objects!
User.merge({
firstName: 'Jane',
});
async
/await
- context updates are treaded as non-async functions. Do not do asynchronous operations from a context updater function - do it before updating.