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"
}]