Use duo-serve with Deku+Immutable

.gitignore

node_modules
components

index.js

/** @jsx dom */
/* jshint esnext: true */

import Immutable from 'facebook/immutable-js:dist/immutable.js';
import {component, dom, scene, render} from 'segmentio/deku';

console.log('Immutable', Immutable);

let myList = Immutable.List.of(1, 2, 3, 4, 5);
let myListPow = myList.map(x => x * x);

console.log('myListPow', myListPow.toJS());

let Container = component({
  render() {
    var listItems = myListPow.map(x => <li>{x}</li>).toArray();

    return (
      <div class="container">
        <h1>Immutable Duo</h1>
        <ul>{listItems}</ul>
      </div>
    );
  }
});

let app = scene(Container);
render(app, document.body);

package.json

{
  "dependencies": {
    "duo-babel": "^5.1.1",
    "duo-myth": "0.1.0",
    "duo-serve": "^0.9.0"
  },
  "scripts": {
    "start": "DEBUG=duo* duo-serve -u duo-myth,duo-babel index.js style.css"
  }
}

style.css

:root {
  --light-gray: #f2f2f2;
  --dark-gray: #393939;
}

html {
  font: 100%/1.2 "Open Sans", "PT Sans", Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "PT Serif", Georgia, serif;
  font-weight: normal;
}

body {
  margin-top: 2.5rem;
  background-color: var(--light-gray);
  color: var(--dark-gray);
}

.container {
  max-width: 45rem;
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: 0.1875rem;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.container > h1 {
  margin-top: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--light-gray);
  text-align: center;
}