Dyo

A JavaScript library for building user interfaces.

Installation

• Use a Direct Download: <script src=dyo.js></script>
• Use a CDN: <script src=unpkg.com/dyo></script>
• Use NPM: npm install dyo --save

Documentation

Documentation can be find on the website.

See the Getting Started page for a quick overview.

The documentation is divided into several sections:

• Introduction
• API Reference
• Advanced Guides
• Examples

You can improve it by sending pull requests to this repository.

Examples

Several examples can be found on the website. Here's one to get started:

import {h, render} from 'dyo'

function Example (props) {
	return h('h1', {}, 'Hello ', props.name)
}

render(h(Example, {name: 'World'}), 'body')

This will render a heading element with the text content "Hello World" into the specified target(the body element).

Comparison

The library is much alike React, so it's only natural that a comparison of the differences is in order; Which if successful might manage to highlight why it exists.

Re-parenting

The Portal component supports string selectors as targets. This presents an array of different possibilities with regards to isomorphic target references.

function Example (props) {
	return h(Portal, {target: 'main'}, 'Hello')
}

render(h(Example), 'body')

In addition to this – re-parenting is baked into portals. That is when a portals container is changed, instead of unmounting its contents and re-mounting them to the newly designated container we can instead move its contents without replaying destruction unmount operations that may discard valuable interface and component state.

In co-ordination with custom renderers, portals afford the opportunity to create atomic branch specific custom renderers. Imagine isolated declarative canvas renderers within a document renderer.

Promises

Promises(or thenables) are first class values. This affords authors the ability to render promises, directly await promises within effects and events, and delay unmounting.

render(props => Promise.resolve('Hello'), 'body')

function Example (props) {
	useEffect(async () => {
		// out of band updates in here
		// are also batched
		return async () => {
			// delays unmount until the animation
			// has completed
			return props.current.animate({}).finished
		}
	})
}

Callbacks

In an async world, public interfaces like render are not guaranteed to complete synchronously if a subtree happens to have async dependencies within it. A consequence of this will see more use cases for the optional callback arguments that this function accepts – in much the same way authors are afforded the ability to await on this central routine.

await render(props => Promise.resolve('Hello'), 'body')

Resources

In addition to other hooks, a resource allocation hook that can be used to fetch and cache resources.

function Example (props) {
	const resource = useResource(props => fetch('https://reqres.in/api/users'))
	return h('pre', {}, JSON.stringify(resource))
}

Async Server Rendering

Server side rendering supports the plethora of async primitives supported.

import {http} from 'http'
import {h, render, useResource} from 'dyo'

function Example (props) {
	const resource = useResource(props => fetch('https://reqres.in/api/users'))
	return h('pre', {}, JSON.stringify(resource))
}

http.createServer((request, response) => {
	return render(h('html', {}, h(Example)), response)
}).listen(8080)

License

Dyo is MIT licensed.