Merge pull request #200 from tbranyen/various-updates

Various updates

CONTRIBUTING.md

@@ -53,6 +53,19 @@ lerna publish
 
 Enter in your new version (using custom), unless you see it listed.
 
+This will automatically crawl nested `package.json` files and update diffhtml
+dependencies to the latest version.
+
+### Ensure all dependencies are updated
+
+Lerna often misses updating references to packages. By running this you ensure
+all packages reference the latest version.
+
+```sh
+# Update the root package version.
+sed -i -e 's/1.0.0-beta.8/1.0.0-beta.9/g' ./packages/*/package.json
+```
+
 ### Update website
 
 The website pulls version information from the package.json files. The version

docs/index.css

@@ -381,7 +381,7 @@ h1 a.github:hover {
 }
 
 /* Tablet */
-@media only screen and (max-width : 1024px) {
+@media only screen and (max-width : 1175px) {
   html, body {
     background-color: #FFF;
     background: #FFF;

packages/babel-plugin-transform-diffhtml/.mocharc.json

@@ -0,0 +1,4 @@
+{
+  "require": ["@babel/register"],
+  "colors": true
+}

packages/babel-plugin-transform-diffhtml/package.json

@@ -15,20 +15,20 @@
   "author": "Tim Branyen (@tbranyen)",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "@babel/register": "^7.6.0",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/register": "^7.10.5",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babelify": "^10.0.0",
     "babylon": "^6.18.0",
-    "browserify": "^16.5.0",
+    "browserify": "^16.5.2",
     "diffhtml": "^1.0.0-beta.18",
-    "jsdom": "^16.2.1",
-    "mocha": "^6.2.0",
+    "jsdom": "^16.4.0",
+    "mocha": "^8.1.1",
     "watchify": "^3.11.1"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/babel-preset-diffhtml-imports/index.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
 
 const ModuleRewrite = require('babel-plugin-module-rewrite').default;
+const OptionalChaining = require('@babel/plugin-proposal-optional-chaining').default;
 const ObjectRestSpread = require('@babel/plugin-proposal-object-rest-spread').default;
 const ClassProperties = require('@babel/plugin-proposal-class-properties').default;
 const ModulesCommonJS = require('@babel/plugin-transform-modules-commonjs').default;
@@ -37,6 +38,7 @@ if (NODE_ENV === 'umd' || NODE_ENV === 'min') {
     TemplateLiterals,
     Classes,
     ForOf,
+    OptionalChaining,
   ];
 }
 
@@ -48,6 +50,7 @@ if (NODE_ENV === 'cjs') {
     ObjectRestSpread,
     ClassProperties,
     ElementClasses,
+    OptionalChaining,
   ];
 }
 
@@ -66,6 +69,7 @@ if (NODE_ENV === 'test' || NODE_ENV === 'test+cov') {
     ModulesCommonJS,
     ObjectRestSpread,
     ClassProperties,
+    OptionalChaining,
   ];
 };
 

packages/babel-preset-diffhtml-imports/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
     "@babel/plugin-transform-block-scoping": "^7.6.0",
     "@babel/plugin-transform-classes": "^7.5.5",

packages/diffhtml-components/package.json

