5.0.0

Author: WebReflection

.gitignore

@@ -1,28 +1,6 @@
-.nyc_output/
+.DS_Store
+.nyc_output
+v8.log
 coverage/
+dist/
 node_modules/
-types/
-cjs/*
-!cjs/package.json
-dom.js
-esm/init*.js
-init*.js
-worker.js
-keyed.js
-!esm/keyed.js
-!esm/dom/keyed.js
-index.js
-!esm/index.js
-!esm/dom/index.js
-node.js
-!esm/node.js
-!esm/dom/node.js
-!test/dom/node.js
-reactive.js
-!esm/reactive.js
-!esm/render/reactive.js
-signal.js
-!esm/signal.js
-!esm/render/signal.js
-preactive.js
-!test/preactive.js

.npmignore

@@ -78,6 +78,14 @@ On top of *JSX* like features, there are other attributes with a special meaning
 
 All other attributes will be handled via standard `setAttribute` or `removeAttribute` when the passed value is either `null` or `undefined`.
 
+### Special Elements
+
+Elements that contain *data* such as `<script>` or `<style>`, or those that contains text such as `<textarea>` require *explicit closing tag* to avoid having in between templates able to break the layout.
+
+This is nothing new to learn, it's just how the Web works, so that one cannot have `</script>` within a `<script>` tag content and the same applies in here.
+
+In *debugging* mode, an error telling you which template is malformed will be triggered in these cases.
+
 ### About Comments
 
 Useful for developers but never really relevant for end users, *comments* are ignored by default in *uhtml* except for those flagged as "*very important*".

README.md

@@ -1,14 +1,17 @@
 {
   "name": "@webreflection/uhtml",
-  "version": "4.7.1",
+  "version": "5.0.0",
   "type": "module",
   "scripts": {
-    "build": "npm run types && npm test && npm run build:prod && npm run build:dev && npm run size",
+    "build": "npm run types && npm run build:js",
+    "build:js": "npm test && npm run build:prod && npm run build:dev && npm run size",
     "build:dev": "sed -i 's/false/true/' src/debug.js && rollup -c build/dev.js",
     "build:prod": "sed -i 's/true/false/' src/debug.js && rollup -c build/prod.js",
     "coverage": "mkdir -p ./coverage; c8 report --reporter=text-lcov > ./coverage/lcov.info",
     "size": "echo \"dom\t\t$(cat dist/prod/dom.js | brotli | wc -c)\"; echo \"json\t\t$(cat dist/prod/json.js | brotli | wc -c)\"; echo \"parser\t\t$(cat dist/prod/parser.js | brotli | wc -c)\"",
-    "test": "node test/json.js && c8 node test/parser.js",
+    "test": "c8 node test/parser.js",
+    "test:json": "node test/json.js",
+    "test:all": "npm run test:json && npm run test",
     "types": "tsc --allowJs --checkJs --lib dom,esnext --moduleResolution nodenext --module NodeNext --target esnext -d --emitDeclarationOnly --outDir ./types ./src/*.js ./src/*/*.js"
   },
   "files": [

package-lock.json

@@ -0,0 +1,116 @@
+//@ts-check
+
+import DEBUG from '../debug.js';
+
+//@ts-ignore
+import { effectScope } from '@webreflection/alien-signals';
+export { signal, computed, effect, untracked, batch } from './signals.js';
+
+import {
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+} from './ish.js';
+
+import parser from '../parser/index.js';
+import { Hole, dom } from './rabbit.js';
+import { Keyed } from './keyed.js';
+import { isKeyed, fragment, update } from './update.js';
+import { diffFragment } from './persistent-fragment.js';
+
+import { _get as getDirect, _set as setDirect } from './direct.js';
+
+import { unsafe } from '../utils.js';
+export { Hole, fragment, unsafe };
+
+/** @typedef {globalThis.Element | globalThis.HTMLElement | globalThis.SVGSVGElement | globalThis.DocumentFragment} Container */
+
+const parse = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  update,
+});
+
+/**
+ * @param {boolean} xml
+ * @param {WeakMap<TemplateStringsArray | string[], [any, any[], Keyed?]>} twm
+ * @returns
+ */
+const create = (xml, twm = new WeakMap) =>
+  /**
+   * @param {TemplateStringsArray | string[]} template
+   * @param {unknown[]} values
+   * @returns {Hole}
+   */
+  (template, ...values) => {
+    let parsed = twm.get(template);
+    if (!parsed) {
+      parsed = parse(template, values, xml);
+      parsed.push(isKeyed() ? new Keyed : null);
+      if (DEBUG) parsed.push(template);
+      parsed[0] = fragment(parsed[0].toString(), xml);
+      twm.set(template, parsed);
+    }
+    return new Hole(parsed, values);
+  };
+
+const htmlHole = create(false);
+const svgHole = create(true);
+
+const rendered = new WeakMap;
+
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | HTMLElement | Hole}
+ */
+export function html(template, ...values) {
+  const hole = htmlHole.apply(null, arguments);
+  return getDirect() ? hole.valueOf(true) : hole;
+}
+
+/**
+ * @param {TemplateStringsArray | string[]} template
+ * @param {any[]} values
+ * @returns {Node | SVGSVGElement | Hole}
+ */
+export function svg(template, ...values) {
+  const hole = svgHole.apply(null, arguments);
+  return getDirect() ? hole.valueOf(true) : hole;
+}
+
+/**
+ * @param {Container} where
+ * @param {Function | Node | Container} what
+ * @returns
+ */
+export const render = (where, what) => {
+  const known = rendered.get(where);
+  if (known) known[0]();
+  if (typeof what === 'function') {
+    setDirect(false);
+    let hole;
+    const scope = effectScope(() => { hole = what() });
+    //@ts-ignore
+    if (!known || known[1].t !== hole.t) {
+      //@ts-ignore
+      const d = hole.valueOf(false);
+      where.replaceChildren(d);
+    }
+    else known[1].update(hole);
+    rendered.set(where, [scope, hole]);
+  }
+  else {
+    setDirect(true);
+    rendered.delete(where);
+    where.replaceChildren(what instanceof Hole ? dom(what) : diffFragment(what, 1));
+  }
+  return where;
+};

