Advanced

Rendering

Rendering supports a variety node types, these include:

  1. Elements
  2. Fragments
  3. Components(as functions)
  4. Text(as strings/numbers)
  5. Empty(as null/undefined/booleans)
  6. Portals
  7. Promises
  8. Iterators

Events Arrays

Assigning multiple events handlers to a single event.


function Example (props) {
	return h('input', {
		onClick: [event => {}, event => {}]
	})
}

Async Unmount

Both useEffect and useLayout effects are afforded an interface to implement delayed unmounting for use-cases such as unmount animations – when the cleanup function returns a Promise:


function Example (props) => {
	useLayout(() => {
		return () => {
			return props.current.animate({}).finished
		}
	}, [])
	return h('h1', {ref: props}, state.name)
}
Note: The Element.animate returns an object with a finished Promise that is resolved once the animation has resolved.

Props Argument

Both effects and events receive an optional second argument that is a reference to the components props at that particular time.


function Example (props) {
	useEffect(([a, b], props) => {}, [a, b])

	return h('button', {
		onClick: (event, props) => {}
	})
}

Server Rendering

The dyo/server renderer has support for async primitives including Suspense and friends(lazy, useResource).

The following Node.js example writes: 


<!doctype>
<html>
	<h1>Hello</h1>
</html>

Into the writable stream — the response object.


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

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

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

The server renderer has built-in support to in addition render to response objects that share similarities to Express with its send(...) method Koa with its body setter style interface and does not specifically rely on Node.js as a runtime.


const html = await render(h('html', {}, h(Example)), {})

This in effect makes re-useing components in an isomorphic application less prone to the kind of friction posed with building isomorphic applications.

Custom renderers

The server renderer is itself a custom renderer. Any container target could be delegated to a custom renderer if it implements the base interface needed to conform.