@@ -52,7 +52,7 @@
     "test-cov": "NODE_ENV=test+cov nyc -r=lcov mocha test/_setup test"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   },
   "optionalDependencies": {
     "prop-types": "^15.5.10"

packages/diffhtml-devtools/package.json

@@ -22,9 +22,9 @@
     "aliasify": "^2.1.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-transform-custom-element-classes": "^0.1.0",
-    "babel-plugin-transform-diffhtml": "^1.0.0-beta.17",
+    "babel-plugin-transform-diffhtml": "^1.0.0-beta.18",
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-diffhtml-imports": "^1.0.0-beta.17",
+    "babel-preset-diffhtml-imports": "^1.0.0-beta.18",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^10.0.0",
     "brfs": "^2.0.2",
@@ -67,12 +67,12 @@
   },
   "dependencies": {
     "chartist": "^0.11.0",
-    "diffhtml": "^1.0.0-beta.17",
-    "diffhtml-components": "^1.0.0-beta.17",
-    "diffhtml-middleware-inline-transitions": "^1.0.0-beta.17",
-    "diffhtml-middleware-logger": "^1.0.0-beta.17",
-    "diffhtml-middleware-verify-state": "^1.0.0-beta.17",
-    "diffhtml-react-compat": "^1.0.0-beta.17",
+    "diffhtml": "^1.0.0-beta.18",
+    "diffhtml-components": "^1.0.0-beta.18",
+    "diffhtml-middleware-inline-transitions": "^1.0.0-beta.18",
+    "diffhtml-middleware-logger": "^1.0.0-beta.18",
+    "diffhtml-middleware-verify-state": "^1.0.0-beta.18",
+    "diffhtml-react-compat": "^1.0.0-beta.18",
     "hyperlist": "^1.0.0",
     "react-chartist": "^0.13.3",
     "semantic-ui-react": "0.88.2"

packages/diffhtml-middleware-inline-transitions/package.json

@@ -46,6 +46,6 @@
     "uglify-js": "^3.6.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-middleware-linter/package.json

@@ -38,6 +38,6 @@
     "uglify-js": "^3.5.11"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-middleware-logger/package.json

@@ -38,6 +38,6 @@
     "uglify-js": "^3.6.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

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

@@ -38,6 +38,6 @@
     "uglify-js": "^3.6.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-middleware-synthetic-events/package.json

@@ -39,6 +39,6 @@
     "uglify-js": "^3.6.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-middleware-verify-state/package.json

@@ -39,6 +39,6 @@
     "uglify-js": "^3.6.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-react-compat/package.json

@@ -37,6 +37,6 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
+    "diffhtml": "^1.0.0-beta.18"
   }
 }

packages/diffhtml-render-to-string/.mocharc.json

@@ -0,0 +1,3 @@
+{
+  "colors": true
+}

packages/diffhtml-render-to-string/README.md

@@ -2,8 +2,8 @@
 
 Stable Version: 1.0.0-beta.18
 
-Allows you to render diffHTML markup to string. This is useful for server-side
-rendering, compiling to static HTML, and testing.
+Renders Virtual Tree (VDOM) markup to string. This is useful for server-side
+rendering, static HTML exporting, creating diffs, and testing.
 
 All middleware should work if it can run under Node.js. For instance you can
 use Components by importing from diffhtml-components or get logging by