package.json

@@ -0,0 +1,27 @@
+export const keyed = new WeakMap;
+
+//@ts-ignore
+export class Keyed extends Map {
+  constructor() {
+    //@ts-ignore
+    super()._ = new FinalizationRegistry(key => this.delete(key));
+  }
+
+  get(key) {
+    const node = super.get(key)?.deref();
+    return node && keyed.get(node);
+  }
+
+  /**
+   * @param {any} key
+   * @param {Node} node
+   * @param {import('./rabbit.js').Hole} hole
+   */
+  //@ts-ignore
+  set(key, node, hole) {
+    keyed.set(node, hole);
+    //@ts-ignore
+    this._.register(node, key);
+    super.set(key, new WeakRef(node));
+  }
+}

src/dom/index.js

@@ -0,0 +1,68 @@
+import DEBUG from '../debug.js';
+import errors from '../errors.js';
+import { assign } from '../utils.js';
+
+import {
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  fromJSON,
+} from '../dom/ish.js';
+
+import parser from '../parser/index.js';
+import resolve from './resolve.js';
+import { COMPONENT, KEY, comment, update } from './update.js';
+
+const textParser = parser({
+  Comment,
+  DocumentType,
+  Text,
+  Fragment,
+  Element,
+  Component,
+  update,
+});
+
+const { parse, stringify } = JSON;
+
+const create = xml => {
+  const twm = new WeakMap;
+  const cache = (template, values) => {
+    const parsed = textParser(template, values, xml);
+    parsed[0] = parse(stringify(parsed[0]));
+    twm.set(template, parsed);
+    return parsed;
+  };
+  return (template, ...values) => {
+    const [json, updates] = twm.get(template) || cache(template, values);
+    const root = fromJSON(json);
+    const length = values.length;
+    if (length === updates.length) {
+      const components = [];
+      for (let node, prev, i = 0; i < length; i++) {
+        const [path, update, type] = updates[i];
+        const value = values[i];
+        if (prev !== path) {
+          node = resolve(root, path);
+          prev = path;
+          if (DEBUG && !node) throw errors.invalid_path(path);
+        }
+        if (type === KEY) continue;
+        if (type === COMPONENT) components.push(update(node, value));
+        else update(node, value);
+      }
+      for (const [node, Component] of components) {
+        const props = assign({ children: node.children }, node.props);
+        comment(node, Component(props));
+      }
+    }
+    else if (DEBUG) throw errors.invalid_template();
+    return root;
+  };
+};
+
+export const html = create(false);
+export const svg = create(true);