Lithent were developed to make it easy to insert Virtual DOM component fragments into pages already drawn with SSR, and are intended to be used lightly in a variety of situations. (Detailed introduction)
After watching the nine simple examples below, you should have an almost complete understanding of Lithent.
Lesson1 - Mounter & Updater & Renew
Mounter
Called once when the component is first drawn. Defines the component's state and methods.
Updater
The definition of the template markup that is actually drawn. Called whenever the component's state is changed or updated.
An updater is a higher-order function defined within a mounter that uses JavaScript closures to access variables and functions in the mounter.
Renew
renew is used when you need to update a component from a method defined in the mounter.
"props" is provided as the second argument to the "mounter" function and as the first argument to the "updater".
The updater function can access the "mounter"'s "props" value with a closure, but be careful because you can make the mistake of not getting the updated state if the value is "call by value".
The "state" function defined in the example code delegates a value and a "renew" function from the component and then executes it whenever the value changes.
Users can implement and use several forms of helpers themselves by utilizing the "renew" function.
The state function used in the example is pre-implemented in 'lithent/helper', so you can just pull it out and use it to and use it. But it's just an example.
In addition to "state", we've implemented helper codes like "store", "computed", and "effect" in "lithent/helper", and their usage is described on the examples page.
import { h, Fragment, render, mount } from'lithent';
// import { state } from 'lithent/helper';// This is what the above commented out module looks like.const state = <T>(value: T, renew: () => boolean): { value: T } => {
let result = value;
return {
getvalue() {
return result;
},
setvalue(newValue: T) {
result = newValue;
renew();
},
};
};
// MounterconstComponent = mount((renew, _props) => {
const count = state<number>(0, renew);
constchange = () => {
count.value += 1;
};
// Updaterreturn() => (
<><li>count: {count.value}</li><buttononClick={change}>increase</button></>
);
});
render(<Component />, document.getElementById('root'));
count: 0
Lesson 4 - render
render
The third argument to the "render" method allows you to insert a virtual DOM in front of the specified element.
The first argument to the "render" method is the virtual DOM, the second argument is the virtual DOM's parent element, and the third argument specifies the specific location where the virtual DOM will be inserted.
store helper
The "store" used in the examples is a helper implementation, like "state". More detailed usage can be found on the examples page.
// index.html/*
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
*/// app.tsximport { h, Fragment, render, mount } from'lithent';
import { store } from'lithent/helper';
const assignShardStore = store<{ text: string; count: number }>({ text: 'sharedText', count: 3 });
constComponent = mount(r => {
// The value of "shardStore.count" is null.// To get the value, you must include it in the second argument, the function return array.// If you omit the second argument, then all values in the store are fetched.const shardStore = assignShardStore(r, (store) => [store.text]);
constchangeInput = (event) => {
shardStore.text = event.target.value;
};
return() =><textareatype="text"onInput={changeInput}value={shardStore.text} />;
});
render(<Component />, element, element.querySelector('span:nth-of-type(2)'));
render(<Component />, element, element.querySelector('span:nth-of-type(3)'));
123
Lesson 5 - Root Destroy
The value returned by the render function is the destroy function. When executed, it is unmounted and removed from the DOM.
The "updateCallback" is executed after the component is requested to update, but before it is updated. It is used for clean up purposes.
The function returned by updateCallback is executed after the component update is complete.
Defines a function as the second argument that returns an array of target values when an update to a specific value needs to be detected. If omitted, it will always be executed.
By combining updateCallback and mountCallback, you can create a helper similar to react's useEffect. Check out the examples page to see how to use the effect helper.
A "ref" is simply an object with a "value" property. As shown in the example, a "ref" allows you to change the internal state of the root component from outside the root component.
Or Alternatively, you can use it as a way to access the actual DOM drawn by the virtual DOM, like the elementRef in the example.