FND/.gitignore

## .gitignore
/node_modules
/dist

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Riot.js with ES6 via webpack</title>
</head>

<body>
	<h1>Riot.js with ES6 via webpack</h1>

	<my-component></my-component>

	<script src="dist/bundle.js"></script>
</body>

</html>

## main.js
/*global riot */
import "./dist/ui";
import { log } from "./util";

log("INFO", "hello world");
riot.mount("*");

## package.json
{
  "scripts": {
    "compile": "riot ui.tag dist && webpack",
    "render": "node render.js"
  },
  "dependencies": {
    "riot": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.1.4",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.4",
    "webpack": "^1.12.3"
  }
}

## render.js
/*eslint-env node */
"use strict";

var riot = require("riot");
var myComponent = require("./ui.tag");

var html = riot.render(myComponent);
console.log(html);

## ui.tag
<my-component>
	<h3 onclick={ onClick }>{ title }</h3>
	<p>{ content }</p>

	<script>
		this.title = "Hello World";
		this.content = "lorem ipsum dolor sit amet";

		var self = this;
		this.onClick = function(ev) {
			self.content += " " + new Date();
			self.update();
		};
	</script>
</my-component>

## util.js
export function log(level, message) {
	console.log("[" + level + "]", message);
}

## webpack.config.js
/*eslint-env node */
"use strict";

var webpack = require("webpack");
var path = require("path");

module.exports = {
	entry: "./main.js",
	output: {
		path: __dirname + "/dist",
		filename: "bundle.js"
	},
	resolve: {
		root: path.resolve("./node_modules")
	},
	module: {
		loaders: [{
			loader: "babel-loader",
			query: {
				presets: ["es2015"],
				cacheDirectory: true
			}
		}]
	},
	plugins: [
		new webpack.ProvidePlugin({
			riot: "riot/riot"
		})
	]
};
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Riot.js with ES6 via webpack</title>
	</head>

	<body>
	<h1>Riot.js with ES6 via webpack</h1>

	<my-component></my-component>

	<script src="dist/bundle.js"></script>
	</body>

	</html>
	/global riot /
	import "./dist/ui";
	import { log } from "./util";

	log("INFO", "hello world");
	riot.mount("*");
	{
	"scripts": {
	"compile": "riot ui.tag dist && webpack",
	"render": "node render.js"
	},
	"dependencies": {
	"riot": "^2.3.1"
	},
	"devDependencies": {
	"babel-core": "^6.1.4",
	"babel-loader": "^6.1.0",
	"babel-preset-es2015": "^6.1.4",
	"webpack": "^1.12.3"
	}
	}
	/eslint-env node /
	"use strict";

	var riot = require("riot");
	var myComponent = require("./ui.tag");

	var html = riot.render(myComponent);
	console.log(html);
	<my-component>
	<h3 onclick={ onClick }>{ title }</h3>
	<p>{ content }</p>

	<script>
	this.title = "Hello World";
	this.content = "lorem ipsum dolor sit amet";

	var self = this;
	this.onClick = function(ev) {
	self.content += " " + new Date();
	self.update();
	};
	</script>
	</my-component>
	export function log(level, message) {
	console.log("[" + level + "]", message);
	}
	/eslint-env node /
	"use strict";

	var webpack = require("webpack");
	var path = require("path");

	module.exports = {
	entry: "./main.js",
	output: {
	path: __dirname + "/dist",
	filename: "bundle.js"
	},
	resolve: {
	root: path.resolve("./node_modules")
	},
	module: {
	loaders: [{
	loader: "babel-loader",
	query: {
	presets: ["es2015"],
	cacheDirectory: true
	}
	}]
	},
	plugins: [
	new webpack.ProvidePlugin({
	riot: "riot/riot"
	})
	]
	};