bhou

const collar = require('collar.js');
import Store from './Store';

class CollarStore extends Store {
	constructor(name, state) {
		super(name, state);
		
		this.ns = collar.ns(name, {
			component: `${name}`,
			arch: `store.${name}`

bhou

const collar = require('collar.js');
const DevToolAddon = require('collar.js-dev-webclient');

collar.use(new DevToolAddon());


// the initial app state
const initialState = {count: 0}

import VanillaCounterView from './vanilla/SimpleCounter';

bhou

import Store from './Store';

class SimpleStore extends Store {
	constructor(name, state) {
		super(name, state);

		this.views = new Map();
		this.handlers = new Map();
	}

bhou

class Store {
	constructor(name, state) {
		this.name = name;
		this.state = state;
	}

	/* dispatch an action to the store */
	dispatch(action) {
	}

bhou

import VanillaCounterCollarView from './vanilla/Counter';

const state = { count : 0 };

const counterCollarView = VanillaCounterCollarView('#vanilla-counter-collar', 'vanilla-counter-collar');

// register action handler
counterCollarView.addActionHandler('INCREMENT', () => { 
	state.count++; 
	counterCollarView.update(state);

bhou

const CollarView = require('../abstraction/CollarView');

module.exports = function(selector, name) {
	let counter = new CollarView(selector, name);

	counter.setRenderer(function(state, done) {
		let rootDOM = document.querySelector(this.selector);

		rootDOM.innerHTML = `
			<div class="vanilla-counter-value"><h1 class="counter-value">${state.count}</h1></div>

bhou

class CollarView extends View {
	constructor(selector, name) {
		super(selector, name);
		this.ns = collar.ns(name, {
			component: `${name}`,
			arch: `view.${name}`
		});

		this.errorHandler = this.ns.errors(s => {
			console.error(s.error);

bhou

class View {
  constructor(selector, name) {
    this.selector = selector; // css selector
    this.name = name; // view name 
    this.actionHandlers = new Map();
  }
 
  /* render the view with state */
  render(state) {}
  /* update the view with state */

bhou

const state = {count: 0};

import ReactCounterView from './react/SimpleCounter';

const reactCounterView = new ReactCounterView('#react-counter', 'react-counter');

reactCounterView.addActionHandler('INCREMENT', () => { 
	state.count++; 
	reactCounterView.update(state);
});

bhou

import React from 'react';
import ReactDOM from 'react-dom';

import View from '../abstraction/SimpleView';

class CounterComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0