diff --git a/.eslintrc.json b/.eslintrc.json
index 85c7e29..77904bc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,34 +1,37 @@
-{
- "env": {
- "browser": true,
- "commonjs": true,
- "es6": true,
- "node": true
- },
- "globals": {
- "riot": true,
- "route": true
- },
- "extends": "eslint:recommended",
- "rules": {
- "no-console": [
- "warn"
- ],
- "indent": [
- "error",
- 4
- ],
- "linebreak-style": [
- "error",
- "unix"
- ],
- "quotes": [
- "error",
- "single"
- ],
- "semi": [
- "error",
- "always"
- ]
- }
+{
+ "env": {
+ "browser": true,
+ "commonjs": true,
+ "es6": true,
+ "node": true
+ },
+ "globals": {
+ "riot": true,
+ "route": true
+ },
+ "parserOptions": {
+ "sourceType": "module",
+ },
+ "extends": "eslint:recommended",
+ "rules": {
+ "no-console": [
+ "warn"
+ ],
+ "indent": [
+ "error",
+ 4
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "quotes": [
+ "error",
+ "single"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ]
+ }
}
\ No newline at end of file
diff --git a/docs/modules.md b/docs/modules.md
index f7ebd35..525e3d6 100644
--- a/docs/modules.md
+++ b/docs/modules.md
@@ -1,13 +1,11 @@
# Module System
-ES6 Modules just dont work *well* with `RiotJS <=3`. You cannot import them in your web componets script tag, you could include them at the top of the page, but that requries a build-*watch*-proccess that goes against my goal -- **zero-build** develop process!
+ES6 Modules just dont work *well* inside `RiotJS` tags (`<=3`), you could include them at the top of the page, but that requries a build-*watch*-proccess that goes against -- a **zero-build** develop process!
-**Mixins** is Riots answer to shared / resultable componet logic, but I needed another level to easily compose larger bits of logic before they were injected into `riot.mixin`, that is where `require1k` comes in. It is a **zero-build** CommonJS/NodeJS version of `require` that lended to my love of NodeJS server-sed development, but on the client.
+**Mixins** is Riots answer to shared / resultable componet logic, but you want an easy way to compose larger bits of logic before they were injected into `riot.mixin`, that is why the build process (gulp) treats javascript files differently.
-**Require1k** While nearly perfect, there is a couple grips I do have:
+While using ES Modules for application logic, tags need to be built separately.
- - `.js` implied. I like to be specific and include `.js` when requiring files
- - defaults to `node_module` lookup. I just want to require a path to my file
-
-So, in the future I will probally look at forking `require1k`, but for now, for 1k dependency this is pretty awesome!
+- Tags are build with Riot, and minified
+- Application JS is built with Rollup, and minified (iife format)
diff --git a/gulpfile.js b/gulpfile.js
index 22c96c5..7fde70b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,7 +4,8 @@ const gulp = require('gulp'),
riot = require('gulp-riot'),
concat = require('gulp-concat'),
minify = require('gulp-minify'),
- terser = require('gulp-terser'),
+ rollup = require('gulp-rollup-lightweight'),
+ stream = require('vinyl-source-stream'),
cssmin = require('gulp-clean-css'),
ref = require('gulp-useref');
@@ -17,12 +18,23 @@ gulp.task('tags', () => {
.pipe(gulp.dest('./dist/js'));
});
-// minify/move javascript files
-gulp.task('javascript', () => {
- return gulp.src('./public/js/**/*.js')
- .pipe(terser())
+// bundle app files
+gulp.task('bundle', gulp.series(() => {
+ return rollup({
+ input: './public/js/app.js',
+ treeshake: true,
+ output: {
+ file: 'js/bundle.js',
+ format: 'iife'
+ }
+ })
+ .pipe(stream('./js/bundle.js'))
+ .pipe(gulp.dest('./dist'))
+}, () => {
+ return gulp.src(['./dist/js/bundle.js'])
+ .pipe(minify({ext: {min: '.min.js'}}))
.pipe(gulp.dest('./dist/js'));
-});
+}), () => {});
// move fonts
gulp.task('fonts', () => {
@@ -64,11 +76,11 @@ gulp.task('index', () => {
.pipe(gulp.dest('./dist'));
});
-// build all assets
-gulp.task('assets', gulp.parallel('css', 'fonts', 'images', 'javascript', 'vendor'), () => {});
+// build assests
+gulp.task('assets', gulp.parallel('css', 'fonts', 'images', 'vendor'), () => {});
// build everything for production distribution
-gulp.task('build', gulp.series('assets', 'public', 'index', 'tags'), () => {});
+gulp.task('build', gulp.series('assets', 'public', 'index', 'tags', 'bundle'), () => {});
// by default do this...
gulp.task('default', gulp.series('build'), () => {});
diff --git a/package-lock.json b/package-lock.json
index 1c07a63..6e473f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "riot-starter",
- "version": "0.6.0",
+ "version": "0.7.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -19,6 +19,12 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true
},
+ "@types/node": {
+ "version": "12.6.8",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
+ "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
+ "dev": true
+ },
"acorn": {
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
@@ -575,12 +581,6 @@
"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
"dev": true
},
- "commander": {
- "version": "2.20.0",
- "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
- "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
- "dev": true
- },
"component-emitter": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@@ -2025,64 +2025,30 @@
}
}
},
- "gulp-terser": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/gulp-terser/-/gulp-terser-1.2.0.tgz",
- "integrity": "sha512-lf+jE2DALg2w32p0HRiYMlFYRYelKZPNunHp2pZccCYrrdCLOs0ItbZcN63yr2pbz116IyhUG9mD/QbtRO1FKA==",
+ "gulp-rollup-lightweight": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/gulp-rollup-lightweight/-/gulp-rollup-lightweight-1.0.10.tgz",
+ "integrity": "sha512-dR7U4EEb6XmeYzZOX95MxH//fQbNFpMVzvOrhlFarWHF+5FWKy0Kvmnb/Akn3C2VwAy6rkiAGJ0OcxZ6mMlHcA==",
"dev": true,
"requires": {
- "plugin-error": "^1.0.1",
- "terser": "^4.0.0",
- "through2": "^3.0.1",
- "vinyl-sourcemaps-apply": "^0.2.1"
+ "rollup": "^1.4.1"
},
"dependencies": {
- "plugin-error": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
- "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
- "dev": true,
- "requires": {
- "ansi-colors": "^1.0.1",
- "arr-diff": "^4.0.0",
- "arr-union": "^3.1.0",
- "extend-shallow": "^3.0.2"
- }
- },
- "source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "acorn": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
+ "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
"dev": true
},
- "source-map-support": {
- "version": "0.5.12",
- "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
- "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
+ "rollup": {
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz",
+ "integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==",
"dev": true,
"requires": {
- "buffer-from": "^1.0.0",
- "source-map": "^0.6.0"
- }
- },
- "terser": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/terser/-/terser-4.1.2.tgz",
- "integrity": "sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==",
- "dev": true,
- "requires": {
- "commander": "^2.20.0",
- "source-map": "~0.6.1",
- "source-map-support": "~0.5.12"
- }
- },
- "through2": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
- "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
- "dev": true,
- "requires": {
- "readable-stream": "2 || 3"
+ "@types/estree": "0.0.39",
+ "@types/node": "^12.6.2",
+ "acorn": "^6.2.0"
}
}
}
@@ -4246,6 +4212,16 @@
"vinyl-sourcemap": "^1.1.0"
}
},
+ "vinyl-source-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/vinyl-source-stream/-/vinyl-source-stream-2.0.0.tgz",
+ "integrity": "sha1-84pa+53R6Ttl1VBGmsYYKsT1S44=",
+ "dev": true,
+ "requires": {
+ "through2": "^2.0.3",
+ "vinyl": "^2.1.0"
+ }
+ },
"vinyl-sourcemap": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3a23a27..e919bb6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "riot-starter",
- "version": "0.6.0",
+ "version": "0.7.0",
"description": "rapid riotjs starter seed",
"main": "index.js",
"repository": {
@@ -32,8 +32,9 @@
"gulp-concat": "^2.6.1",
"gulp-minify": "^3.1.0",
"gulp-riot": "^1.1.5",
- "gulp-terser": "^1.2.0",
- "gulp-useref": "^3.1.6"
+ "gulp-rollup-lightweight": "^1.0.10",
+ "gulp-useref": "^3.1.6",
+ "vinyl-source-stream": "^2.0.0"
},
"frontendDependencies": {
"target": "public/vendor/",
@@ -48,11 +49,6 @@
"src": "dist/route.min.js",
"namespaced": true
},
- "require1k": {
- "version": "2.0.0",
- "src": "*.min.js",
- "namespaced": true
- },
"grayscale": {
"src": "dist/*",
"url": "https://github.com/n2geoff/grayscale",
diff --git a/public/index.html b/public/index.html
index fae03f4..b166ee0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,9 @@
-
+
+
+
diff --git a/public/js/app.js b/public/js/app.js
index ea1d4a8..741d43f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,7 +1,7 @@
'use strict';
-const route = require('./config/routes');
-const config = require('./config/config');
+import route from './config/routes.js';
+import config from './config/config.js';
// -----------------------------------------------
// Application Bootstrap
diff --git a/public/js/config/config.js b/public/js/config/config.js
index e3bb403..3c992ab 100644
--- a/public/js/config/config.js
+++ b/public/js/config/config.js
@@ -3,6 +3,6 @@
// Global Application Settings
// -----------------------------------------------
-module.exports = {
+export default {
DEBUG: true
};
diff --git a/public/js/config/mixins.js b/public/js/config/mixins.js
index 748256f..29b029b 100644
--- a/public/js/config/mixins.js
+++ b/public/js/config/mixins.js
@@ -3,4 +3,4 @@
// Global Riot Mixins
// -----------------------------------------------
-module.exports = {};
+export default {};
diff --git a/public/js/config/routes.js b/public/js/config/routes.js
index ba60349..737b081 100644
--- a/public/js/config/routes.js
+++ b/public/js/config/routes.js
@@ -18,4 +18,4 @@ route('/about', function () {
riot.mount('#view', 'about');
});
-module.exports = route;
+export default route;
diff --git a/public/js/mixins/relay.mixin.js b/public/js/mixins/relay.mixin.js
index 80987e1..69f3be4 100644
--- a/public/js/mixins/relay.mixin.js
+++ b/public/js/mixins/relay.mixin.js
@@ -5,6 +5,6 @@
* simplifies communication between mutliple components
* on a single page
*/
-module.exports = {
+export default {
relay: riot.observable()
};
diff --git a/public/js/mixins/store.mixin.js b/public/js/mixins/store.mixin.js
index 4844447..7ee5911 100644
--- a/public/js/mixins/store.mixin.js
+++ b/public/js/mixins/store.mixin.js
@@ -3,7 +3,7 @@
*
* allows localStorage to be used as a mixin
*/
-module.exports = {
+export default {
store: {
get: function (key) {
return window.localStorage.getItem(key);