MadcapJake/MithrilNode.eg

## index.eg
require:
   mithril as m
require-macros:
   "./MithrilNode.eg" -> [%]
globals: document

class Todo:
   constructor(data) =
      @description = m.prop(data.description)
      @done = m.prop(false)

TodoList = Array

myTask = Todo({description = "Write code"})

class ViewModel:
   constructor() =
      ;; a running list of todos
      @list = new TodoList()

      ;; a slot to store the name of a new todo before it is created
      @description = m.prop("")

   ;; adds a todo to the list, and clears the description field
   add = description ->
      if description():
         @list.push with Todo({= description})
         @description("")


vm = ViewModel()
vm.description("Write code")
vm.add(vm.description)


view = ->
   html %
      body %
         input %
            button % "Add"
            table %
               tr %
                  td % input % type = .checkbox
                  td % input % value = vm.description()

m.render(document, view())

## index.html
<!doctype html>
<title>Todo app</title>
<script src="index.js" charset="utf-8"></script>

## MithrilNode.eg
require: mithril
provide: percent as [%]
MithrilNode = (tags, props, Array! children) ->
   mithril(tags.join(""), props, children)
macro{MithrilNode} percent = #data{x, y} ->
   let {=> MithrilNode} = @deps
   `[^x % ^y] where ENode = [^MithrilNode]

## package.json
{
  "name": "athelas",
  "version": "0.0.0",
  "description": "MithrilJS in Earl Grey",
  "main": "index",
  "scripts": {
    "start": "webpack-dev-server --content-base build/ --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jake Russo",
  "license": "MIT",
  "devDependencies": {
    "earlgrey-loader": "^0.1.4",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "earlgrey": "0.0.11",
    "mithril": "^0.2.0"
  }
}

## tree -L 2
.
├── build
│   └── index.html
├── node_modules
│   ├── earlgrey
│   ├── earlgrey-loader
│   ├── earlify
│   ├── mithril
│   ├── webpack
│   └── webpack-dev-server
├── package.json
├── src
│   ├── index.eg
│   └── MithrilNode.eg
└── webpack.config.js

## webpack.config.js
module.exports = {
  entry: {
    app: [ './src/index.eg' ]
  },
  output: {
    path: './build',
    publicPath: '/assets/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.eg/, loader: "earlgrey-loader?es5=true&sourceMaps=inline"}
    ]
  }
}
	require:
	mithril as m
	require-macros:
	"./MithrilNode.eg" -> [%]
	globals: document

	class Todo:
	constructor(data) =
	@description = m.prop(data.description)
	@done = m.prop(false)

	TodoList = Array

	myTask = Todo({description = "Write code"})

	class ViewModel:
	constructor() =
	;; a running list of todos
	@list = new TodoList()

	;; a slot to store the name of a new todo before it is created
	@description = m.prop("")

	;; adds a todo to the list, and clears the description field
	add = description ->
	if description():
	@list.push with Todo({= description})
	@description("")


	vm = ViewModel()
	vm.description("Write code")
	vm.add(vm.description)


	view = ->
	html %
	body %
	input %
	button % "Add"
	table %
	tr %
	td % input % type = .checkbox
	td % input % value = vm.description()

	m.render(document, view())
	<!doctype html>
	<title>Todo app</title>
	<script src="index.js" charset="utf-8"></script>
	require: mithril
	provide: percent as [%]
	MithrilNode = (tags, props, Array! children) ->
	mithril(tags.join(""), props, children)
	macro{MithrilNode} percent = #data{x, y} ->
	let {=> MithrilNode} = @deps
	`[^x % ^y] where ENode = [^MithrilNode]
	{
	"name": "athelas",
	"version": "0.0.0",
	"description": "MithrilJS in Earl Grey",
	"main": "index",
	"scripts": {
	"start": "webpack-dev-server --content-base build/ --hot",
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Jake Russo",
	"license": "MIT",
	"devDependencies": {
	"earlgrey-loader": "^0.1.4",
	"webpack": "^1.12.0",
	"webpack-dev-server": "^1.10.1"
	},
	"dependencies": {
	"earlgrey": "0.0.11",
	"mithril": "^0.2.0"
	}
	}
	.
	├── build
	│ └── index.html
	├── node_modules
	│ ├── earlgrey
	│ ├── earlgrey-loader
	│ ├── earlify
	│ ├── mithril
	│ ├── webpack
	│ └── webpack-dev-server
	├── package.json
	├── src
	│ ├── index.eg
	│ └── MithrilNode.eg
	└── webpack.config.js
	module.exports = {
	entry: {
	app: [ './src/index.eg' ]
	},
	output: {
	path: './build',
	publicPath: '/assets/',
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{ test: /\.eg/, loader: "earlgrey-loader?es5=true&sourceMaps=inline"}
	]
	}
	}