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

switched to es modules

This commit is contained in:
Geoff Doty 2019-07-21 16:59:34 -04:00
parent 1e33a08fad
commit 9bd02c0c5a
12 changed files with 109 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
.eslintrc.json
View File

@ -1,34 +1,37 @@
{ {
"env": { "env": {
"browser": true, "browser": true,
"commonjs": true, "commonjs": true,
"es6": true, "es6": true,
"node": true "node": true
}, },
"globals": { "globals": {
"riot": true, "riot": true,
"route": true "route": true
}, },
"extends": "eslint:recommended", "parserOptions": {
"rules": { "sourceType": "module",
"no-console": [ },
"warn" "extends": "eslint:recommended",
], "rules": {
"indent": [ "no-console": [
"error", "warn"
4 ],
], "indent": [
"linebreak-style": [ "error",
"error", 4
"unix" ],
], "linebreak-style": [
"quotes": [ "error",
"error", "unix"
"single" ],
], "quotes": [
"semi": [ "error",
"error", "single"
"always" ],
] "semi": [
} "error",
"always"
]
}
} }

12
docs/modules.md
View File

@ -1,13 +1,11 @@
# Module System # 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 - Tags are build with Riot, and minified
- defaults to `node_module` lookup. I just want to require a path to my file - Application JS is built with Rollup, and minified (iife format)
So, in the future I will probally look at forking `require1k`, but for now, for 1k dependency this is pretty awesome!

30
gulpfile.js
View File