@@ -29,7 +29,20 @@ const markup = renderToString(html`
 //res.send(markup);
 ```
 
-##### Example components
+##### Passing options
+
+``` javascript
+import { html } from 'diffhtml';
+import { renderToString } from 'diffhtml-render-to-string';
+
+const markup = renderToString(html`
+  <div>Hello world
+`, { parser: { strict: true } });
+
+// throws an error as markup is malformed
+```
+
+##### Using components
 
 ``` javascript
 import { html } from 'diffhtml';

packages/diffhtml-render-to-string/index.js

@@ -1,47 +1,12 @@
-const { use, html, Internals, createTree, innerHTML } = require('diffhtml');
-const { makeDOMNode } = require('quick-dom-node');
+const { Internals, createTree } = require('diffhtml');
 const { keys } = Object;
 
-// Apply a transformation function against the Nodes to produce a string of
-// markup.
-use({ createNodeHook: vTree => makeDOMNode(vTree) });
-
 // Use the same tasks for every run. Maybe in the future we'll allow for
 // passing custom tasks.
 const tasks = new Set(Internals.defaultTasks);
 
-// Remove incompatible tasks, and replace them with serialization-compatible
-// functions.
-tasks.delete(Internals.tasks.reconcileTrees);
-tasks.delete(Internals.tasks.syncTrees);
-tasks.delete(Internals.tasks.patchNode);
+// Replace the `endAsPromise` task with the string return value.
 tasks.delete(Internals.tasks.endAsPromise);
-
-// Add a new reconcile trees function to ensure we are diffing against a tree
-// instead of DOM Node.
-tasks.add(function reconcileTrees(transaction) {
-  const { domNode, markup, options } = transaction;
-
-  // If we are in a render transaction where no markup was previously parsed
-  // then reconcile trees will attempt to create a tree based on the incoming
-  // markup (JSX/html/etc).
-  if (!transaction.newTree) {
-    transaction.newTree = createTree(markup);
-  }
-
-  // Associate the old tree with this brand new transaction. Always ensure that
-  // diffing happens at the root level. This avoids the unnecessary REPLACE
-  // operation that would normally occur under `innerHTML`.
-  transaction.oldTree = domNode;
-
-  // Create a fake, but fast DOM node, replacing the VTree passed in.
-  transaction.domNode = makeDOMNode(domNode);
-});
-
-// Now that the reconcilation phase has been modified, proceed as normal.
-tasks.add(Internals.tasks.syncTrees);
-
-// Return the string.
 tasks.add(function endAsString(transaction) {
   return serializeVTree(transaction.oldTree);
 });
@@ -57,19 +22,15 @@ tasks.add(function endAsString(transaction) {
  * @return {String} of rendered markup representing the input rendered
  */
 exports.renderToString = function renderToString(markup, options = {}) {
-  const parseHTML = options.strict ? html.strict : html;
-  const childNodes = typeof markup === 'string' ? parseHTML(markup) : markup;
-  const newTree = createTree('#document-fragment', {}, childNodes);
-  const oldTree = createTree(newTree.rawNodeName);
+  const oldTree = createTree(null);
+  options.tasks = options.tasks || [...tasks];
+  options.inner = true;
 
-  return innerHTML(oldTree, newTree, { tasks: [...tasks], ...options });
+  return /** @type {String} */ (
+    Internals.Transaction.create(oldTree, markup, options).start()
+  );
 };
 
-// Proxy diffHTML API.
-exports.use = use;
-exports.html = html;
-exports.createTree = createTree;
-
 /**
  * serializeAttributes
  *
@@ -84,7 +45,7 @@ function serializeAttributes(attributes) {
 
   return attrs.length ? ' ' + attrs.map((keyName, i) => {
     const value = attributes[keyName];
-    const isFalsy = !Boolean(value);
+    const isFalsy = !value;
     const isDynamic = typeof value === 'object' || typeof value === 'function';
 
     return `${keyName}${(!isFalsy && !isDynamic) ? `="${String(value)}"` : ''}`;
@@ -99,28 +60,31 @@ function serializeAttributes(attributes) {
  * @param {Object} vTree
  * @return {String}
  */
-function serializeVTree(vTree) {
-  const { attributes, childNodes } = vTree;
-
+function serializeVTree(vTree = {}) {
   let output = '';
+  const { childNodes, nodeType, nodeName: tag, nodeValue, attributes } = vTree;
 
   // Document fragment.
-  if (vTree.nodeType === 11) {
-    vTree.childNodes.forEach(childNode => {
+  if (nodeType === 11) {
+    childNodes.forEach(childNode => {
       output += serializeVTree(childNode);
     });
   }
   // Empty element.
-  else if (!(vTree.childNodes.length) && vTree.nodeType === 1) {
-    output += `<${vTree.nodeName}${serializeAttributes(vTree.attributes)}></${vTree.nodeName}>`;
+  else if (!(childNodes.length) && nodeType === 1) {
+    output += `<${tag}${serializeAttributes(attributes)}></${tag}>`;
   }
   // Text Nodes.
-  else if (vTree.nodeType === 3) {
-    output += vTree.nodeValue;
+  else if (nodeType === 3) {
+    output += nodeValue;
   }
   // Presentational DOM Node.
-  else if (vTree.childNodes.length) {
-    output += `<${vTree.nodeName}${serializeAttributes(vTree.attributes)}>${vTree.childNodes.map(childNode => `${serializeVTree(childNode)}`).join('')}</${vTree.nodeName}>`;
+  else if (childNodes.length) {
+    const children = childNodes.map(childNode =>
+      `${serializeVTree(childNode)}`
+    ).join('');
+
+    output += `<${tag}${serializeAttributes(attributes)}>${children}</${tag}>`;
   }
 
   return output;

packages/diffhtml-render-to-string/package.json

@@ -4,7 +4,7 @@
   "description": "Renders diffHTML Virtual Trees to strings",
   "main": "index.js",
   "scripts": {
-    "test": "mocha --colors",
+    "test": "mocha",
     "test:ci": "npm run test"
   },
   "devDependencies": {
@@ -13,10 +13,7 @@
     "mocha": "^6.2.0"
   },
   "peerDependencies": {
-    "diffhtml": "^1.0.0-beta.17"
-  },
-  "dependencies": {
-    "quick-dom-node": "^1.0.0"
+    "diffhtml": "^1.0.0-beta.18"
   },
   "keywords": [
     "diffhtml",

packages/diffhtml-render-to-string/test/index.js

@@ -22,7 +22,7 @@ describe('renderToString', function() {
 
   it('can support strict html parsing, throwing on error', () => {
     throws(() => {
-      renderToString('<p>Hello world', { strict: true });
+      renderToString('<p>Hello world', { parser: { strict: true } });
     }, {
       name: 'Error',
       message: `