geoff
/
riot-starter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

incorporated require1k

This commit is contained in:
Geoff Doty 2019-07-20 19:05:55 -04:00
parent 74d9f9c9b4
commit 5797a6a80f
12 changed files with 220 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@ -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

6
gulpfile.js
View File

@ -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'));
});

174
package-lock.json generated
View File

@ -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": {

10
package.json
View File

@ -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": {

4
public/index.html
View File

@ -36,9 +36,7 @@
</div>
</div>
<!-- build:js js/combined.min.js -->
<script src="js/app.js"></script>
<!-- endbuild -->
<script src="vendor/require1k/require1k.min.js" data-main="./js/app"></script>
<!-- build:js js/tags.min.js -->
<script type="riot/tag" src="tags/layout/page.tag.html"></script>

51
public/js/app.js
View File

@ -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);
route.start(true);

8
public/js/config/config.js Normal file
View File

@ -0,0 +1,8 @@
// -----------------------------------------------
// Global Application Settings
// -----------------------------------------------
module.exports = {
DEBUG: true
};

6
public/js/config/mixins.js Normal file
View File

@ -0,0 +1,6 @@
// -----------------------------------------------
// Global Riot Mixins
// -----------------------------------------------
module.exports = {};

21
public/js/config/routes.js Normal file
View File

@ -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;

10
public/js/mixins/relay.mixin.js Normal file
View File

@ -0,0 +1,10 @@
/**
* Global Observiable Mixin
*
* simplifies communication between mutliple components
* on a single page
*/
module.exports = {
relay: riot.observable()
};

21
public/js/mixins/store.mixin.js Normal file
View File

@ -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();
}
}
};

2
public/manifest.json
View File

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