From a4fd84ef176e50ab647781afe10f8b7d58d9d731 Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Mon, 11 Apr 2016 04:27:02 +0200 Subject: [PATCH] Add fonts and Riot.js --- .babelrc | 3 +++ gulpfile.js | 22 ++++++++++++++++++-- package.json | 5 +++++ src/components/app/component.tag | 8 +++++++ src/components/app/index.js | 4 ++++ src/components/fileset-browser/component.tag | 16 ++++++++++++++ src/components/fileset-browser/index.js | 1 + src/stylesheets/style.scss | 2 +- src/views/index.jade | 6 ++++-- src/views/index.js | 12 +++++++++++ 10 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 .babelrc create mode 100644 src/components/app/component.tag create mode 100644 src/components/app/index.js create mode 100644 src/components/fileset-browser/component.tag create mode 100644 src/components/fileset-browser/index.js create mode 100644 src/views/index.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..6b40ba6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015-riot"] +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index ca34cb5..6b7b9b3 100644 --- a/gulpfile.js +++ b/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"); @@ -24,6 +25,7 @@ var loggerOptions = { 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); @@ -33,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() { @@ -44,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, { @@ -94,6 +97,20 @@ gulp.task("sass-main", function() { .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(); @@ -101,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']); diff --git a/package.json b/package.json index 3058314..8003e47 100644 --- a/package.json +++ b/package.json @@ -21,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", @@ -40,6 +44,7 @@ "gulp-plumber": "^1.1.0", "gulp-remember": "^0.3.1", "gulp-rename": "^1.2.2", + "gulp-riot": "^0.4.9", "split": "^1.0.0", "webfont-dl": "^0.1.2" } diff --git a/src/components/app/component.tag b/src/components/app/component.tag new file mode 100644 index 0000000..bdf966d --- /dev/null +++ b/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!"); + }) \ No newline at end of file diff --git a/src/components/app/index.js b/src/components/app/index.js new file mode 100644 index 0000000..bfdbd53 --- /dev/null +++ b/src/components/app/index.js @@ -0,0 +1,4 @@ +const rfr = require("rfr"); +rfr("lib/components/fileset-browser"); + +require("./component"); \ No newline at end of file diff --git a/src/components/fileset-browser/component.tag b/src/components/fileset-browser/component.tag new file mode 100644 index 0000000..96026db --- /dev/null +++ b/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"); + }); + }); \ No newline at end of file diff --git a/src/components/fileset-browser/index.js b/src/components/fileset-browser/index.js new file mode 100644 index 0000000..79a3df4 --- /dev/null +++ b/src/components/fileset-browser/index.js @@ -0,0 +1 @@ +require("./component") \ No newline at end of file diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss index a326381..15fd8b8 100644 --- a/src/stylesheets/style.scss +++ b/src/stylesheets/style.scss @@ -1,3 +1,3 @@ body { - font-family: sans-serif; + font-family: "Source Sans Pro", sans-serif; } diff --git a/src/views/index.jade b/src/views/index.jade index dbde07f..612785a 100644 --- a/src/views/index.jade +++ b/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 - p Some sample content + app + diff --git a/src/views/index.js b/src/views/index.js new file mode 100644 index 0000000..83ad686 --- /dev/null +++ b/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"); +}) \ No newline at end of file