El.js

[![npm][npm-img]][npm-url]
[![build][build-img]][build-url]
[![dependencies][dependencies-img]][dependencies-url]
[![downloads][downloads-img]][downloads-url]
[![license][license-img]][license-url]
[![chat][chat-img]][chat-url]

> A reasonable micro-app framework with practical reuseability.

-----

Introduction

El.js is a framework built ontop of Riot.js templates for building micro-apps.

What is a micro-app?

Web-frameworks require developers to build most if not all their webpages to be dynamic webapps. This allows developers to make sure everything on their webpage obeys a single consistent, predictable, rendering flow that they can reason about. However, there are also many disadvantages compared to traditional static websites including more complex caching schemes, longer load-times, and SEO problems. Microapps offer a powerful solution for these drawbacks. Instead of building giant monolithic web applications, build small apps and embed them on your otherwise static pages.

A micro-app performs a small and very tightly scoped piece of functionality that can be reused over and over again. Micro-apps don't differ much from the idea of embeddable widgets before frameworks became the standard, but they differ in execution by emphasizing a reliance on reasonable frameworks and practical reuseability.

A Simple Form Example

HTML: index.html
``html


				Type Your Name


				Your Name Is
				{ data.name }

JS: my-script.js`javascript // window.El is the global value

// El.Form extends El.View and validates bound El.Inputs class Form extends El.Form { constuctor () { // data contains your state this.data = { name: '?', } // your custom tag name this.tag = 'my-form'

super() } }

Form.register()

// El.Input extends El.View and binds to updating El.Form values class Input extends El.Input { constructor () { // your custom tag name this.tag = 'my-input' // the default this.change function works with all basic html inputs(, , ...).<br /> this.html = '<input onkeydown="{ change }" />'</p><p class="my-3"> super()<br /> }<br />}</p><p class="my-3">Input.register()</p><p class="my-3">El.mount('*')<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Add this tag to the bottom of <body> before your custom scripts and deps and reference window.El.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Install via NPM<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />npm install el.js --save<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Supports CommonJS<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />var El = require 'el.js'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or ES6 imports<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import El from 'el.js'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">API</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Types</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">This type is referenced by _El.Form_ to store the information used to validate the field associated with _name_.</p><p class="my-3">#### Properties<br />| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| config | _MiddlewareFunction_ or [_MiddlewareFunction_] | undefined | This type stores the original _MiddlewareFunction_ or _MiddlewareFunctions_ used to create _validate()_ |<br />| name | string | '' | This is the name of a field on _El.Form_'s _data_ property that the rest of this type references. |<br />| ref | <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a> | undefined | This is a link to the mutable data tree which can retrieve the value of _name_ by calling this.ref.get(_name_) |</p><p class="my-3">#### Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| validate | (<a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a>, string) => Promise |This method calls all the _MiddlwareFunctions_ in serial using promises. |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />* type: (value: any) => Promise or any</p><p class="my-3">This type is used for defining middleware for _El.Form_. Do validation and input sanitization with these functions such as:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />function isRequired(value) {<br /> value = value.trim()<br /> if (value && value != '') {<br /> return value<br /> }<br /> <br /> throw new Error('Required')<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />#### PromiseReference <br />* type: { p: Promise }</p><p class="my-3">This type is used internally in places to facilitate returning promises by reference.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Classes</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This is the base class for all El classes. Each _El.View_ corresponds with a custom tag. Extend this class to make your own custom tags.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| css | string | '' | This is a string representing the tag's css. It is injected once per class at the bottom of the <head> tag when mounted. |<br />| data | <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a> | undefined | This property stores the state of the tag. |<br />| html | string | '' | This is a string representing the tag's inner html. |<br />| root | HTMLElement | undefined | This property stores a reference to the tag in your webpage that the mounted view is bound to. |<br />| tag | string | '' | This is the custom tag name. |</p><p class="my-3">#### Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| beforeInit | () => | The code here executes before the tag is initialized. |<br />| init | () => | The code here executes when tag is initialized but before its mounted. __Recommended__ - If you need to bind to the <a href="http://riotjs.com/api/#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tag's lifecycle</a>, do it here. |<br />| scheduleUpdate | () => Promise | This method schedules an asynchronous update call. It batches update calls at the top-most view if there are nested views. It returns a promise for when the update executes |<br />| update | () => | This method updates the tag. This is called implicitly after events triggered from webpage. See onkeydown in A 'Simple Form Example' for such a case. Manually call this method to update the tag. __Recommended__ - It is recommended to manually call _scheduleUpdate()_ instead to prevent synchronous update cascades. |</p><p class="my-3">#### Methods Inherited from Riot Observable (on, one, off, trigger)<br />Each _El.View_ is an event emitter. See riot.observable for further documentation, http://riotjs.com/api/observable/</p><p class="my-3">#### Static Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| El.View.register | () => | This registers the current custom tag with the rendering engine. Call it after you defined a tag |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This class is used to represent forms as well as more complex IO driven micro-apps. This class supplies common form validation and form submit logic.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| configs | Object | undefined | Supply a map of names to a _MiddlewareFunction_ or array of _MiddlewareFunctions_. See _MiddlewareFunction_ for more information. |<br />| inputs | Object | null | Each element in _configs_ is converted to an element in _inputs_. Modifying this directly is not recommended. |</p><p class="my-3">#### Methods<br />| Name | Type | Description |<br />| --- | --- | --- |<br />| init | () => | Code here executes when tag is initialized but before its mounted. Calls _initInputs()_ so manually call that - or call super() in ES6. __Recommended__ - If you need to bind to the <a href="http://riotjs.com/api/#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tag's lifecycle</a>, do it here. |<br />| initInputs | () => |Compile _configs_ and assign the emitted struct to _inputs_. _inputs_ like _configs_ contain references to the named field in _data_. |<br />| submit | (Event) => Promise | This method triggers validation for each field in _data_ as defined in _configs_. This method should be called as an event handler/listener. It calls _submit()_ if validation is successful, returns a promise for when validation succeeds/fails |<br />| \_submit | () => | Code here executes when the form is validated during _submit()_ call |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This is the base class for building form inputs and IO controls.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| bind | string | '' | This property determines which field in the parent form's _data_ this binds to. |<br />| lookup | string | '' | Same as _bind_, __deprecated__. |<br />| errorMessage | string | '' | This property is set to the first error message that this.input.validate's returned promise catches. |<br />| input | _InputType_ | null | This property is taken from the parent form's _inputs_ property based on what parent _data_'s field _bind_ specifies. |<br />| valid | bool | false | This property is used to determine the validation state the input is in. It is set when this.input.validate is called, it is only ever set to true if this.input.validate's returned promise executes completely. |</p><p class="my-3">#### Methods<br />| Name | Type | Description |<br />| --- | --- | --- |<br />| change | (Event) => | This method updates the input and then validates it. This method should be called by an event handler/listener. |<br />| changed | () => | This method is called when this.input.validate's returned promise executes completely. |<br />| clearError | () => | This method sets _errorMessage_ to '' and is called before validation. |<br />| error | (Error) => | This method sets _errorMessage_ and is called when validation fails. |<br />| getValue | (Event) => any | This method gets the value from the input. By default, this method returns the _Event_'s target.value. |<br />| validate | (PromiseReference?) => Promise | This method validates the input, it returns a Promise representing validation success and fail both by reference (needed internally) and by value. |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Functions</h2></p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| El.scheduleUpdate | () => | Schedule update for all micro-apps on the page. |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />El.js's life cycle functions are inherited from <a href="http://riotjs.com/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Riot.js</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Default Obserable Mutable Tree</h2><br />El.js uses <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Trees</a> to store its form data.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Implement the get, set, on, once, off methods from referrential around your own datastructure and drop it in as the data property.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Best Practices</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Use Containers and Controls</h2></p><p class="my-3">A <em>container</em> is a custom tag that provides methods to use for its internal template and whose content can be overwritten entirely (only contains content in one or more <yield/> tags). A <em>control</em> is a component which interacts with the user for the purposes of displaying information in an interesting way or getting input such as an input, select, or a GoogleMaps embed.</p><p class="my-3">Instead of building widgets in a tightly coupled fashion, decompose the widget into a containers and controls to maximize reuseability. Structure the internal html in whatever way makes the most sense. Then, release your completed widget, container, and controls to your users so they can customize the widget for their various requirements.</p><p class="my-3">By abstracting your ui elements like this, it is much easier for someone else to reuse and customize your code. See <a href="https://github.com/hanzo-io/shop.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">shop.js</a> for an implementation.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Use a Single State Store</h2></p><p class="my-3">It is best to use a single high level state store to simplify saving and restoring state for your webpage or entire website.</p><p class="my-3">This can be acomplished by supplying all top level containers on the page the same _data_ field. via the initial mount call<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />var data = {<br /> state0: 0,<br /> state1: 1,<br />}</p><p class="my-3">El.mount('*', { data: data })<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Advanced Usage</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Nested Protypical Inheritence</h2></p><p class="my-3">Unlike normal Riot rendering, El.js allows the implicit accessing of values on this.parent and this.parent...parent via prototypical inheritence of the rendering context. This is done to avoid repeatedly passing the same data down through nested containers because it is error prone and overly verbose. This also makes it easier to build containers and controls.</p><p class="my-3">Explicitly passing the data variable:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><my-container-1><br /> <my-container-2 data='{ data }'><br /> <my-container-3 data='{ data }'><br /> value: { data.value1 }<br /> </my-container-3><br /> <my-container-3 data='{ data }'><br /> value: { data.value2 }<br /> </my-container-3><br /> </my-container-2><br /> <my-container-2 data='{ data }'><br /> <my-container-3 data='{ data }'><br /> value: { data.value3 }<br /> </my-container-3><br /> <my-container-3 data='{ data }'><br /> value: { data.value4 }<br /> </my-container-3><br /> </my-container-2><br /></my-container-1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// El.mount passes data to the top level container of each micro-app<br />El.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Is equivalent to implicitly referencing the data variable.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><my-container-1><br /> <my-container-2><br /> <my-container-3><br /> value: { data.value1 }<br /> </my-container-3><br /> <my-container-3><br /> value: { data.value2 }<br /> </my-container-3><br /> </my-container-2><br /> <my-container-2><br /> <my-container-3><br /> value: { data.value3 }<br /> </my-container-3><br /> <my-container-3><br /> value: { data.value4 }<br /> </my-container-3><br /> </my-container-2><br /></my-container-1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// El.mount passes data to the top level container of each micro-app<br />El.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )<br /></code>``<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br />[BSD][license-url]</p><p class="my-3">[examples]: https://github.com/hanzo-io/el.js/blob/master/test/test.coffee</p><p class="my-3">[build-img]: https://img.shields.io/travis/hanzo-io/el.js.svg<br />[build-url]: https://travis-ci.org/hanzo-io/el.js<br />[chat-img]: https://badges.gitter.im/join-chat.svg<br />[chat-url]: https://gitter.im/hanzo-io/chat<br />[coverage-img]: https://coveralls.io/repos/hanzo-io/el.js/badge.svg?branch=master&service=github<br />[coverage-url]: https://coveralls.io/github/hanzo-io/el.js?branch=master<br />[dependencies-img]: https://david-dm.org/hanzo-io/el.js.svg<br />[dependencies-url]: https://david-dm.org/hanzo-io/el.js<br />[downloads-img]: https://img.shields.io/npm/dm/el.js.svg<br />[downloads-url]: http://badge.fury.io/js/el.js<br />[license-img]: https://img.shields.io/npm/l/el.js.svg<br />[license-url]: https://github.com/hanzo-io/el.js/blob/master/LICENSE<br />[npm-img]: https://img.shields.io/npm/v/el.js.svg<br />[npm-url]: https://www.npmjs.com/package/el.js<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"el.js\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"el.js\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"el.js - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Higher-order elements powered by transclusion.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>el.js - npm explorer</title><meta name="description" content="Higher-order elements powered by transclusion."/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"el.js\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"2.1.37\"]}],\"$undefined\",\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"Higher-order elements powered by transclusion.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"el\",{\"href\":\"/search?q=el\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"el\"}]}],[\"$\",\"$L5\",\"elements\",{\"href\":\"/search?q=elements\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"elements\"}]}],[\"$\",\"$L5\",\"hanzo\",{\"href\":\"/search?q=hanzo\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"hanzo\"}]}],[\"$\",\"$L5\",\"html\",{\"href\":\"/search?q=html\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"html\"}]}],\"$L18\",\"$L19\",\"$L1a\",\"$L1b\"]}],\"$L1c\",\"$L1d\"]}],\"$L1e\"]}],\"$L1f\"]}]\n"])</script><script>self.__next_f.push([1,"20:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n22:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n23:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n24:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n25:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"riot\",{\"href\":\"/search?q=riot\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"riot\"}]}]\n19:[\"$\",\"$L5\",\"riotjs\",{\"href\":\"/search?q=riotjs\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"riotjs\"}]}]\n1a:[\"$\",\"$L5\",\"templates\",{\"href\":\"/search?q=templates\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"templates\"}]}]\n1b:[\"$\",\"$L5\",\"transclusion\",{\"href\":\"/search?q=transclusion\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\""])</script><script>self.__next_f.push([1,":\"transclusion\"}]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"1 years ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"BSD-3-Clause\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"85.3 KB\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~Hanzo%2C%20Inc\",\"className\":\"font-medium hover:underline\",\"children\":\"Hanzo, Inc\"}]]}]\n"])</script><script>self.__next_f.push([1,"1e:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L20\",null,{\"packageName\":\"el.js\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/hanzo-io/el.js\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"http://github.com/hanzo-io/el.js\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/el.js\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"26:T380e,"])</script><script>self.__next_f.push([1,"# El.js\n\n[![npm][npm-img]][npm-url]\n[![build][build-img]][build-url]\n[![dependencies][dependencies-img]][dependencies-url]\n[![downloads][downloads-img]][downloads-url]\n[![license][license-img]][license-url]\n[![chat][chat-img]][chat-url]\n\n\u003e A reasonable micro-app framework with practical reuseability.\n\n-----\n\n# Introduction\n\nEl.js is a framework built ontop of [Riot.js](http://www.riotjs.com) templates for building micro-apps.\n\n## What is a *micro-app*?\n\nWeb-frameworks require developers to build most if not all their webpages to be dynamic webapps. This allows developers to make sure everything on their webpage obeys a single consistent, predictable, rendering flow that they can reason about. However, there are also many disadvantages compared to traditional static websites including more complex caching schemes, longer load-times, and SEO problems. Microapps offer a powerful solution for these drawbacks. Instead of building giant monolithic web applications, build small apps and embed them on your otherwise static pages.\n\nA micro-app performs a small and very tightly scoped piece of functionality that can be reused over and over again. Micro-apps don't differ much from the idea of embeddable widgets before frameworks became the standard, but they differ in execution by emphasizing a reliance on reasonable frameworks and practical reuseability.\n\n## A Simple Form Example\n\nHTML: index.html\n```html\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\u003c!-- Head Content --\u003e\n\t\u003clink rel=\"stylesheet\" src=\"https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css\" /\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cmy-form\u003e\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003clabel\u003eType Your Name\u003c/label\u003e\n\t\t\t\t\u003c!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute --\u003e\n\t\t\t\t\u003cmy-input bind='name' /\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003cspan\u003eYour Name Is\u003c/span\u003e\n\t\t\t\t\u003cspan\u003e{ data.name }\u003c/span\u003e\n\t\t\t\u003c/div\n\t\t\u003c/my-form\u003e\n\t\t\u003c!-- El.js Library --\u003e\n\t\t\u003cscript src=\"https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"my-script.js\"\u003e\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\nJS: my-script.js\n```javascript\n// window.El is the global value\n\n// El.Form extends El.View and validates bound El.Inputs\nclass Form extends El.Form {\n\tconstuctor () {\n\t\t// data contains your state\n\t\tthis.data = { \n\t\t\tname: '?', \n\t\t}\n\t\t// your custom tag name\n\t\tthis.tag = 'my-form'\n\n\t\tsuper()\n\t}\n}\n\nForm.register()\n\n// El.Input extends El.View and binds to updating El.Form values\nclass Input extends El.Input {\n\tconstructor () {\n\t\t// your custom tag name\n\t\tthis.tag = 'my-input'\n\t\t// the default this.change function works with all basic html inputs(\u003cinput\u003e, \u003ctextarea\u003e, ...).\n\t\tthis.html = '\u003cinput onkeydown=\"{ change }\" /\u003e'\n\n\t\tsuper()\n\t}\n}\n\nInput.register()\n\nEl.mount('*')\n```\n\n## Installation\n\n### HTML\n\nAdd this tag to the bottom of \u003cbody\u003e before your custom scripts and deps and reference window.El.\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js\"\u003e\u003c/script\u003e\n```\n\n### Node:\n\nInstall via NPM\n```javascript\nnpm install el.js --save\n```\n\nSupports CommonJS\n```javascript\nvar El = require 'el.js'\n```\n\nor ES6 imports\n```javascript\nimport El from 'el.js'\n```\n\n# API\n\n## Types\n\n### InputType \n\nThis type is referenced by _El.Form_ to store the information used to validate the field associated with _name_.\n\n#### Properties\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| config | _MiddlewareFunction_ or [_MiddlewareFunction_] | undefined | This type stores the original _MiddlewareFunction_ or _MiddlewareFunctions_ used to create _validate()_ |\n| name | string | '' | This is the name of a field on _El.Form_'s _data_ property that the rest of this type references. |\n| ref | [Referrential Tree](https://github.com/zeekay/referential) | undefined | This is a link to the mutable data tree which can retrieve the value of _name_ by calling this.ref.get(_name_) |\n\n#### Methods\n\n| Name | Type | Description |\n| --- | --- | --- |\n| validate | ([Referrential Tree](https://github.com/zeekay/referential), string) =\u003e Promise |This method calls all the _MiddlwareFunctions_ in serial using promises. |\n\n### MiddlewareFunction\n* type: (value: any) =\u003e Promise or any\n\nThis type is used for defining middleware for _El.Form_. Do validation and input sanitization with these functions such as:\n\n```javascript\nfunction isRequired(value) {\n value = value.trim()\n if (value \u0026\u0026 value != '') {\n return value\n }\n \n throw new Error('Required')\n}\n```\n#### PromiseReference \n* type: { p: Promise }\n\nThis type is used internally in places to facilitate returning promises by reference.\n\n## Classes\n\n### El.View\nThis is the base class for all El classes. Each _El.View_ corresponds with a custom tag. Extend this class to make your own custom tags.\n\n#### Properties\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| css | string | '' | This is a string representing the tag's css. It is injected once per class at the bottom of the \u003chead\u003e tag when mounted. |\n| data | [Referrential Tree](https://github.com/zeekay/referential) | undefined | This property stores the state of the tag. |\n| html | string | '' | This is a string representing the tag's inner html. |\n| root | HTMLElement | undefined | This property stores a reference to the tag in your webpage that the mounted view is bound to. |\n| tag | string | '' | This is the custom tag name. |\n\n#### Methods\n\n| Name | Type | Description |\n| --- | --- | --- |\n| beforeInit | () =\u003e | The code here executes before the tag is initialized. |\n| init | () =\u003e | The code here executes when tag is initialized but before its mounted. __Recommended__ - If you need to bind to the [tag's lifecycle](http://riotjs.com/api/#events), do it here. |\n| scheduleUpdate | () =\u003e Promise | This method schedules an asynchronous update call. It batches update calls at the top-most view if there are nested views. It returns a promise for when the update executes |\n| update | () =\u003e | This method updates the tag. This is called implicitly after events triggered from webpage. See onkeydown in A 'Simple Form Example' for such a case. Manually call this method to update the tag. __Recommended__ - It is recommended to manually call _scheduleUpdate()_ instead to prevent synchronous update cascades. |\n\n#### Methods Inherited from Riot Observable (on, one, off, trigger)\nEach _El.View_ is an event emitter. See riot.observable for further documentation, http://riotjs.com/api/observable/\n\n#### Static Methods\n\n| Name | Type | Description |\n| --- | --- | --- |\n| El.View.register | () =\u003e | This registers the current custom tag with the rendering engine. Call it after you defined a tag |\n\n### El.Form extends El.View\nThis class is used to represent forms as well as more complex IO driven micro-apps. This class supplies common form validation and form submit logic.\n\n#### Properties\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| configs | Object | undefined | Supply a map of names to a _MiddlewareFunction_ or array of _MiddlewareFunctions_. See _MiddlewareFunction_ for more information. |\n| inputs | Object | null | Each element in _configs_ is converted to an element in _inputs_. Modifying this directly is not recommended. |\n\n#### Methods\n| Name | Type | Description |\n| --- | --- | --- |\n| init | () =\u003e | Code here executes when tag is initialized but before its mounted. Calls _initInputs()_ so manually call that - or call super() in ES6. __Recommended__ - If you need to bind to the [tag's lifecycle](http://riotjs.com/api/#events), do it here. |\n| initInputs | () =\u003e |Compile _configs_ and assign the emitted struct to _inputs_. _inputs_ like _configs_ contain references to the named field in _data_. |\n| submit | (Event) =\u003e Promise | This method triggers validation for each field in _data_ as defined in _configs_. This method should be called as an event handler/listener. It calls _submit()_ if validation is successful, returns a promise for when validation succeeds/fails |\n| \\_submit | () =\u003e | Code here executes when the form is validated during _submit()_ call |\n\n### El.Input extends El.View\nThis is the base class for building form inputs and IO controls.\n\n#### Properties\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bind | string | '' | This property determines which field in the parent form's _data_ this binds to. |\n| lookup | string | '' | Same as _bind_, __deprecated__. |\n| errorMessage | string | '' | This property is set to the first error message that this.input.validate's returned promise catches. |\n| input | _InputType_ | null | This property is taken from the parent form's _inputs_ property based on what parent _data_'s field _bind_ specifies. |\n| valid | bool | false | This property is used to determine the validation state the input is in. It is set when this.input.validate is called, it is only ever set to true if this.input.validate's returned promise executes completely. |\n\n#### Methods\n| Name | Type | Description |\n| --- | --- | --- |\n| change | (Event) =\u003e | This method updates the input and then validates it. This method should be called by an event handler/listener. |\n| changed | () =\u003e | This method is called when this.input.validate's returned promise executes completely. |\n| clearError | () =\u003e | This method sets _errorMessage_ to '' and is called before validation. |\n| error | (Error) =\u003e | This method sets _errorMessage_ and is called when validation fails. |\n| getValue | (Event) =\u003e any | This method gets the value from the input. By default, this method returns the _Event_'s target.value. |\n| validate | (PromiseReference?) =\u003e Promise | This method validates the input, it returns a Promise representing validation success and fail both by reference (needed internally) and by value. |\n\n## Functions\n\n| Name | Type | Description |\n| --- | --- | --- |\n| El.scheduleUpdate | () =\u003e | Schedule update for all micro-apps on the page. |\n\n### Inherited from Riot (El.mount, El.update, etc)\nEl.js's life cycle functions are inherited from [Riot.js](http://riotjs.com/api/).\n\n## Default Obserable Mutable Tree\nEl.js uses [Referrential Trees](https://github.com/zeekay/referential) to store its form data.\n\n### (BYODS) Bring Your Own Data Structure\nImplement the get, set, on, once, off methods from referrential around your own datastructure and drop it in as the data property.\n\n# Best Practices\n\n## Use Containers and Controls\n\nA *container* is a custom tag that provides methods to use for its internal template and whose content can be overwritten entirely (only contains content in one or more \u003cyield/\u003e tags). A *control* is a component which interacts with the user for the purposes of displaying information in an interesting way or getting input such as an input, select, or a GoogleMaps embed.\n\nInstead of building widgets in a tightly coupled fashion, decompose the widget into a containers and controls to maximize reuseability. Structure the internal html in whatever way makes the most sense. Then, release your completed widget, container, and controls to your users so they can customize the widget for their various requirements.\n\nBy abstracting your ui elements like this, it is much easier for someone else to reuse and customize your code. See [shop.js](https://github.com/hanzo-io/shop.js) for an implementation.\n\n## Use a Single State Store\n\nIt is best to use a single high level state store to simplify saving and restoring state for your webpage or entire website.\n\nThis can be acomplished by supplying all top level containers on the page the same _data_ field. via the initial mount call\n```javascript\nvar data = {\n\tstate0: 0,\n\tstate1: 1,\n}\n\nEl.mount('*', { data: data })\n```\n\n# Advanced Usage\n\n## Nested Protypical Inheritence\n\nUnlike normal Riot rendering, El.js allows the implicit accessing of values on this.parent and this.parent...parent via prototypical inheritence of the rendering context. This is done to avoid repeatedly passing the same data down through nested containers because it is error prone and overly verbose. This also makes it easier to build containers and controls.\n\nExplicitly passing the data variable:\n```html\n\u003cmy-container-1\u003e\n\t\u003cmy-container-2 data='{ data }'\u003e\n\t\t\u003cmy-container-3 data='{ data }'\u003e\n\t\t\tvalue: { data.value1 }\n\t\t\u003c/my-container-3\u003e\n\t\t\u003cmy-container-3 data='{ data }'\u003e\n\t\t\tvalue: { data.value2 }\n\t\t\u003c/my-container-3\u003e\n\t\u003c/my-container-2\u003e\n\t\u003cmy-container-2 data='{ data }'\u003e\n\t\t\u003cmy-container-3 data='{ data }'\u003e\n\t\t\tvalue: { data.value3 }\n\t\t\u003c/my-container-3\u003e\n\t\t\u003cmy-container-3 data='{ data }'\u003e\n\t\t\tvalue: { data.value4 }\n\t\t\u003c/my-container-3\u003e\n\t\u003c/my-container-2\u003e\n\u003c/my-container-1\u003e\n```\n\n```javascript\n// El.mount passes data to the top level container of each micro-app\nEl.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )\n```\n\nIs equivalent to implicitly referencing the data variable.\n\n```html\n\u003cmy-container-1\u003e\n\t\u003cmy-container-2\u003e\n\t\t\u003cmy-container-3\u003e\n\t\t\tvalue: { data.value1 }\n\t\t\u003c/my-container-3\u003e\n\t\t\u003cmy-container-3\u003e\n\t\t\tvalue: { data.value2 }\n\t\t\u003c/my-container-3\u003e\n\t\u003c/my-container-2\u003e\n\t\u003cmy-container-2\u003e\n\t\t\u003cmy-container-3\u003e\n\t\t\tvalue: { data.value3 }\n\t\t\u003c/my-container-3\u003e\n\t\t\u003cmy-container-3\u003e\n\t\t\tvalue: { data.value4 }\n\t\t\u003c/my-container-3\u003e\n\t\u003c/my-container-2\u003e\n\u003c/my-container-1\u003e\n```\n\n```javascript\n// El.mount passes data to the top level container of each micro-app\nEl.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )\n```\n## License\n[BSD][license-url]\n\n[examples]: https://github.com/hanzo-io/el.js/blob/master/test/test.coffee\n\n[build-img]: https://img.shields.io/travis/hanzo-io/el.js.svg\n[build-url]: https://travis-ci.org/hanzo-io/el.js\n[chat-img]: https://badges.gitter.im/join-chat.svg\n[chat-url]: https://gitter.im/hanzo-io/chat\n[coverage-img]: https://coveralls.io/repos/hanzo-io/el.js/badge.svg?branch=master\u0026service=github\n[coverage-url]: https://coveralls.io/github/hanzo-io/el.js?branch=master\n[dependencies-img]: https://david-dm.org/hanzo-io/el.js.svg\n[dependencies-url]: https://david-dm.org/hanzo-io/el.js\n[downloads-img]: https://img.shields.io/npm/dm/el.js.svg\n[downloads-url]: http://badge.fury.io/js/el.js\n[license-img]: https://img.shields.io/npm/l/el.js.svg\n[license-url]: https://github.com/hanzo-io/el.js/blob/master/LICENSE\n[npm-img]: https://img.shields.io/npm/v/el.js.svg\n[npm-url]: https://www.npmjs.com/package/el.js\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"$L21\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L22\",null,{\"children\":[[\"$\",\"$L23\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L23\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",7,\")\"]}]]}],[\"$\",\"$L23\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",23,\")\"]}]]}]]}],[\"$\",\"$L24\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L25\",null,{\"readme\":\"$26\"}]}],\"$L27\",\"$L28\"]}]\n"])</script><script>self.__next_f.push([1,"30:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"$L24\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":7}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"broken\",{\"href\":\"/package/broken\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"broken\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.13\"}]]}],[\"$\",\"$L5\",\"es-is\",{\"href\":\"/package/es-is\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"es-is\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"3.3.10\"}]]}],[\"$\",\"$L5\",\"es-object-assign\",{\"href\":\"/package/es-object-assign\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L29\",\"$undefined\"]}],\"es-object-assign\"]}],\"$L2a\"]}],\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\"]}]}]]}],false,\"$L2f\"]}]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"$L24\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L30\",null,{\"packageName\":\"el.js\",\"versions\":[{\"version\":\"2.1.37\",\"date\":\"2018-11-08T04:26:03.204Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.36\",\"date\":\"2018-07-17T22:03:24.412Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.35\",\"date\":\"2018-07-17T22:00:02.139Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.34\",\"date\":\"2018-07-17T19:15:41.391Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.32\",\"date\":\"2017-12-17T01:21:32.787Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.31\",\"date\":\"2017-08-23T21:53:34.181Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.30\",\"date\":\"2017-08-22T20:03:21.949Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.29\",\"date\":\"2017-08-22T19:35:49.294Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.28\",\"date\":\"2017-08-22T19:20:57.072Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.27\",\"date\":\"2017-08-22T18:21:07.199Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.26\",\"date\":\"2017-08-22T18:09:55.292Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.25\",\"date\":\"2017-08-22T18:08:59.163Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.24\",\"date\":\"2017-05-26T23:32:49.846Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.23\",\"date\":\"2017-04-10T23:20:46.237Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.22\",\"date\":\"2017-04-08T06:46:00.128Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.21\",\"date\":\"2017-03-30T00:13:40.763Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.20\",\"date\":\"2017-03-27T22:36:58.130Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.19\",\"date\":\"2017-03-25T02:58:55.168Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.18\",\"date\":\"2017-03-22T22:07:09.518Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.17\",\"date\":\"2017-03-22T22:00:21.207Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.16\",\"date\":\"2017-03-22T21:47:24.738Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.15\",\"date\":\"2017-03-22T15:11:34.661Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.14\",\"date\":\"2017-03-22T03:22:26.586Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"2.1.37\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">el.js</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v2.1.37</span></div></div><p class="text-lg text-muted-foreground">Higher-order elements powered by transclusion.</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=el"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">el</span></a><a href="/search?q=elements"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">elements</span></a><a href="/search?q=hanzo"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">hanzo</span></a><a href="/search?q=html"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">html</span></a><a href="/search?q=riot"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">riot</span></a><a href="/search?q=riotjs"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">riotjs</span></a><a href="/search?q=templates"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">templates</span></a><a href="/search?q=transclusion"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">transclusion</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 1 years ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>BSD-3-Clause</span><span class="flex items-center gap-1.5">Unpacked: 85.3 KB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~Hanzo%2C%20Inc">Hanzo, Inc</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install el.js</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/hanzo-io/el.js" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="http://github.com/hanzo-io/el.js" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/el.js" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(7)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(23)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h1 class="text-2xl font-bold mt-6 mb-4">El.js</h1></p><p class="my-3">[![npm][npm-img]][npm-url]<br />[![build][build-img]][build-url]<br />[![dependencies][dependencies-img]][dependencies-url]<br />[![downloads][downloads-img]][downloads-url]<br />[![license][license-img]][license-url]<br />[![chat][chat-img]][chat-url]</p><p class="my-3">> A reasonable micro-app framework with practical reuseability.</p><p class="my-3">-----</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Introduction</h1></p><p class="my-3">El.js is a framework built ontop of <a href="http://www.riotjs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Riot.js</a> templates for building micro-apps.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">What is a <em>micro-app</em>?</h2></p><p class="my-3">Web-frameworks require developers to build most if not all their webpages to be dynamic webapps. This allows developers to make sure everything on their webpage obeys a single consistent, predictable, rendering flow that they can reason about. However, there are also many disadvantages compared to traditional static websites including more complex caching schemes, longer load-times, and SEO problems. Microapps offer a powerful solution for these drawbacks. Instead of building giant monolithic web applications, build small apps and embed them on your otherwise static pages.</p><p class="my-3">A micro-app performs a small and very tightly scoped piece of functionality that can be reused over and over again. Micro-apps don't differ much from the idea of embeddable widgets before frameworks became the standard, but they differ in execution by emphasizing a reliance on reasonable frameworks and practical reuseability.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">A Simple Form Example</h2></p><p class="my-3">HTML: index.html<br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html><br /> <head><br /> <br /> <link rel="stylesheet" src="https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css" /><br /> </head><br /> <body><br /> <my-form><br /> <div><br /> <label>Type Your Name</label><br /> <br /> <my-input bind='name' /><br /> </div><br /> <div><br /> <span>Your Name Is</span><br /> <span>{ data.name }</span><br /> </div<br /> </my-form><br /> <br /> <script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script><br /> <script src="my-script.js"></script><br /> </body><br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">JS: my-script.js<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// window.El is the global value</p><p class="my-3">// El.Form extends El.View and validates bound El.Inputs<br />class Form extends El.Form {<br /> constuctor () {<br /> // data contains your state<br /> this.data = { <br /> name: '?', <br /> }<br /> // your custom tag name<br /> this.tag = 'my-form'</p><p class="my-3"> super()<br /> }<br />}</p><p class="my-3">Form.register()</p><p class="my-3">// El.Input extends El.View and binds to updating El.Form values<br />class Input extends El.Input {<br /> constructor () {<br /> // your custom tag name<br /> this.tag = 'my-input'<br /> // the default this.change function works with all basic html inputs(<input>, <textarea>, ...).<br /> this.html = '<input onkeydown="{ change }" />'</p><p class="my-3"> super()<br /> }<br />}</p><p class="my-3">Input.register()</p><p class="my-3">El.mount('*')<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Add this tag to the bottom of <body> before your custom scripts and deps and reference window.El.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Install via NPM<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />npm install el.js --save<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Supports CommonJS<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />var El = require 'el.js'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or ES6 imports<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import El from 'el.js'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">API</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Types</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">This type is referenced by _El.Form_ to store the information used to validate the field associated with _name_.</p><p class="my-3">#### Properties<br />| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| config | _MiddlewareFunction_ or [_MiddlewareFunction_] | undefined | This type stores the original _MiddlewareFunction_ or _MiddlewareFunctions_ used to create _validate()_ |<br />| name | string | '' | This is the name of a field on _El.Form_'s _data_ property that the rest of this type references. |<br />| ref | <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a> | undefined | This is a link to the mutable data tree which can retrieve the value of _name_ by calling this.ref.get(_name_) |</p><p class="my-3">#### Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| validate | (<a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a>, string) => Promise |This method calls all the _MiddlwareFunctions_ in serial using promises. |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />* type: (value: any) => Promise or any</p><p class="my-3">This type is used for defining middleware for _El.Form_. Do validation and input sanitization with these functions such as:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />function isRequired(value) {<br /> value = value.trim()<br /> if (value && value != '') {<br /> return value<br /> }<br /> <br /> throw new Error('Required')<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />#### PromiseReference <br />* type: { p: Promise }</p><p class="my-3">This type is used internally in places to facilitate returning promises by reference.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Classes</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This is the base class for all El classes. Each _El.View_ corresponds with a custom tag. Extend this class to make your own custom tags.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| css | string | '' | This is a string representing the tag's css. It is injected once per class at the bottom of the <head> tag when mounted. |<br />| data | <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Tree</a> | undefined | This property stores the state of the tag. |<br />| html | string | '' | This is a string representing the tag's inner html. |<br />| root | HTMLElement | undefined | This property stores a reference to the tag in your webpage that the mounted view is bound to. |<br />| tag | string | '' | This is the custom tag name. |</p><p class="my-3">#### Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| beforeInit | () => | The code here executes before the tag is initialized. |<br />| init | () => | The code here executes when tag is initialized but before its mounted. __Recommended__ - If you need to bind to the <a href="http://riotjs.com/api/#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tag's lifecycle</a>, do it here. |<br />| scheduleUpdate | () => Promise | This method schedules an asynchronous update call. It batches update calls at the top-most view if there are nested views. It returns a promise for when the update executes |<br />| update | () => | This method updates the tag. This is called implicitly after events triggered from webpage. See onkeydown in A 'Simple Form Example' for such a case. Manually call this method to update the tag. __Recommended__ - It is recommended to manually call _scheduleUpdate()_ instead to prevent synchronous update cascades. |</p><p class="my-3">#### Methods Inherited from Riot Observable (on, one, off, trigger)<br />Each _El.View_ is an event emitter. See riot.observable for further documentation, http://riotjs.com/api/observable/</p><p class="my-3">#### Static Methods</p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| El.View.register | () => | This registers the current custom tag with the rendering engine. Call it after you defined a tag |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This class is used to represent forms as well as more complex IO driven micro-apps. This class supplies common form validation and form submit logic.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| configs | Object | undefined | Supply a map of names to a _MiddlewareFunction_ or array of _MiddlewareFunctions_. See _MiddlewareFunction_ for more information. |<br />| inputs | Object | null | Each element in _configs_ is converted to an element in _inputs_. Modifying this directly is not recommended. |</p><p class="my-3">#### Methods<br />| Name | Type | Description |<br />| --- | --- | --- |<br />| init | () => | Code here executes when tag is initialized but before its mounted. Calls _initInputs()_ so manually call that - or call super() in ES6. __Recommended__ - If you need to bind to the <a href="http://riotjs.com/api/#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tag's lifecycle</a>, do it here. |<br />| initInputs | () => |Compile _configs_ and assign the emitted struct to _inputs_. _inputs_ like _configs_ contain references to the named field in _data_. |<br />| submit | (Event) => Promise | This method triggers validation for each field in _data_ as defined in _configs_. This method should be called as an event handler/listener. It calls _submit()_ if validation is successful, returns a promise for when validation succeeds/fails |<br />| \_submit | () => | Code here executes when the form is validated during _submit()_ call |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />This is the base class for building form inputs and IO controls.</p><p class="my-3">#### Properties</p><p class="my-3">| Name | Type | Default | Description |<br />| --- | --- | --- | --- |<br />| bind | string | '' | This property determines which field in the parent form's _data_ this binds to. |<br />| lookup | string | '' | Same as _bind_, __deprecated__. |<br />| errorMessage | string | '' | This property is set to the first error message that this.input.validate's returned promise catches. |<br />| input | _InputType_ | null | This property is taken from the parent form's _inputs_ property based on what parent _data_'s field _bind_ specifies. |<br />| valid | bool | false | This property is used to determine the validation state the input is in. It is set when this.input.validate is called, it is only ever set to true if this.input.validate's returned promise executes completely. |</p><p class="my-3">#### Methods<br />| Name | Type | Description |<br />| --- | --- | --- |<br />| change | (Event) => | This method updates the input and then validates it. This method should be called by an event handler/listener. |<br />| changed | () => | This method is called when this.input.validate's returned promise executes completely. |<br />| clearError | () => | This method sets _errorMessage_ to '' and is called before validation. |<br />| error | (Error) => | This method sets _errorMessage_ and is called when validation fails. |<br />| getValue | (Event) => any | This method gets the value from the input. By default, this method returns the _Event_'s target.value. |<br />| validate | (PromiseReference?) => Promise | This method validates the input, it returns a Promise representing validation success and fail both by reference (needed internally) and by value. |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Functions</h2></p><p class="my-3">| Name | Type | Description |<br />| --- | --- | --- |<br />| El.scheduleUpdate | () => | Schedule update for all micro-apps on the page. |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />El.js's life cycle functions are inherited from <a href="http://riotjs.com/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Riot.js</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Default Obserable Mutable Tree</h2><br />El.js uses <a href="https://github.com/zeekay/referential" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Referrential Trees</a> to store its form data.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Implement the get, set, on, once, off methods from referrential around your own datastructure and drop it in as the data property.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Best Practices</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Use Containers and Controls</h2></p><p class="my-3">A <em>container</em> is a custom tag that provides methods to use for its internal template and whose content can be overwritten entirely (only contains content in one or more <yield/> tags). A <em>control</em> is a component which interacts with the user for the purposes of displaying information in an interesting way or getting input such as an input, select, or a GoogleMaps embed.</p><p class="my-3">Instead of building widgets in a tightly coupled fashion, decompose the widget into a containers and controls to maximize reuseability. Structure the internal html in whatever way makes the most sense. Then, release your completed widget, container, and controls to your users so they can customize the widget for their various requirements.</p><p class="my-3">By abstracting your ui elements like this, it is much easier for someone else to reuse and customize your code. See <a href="https://github.com/hanzo-io/shop.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">shop.js</a> for an implementation.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Use a Single State Store</h2></p><p class="my-3">It is best to use a single high level state store to simplify saving and restoring state for your webpage or entire website.</p><p class="my-3">This can be acomplished by supplying all top level containers on the page the same _data_ field. via the initial mount call<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />var data = {<br /> state0: 0,<br /> state1: 1,<br />}</p><p class="my-3">El.mount('*', { data: data })<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Advanced Usage</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Nested Protypical Inheritence</h2></p><p class="my-3">Unlike normal Riot rendering, El.js allows the implicit accessing of values on this.parent and this.parent...parent via prototypical inheritence of the rendering context. This is done to avoid repeatedly passing the same data down through nested containers because it is error prone and overly verbose. This also makes it easier to build containers and controls.</p><p class="my-3">Explicitly passing the data variable:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><my-container-1><br /> <my-container-2 data='{ data }'><br /> <my-container-3 data='{ data }'><br /> value: { data.value1 }<br /> </my-container-3><br /> <my-container-3 data='{ data }'><br /> value: { data.value2 }<br /> </my-container-3><br /> </my-container-2><br /> <my-container-2 data='{ data }'><br /> <my-container-3 data='{ data }'><br /> value: { data.value3 }<br /> </my-container-3><br /> <my-container-3 data='{ data }'><br /> value: { data.value4 }<br /> </my-container-3><br /> </my-container-2><br /></my-container-1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// El.mount passes data to the top level container of each micro-app<br />El.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Is equivalent to implicitly referencing the data variable.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><my-container-1><br /> <my-container-2><br /> <my-container-3><br /> value: { data.value1 }<br /> </my-container-3><br /> <my-container-3><br /> value: { data.value2 }<br /> </my-container-3><br /> </my-container-2><br /> <my-container-2><br /> <my-container-3><br /> value: { data.value3 }<br /> </my-container-3><br /> <my-container-3><br /> value: { data.value4 }<br /> </my-container-3><br /> </my-container-2><br /></my-container-1><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// El.mount passes data to the top level container of each micro-app<br />El.mount('*', data: { value1: 1, value2: 2, value3: 3, value4: 4 } )<br /></code>``<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br />[BSD][license-url]</p><p class="my-3">[examples]: https://github.com/hanzo-io/el.js/blob/master/test/test.coffee</p><p class="my-3">[build-img]: https://img.shields.io/travis/hanzo-io/el.js.svg<br />[build-url]: https://travis-ci.org/hanzo-io/el.js<br />[chat-img]: https://badges.gitter.im/join-chat.svg<br />[chat-url]: https://gitter.im/hanzo-io/chat<br />[coverage-img]: https://coveralls.io/repos/hanzo-io/el.js/badge.svg?branch=master&service=github<br />[coverage-url]: https://coveralls.io/github/hanzo-io/el.js?branch=master<br />[dependencies-img]: https://david-dm.org/hanzo-io/el.js.svg<br />[dependencies-url]: https://david-dm.org/hanzo-io/el.js<br />[downloads-img]: https://img.shields.io/npm/dm/el.js.svg<br />[downloads-url]: http://badge.fury.io/js/el.js<br />[license-img]: https://img.shields.io/npm/l/el.js.svg<br />[license-url]: https://github.com/hanzo-io/el.js/blob/master/LICENSE<br />[npm-img]: https://img.shields.io/npm/v/el.js.svg<br />[npm-url]: https://www.npmjs.com/package/el.js<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"29:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"4.1.4\"}]\n2b:[\"$\",\"$L5\",\"es-raf\",{\"href\":\"/package/es-raf\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"es-raf\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"3.3.1\"}]]}]\n2c:[\"$\",\"$L5\",\"referential\",{\"href\":\"/package/referential\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"referential\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.5.23\"}]]}]\n2d:[\"$\",\"$L5\",\"riot\",{\"href\":\"/package/riot\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"riot\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"3.7.4\"}]]}]\n2e:[\"$\",\"$L5\",\"riot-observable\",{\"href\":\"/package/riot-observable\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"riot-observable\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"3.0.0\"}]]}]\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":15}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"bebop\",{\"href\":\"/package/bebop\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"bebop\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.12.8\"}]]}],[\"$\",\"$L5\",\"chai\",{\"href\":\"/package/chai\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"chai\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"4.1.2\"}]]}],[\"$\",\"$L5\",\"chai-as-promised\",{\"href\":\"/package/chai-as-promised\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L31\",\"$undefined\"]}],\"chai-as-promised\"]}],\"$L32\"]}],\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"31:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n32:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"7.1.1\"}]\n33:[\"$\",\"$L5\",\"coffee-script\",{\"href\":\"/package/coffee-script\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"coffee-script\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.12.7\"}]]}]\n34:[\"$\",\"$L5\",\"express\",{\"href\":\"/package/express\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"express\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"4.16.2\"}]]}]\n35:[\"$\",\"$L5\",\"express-simulate-latency\",{\"href\":\"/package/express-simulate-latency\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"express-simulate-latency\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.0.2\"}]]}]\n36:[\"$\",\"$L5\",\"mocha\",{\"href\":\"/package/mocha\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mocha\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"4.0.1\"}]]}]\n37:[\"$\",\"$L5\",\"mock-xhr\",{\"href\":\"/package/mock-xhr\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 tex"])</script><script>self.__next_f.push([1,"t-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mock-xhr\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.0\"}]]}]\n38:[\"$\",\"$L5\",\"sake-bundle\",{\"href\":\"/package/sake-bundle\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-bundle\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.6.3\"}]]}]\n39:[\"$\",\"$L5\",\"sake-cli\",{\"href\":\"/package/sake-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.5.23\"}]]}]\n3a:[\"$\",\"$L5\",\"sake-core\",{\"href\":\"/package/sake-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.5.1\"}]]}]\n3b:[\"$\",\"$L5\",\"sake-outdated\",{\"href\":\"/package/sake-outdated\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-outdated\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.28\"}]]}]\n3c:[\"$\",\"$L5\",\"sake-publish\",{\"href\":\"/package/sake-publish\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"stro"])</script><script>self.__next_f.push([1,"keLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-publish\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.16\"}]]}]\n3d:[\"$\",\"$L5\",\"sake-version\",{\"href\":\"/package/sake-version\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sake-version\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.19\"}]]}]\n3e:[\"$\",\"$L5\",\"xhr2\",{\"href\":\"/package/xhr2\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"xhr2\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.4\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>