@ -4,7 +4,8 @@ const gulp = require('gulp'),
riot = require('gulp-riot'), riot = require('gulp-riot'),
concat = require('gulp-concat'), concat = require('gulp-concat'),
minify = require('gulp-minify'), minify = require('gulp-minify'),
terser = require('gulp-terser'), rollup = require('gulp-rollup-lightweight'),
stream = require('vinyl-source-stream'),
cssmin = require('gulp-clean-css'), cssmin = require('gulp-clean-css'),
ref = require('gulp-useref'); ref = require('gulp-useref');
@ -17,12 +18,23 @@ gulp.task('tags', () => {
.pipe(gulp.dest('./dist/js')); .pipe(gulp.dest('./dist/js'));
}); });
// minify/move javascript files // bundle app files
gulp.task('javascript', () => { gulp.task('bundle', gulp.series(() => {
return gulp.src('./public/js/**/*.js') return rollup({
.pipe(terser()) 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')); .pipe(gulp.dest('./dist/js'));
}); }), () => {});
// move fonts // move fonts
gulp.task('fonts', () => { gulp.task('fonts', () => {
@ -64,11 +76,11 @@ gulp.task('index', () => {
.pipe(gulp.dest('./dist')); .pipe(gulp.dest('./dist'));
}); });
// build all assets // build assests
gulp.task('assets', gulp.parallel('css', 'fonts', 'images', 'javascript', 'vendor'), () => {}); gulp.task('assets', gulp.parallel('css', 'fonts', 'images', 'vendor'), () => {});
// build everything for production distribution // 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... // by default do this...
gulp.task('default', gulp.series('build'), () => {}); gulp.task('default', gulp.series('build'), () => {});

90
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "riot-starter", "name": "riot-starter",
"version": "0.6.0", "version": "0.7.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -19,6 +19,12 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true "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": { "acorn": {
"version": "5.7.3", "version": "5.7.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
@ -575,12 +581,6 @@
"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
"dev": true "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": { "component-emitter": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@ -2025,64 +2025,30 @@
} }
} }
}, },
"gulp-terser": { "gulp-rollup-lightweight": {
"version": "1.2.0", "version": "1.0.10",
"resolved": "https://registry.npmjs.org/gulp-terser/-/gulp-terser-1.2.0.tgz", "resolved": "https://registry.npmjs.org/gulp-rollup-lightweight/-/gulp-rollup-lightweight-1.0.10.tgz",
"integrity": "sha512-lf+jE2DALg2w32p0HRiYMlFYRYelKZPNunHp2pZccCYrrdCLOs0ItbZcN63yr2pbz116IyhUG9mD/QbtRO1FKA==", "integrity": "sha512-dR7U4EEb6XmeYzZOX95MxH//fQbNFpMVzvOrhlFarWHF+5FWKy0Kvmnb/Akn3C2VwAy6rkiAGJ0OcxZ6mMlHcA==",
"dev": true, "dev": true,
"requires": { "requires": {
"plugin-error": "^1.0.1", "rollup": "^1.4.1"
"terser": "^4.0.0",
"through2": "^3.0.1",
"vinyl-sourcemaps-apply": "^0.2.1"
}, },
"dependencies": { "dependencies": {
"plugin-error": { "acorn": {
"version": "1.0.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==", "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
"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 "dev": true
}, },
"source-map-support": { "rollup": {
"version": "0.5.12", "version": "1.17.0",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz",
"integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==", "integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==",
"dev": true, "dev": true,
"requires": { "requires": {
"buffer-from": "^1.0.0", "@types/estree": "0.0.39",
"source-map": "^0.6.0" "@types/node": "^12.6.2",
} "acorn": "^6.2.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"
} }
} }
} }
@ -4246,6 +4212,16 @@
"vinyl-sourcemap": "^1.1.0" "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": { "vinyl-sourcemap": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz", "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",

12
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "riot-starter", "name": "riot-starter",
"version": "0.6.0", "version": "0.7.0",
"description": "rapid riotjs starter seed", "description": "rapid riotjs starter seed",
"main": "index.js", "main": "index.js",
"repository": { "repository": {
@ -32,8 +32,9 @@
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-minify": "^3.1.0", "gulp-minify": "^3.1.0",
"gulp-riot": "^1.1.5", "gulp-riot": "^1.1.5",
"gulp-terser": "^1.2.0", "gulp-rollup-lightweight": "^1.0.10",
"gulp-useref": "^3.1.6" "gulp-useref": "^3.1.6",
"vinyl-source-stream": "^2.0.0"
}, },
"frontendDependencies": { "frontendDependencies": {
"target": "public/vendor/", "target": "public/vendor/",
@ -48,11 +49,6 @@
"src": "dist/route.min.js", "src": "dist/route.min.js",
"namespaced": true "namespaced": true
}, },
"require1k": {
"version": "2.0.0",
"src": "*.min.js",
"namespaced": true
},
"grayscale": { "grayscale": {
"src": "dist/*", "src": "dist/*",
"url": "https://github.com/n2geoff/grayscale", "url": "https://github.com/n2geoff/grayscale",

4
public/index.html
View File

@ -36,7 +36,9 @@
</div> </div>
</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 --> <!-- build:js js/tags.min.js -->
<script type="riot/tag" src="tags/layout/page.tag.html"></script> <script type="riot/tag" src="tags/layout/page.tag.html"></script>

4
public/js/app.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
const route = require('./config/routes'); import route from './config/routes.js';
const config = require('./config/config'); import config from './config/config.js';
// ----------------------------------------------- // -----------------------------------------------
// Application Bootstrap // Application Bootstrap

2
public/js/config/config.js
View File

@ -3,6 +3,6 @@
// Global Application Settings // Global Application Settings
// ----------------------------------------------- // -----------------------------------------------
module.exports = { export default {
DEBUG: true DEBUG: true
}; };

2
public/js/config/mixins.js
View File

@ -3,4 +3,4 @@
// Global Riot Mixins // Global Riot Mixins
// ----------------------------------------------- // -----------------------------------------------
module.exports = {}; export default {};

2
public/js/config/routes.js
View File

@ -18,4 +18,4 @@ route('/about', function () {
riot.mount('#view', 'about'); riot.mount('#view', 'about');
}); });
module.exports = route; export default route;

2
public/js/mixins/relay.mixin.js
View File

@ -5,6 +5,6 @@
* simplifies communication between mutliple components * simplifies communication between mutliple components
* on a single page * on a single page
*/ */
module.exports = { export default {
relay: riot.observable() relay: riot.observable()
}; };

2
public/js/mixins/store.mixin.js
View File

@ -3,7 +3,7 @@
* *
* allows localStorage to be used as a mixin * allows localStorage to be used as a mixin
*/ */
module.exports = { export default {
store: { store: {
get: function (key) { get: function (key) {
return window.localStorage.getItem(key); return window.localStorage.getItem(key);