Fix WebReflection#50 - Added uhtml/json export

WebReflection · WebReflection · commit 498cc8a39ec7 · 2021-06-29T13:38:41.000+02:00
diff --git a/cjs/json.js b/cjs/json.js
@@ -0,0 +1,51 @@
+'use strict';
+const umap = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('umap'));
+const {render: $render, html, svg} = require('./index.js');
+
+// Sender (SW, Worker, postMessage)
+const ids = umap(new WeakMap);
+let id = 0;
+
+const tag = type => (template, ...values) => ({
+  type,
+  template,
+  values,
+  id: ids.get(template) ||
+      ids.set(template, id++)
+});
+
+html.json = tag('html');
+svg.json = tag('svg');
+
+// Receiver (onmessage, from SW, Workers, etc)
+const templates = umap(new Map);
+
+const unroll = ({type, template, values, id}) => (
+  (type === 'svg' ? svg : html).apply(
+    null,
+    [
+      templates.get(id) ||
+      templates.set(id, template)
+    ].concat(values.map(asJSON))
+  )
+);
+
+const asJSON = value => isJSON(value) ? unroll(value) : value;
+
+const isJSON = thing => (
+  typeof thing === 'object' &&
+  thing !== null &&
+  'type' in thing &&
+  'template' in thing &&
+  'values' in thing &&
+  'id' in thing
+);
+
+const render = (where, what) => $render(
+  where,
+  isJSON(what) ? unroll(what) : what
+);
+
+exports.render = render;
+exports.html = html;
+exports.svg = svg;
diff --git a/esm/json.js b/esm/json.js
@@ -0,0 +1,48 @@
+import umap from 'umap';
+import {render as $render, html, svg} from './index.js';
+
+// Sender (SW, Worker, postMessage)
+const ids = umap(new WeakMap);
+let id = 0;
+
+const tag = type => (template, ...values) => ({
+  type,
+  template,
+  values,
+  id: ids.get(template) ||
+      ids.set(template, id++)
+});
+
+html.json = tag('html');
+svg.json = tag('svg');
+
+// Receiver (onmessage, from SW, Workers, etc)
+const templates = umap(new Map);
+
+const unroll = ({type, template, values, id}) => (
+  (type === 'svg' ? svg : html).apply(
+    null,
+    [
+      templates.get(id) ||
+      templates.set(id, template)
+    ].concat(values.map(asJSON))
+  )
+);
+
+const asJSON = value => isJSON(value) ? unroll(value) : value;
+
+const isJSON = thing => (
+  typeof thing === 'object' &&
+  thing !== null &&
+  'type' in thing &&
+  'template' in thing &&
+  'values' in thing &&
+  'id' in thing
+);
+
+const render = (where, what) => $render(
+  where,
+  isJSON(what) ? unroll(what) : what
+);
+
+export {render, html, svg};
diff --git a/package.json b/package.json
@@ -24,24 +24,24 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@ungap/degap": "^0.2.6",
+    "@ungap/degap": "^0.2.7",
     "ascjs": "^5.0.1",
     "c8": "^7.7.3",
-    "coveralls": "^3.1.0",
+    "coveralls": "^3.1.1",
     "drop-babel-typeof": "^1.0.3",
-    "linkedom": "^0.9.3",
-    "rollup": "^2.51.2",
+    "linkedom": "^0.9.7",
+    "rollup": "^2.52.3",
     "rollup-plugin-includepaths": "^0.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "terser": "^5.7.0"
+    "terser": "^5.7.1"
   },
   "dependencies": {
     "@ungap/create-content": "^0.3.1",
     "async-tag": "^0.2.0",
-    "jsx2tag": "^0.2.1",
+    "jsx2tag": "^0.3.0",
     "uarray": "^1.0.0",
     "udomdiff": "^1.1.0",
     "uhandlers": "^0.5.0",
@@ -64,6 +64,10 @@
       "import": "./esm/init.js",
       "default": "./cjs/init.js"
     },
+    "./json": {
+      "import": "./esm/json.js",
+      "default": "./cjs/json.js"
+    },
     "./jsx": {
       "import": "./esm/x.js",
       "default": "./cjs/x.js"
diff --git a/test/json.html b/test/json.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>uhtml/json</title>
+  <script type="module">
+  import {render, html} from '../esm/json.js';
+  const strong = name => html.json`<strong>${name}</strong>`;
+  const greetings = name => html.json`
+    <div>Hello ${strong(name)} 👋</div>
+  `;
+
+  console.log(greetings('console'));
+  render(document.body, greetings('World'));
+  setTimeout(() => {
+    render(document.body, greetings('uhtml/json'));
+  }, 1000);
+  </script>
+</head>
+</html>
