Add service worker middleware and better logging

Author: tbranyen

README.md

@@ -110,6 +110,15 @@ level or any specific nested package level.
   recursively search for inconsistencies, displays warnings unless debugging is
   enabled, then it throws errors instead.
 
+* [diffhtml-middleware-service-worker](/packages/diffhtml-middleware-service-worker)
+
+  ``` sh
+  npm install diffhtml-middleware-service-worker
+  ```
+
+  Helps with the creation of a service worker for PWAs, available as a
+  convenience to make development more friendlier.
+
 * [diffhtml-react-compat](/packages/diffhtml-react-compat)
 
   ```
@@ -130,6 +139,12 @@ level or any specific nested package level.
   A work-in-progress static HTML server that automatically reloads your markup
   as you save using Web Sockets.
 
+* [diffhtml-devtools](/packages/diffhtml-devtools)
+
+  A work-in-progress set of developer tools that logs out transactions.
+  Eventually will allow for subscription/unsubscription of middleware, charting
+  for the overall application health, and more.
+
 * [diffhtml-website](/packages/diffhtml-website)
 
   The source for the [www.diffhtml.org](https://www.diffhtml.org) website,

packages/diffhtml-components/lib/util/fake-prop-types.js

@@ -1,3 +1,3 @@
-console.warn('Unable to load prop-types with real ESM');
+console.warn('diffHTML Components: Unable to load prop-types with real ESM');
 
 export default {};

packages/diffhtml-middleware-logger/README.md

@@ -20,7 +20,7 @@ npm install diffhtml-middleware-logger
 import { use } from 'diffhtml';
 import logger from 'diffhtml-middleware-logger';
 
-diff.use(logger());
+use(logger());
 ```
 
 This is not a very performant middleware, so please do not use this in

packages/diffhtml-middleware-service-worker/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["diffhtml-imports"]
+}

packages/diffhtml-middleware-service-worker/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/diffhtml-middleware-service-worker/README.md

@@ -0,0 +1,76 @@
+# <±/> diffHTML ServiceWorker Middleware
+
+Stable Version: 1.0.0-beta.9
+
+While this does not really benefit from being a middleware, I made it as such
+since it looks nice in the `use` and can be disabled if the middleware is
+unsubscribed. I've added some developer niceties, like auto clearing the caches
+for development. It's also possible to disable the worker completely if you
+get annoyed with some behavior.
+
+## Installation
+
+``` sh
+npm install diffhtml-middleware-service-worker
+```
+
+## Example
+
+``` javascript
+import { use } from 'diffhtml';
+import serviceWorker from 'diffhtml-middleware-service-worker';
+```
+
+``` javascript
+// Defaults shown, these are all optional values.
+use(serviceWorker({
+  url: '/service-worker.js',
+  scope: '/',
+  autoClearCaches: location.search.includes('diff_autoclear'),
+  disable: location.search.includes('diff_disable'),
+  quiet: location.search.includes('diff_quiet'),
+  options: {},
+}));
+```
+
+## Options
+
+These options are available to change depending on the use case. It is
+entirely possible to get away with simply:
+
+``` javascript
+use(serviceWorker());
+```
+
+If you meet the the default use case.
+
+### `url`
+
+Specifies which Service Worker URL to load.
+
+### `scope`
+
+Specifices the path to use, called scope since it restricts what content is
+visible.
+
+### `autoClearCaches`
+
+Allow the middleware to automatically clear all caches. By default this is
+disabled as it defeats the point of a service worker and may muck with other
+apps running on localhost. Can be toggled via the query param
+`?diff_autoclear`.
+
+### `disable`
+
+Unregisters all Service Workers and does not try to register a new one. This
+can be toggled via the query param: `?diff_disable`.
+
+### `quiet`
+
+Do not log anything to the console. Can be toggled via the query param
+`?diffhtml_quiet`.
+
+### `options`
+
+Defaults to an empty object, gets spread into the Service Worker registration
+call.

packages/diffhtml-middleware-service-worker/index.js

