Repository files navigation

A JavaScript library for building user interfaces.

• 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 can be findon the website.

See theGetting 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 tothis repository.

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

import{h,render}from'dyo'functionExample(props){returnh('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).

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.

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

functionExample(props){returnh(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(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')functionExample(props){useEffect(async()=>{// out of band updates in here// are also batchedreturnasync()=>{// delays unmount until the animation// has completedreturnprops.current.animate({}).finished}})}

In an async world, public interfaces likerender 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 optionalcallback arguments that this function accepts – in much the same way authors are afforded the ability to await on this central routine.

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

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

functionExample(props){constresource=useResource(props=>fetch('https://reqres.in/api/users'))returnh('pre',{},JSON.stringify(resource))}

Server side rendering supports the plethora of async primitives supported.

import{http}from'http'import{h,render,useResource}from'dyo'functionExample(props){constresource=useResource(props=>fetch('https://reqres.in/api/users'))returnh('pre',{},JSON.stringify(resource))}http.createServer((request,response)=>{returnrender(h('html',{},h(Example)),response)}).listen(8080)

Dyo isMIT licensed.