serebano

/** @jsx h */
import ReactDOM from "react-dom"

export const Count = [
    ({ state, props }) => ({ value: state.count(Number), color: props.color }),
    ({ value, color }, h) => <h2 style={{ color, margin: 0 }}>{value}</h2>
]

export default [
    // 1

serebano

window.print = function print(json) {
    if (typeof json != "string") {
        json = JSON.stringify(json, undefined, "\t")
    }

    var arr = [],
        _string = "color:green",
        _number = "color:darkorange",
        _boolean = "color:blue",
        _null = "color:magenta",

serebano

data = {
    state: {
        users: {
            foo: {name: 'Foo'}
        }
    }
}

tree = {
    state: new Model(data, 'state'),

serebano

class Model {
    constructor(tree, path) {
        this.path = path ? path.split(".") : []
        this.tree = tree ? tree : {}
        this.changes = []
    }
    get(path) {
        return this.path.concat(path.split(".")).reduce((o,k) => o && o[k], this.tree)
    }
    set(path, value) {

serebano

class Tag {
    
    static isTag(arg) {
        return arg instanceof Tag
    }
    
    static create(type) {
        return (keys, ...values) => new Tag(type, keys, values)
    }

serebano

function funbox(reducer) {
	const box = ctx => box.run(ctx)
	box.use = (...functions) => {
		box.index = (box.index||[]).concat(...functions)
		box.run = ctx => box.index.reduce(reducer, ctx)
	}
	return box
}

const app = funbox((ctx, fun) => {

serebano

/** fun.js
    JS Middleware Fun

    num = fun((n, next) => 10 + next(n * 1))
            .use((n, next) => 20 - next(n - 2))
                .use((n, next) => 30 * next(n / 3))
    num(1)
*/

export default(...stack) => {

serebano

var data = { 
	count: 0 
}

function onClick() {
	data.count++
	render()
}

function render() {

serebano

<hi(props, name) export>
	<h1 => 'Hello ', this.name || String(name)
	<input on-input=(e => this.pub('name', e.target.value)) />
	<style +scoped>
		:scope {
			display: block;
			font-family: Helvetica Neue;
			font-size: 16px;
			color: ${ box.color(props.color) };
		}

serebano

<link rel="import" href="../google-map/google-map.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;