From 5797a6a80f2fb5cc56d9dc2e726377f42b4a4574 Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Sat, 20 Jul 2019 19:05:55 -0400 Subject: [PATCH] incorporated require1k --- README.md | 40 +++++--- gulpfile.js | 6 +- package-lock.json | 174 ++++++++++++++++++++------------ package.json | 10 +- public/index.html | 4 +- public/js/app.js | 51 ++-------- public/js/config/config.js | 8 ++ public/js/config/mixins.js | 6 ++ public/js/config/routes.js | 21 ++++ public/js/mixins/relay.mixin.js | 10 ++ public/js/mixins/store.mixin.js | 21 ++++ public/manifest.json | 2 +- 12 files changed, 220 insertions(+), 133 deletions(-) create mode 100644 public/js/config/config.js create mode 100644 public/js/config/mixins.js create mode 100644 public/js/config/routes.js create mode 100644 public/js/mixins/relay.mixin.js create mode 100644 public/js/mixins/store.mixin.js diff --git a/README.md b/README.md index 56f1bc3..3d7339e 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ What are you waiting for -- **GO FORTH AND BUILD YOUR APP, RAPIDLY!** - `Web Components` for composable and reusable UI - `Events` to communicate between components or other code - [Riot-Route](https://riot.js.org/api/route/) the simplest way to manage URL navigation +- [Require1k](http://stuk.github.io/require1k/) tiny CommonJS module system for mixins/libs - [Grayscale](http://n2geoff.github.io/grayscale/) Small, 2kb gzipped CSS framework with a layout focus - [Gulp](https://gulpjs.com/) is there for when your ready for *production*. See [Build for Production](#build production) below @@ -46,27 +47,34 @@ A production pipe-line should *NOT* be in your way while **developing**. You sho 2. Start coding in `public` -3. run the `public/index.html` from your favorite web server\* +3. run the `public/index.html` from your favorite web server -> \* try `live-server` from `npm` or via [Visual Studio Code]() plug-in it's awesome! +> try `live-server` from `npm` or via [Visual Studio Code]() plug-in it's awesome! ### Project Structure ``` -public/ <-- develop here - css/ <-- your css files - js/ <-- your javascript files - app.js <-- basic routing/utils bootstrap - images/ <-- your images - tags/ <-- web-components - vendor/ <-- vendor dependencies, ie code you did not write - index.html <-- start here - ... <-- web meta files -docs/ <-- additional documentation -test/ <-- tests (one day) -gulpfile.js <-- task runner +public/ <-- develop here + css/ <-- your css files + js/ <-- your javascript files + config/ <-- configuration files used in app.js + config.js <-- global app settings, such as version + routes.js <-- routes combined + mixins.js <-- mixins combined + mixins/ <-- collection of mixins + relay.mixin.js <-- global observeable mixin + store.mixin.js <-- localStorage mixin + app.js <-- application bootstrap + images/ <-- your images + tags/ <-- web-components + vendor/ <-- vendor dependencies, ie code you did not write + index.html <-- start here + ... <-- web meta files +docs/ <-- additional documentation +test/ <-- tests (one day) +gulpfile.js <-- task runner README.md -... <-- misc project meta files +... <-- misc project meta files ``` ### Web Components @@ -105,7 +113,7 @@ Check out the [gulpfile](gulpfile.js) for all the build options if you do not wa ## Additional Documentation - [How Dependencies are Used](docs/dependencies.md) - +- [Module System](docs/modules.md) ## TODO diff --git a/gulpfile.js b/gulpfile.js index 1cd02a2..22c96c5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,7 @@ const gulp = require('gulp'), riot = require('gulp-riot'), concat = require('gulp-concat'), minify = require('gulp-minify'), + terser = require('gulp-terser'), cssmin = require('gulp-clean-css'), ref = require('gulp-useref'); @@ -16,11 +17,10 @@ gulp.task('tags', () => { .pipe(gulp.dest('./dist/js')); }); -// combine javascript files +// minify/move javascript files gulp.task('javascript', () => { return gulp.src('./public/js/**/*.js') - .pipe(concat('combined.js')) - .pipe(minify({ext: {min: '.min.js'}})) + .pipe(terser()) .pipe(gulp.dest('./dist/js')); }); diff --git a/package-lock.json b/package-lock.json index 5d62bcf..1c07a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -456,6 +456,23 @@ } } }, + "clean-css": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", + "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", + "dev": true, + "requires": { + "source-map": "~0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "cliui": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", @@ -558,6 +575,12 @@ "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", @@ -1888,26 +1911,17 @@ } }, "gulp-clean-css": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.10.0.tgz", - "integrity": "sha512-7Isf9Y690o/Q5MVjEylH1H7L8WeZ89woW7DnhD5unTintOdZb67KdOayRgp9trUFo+f9UyJtuatV42e/+kghPg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz", + "integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==", "dev": true, "requires": { "clean-css": "4.2.1", "plugin-error": "1.0.1", - "through2": "2.0.3", + "through2": "3.0.1", "vinyl-sourcemaps-apply": "0.2.1" }, "dependencies": { - "clean-css": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", - "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", - "dev": true, - "requires": { - "source-map": "~0.6.0" - } - }, "plugin-error": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", @@ -1920,20 +1934,13 @@ "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==", - "dev": true - }, "through2": { - "version": "2.0.3", - "resolved": "http://registry.npmjs.org/through2/-/through2-2.0.3.tgz", - "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=", + "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.1.5", - "xtend": "~4.0.1" + "readable-stream": "2 || 3" } } } @@ -2018,6 +2025,68 @@ } } }, + "gulp-terser": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gulp-terser/-/gulp-terser-1.2.0.tgz", + "integrity": "sha512-lf+jE2DALg2w32p0HRiYMlFYRYelKZPNunHp2pZccCYrrdCLOs0ItbZcN63yr2pbz116IyhUG9mD/QbtRO1FKA==", + "dev": true, + "requires": { + "plugin-error": "^1.0.1", + "terser": "^4.0.0", + "through2": "^3.0.1", + "vinyl-sourcemaps-apply": "^0.2.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==", + "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==", + "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" + } + } + } + }, "gulp-useref": { "version": "3.1.6", "resolved": "https://registry.npmjs.org/gulp-useref/-/gulp-useref-3.1.6.tgz", @@ -2485,7 +2554,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -2637,9 +2706,9 @@ } }, "mixin-deep": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", - "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", + "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", "dev": true, "requires": { "for-in": "^1.0.2", @@ -2697,7 +2766,7 @@ }, "next-tick": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, @@ -2870,7 +2939,7 @@ }, "os-locale": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", + "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "dev": true, "requires": { @@ -2985,7 +3054,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -3070,7 +3139,7 @@ }, "pretty-hrtime": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, @@ -3456,9 +3525,9 @@ "dev": true }, "set-value": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", - "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", + "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", "dev": true, "requires": { "extend-shallow": "^2.0.1", @@ -3809,7 +3878,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -4022,38 +4091,15 @@ "dev": true }, "union-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", - "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", + "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", "dev": true, "requires": { "arr-union": "^3.1.0", "get-value": "^2.0.6", "is-extendable": "^0.1.1", - "set-value": "^0.4.3" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "set-value": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", - "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", - "dev": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-extendable": "^0.1.1", - "is-plain-object": "^2.0.1", - "to-object-path": "^0.3.0" - } - } + "set-value": "^2.0.1" } }, "unique-stream": { @@ -4247,7 +4293,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { diff --git a/package.json b/package.json index 6bfb291..3a23a27 100644 --- a/package.json +++ b/package.json @@ -28,10 +28,11 @@ "devDependencies": { "frontend-dependencies": "^1.1.7", "gulp": "^4.0.2", - "gulp-clean-css": "^3.10.0", + "gulp-clean-css": "^4.2.0", "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" }, "frontendDependencies": { @@ -44,7 +45,12 @@ }, "riot-route": { "version": "3.1.4", - "src": "dist/route.*", + "src": "dist/route.min.js", + "namespaced": true + }, + "require1k": { + "version": "2.0.0", + "src": "*.min.js", "namespaced": true }, "grayscale": { diff --git a/public/index.html b/public/index.html index 646149e..fae03f4 100644 --- a/public/index.html +++ b/public/index.html @@ -36,9 +36,7 @@ - - - + diff --git a/public/js/app.js b/public/js/app.js index 53b1220..ea1d4a8 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1,55 +1,18 @@ 'use strict'; -// ----------------------------------------------- -// Global Application Settings -// ----------------------------------------------- - -const APP = { - DEBUG: true -}; - -riot.mixin(APP); +const route = require('./config/routes'); +const config = require('./config/config'); // ----------------------------------------------- -// Global Riot Mixins +// Application Bootstrap // ----------------------------------------------- +// [ global mixin ] ------------------------------ + riot.mixin({ - store: { - get: function (key) { - return window.localStorage.getItem(key); - }, - set: function (key, value) { - return window.localStorage.setItem(key, value); - }, - remove: function (key) { - return window.localStorage.removeItem(key); - } - }, - relay: riot.observable() -}); - -// ----------------------------------------------- -// Routing -// ----------------------------------------------- - -// [ set hash base ] ----------------------------- - -route.base('#'); - - -// [ define routes ] ----------------------------- - -// home page -route('/', function () { - riot.mount('#view', 'home'); -}); - -// about page -route('/about', function () { - riot.mount('#view', 'about'); + app: config }); // [ start router ] ------------------------------ -route.start(true); \ No newline at end of file +route.start(true); diff --git a/public/js/config/config.js b/public/js/config/config.js new file mode 100644 index 0000000..e3bb403 --- /dev/null +++ b/public/js/config/config.js @@ -0,0 +1,8 @@ + +// ----------------------------------------------- +// Global Application Settings +// ----------------------------------------------- + +module.exports = { + DEBUG: true +}; diff --git a/public/js/config/mixins.js b/public/js/config/mixins.js new file mode 100644 index 0000000..748256f --- /dev/null +++ b/public/js/config/mixins.js @@ -0,0 +1,6 @@ + +// ----------------------------------------------- +// Global Riot Mixins +// ----------------------------------------------- + +module.exports = {}; diff --git a/public/js/config/routes.js b/public/js/config/routes.js new file mode 100644 index 0000000..ba60349 --- /dev/null +++ b/public/js/config/routes.js @@ -0,0 +1,21 @@ +// ----------------------------------------------- +// Routing +// ----------------------------------------------- + +// [ set hash base ] ----------------------------- + +route.base('#'); + +// [ define routes ] ----------------------------- + +// home page +route('/', function () { + riot.mount('#view', 'home'); +}); + +// about page +route('/about', function () { + riot.mount('#view', 'about'); +}); + +module.exports = route; diff --git a/public/js/mixins/relay.mixin.js b/public/js/mixins/relay.mixin.js new file mode 100644 index 0000000..80987e1 --- /dev/null +++ b/public/js/mixins/relay.mixin.js @@ -0,0 +1,10 @@ + +/** + * Global Observiable Mixin + * + * simplifies communication between mutliple components + * on a single page + */ +module.exports = { + relay: riot.observable() +}; diff --git a/public/js/mixins/store.mixin.js b/public/js/mixins/store.mixin.js new file mode 100644 index 0000000..4844447 --- /dev/null +++ b/public/js/mixins/store.mixin.js @@ -0,0 +1,21 @@ +/** + * localStorage Mixin + * + * allows localStorage to be used as a mixin + */ +module.exports = { + store: { + get: function (key) { + return window.localStorage.getItem(key); + }, + set: function (key, value) { + return window.localStorage.setItem(key, value); + }, + remove: function (key) { + return window.localStorage.removeItem(key); + }, + clear: function() { + return window.localStorage.clear(); + } + } +}; diff --git a/public/manifest.json b/public/manifest.json index 38b6d71..98c5dce 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -9,7 +9,7 @@ "theme_color": "#BABABA", "description": "riotjs spa starter seed", "icons": [{ - "src": "images/logo.png", + "src": "images/icon.png", "sizes": "192x192", "type": "image/png" }]