Bump eslint-plugin-import from 2.23.3 to 2.23.4

.eslintrc

@@ -4,15 +4,31 @@
         "es6": true
     },
     "plugins": [
-        "import"
+        "import",
+        "react"
     ],
     "settings": {
-        "import/resolver": "node"
+        "import/resolver": {
+            "node": {
+                "paths": ["src/js/modules/"]
+            }
+        },
+        "react": {
+            "version": "999.999.999"
+        }
     },
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/react",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+        "prettier"
+    ],
     "parserOptions": {
         "sourceType": "module",
-        "ecmaVersion": "2018"
+        "ecmaVersion": "2020"
     },
     "rules": {
         "array-bracket-spacing": 1,
@@ -68,7 +84,6 @@
         "no-else-return": 2,
         "no-eval": 2,
         "no-extend-native": 2,
-        "no-extra-parens": 2,
         "no-loop-func": 2,
         "no-magic-numbers": [
             2,

.gitignore

@@ -31,7 +31,7 @@ npm-debug.log
 
 app/
 deploy/
-src/
+#src/
 dist/
 docs/
 .tmp/compiledHandlebars/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src"]
+	path = src
+	url = [email protected]:scottbert/gulp-handlebars-livereload-src-example.git

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQxuote": true,
+  "tabWidth": 4,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

README.md

@@ -1,25 +1,28 @@
-###How to run this example
+## How to run this example
 
-Requires global gulp and gulp-cli to be installed
+Requires global `gulp` and `gulp-cli` to be installed
 
 Also requires node/npm > 10.x.
 
-If you have homebrew installed on OSX this is as simple as `brew install node`.
+If you have homebrew installed on OSX this is as easy as `brew install node`.
 
 If you don't have homebrew on OSX, visit http://brew.sh
 
-To run the demo, additionally check out https://github.com/scottbert/gulp-handlebars-livereload-src-example then copy into the root of this folder as "src"
+To run the demo, additionally check out https://github.com/scottbert/gulp-handlebars-livereload-src-example then copy into the root of this folder as "src" (This is now included by default as a git submodule)
 
-Do ```npm install```
+NPM pre 7: `npm install` - NPM 7 and above: `npm install --legacy-peer-deps`
 
-Then ```gulp``` to run the livereload local server ( [http://localhost:9000](http://localhost:9000) )
+Then `npm run develop` to run the livereload local server ( [http://localhost:9000](http://localhost:9000) )
 
-```NODE_ENV=production gulp deploy``` to deploy - this puts all of the required files into a 'deploy' directory. You can now put this directory somewhere else and run it.
+```npm run deploy``` to deploy - this puts all of the required files into a `deploy` directory. You can now put this directory somewhere else and run it.
 
-###What this gives you
+### What this gives you
 
 * Everything neatly wrapped in a src folder.
 * Fast build using gulp
 * Linting using eslint and sass-lint
 * Livereload - any change to any of the source files will be almost instantly reflected in a browser
 * Serve to your local network - ```ifconfig``` (or ```ipconfig``` on PC) will tell you your IP address, ```http://<ip address>:9000``` will work on most networks.
+* Static resources precompressed with both brotli and gzip to serve using nginx or apache - [How To Enable GZIP & Brotli Compression for Nginx on Linux](https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linux/) or [Precompress a static website with Brotli and Gzip](https://damien.pobel.fr/post/precompress-brotli-gzip-static-site/) for apache
+* Breakpoints shared between CSS and JS
+* Static resource path versioned and that version number shared between build and Javascript (so you can serve static resources from a CDN and not care about expiry date).

gulpfile.js/CONSTS.js → gulpfile.esm.js/CONSTS.js

@@ -1,55 +1,65 @@
 const fs = require('fs');
-const packageJson = JSON.parse(fs.readFileSync('./package.json'));
 const DEFAULT_PORT = 9000;
 const LIVERELOAD = 35679;
 const HUNDRED = 100;
 const RANDOM_PORT = LIVERELOAD + parseInt(Math.random() * HUNDRED); // Randomize port for livereload.
 const DIST = 'dist';
 
-const OPTIONS = require('../src/options');
+const { name, version } = require('../package.json');
 
-const version = OPTIONS.VERSION || packageJson.version;
-const name = OPTIONS.NAME || packageJson.name;
-const STATIC_ASSETS = `${DIST}/${version}`;
+let OPTIONS = {};
+
+if (!process.env.LIVERELOAD_PORT) {
+    process.env.LIVERELOAD_PORT = RANDOM_PORT;
+}
+
+try {
+    const pth = fs.realpathSync('.');
+
+    OPTIONS = require(pth + '/src/options.js');
+} catch (ex) {} //eslint-disable-line
+
+const STATIC_ASSETS = `${DIST}/${OPTIONS.VERSION || version}`;
 
 const langs = fs.readdirSync('./src/i18n/').map(file => {
     return file.replace('.json', '');
 });
 
-const CONSTS = {
-    BREAKPOINTS: {
-        OLD_MOBILE: 320,
-        MOBILE: 767,
-        SMALL_TABLET: 600,
-        TABLET: 979,
-        SMALL_DESKTOP: 1440
-    },
+const DEFAULTS = {
     BUILD_DIST: 'zip/',
     BUILD_DEST: 'dist/',
-    CSS_DEST_PATH: `${STATIC_ASSETS}/css`,
-    CSS_SRC_PATH: 'src/sass',
+    CSS_DEST: `${STATIC_ASSETS}/css`,
+    SASS_SRC: 'src/sass',
     DATA_SRC: 'src/data',
-    DEPLOY_DEST: `deploy/${name}-${version}`,
+    DEPLOY_TARGET: 'deploy/',
+    DEPLOY_DEST: `deploy/${name}-${OPTIONS.VERSION || version}`,
     DIST_DEST: `${DIST}/`,
     FONT_SRC: 'src/fonts',
     GULP_PORT: process.env.GULP_PORT || DEFAULT_PORT,
     GULP_TASKS: 'gulp-tasks',
-    GULPFILE: 'gulpfile.js',
+    GULPFILE: 'gulpfile.esm.js',
     I18N: 'src/i18n',
-    IMG_DEST: `${STATIC_ASSETS}/images`,
     IMG_SRC: 'src/images',
     JS_DEST: `${STATIC_ASSETS}/js`,
     JS_OUTPUT: '.min.js',
     JS_SRC: 'src/js/',
+    JSON_SRC: 'src/json',
     LANGS: langs,
     LIVERELOAD_PORT: process.env.LIVERELOAD_PORT || RANDOM_PORT,
+    NAME: OPTIONS.NAME || name,
     NODE_ENV: process.env.NODE_ENV,
     SRC: 'src',
     STATIC_PATH: `${STATIC_ASSETS}/`,
-    TEMPLATES_DEST:`${DIST}/`,
-    TEMPLATES_SRC:'src/templates/',
+    TEMPLATES_DEST: `${DIST}/`,
+    TEMPLATES_SRC: 'src/templates/',
     TESTS_PATH: 'src/tests/',
+    VERSION: OPTIONS.VERSION || version,
     VIDEO_SRC: 'src/video'
 };
 
-module.exports = Object.assign(CONSTS, OPTIONS);
+const CONSTS = {
+    ...DEFAULTS,
+    ...OPTIONS
+};
+
+export { CONSTS };

gulpfile.esm.js/brotli.js

@@ -0,0 +1,27 @@
+import { CONSTS } from './CONSTS';
+import { src, dest } from 'gulp';
+import { compress } from 'gulp-brotli';
+import { onError } from 'gulp-notify';
+import gulpPlumber from 'gulp-plumber';
+
+const { DEPLOY_DEST } = CONSTS;
+
+function brotli() {
+    return src(DEPLOY_DEST + '/**/*.{css,svg,js,html}')
+        .pipe(
+            gulpPlumber({
+                errorHandler: onError('brotli Error: <%= error.message %>')
+            })
+        )
+        .pipe(
+            compress({
+                skipLarger: true,
+                mode: 0,
+                quality: 11,
+                lgblock: 0
+            })
+        )
+        .pipe(dest(DEPLOY_DEST));
+}
+
+export { brotli };

gulpfile.esm.js/browserify.js

@@ -0,0 +1,144 @@
+import { dest } from 'gulp';
+import { onError } from 'gulp-notify';
+import browserify from 'browserify';
+import commonShakeify from 'common-shakeify';
+import fancyLog from 'fancy-log';
+import { sync } from 'glob';
+import gulpIf from 'gulp-if';
+import gulpLivereload from 'gulp-livereload';
+import gulpPlumber from 'gulp-plumber';
+import gulpReplace from 'gulp-replace';
+import merge2 from 'merge2';
+import vinylBuffer from 'vinyl-buffer';
+import vinylSourceStream from 'vinyl-source-stream';
+import watchify from 'watchify';
+
+import { CONSTS } from './CONSTS';
+
+const {
+    API,
+    BREAKPOINTS,
+    JS_DEST,
+    LANGS,
+    COMPONENTS_SRC,
+    JS_OUTPUT,
+    JS_SRC,
+    LIVERELOAD_PORT,
+    NAME,
+    NODE_ENV,
+    VERSION
+} = CONSTS;
+
+const isDev = NODE_ENV !== 'production';
+
+const entries = sync(JS_SRC + '*.js');
+
+function addToBrowserify(locale) {
+    let localeStr = locale.replace('en', '');
+
+    localeStr = localeStr !== '' ? (localeStr += '/') : localeStr;
+
+    return function (entry) {
+        const options = {
+            builtins: {},
+            entries: [entry],
+            cache: {},
+            debug: !!isDev,
+            packageCache: {},
+            paths: [`./${JS_SRC}modules`, `./${COMPONENTS_SRC}`, './.tmp/'],
+            transform: [
+                [
+                    'browserify-replace',
+                    {
+                        replace: [{ from: /\$lang\//g, to: localeStr }]
+                    }
+                ]
+            ]
+        };
+
+        const name = entry
+            .replace('-$lang', '-' + locale)
+            .replace('$name', NAME)
+            .replace('$version', VERSION)
+            .replace(/.*\/([\w$\-.]+).js/, '$1');
+
+        const b = browserify(options).plugin(commonShakeify, {});
+
+        if (isDev) {
+            b.transform('babelify', {
+                presets: ['@babel/preset-env'],
+                sourceMaps: true
+            });
+            b.plugin(watchify, { delay: 100 });
+        } else {
+            b.transform('babelify', { presets: ['@babel/preset-env'] });
+            b.plugin('tinyify', { flat: false });
+        }
+
+        function doLR() {
+            if (process.env.OVERRIDE_LR === 'true') {
+                return false;
+            }
+
+            process.env.OVERRIDE_LR = 'true';
+
+            setTimeout(() => {
+                process.env.OVERRIDE_LR = 'false';
+            }, 500);
+
+            return isDev;
+        }
+
+        function bundle() {
+            fancyLog(`start bundle ${name}.js`);
+
+            return b
+                .bundle()
+                .pipe(
+                    gulpPlumber({
+                        errorHandler: onError(
+                            'Bundle Error: <%= error.message %>'
+                        )
+                    })
+                )
+                .pipe(vinylSourceStream(name + JS_OUTPUT))
+                .pipe(vinylBuffer())
+                .pipe(gulpReplace('$$version$$', VERSION))
+                .pipe(gulpReplace('$$API$$', API))
+                .pipe(gulpReplace('$$oldMobile$$', BREAKPOINTS.OLD_MOBILE))
+                .pipe(gulpReplace('$$mobile$$', BREAKPOINTS.MOBILE))
+                .pipe(gulpReplace('$$smalltablet$$', BREAKPOINTS.SMALL_TABLET))
+                .pipe(gulpReplace('$$tablet$$', BREAKPOINTS.TABLET))
+                .pipe(
+                    gulpReplace('$$smalldesktop$$', BREAKPOINTS.SMALL_DESKTOP)
+                )
+                .pipe(dest(JS_DEST))
+                .pipe(
+                    gulpIf(
+                        doLR(),
+                        gulpLivereload({
+                            port: LIVERELOAD_PORT
+                        })
+                    )
+                );
+        }
+
+        b.on('update', bundle);
+        b.on('log', fancyLog);
+        b.on('error', fancyLog);
+
+        return bundle();
+    };
+}
+
+function createJSBundles() {
+    let tasks = [];
+
+    LANGS.forEach(locale => {
+        tasks = tasks.concat(entries.map(addToBrowserify(locale)));
+    });
+
+    return merge2(tasks);
+}
+
+export { createJSBundles as browserify };