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.