Merge pull request #23 from gregoranders/feature/21-serviceworker

Feature/21 serviceworker

.gitignore

@@ -1,4 +1,6 @@
 dist/
+public/assets/
+public/favicon.html
 coverage/
 coverage-e2e/
 node_modules/

docker/nginx.conf

@@ -92,8 +92,8 @@ http {
 
     expires $expires;
 
-    index index.html;
-    root /var/www/localhost/htdocs;
+    #index index.html;
+    #root /var/www/localhost/htdocs;
 
     location ^~ /ts-react-playground {
       gzip_static on;

favicon.ts

@@ -0,0 +1,70 @@
+import * as packageJson from './package.json';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as favicons from 'favicons';
+
+const icon = 'react.svg';
+
+const configuration: favicons.Configuration = {
+    path: `${packageJson.basename}assets`,
+    appName: packageJson.name,
+    appShortName: packageJson.name,
+    appDescription: packageJson.description,
+    developerName: packageJson.author,
+    developerURL: packageJson.homepage,
+    dir: 'auto',
+    lang: 'en-US',
+    background: '#000',
+    theme_color: '#000',
+    appleStatusBarStyle: 'black-translucent',
+    display: 'standalone',
+    orientation: 'any',
+    scope: '/',
+    start_url: `${packageJson.basename}/index.html`,
+    version: '1.0',
+    logging: false,
+    pixel_art: false,
+    loadManifestWithCredentials: false,
+    manifestRelativePaths: false,
+    pipeHTML: true,
+    icons: {
+      android: true,
+      appleIcon: true,
+      appleStartup: true,
+      coast: true,
+      favicons: true,
+      firefox: true,
+      windows: true,
+      yandex: true,
+    },
+  },
+  callback = (
+    error: Error,
+    response: {
+      images: { name: string; contents: Buffer }[];
+      files: { name: string; contents: Buffer }[];
+      html: string[];
+    },
+  ) => {
+    if (error) {
+      console.log(error.message);
+      return;
+    }
+
+    const assetPath = path.resolve('public', 'assets');
+
+    const writeFiles = (files: { name: string; contents: Buffer }[]) => {
+      files.forEach((file) => {
+        fs.writeFileSync(path.resolve(assetPath, file.name), file.contents);
+      });
+    };
+
+    if (!fs.existsSync(assetPath)) fs.mkdirSync(assetPath);
+
+    writeFiles(response.images);
+    writeFiles(response.files);
+
+    fs.writeFileSync(path.resolve('public', 'favicon.html'), response.html.join('\n'));
+  };
+
+favicons(icon, configuration, callback);

jest-puppeteer.config.js

@@ -8,7 +8,7 @@ module.exports = {
   launch: {
     dumpio: true,
     headless: process.env.HEADLESS !== 'false',
-    // args: ['--enable-experimental-web-platform-features']
+    args: ['--enable-experimental-web-platform-features']
   },
   server: {
     command,

package.json

@@ -7,8 +7,8 @@
     "clear": "npm run prebuild && rimraf ./node_modules ./dist ./coverage ./coverage-e2e ./package-lock.json .jest-test-results.json junit.xml",
     "prebuild": "npm run prebuild:webpack",
     "build": "npm run build:webpack",
-    "prebuild:esc": "npm run prevendor && npm run prescript && npm run prescss",
-    "build:esm": "npm run vendor && npm run script && npm run scss",
+    "prebuild:esm": "npm run prevendor && npm run prescript && npm run preserviceWorker && npm run prescss && npm run prefavicon",
+    "build:esm": "npm run vendor && npm run script && npm run scss && npm run favicon && npm run serviceWorker",
     "postbuild:esm": "ts-node minify.ts",
     "prebuild:webpack": "rimraf ./dist",
     "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.js",
@@ -27,6 +27,8 @@
     "scss": "node-sass --output-style compressed --output ./public ./src/style/styles.scss",
     "prewatch-scss": "npm run scss",
     "watch-scss": "node-sass --output-style compressed  --watch --output ./public ./src/style/styles.scss",
+    "prefavicon": "rimraf ./public/assets ./public/favicon.html",
+    "favicon": "ts-node favicon.ts",
     "prevendor": "rimraf ./public/vendor ./public/es-module-shims.js",
     "vendor": "rimraf ./public/vendor && npm run vendor:base && npm run vendor:faker && npm run vendor:fontawesome && npm run vendor:react && npm run vendor:recharts && npm run vendor:esmoduleshims",
     "vendor:base": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-base.config.js",
@@ -35,6 +37,11 @@
     "vendor:react": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-react.config.js",
     "vendor:recharts": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-recharts.config.js",
     "vendor:esmoduleshims": "tsc --project ./src/vendor/es-module-shims",
+    "preserviceWorker": "rimraf ./public/serviceWorker.js",
+    "serviceWorker": "tsc --project ./src/service --outFile ./public/serviceWorker.js",
+    "postserviceWorker": "workbox injectManifest workbox-config.js",
+    "prewatch-serviceWorker": "npm run serviceWorker",
+    "watch-serviceWorker": "tsc --watch --project ./src/service --outFile ./public/serviceWorker.js",
     "predocker:build": "npm run build",
     "docker:build": "cross-env NODE_ENV=production docker-compose build --force-rm --no-cache --parallel --pull",
     "docker:up": "docker-compose up -d",
@@ -66,6 +73,7 @@
     "workbox"
   ],
   "baseport": 43795,
+  "basename": "/ts-react-playground/",
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged && npm run test",
@@ -83,6 +91,7 @@
     "collectCoverageFrom": [
       "!setup.ts",
       "!webpack.config.js",
+      "!**/package.json",
       "!**/tsconfig.json",
       "!**/tsconfig.*.json",
       "!**/*.tsx.snap",
@@ -96,6 +105,7 @@
       "!**/node_modules/**",
       "!**/vendor/**",
       "!**/public/**",
+      "!**/service/**",
       "!**/it/**",
       "!**/coverage/**"
     ],
@@ -219,6 +229,7 @@
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/express": "4.17.6",
     "@types/faker": "4.1.12",
+    "@types/favicons": "5.5.0",
     "@types/jest": "26.0.0",
     "@types/jest-image-snapshot": "3.1.0",
     "@types/node": "14.0.13",
@@ -255,6 +266,7 @@
     "eslint-plugin-react-hooks": "4.0.4",
     "express": "4.17.1",
     "faker": "4.1.0",
+    "favicons": "6.1.0",
     "file-loader": "6.0.0",
     "html-webpack-plugin": "4.3.0",
     "husky": "4.2.5",

public/importmap.json

@@ -0,0 +1,63 @@
+{
+  "imports": {
+    "clsx": "/ts-react-playground/vendor/clsx.js",
+    "idb": "/ts-react-playground/vendor/idb.js",
+    "faker": "/ts-react-playground/vendor/faker.js",
+    "workbox-window": "/ts-react-playground/vendor/workbox-window.js",
+
+    "object-assign": "/ts-react-playground/vendor/object-assign.js",
+    "prop-types": "/ts-react-playground/vendor/prop-types.js",
+    "react": "/ts-react-playground/vendor/react.js",
+    "react-is": "/ts-react-playground/vendor/react-is.js",
+    "react-dom": "/ts-react-playground/vendor/react-dom.js",
+    "react-router": "/ts-react-playground/vendor/react-router.js",
+    "react-router-dom": "/ts-react-playground/vendor/react-router-dom.js",
+    "react-transition-group": "/ts-react-playground/vendor/react-transition-group.js",
+    "recoil": "/ts-react-playground/vendor/recoil.js",
+    "scheduler": "/ts-react-playground/vendor/scheduler.js",
+
+    "recharts": "/ts-react-playground/vendor/recharts.js",
+    "recharts-scale": "/ts-react-playground/vendor/recharts-scale.js",
+
+    "d3-array": "/ts-react-playground/vendor/d3-array.js",
+    "d3-color": "/ts-react-playground/vendor/d3-color.js",
+    "d3-format": "/ts-react-playground/vendor/d3-format.js",
+    "d3-interpolate": "/ts-react-playground/vendor/d3-interpolate.js",
+    "d3-path": "/ts-react-playground/vendor/d3-path.js",
+    "d3-scale": "/ts-react-playground/vendor/d3-scale.js",
+    "d3-shape": "/ts-react-playground/vendor/d3-shape.js",
+    "d3-time": "/ts-react-playground/vendor/d3-time.js",
+    "d3-time-format": "/ts-react-playground/vendor/d3-time-format.js",
+
+    "@fortawesome/fontawesome-svg-core": "/ts-react-playground/vendor/@fortawesome/fontawesome-svg-core.js",
+    "@fortawesome/free-regular-svg-icons": "/ts-react-playground/vendor/@fortawesome/free-regular-svg-icons.js",
+    "@fortawesome/free-solid-svg-icons": "/ts-react-playground/vendor/@fortawesome/free-solid-svg-icons.js",
+    "@fortawesome/free-brands-svg-icons": "/ts-react-playground/vendor/@fortawesome/free-brands-svg-icons.js",
+    "@fortawesome/react-fontawesome": "/ts-react-playground/vendor/@fortawesome/react-fontawesome.js",
+
+    "@app/index": "/ts-react-playground/script/index.js",
+    "@app/application": "/ts-react-playground/script/application.js",
+    "@app/loading": "/ts-react-playground/script/loading.js",
+
+    "@models/user": "/ts-react-playground/script/models/user.js",
+
+    "@components/layout": "/ts-react-playground/script/components/layout/index.js",
+
+    "@atoms/button": "/ts-react-playground/script/components/atoms/button/index.js",
+    "@atoms/navLink": "/ts-react-playground/script/components/atoms/navLink/index.js",
+    "@atoms/user": "/ts-react-playground/script/components/atoms/user/index.js",
+
+    "@molecules/users": "/ts-react-playground/script/components/molecules/users/index.js",
+
+    "@organisms/header": "/ts-react-playground/script/components/organisms/header/index.js",
+    "@organisms/nav": "/ts-react-playground/script/components/organisms/nav/index.js",
+    "@organisms/main": "/ts-react-playground/script/components/organisms/main/index.js",
+    "@organisms/footer": "/ts-react-playground/script/components/organisms/footer/index.js",
+
+    "@organisms/users": "/ts-react-playground/script/components/organisms/users/index.js",
+
+    "@pages/home": "/ts-react-playground/script/components/pages/home/index.js",
+    "@pages/index": "/ts-react-playground/script/components/pages/index/index.js",
+    "@pages/about": "/ts-react-playground/script/components/pages/about/index.js"
+  }
+}