@@ -0,0 +1,92 @@
+const { assign } = Object;
+
+// Wipe all caches for this domain.
+const clear = ({ quiet }) => caches.keys().then(cachesNames => {
+  return Promise.all(cachesNames.map(cacheName => {
+    return caches.delete(cacheName).then(function () {
+      if (!quiet) {
+        console.warn(`diffHTML ServiceWorker: Deleted cache ${cacheName}`);
+      }
+    });
+  }))
+});
+
+// Wipe out all the service workers for this domain.
+const unregister = ({ quiet }) => navigator.serviceWorker.getRegistrations().then(regs => {
+  for (let reg of regs) {
+    reg.unregister();
+
+    if (!quiet) {
+      console.warn('diffHTML ServiceWorker: Unregistering worker', reg);
+    }
+  }
+});
+
+// Simplify's creating a service worker with diffHTML.
+const wrapper = ({
+  // Default to the root /service-worker.js.
+  url = '/service-worker.js',
+
+  // Allow the middleware to automatically clear all caches. By default this is
+  // disabled as it defeats the point of a service worker and may muck with
+  // other apps running on localhost.
+  autoClearCaches = location.search.includes('diff_autoclear'),
+
+  // Useful for debugging, wipes and doesn't set. Default to the query param
+  // for disable.
+  disable = location.search.includes('diff_disable'),
+
+  // Useful for debugging, logs out service worker events. Default to the query
+  // param to enable.
+  quiet = location.search.includes('diff_quiet'),
+
+  // Defaults to the page root, gets set into the service worker options.
+  scope = '/',
+
+  // The remaining options to be spread into the serviceWorker configuration.
+  options = {},
+}) => assign(function serviceWorkerMiddleware() {}, {
+  subscribe() {
+    const { serviceWorker } = navigator;
+
+    let chain = Promise.resolve();
+
+    // If the user wants to work on the service worker, we need to clear the
+    // old ones out first.
+    if (autoClearCaches) {
+      chain = chain.then(() => clear({ quiet }));
+    }
+
+    // If we're disabling, then clear the c
+    if (disable) {
+      // Iterate through all service workers and remove the old ones.
+      chain = chain.then(() => unregister({ quiet }));
+    }
+
+    // If the user disables the service worker, do not attempt to re-register
+    // it.
+    chain = chain.then(() => {
+      if (!disable) {
+        return serviceWorker.register(url, { scope, ...options })
+      }
+    });
+
+    // If not in quiet mode, echo out some standard messaging and give access
+    // to the objects.
+    if (!quiet) {
+      chain
+        .then(reg => reg && console.warn(
+          'diffHTML ServiceWorker: Registration succeeded', reg
+        ))
+        .catch(err => err && console.warn(
+          'diffHTML ServiceWorker: Registration failed', err
+        ));
+    }
+  },
+
+  unsubscribe() {
+    unregister({ quiet });
+  },
+});
+
+export default opts => wrapper(opts || {});

packages/diffhtml-middleware-service-worker/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "diffhtml-middleware-service-worker",
+  "version": "1.0.0-beta.9",
+  "description": "Helps with service workers",
+  "main": "dist/cjs/index",
+  "module": "dist/es/index",
+  "jsnext:main": "dist/es/index",
+  "esnext:main": "dist/es/index",
+  "scripts": {
+    "prepublish": "npm run min",
+    "clean": "rm -rf dist/* && mkdir -p dist",
+    "min": "npm run build && npm run build-min",
+    "build": "npm run clean && npm run build-umd && npm run build-cjs && npm run build-esm",
+    "build-cjs": "NODE_ENV=cjs babel index.js -d dist/cjs",
+    "build-esm": "NODE_ENV=esm babel index.js -d dist/es",
+    "build-umd": "NODE_ENV=umd rollup -c rollup.config.js",
+    "build-min": "NODE_ENV=min rollup -c rollup.config.js && uglifyjs dist/logger.min.js -o dist/logger.min.js -m -c",
+    "watch": "NODE_ENV=umd rollup -c rollup.config.js -w"
+  },
+  "keywords": [
+    "diffhtml",
+    "service workers",
+    "middleware"
+  ],
+  "author": "Tim Branyen (@tbranyen)",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-preset-diffhtml-imports": "^1.0.0-beta.9",
+    "diffhtml": "^1.0.0-beta.9",
+    "rollup": "^0.41.4",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-replace": "^1.1.1",
+    "rollup-plugin-visualizer": "^0.2.0",
+    "rollup-watch": "^3.2.2",
+    "uglify-js": "^3.0.15"
+  },
+  "peerDependencies": {
+    "diffhtml": "^1.0.0-beta.9"
+  }
+}

packages/diffhtml-middleware-service-worker/rollup.config.js

@@ -0,0 +1,36 @@
+import babel from 'rollup-plugin-babel';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import Visualizer from 'rollup-plugin-visualizer';
+
+const entries = {
+  min: 'index.js',
+  umd: 'index.js',
+};
+
+const dests = {
+  min: 'dist/logger.min.js',
+  umd: 'dist/logger.js',
+}
+
+const { NODE_ENV = 'umd' } = process.env;
+
+export const exports = 'default';
+export const context = 'this';
+export const entry = entries[NODE_ENV];
+export const sourceMap = false;
+export const moduleName = 'logger';
+export const globals = { diffhtml: 'diff' };
+export const external = ['diffhtml'];
+
+export const targets = [{
+  dest: dests[NODE_ENV],
+  format: 'umd',
+}];
+
+export const plugins = [
+  NODE_ENV === 'min' && replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+  babel(),
+  nodeResolve({ jsnext: true }),
+  NODE_ENV === 'umd' && Visualizer({ filename: './dist/build-size.html' }),
+];

packages/diffhtml/lib/index.js

@@ -49,7 +49,7 @@ api.Internals = Internals;
 // Automatically hook up to DevTools if they are present.
 if (typeof devTools !== 'undefined') {
   use(devTools(Internals));
-  console.info('diffHTML DevTools Found and Activated...');
+  console.warn('diffHTML: DevTools Found and Activated...');
 }
 
 export {

packages/diffhtml/lib/runtime.js

@@ -42,7 +42,7 @@ api.Internals = Internals;
 // Automatically hook up to DevTools if they are present.
 if (typeof devTools === 'function') {
   use(devTools(Internals));
-  console.info('diffHTML DevTools Found and Activated...');
+  console.warn('diffHTML: DevTools Found and Activated...');
 }
 
 export {