Add fonts and Riot.js

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["es2015-riot"]
+}

.gitignore

@@ -5,3 +5,4 @@
 /old/
 /lib/
 /app.es5.js
+/notes.md

gulpfile.js

@@ -4,6 +4,7 @@ var path = require("path");
 var xtend = require("xtend");
 var rfr = require("rfr");
 
+var riot = require("gulp-riot");
 var sass = require("gulp-sass");
 var jade = require("gulp-jade");
 var babel = require("gulp-babel");
@@ -17,11 +18,16 @@ var namedLog = require("gulp-named-log");
 var runProcess = rfr("src/gulp/run-process");
 var patchLivereloadLogger = rfr("src/gulp/patch-livereload-logger");
 
-var babelLogger = namedLog("babel");
+var loggerOptions = {
-var jadeLogger = namedLog("jade");
+	basePath: __dirname
-var sassLogger = namedLog("sass");
+}
-var electronLogger = namedLog("electron");
+
-var livereloadLogger = namedLog("livereload");
+var babelLogger = namedLog("babel", loggerOptions);
+var jadeLogger = namedLog("jade", loggerOptions);
+var sassLogger = namedLog("sass", loggerOptions);
+var riotLogger = namedLog("riot", loggerOptions);
+var electronLogger = namedLog("electron", loggerOptions);
+var livereloadLogger = namedLog("livereload", loggerOptions);
 
 patchLivereloadLogger(livereload, livereloadLogger);
 
