switched to es modules

2019-07-21 16:59:34 -04:00 · 2019-07-21 16:59:34 -04:00 · 9bd02c0c5a
parent 1e33a08fad
commit 9bd02c0c5a
12 changed files with 109 additions and 122 deletions
--- 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"
+        ]
+    }
 }
--- 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)

--- 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'), () => {});
--- 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",
--- 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",
--- a/public/index.html
+++ b/public/index.html
@ -36,7 +36,9 @@
        </div>
    </div>

-    <script src="vendor/require1k/require1k.min.js" data-main="./js/app"></script>
+    <!-- build:js js/bundle.min.js -->
+    <script type="module" src="js/app.js"></script>
+    <!-- endbuild -->

    <!-- build:js js/tags.min.js -->
    <script type="riot/tag" src="tags/layout/page.tag.html"></script>
--- 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
--- 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
 };
--- a/public/js/config/mixins.js
+++ b/public/js/config/mixins.js
@ -3,4 +3,4 @@
 // Global Riot Mixins
 // -----------------------------------------------

-module.exports = {};
+export default {};
--- 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;
--- 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()
 };
--- 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);