From 9bd02c0c5a2c324ab0210200113fe313b355cc73 Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Sun, 21 Jul 2019 16:59:34 -0400 Subject: [PATCH] switched to es modules --- .eslintrc.json | 69 +++++++++++++------------ docs/modules.md | 12 ++--- gulpfile.js | 30 +++++++---- package-lock.json | 90 ++++++++++++--------------------- package.json | 12 ++--- public/index.html | 4 +- public/js/app.js | 4 +- public/js/config/config.js | 2 +- public/js/config/mixins.js | 2 +- public/js/config/routes.js | 2 +- public/js/mixins/relay.mixin.js | 2 +- public/js/mixins/store.mixin.js | 2 +- 12 files changed, 109 insertions(+), 122 deletions(-) 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);