@@ -29,7 +35,8 @@ var sources = {
 	"babel-main": "app.js",
 	"babel-lib": "src/**/*.js",
 	"jade-views": "src/views/**/*.jade",
-	"sass-main": "src/stylesheets/**/*.scss"
+	"sass-main": "src/stylesheets/**/*.scss",
+	"riot-components": "src/components/**/*.tag"
 }
 
 function getLiveReloadStream() {
@@ -40,7 +47,7 @@ function getLiveReloadStream() {
 	return lr;
 }
 
-gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main'], function() {
+gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main', 'riot-components'], function() {
 	var electronProcess = runProcess(path.join(__dirname, "node_modules/.bin/electron"), [__dirname], {
 		logger: electronLogger,
 		env: xtend(process.env, {
@@ -51,45 +58,59 @@ gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main'], fu
 
 gulp.task('babel-main', function() {
 	return gulp.src(sources["babel-main"])
-		.pipe(plumber())
+		.pipe(plumber(babelLogger.error))
 		.pipe(cache("babel-main"))
-		.pipe(babel({presets: ["es2015"]}).on('error', babelLogger.error)).on('data', babelLogger.log)
+		.pipe(babel({presets: ["es2015"]}))
+		.pipe(babelLogger.stream())
 		.pipe(getLiveReloadStream())
-		.pipe(remember("babel-main"))
 		.pipe(rename("app.es5.js"))
 		.pipe(gulp.dest("./"));
 });
 
 gulp.task('babel-lib', function() {
 	return gulp.src(sources["babel-lib"])
-		.pipe(plumber())
+		.pipe(plumber(babelLogger.error))
 		.pipe(cache("babel-lib"))
-		.pipe(babel({presets: ["es2015"]}).on('error', babelLogger.error)).on('data', babelLogger.log)
+		.pipe(babel({presets: ["es2015"]}))
+		.pipe(babelLogger.stream())
 		.pipe(getLiveReloadStream())
-		.pipe(remember("babel-lib"))
 		.pipe(gulp.dest("lib/"));
 });
 
 gulp.task("jade-views", function() {
 	return gulp.src(sources["jade-views"])
-		.pipe(plumber())
+		.pipe(plumber(jadeLogger.error))
 		.pipe(cache("jade-views"))
-		.pipe(jade().on('error', jadeLogger.error)).on('data', jadeLogger.log)
+		.pipe(jade())
+		.pipe(jadeLogger.stream())
 		.pipe(getLiveReloadStream())
-		.pipe(remember("jade-views"))
 		.pipe(gulp.dest("lib/views/"));
 });
 
 gulp.task("sass-main", function() {
 	return gulp.src(sources["sass-main"])
-		.pipe(plumber())
+		.pipe(plumber(sassLogger.error))
 		.pipe(cache("sass-main"))
-		.pipe(sass().on('error', sassLogger.error)).on('data', sassLogger.log)
+		.pipe(sass())
+		.pipe(sassLogger.stream())
 		.pipe(getLiveReloadStream())
-		.pipe(remember("sass-main"))
 		.pipe(gulp.dest("lib/stylesheets/"));
 });
 
+gulp.task("riot-components", function() {
+	return gulp.src(sources["riot-components"])
+		.pipe(plumber(riotLogger.error))
+		.pipe(cache("riot-components"))
+		.pipe(riot({
+			type: "babel",
+			template: "jade",
+			style: "scss"
+		}))
+		.pipe(riotLogger.stream())
+		.pipe(getLiveReloadStream())
+		.pipe(gulp.dest("lib/components/"));
+});
+
 gulp.task('watch', function () {
 	livereload.listen();
 
@@ -97,6 +118,7 @@ gulp.task('watch', function () {
 	gulp.watch(sources["babel-main"], ["babel-main"]);
 	gulp.watch(sources["jade-views"], ["jade-views"]);
 	gulp.watch(sources["sass-main"], ["sass-main"]);
+	gulp.watch(sources["riot-components"], ["riot-components"]);
 });
 
 gulp.task('default', ['watch', 'electron']);

package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "download-fonts": "webfont-dl 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600,300,200,200italic,300italic,400italic,600italic,900,700italic,900italic&subset=latin,latin-ext' --out ./lib/stylesheets/fonts.css --font-out ./lib/fonts --css-rel ../fonts"
   },
   "repository": {
     "type": "git",
@@ -20,17 +21,21 @@
     "bhttp": "^1.2.1",
     "bluebird": "^3.3.4",
     "chalk": "^1.1.3",
+    "document-ready-promise": "^3.0.1",
     "electron-prebuilt": "^0.37.5",
     "file-url": "^1.1.0",
     "gulp-named-log": "0.0.1",
     "gulp-sass": "^2.2.0",
     "ia-headers": "^1.0.0",
+    "jquery": "^2.2.3",
     "rfr": "^1.2.3",
+    "riot": "^2.3.18",
     "uuid": "^2.0.1",
     "xtend": "^4.0.1"
   },
   "devDependencies": {
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-riot": "^1.0.4",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-cached": "^1.1.0",
@@ -39,6 +44,8 @@
     "gulp-plumber": "^1.1.0",
     "gulp-remember": "^0.3.1",
     "gulp-rename": "^1.2.2",
-    "split": "^1.0.0"
+    "gulp-riot": "^0.4.9",
+    "split": "^1.0.0",
+    "webfont-dl": "^0.1.2"
   }
 }

src/components/app/component.tag

@@ -0,0 +1,8 @@
+app
+	h1 Some app
+	fileset-browser
+	
+	script.
+		this.tags["fileset-browser"].on("click", () => {
+			console.log("Clicked!");
+		})

src/components/app/index.js

@@ -0,0 +1,4 @@
+const rfr = require("rfr");
+rfr("lib/components/fileset-browser");
+
+require("./component");

src/components/fileset-browser/component.tag

@@ -0,0 +1,16 @@
+fileset-browser
+	strong Fileset browser goes here
+	
+	style(scoped).
+		strong {
+			color: red;
+		}
+		
+	script.
+		let $ = require("jquery")
+		
+		this.on("mount", () => {
+			$("strong", this.root).on("click", () => {
+				this.trigger("click");
+			});
+		});

src/components/fileset-browser/index.js

@@ -0,0 +1 @@
+require("./component")

src/stylesheets/style.scss

@@ -1,3 +1,3 @@
 body {
-	font-family: sans-serif;
+	font-family: "Source Sans Pro", sans-serif;
 }

src/views/index.jade

@@ -2,7 +2,9 @@ html
 	head
 		meta(charset="UTF-8")
 		title Sample application
+		link(rel="stylesheet", href="../stylesheets/fonts.css")
 		link(rel="stylesheet", href="../stylesheets/style.css")
+		script(src="index.js")
 	body
-		h1 Sample header 2
+		app
-		p Some sample content
+

src/views/index.js

@@ -0,0 +1,12 @@
+const Promise = require("bluebird");
+const documentReady = require("document-ready-promise");
+const riot = require("riot");
+const rfr = require("rfr");
+
+rfr("lib/components/app");
+
+Promise.try(() => {
+	return documentReady();
+}).then(() => {
+	riot.mount("app");
+})