xatto is View Layer Library based on Function and Context using VirtualDOM.
This is developed by forking from jorgebucaran/superfine.
The main APIs of
xatto are two.
The first one is
xatto.x. It returns a new virtual DOM node tree.
The other is
xatto.atto. It returns a function that mount (or update) a component in the specified DOM element. (
example: A counter that can be incremented or decremented.
import x atto from "xatto"const down = count: contextcount - 1const up = count: contextcount + 1const Component = xa: context ...attrs children<div><h1>contextcount</h1><button =>-</button><button =>+</button></div>count: 10
xatto is available as a package on npm.
npm install xatto
It is also available on a CDN.
git clone https://github.com/atomita/xatto-starter-kit.git projectcd projectnpm installnpm run serve
It consists of dynamic data that moves within a component during execution.
To change the context you need to use the mutate function (or event handler in the components).
It is a function returned by
Passing the context mount the component specified by xatto.atto on the specified container together.
From the second time on, it update.
Each time the context changes the component is invoked so you can specify the appearance of the DOM based on the new context.
The context can be referenced in the first argument
import x atto from "xatto"const Component = props children<div>propsxacontextname</div>name: "foo"
const Component = props children<><div>foo</div><div>bar</div></>
Sliced context and fill
The child component can treat a part of the context as if it were the root context by specifying
xa.slice in the parent component.
xa.fill can specify the value to use if the sliced context is undefined.
import x atto from "xatto"const Parent = props children<div><span>propsxacontextname</span><ul><li><Child =</><li><Child =</></ul></div>const Child = props children<span>propsxacontextname</span>name: "foo"children:name: "bar"
Event handlers are wrapped by xatto.
Usually, the event object passed in the first argument is the fourth argument.
The return value is passed to the mutate function.
Event handler arguments:
Lifecycle events can be used to be notified when an element managed by the virtual DOM is created, updated, or deleted.
It can be used for animation, data fetching, third party library wrapping, resource cleanup, etc.
This event occurs after an element is created and attached to the DOM.
This event will occur each time you update an element's attributes.
This event occurs before an element is dettached from the DOM.
detail.done is passed a function to detach the element.
This event occurs just before an element is dettached from the DOM.
This event occurs just before each life cycle event occurs.
detail.type is passed the life cycle event name.
The key helps to identify the node each time xatto update the DOM.
This allows you to rearrange the elements to a new position if you change the position.
The key must be unique among sibling nodes.
Polyfill which may be needed
xatto is MIT licensed. See LICENSE.
import x atto from "xatto"const down = count: contextcount - 1const up = count: contextcount + 1const Counter = xa: context ...attrs children<div><h1>contextcount</h1><button =>-</button><button =>+</button></div>const add =counters: contextcountersconst cut =counters: contextcountersconst Main = xa: context ...attrs children<div><button =>add</button><button =>cut</button>contextcounters<pre>JSON</pre></div>counters:count: 0count: 10