trueadm

  template() {
    return [
      div => [
        header => [
          h1 => ["Example " + this.title]
        ]
      ],
      div => ["#main",
        $if => [this.todos.length > 0,
          div => [

trueadm

  template() {
    return [
      ["div",
        ["header"
          ["h1", "Example " + this.title]
        ]
      ],
      ['div#main',
        $.if(this.todos.length > 0, [
          ['div',

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>
`;

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

// 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 t1 = Inferno.createTemplate(function(key, children) {
	return {
		dom: null,
		static: null,
		tag: null,
		key: key,
		attrs: null,
		children: children,
		nextItem: null
	}

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

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

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

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) {