trueadm

/**
 * Normalizes recursive VNode lists by flattening all nodes, filtering out `null` children and converting strings to
 * text nodes.
 */
export function normalizeVNodes(nodes: VNodeRecursiveList): VNode<any>[] {
    for (let i = 0; i < nodes.length; i++) {
        const n = nodes[i];

        if (n === null || Array.isArray(n)) {
            let copy = nodes.slice(i);

trueadm

Inferno

Overview

Inferno is a JavaScript library for creating UIs for dynamic/complex web applications. Inferno is insanely fast, lightweight (8kb gzip), familiar (it uses much of the same API as React), modular and offers some compelling features to help developers craft awesome web apps. You can get started straight away by using inferno-create-app (available on NPM) or by viewing our installation and getting started guides.

Similar to React

Inferno intentionally aims to have the same developer look and feel as React – meaning that Inferno supports the majority of React's API and also utilises a "virtual DOM" behind the scenes. This decision was made due to the stability and high adoption of React in a relatively short period of time. The React API is well-recieved, documented, understood and battle-tested. Inferno could have created its own API, but that would have pushed people into having to learn yet another way of doing things.

trueadm

import { render, UIComponent, ModelComponent } from 'fusion';

const state = {
	people: [],
	title: 'Hello world'
};
// you could alternatively do this?
const SideBarModel = ModelComponent({
	name: 'sidebar',
	deleteItem(state, id) {

trueadm

function MyComponent() {
	return (
		<div>
			<my-chart 
				onAttached={ chart => chart.start() } 
				onDetatched={ chart => chart.end() } 
			/>
		</div>
	)
}

trueadm

import { render, createView, html } from 'fusion';

const view = createView(({ name, age, location }) => html`
	<div>
		<header>About me</header>
		<section class="about">
			<div>My name: <span>${ name }</span></div>
			<div>My age: <span>${ age }</span></div>
			<div>My location: <span>${ location }</span></div>
		</section>

trueadm

Enter this into your terminal (Mac users), ensure you have Chrome Canary in your Applications directory:

Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-main-frame-before-activation

trueadm

var t1 = Inferno.createTemplate(function(key, children) {
	return {
		dom: null,
		static: null,
		tag: null,
		key: key,
		attrs: null,
		children: children,
		nextItem: null
	}

trueadm

// calling create tree would do this
// only the attrs/children then are dynamic will by in the given nodes
// the nodes all should be monomorphic thus have the same properties (null if not used)


// we will clone these nodes
const precompiledNode1 = document.createElement('div');
const precompiledNode2 = document.createElement('div');
precompiledNode2.textContent = 'Node!';
precompiledNode2.className = 'foo';

trueadm

var urls = {
	react: 'http://run.plnkr.co/plunks/Wwgjjpl9NHMO5Nd1TUyN/',
	ember: 'https://dbmonster.firebaseapp.com/',
	underscore: 'http://jashkenas.github.io/dbmonster/',
	ractive: 'http://www.rich-harris.co.uk/ractive-dbmonster/',
	paperclip: 'http://paperclip-dbmonster.herokuapp.com/',
	t7_cito: 'http://t7js.com/dbmonster/',
	t7_cito_precompiled: 'http://t7js.com/dbmonster/precompiled.html'
}

trueadm

return Template`
 <div id="grid">
   ${ $.for(each => items, as => item) }>
     <div class="box-view">
       <div class="box" id="${ text => 'box-' + item }">0</div>
     </div>
   ${ $.endFor() }>
 </div>
`;