dio.js

DIO

A Library For Building User Interfaces.

• ~7kb

Support

• Edge
• IE 9+
• Chrome
• Firefox
• Safari
• Node

---

Installation

Direct Download

<script src=dio.min.js></script>

CDN

<script src=https://unpkg.com/dio.js></script>
<script src=https://cdn.jsdelivr.net/npm/dio.js></script>

NPM

npm install dio.js --save

---

Getting started

dio.render(
  h('h1', 'Hello, world!'),
  document.getElementById('root')
)

The easiest way to get started with DIO is to walk through the Introduction to DIO or the API Documentation.

Features

The following is an overview of the features DIO allows you to make use of.

1. Rendering

   1. Elements
   2. Components
   3. Primitives like strings, numbers, null, undefined
   4. Fragments like Arrays, Iterables
   5. and others renderables like Promises and Portals

2. Components

   1. Functional stateful components
   2. Class stateful components

3. Events

   1. Functions or EventListener
   2. Preserve "this" reference

4. Errors

   1. Error boundaries through componentDidCatch

5. setState

   1. As with a Object
   2. As with a Promise
   3. As with an implicit return

6. Lifecycle

   1. async componentWillUnmount
   2. async getInitialState

Example

This intentionally overloaded example presents a few features detailed above, namely – error boundaries, an implicit setState return, Promise setState and rendering Promises & Fragments.

class Input {
	// Error Boundary
	componentDidCatch ({stack, message, ...error}, {componentStack}) {
		return {error: true}
	}
	// Isomorphic Async getInitialState
	async getInitialState() {
		return {value: 'Hi!'}
	}
	// Implicit Promise setState
	async handleInput({target}, props, state) {
		return {value: target.value}
	}
	// Rendering Promises
	async render(props, {value, error}, context) {
		if (error)
			return h('h1', 'Something went wrong!')

		// Rendering Fragments
		return [
			h('input', {
				value: value,
				// bonus: events preserve "this" reference
				onInput: this.handleInput
			}),
			h('p', value)
		]
	}
}

dio.render(h(Input))

--

Links

1. Introduction to DIO
2. API Documentation
3. REPL