tungsten 0.2.24 → 0.3.0

package/dist/rawHtml/tokenizeHtml.js

@@ -0,0 +1,148 @@
+import { decodeHtmlEntities } from "./decodeHtmlEntities.js";
+import { htmlRawTextTags } from "./htmlParsingTags.js";
+// REGEX: < then optional / then a letter -- the only thing that starts a tag.
+// Anything else after a < is literal text, which is how browsers treat it too.
+const tagStart = /<\/?[a-zA-Z]/;
+// REGEX:
+// optional whitespace, then an attribute name (anything but whitespace, /, >, =),
+// then optionally = and a value: "double quoted", 'single quoted', or bare.
+const attributePattern = /\s*([^\s/>=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]*)))?/g;
+/**
+ * Index of the `>` that ends a tag, or -1.
+ *
+ * A `>` inside a quoted attribute value is ordinary text, so scanning for the
+ * first one would cut tags such as `<a title="a > b">` short and build a tree
+ * the browser does not agree with.
+ */
+function findTagEnd(source) {
+  let quote = '';
+  for (let i = 1; i < source.length; i++) {
+    const character = source[i];
+    if (quote !== '') {
+      if (character === quote) quote = '';
+    } else if (character === '"' || character === '\'') {
+      quote = character;
+    } else if (character === '>') {
+      return i;
+    }
+  }
+  return -1;
+}
+function parseAttributes(source) {
+  const attributes = {};
+  attributePattern.lastIndex = 0;
+  let match;
+  while ((match = attributePattern.exec(source)) !== null) {
+    // A zero-length match cannot advance lastIndex, so bail rather than spin.
+    if (match[0] === '') break;
+    const name = match[1];
+    if (name === undefined || name === '') continue;
+    const value = match[2] ?? match[3] ?? match[4];
+    attributes[name] = value === undefined ? true : decodeHtmlEntities(value);
+  }
+  return attributes;
+}
+/**
+ * Splits raw markup into text, start and end tokens.
+ *
+ * Never throws. Anything that is not well-formed markup — a stray `<`, an
+ * unterminated tag, a comment that is never closed — is emitted as text or
+ * skipped, matching what a browser does with the same input.
+ *
+ * Comments and doctypes are dropped: Tungsten uses comment nodes as its own
+ * component markers, so carrying authored ones through would confuse hydration.
+ */
+export function tokenizeHtml(html) {
+  const tokens = [];
+  let rest = html;
+  const pushText = text => {
+    if (text !== '') tokens.push({
+      kind: 'text',
+      text: decodeHtmlEntities(text)
+    });
+  };
+  while (rest !== '') {
+    const next = rest.search(tagStart);
+    // no more tags: the remainder is all text
+    if (next === -1) {
+      const comment = rest.indexOf('<!');
+      if (comment === -1) {
+        pushText(rest);
+        break;
+      }
+      pushText(rest.slice(0, comment));
+      rest = rest.slice(comment);
+    } else if (next > 0) {
+      const markup = rest.indexOf('<!');
+      if (markup !== -1 && markup < next) {
+        pushText(rest.slice(0, markup));
+        rest = rest.slice(markup);
+      } else {
+        pushText(rest.slice(0, next));
+        rest = rest.slice(next);
+      }
+    }
+    // comment or doctype - skip it
+    if (rest.startsWith('<!')) {
+      if (rest.startsWith('<!--')) {
+        const end = rest.indexOf('-->', 4);
+        // never closed: the rest of the document is inside the comment
+        if (end === -1) break;
+        rest = rest.slice(end + 3);
+      } else {
+        const end = rest.indexOf('>');
+        if (end === -1) break;
+        rest = rest.slice(end + 1);
+      }
+      continue;
+    }
+    if (!rest.startsWith('<')) continue;
+    const end = findTagEnd(rest);
+    // unterminated tag: treat what is left as text, as a browser does
+    if (end === -1) {
+      pushText(rest);
+      break;
+    }
+    const inner = rest.slice(1, end);
+    rest = rest.slice(end + 1);
+    if (inner.startsWith('/')) {
+      tokens.push({
+        kind: 'close',
+        name: inner.slice(1).trim().toLowerCase()
+      });
+      continue;
+    }
+    const selfClosing = inner.endsWith('/');
+    const body = selfClosing ? inner.slice(0, -1) : inner;
+    // REGEX: leading run of tag-name characters
+    const nameMatch = /^[^\s/>]+/.exec(body);
+    const name = (nameMatch?.[0] ?? '').toLowerCase();
+    if (name === '') continue;
+    tokens.push({
+      kind: 'open',
+      name,
+      attributes: parseAttributes(body.slice(name.length)),
+      selfClosing
+    });
+    // raw-text elements hold text, not markup, up to their closing tag
+    if (name in htmlRawTextTags && !selfClosing) {
+      const closeTag = `</${name}`;
+      const closeAt = rest.toLowerCase().indexOf(closeTag);
+      const text = closeAt === -1 ? rest : rest.slice(0, closeAt);
+      if (text !== '') {
+        // script and style hold literal program text; textarea and
+        // title hold ordinary text, so their entities are decoded.
+        tokens.push({
+          kind: 'text',
+          text: htmlRawTextTags[name] === 'escapable' ? decodeHtmlEntities(text) : text
+        });
+      }
+      if (closeAt === -1) {
+        rest = '';
+        break;
+      }
+      rest = rest.slice(closeAt);
+    }
+  }
+  return tokens;
+}

package/dist/render/processHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"processHead.d.ts","sourceRoot":"","sources":["../../src/render/processHead.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAK7C,OAAO,EAAE,oBAAoB,EAAqB,MAAM,qBAAqB,CAAA;AAO7E,wBAAgB,WAAW,CACvB,QAAQ,EAAE,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,QAoGrB"}
+{"version":3,"file":"processHead.d.ts","sourceRoot":"","sources":["../../src/render/processHead.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAK7C,OAAO,EAAE,oBAAoB,EAAqB,MAAM,qBAAqB,CAAA;AAO7E,wBAAgB,WAAW,CACvB,QAAQ,EAAE,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,QAmHrB"}

package/dist/render/processHead.js

@@ -59,6 +59,16 @@ export function processHead(headNode, headData) {
     };
     cjsHelpersScriptNode[$props].type = 'module';
     headNode[$props].children.unshift(cjsHelpersScriptNode);
+    // auto-reload the page whenever the dev build finishes recompiling.
+    // this is a plain full-page reload signal, not module-level hot patching.
+    const liveReloadScriptNode = {
+      [$type]: 'script',
+      [$props]: {
+        'data--t-internal': undefined,
+        children: `(function(){` + `var es=new EventSource('${siteBasePath}/__tungsten_live_reload__');` + `es.addEventListener('js',function(){location.reload()});` + `es.addEventListener('css',function(){location.reload()});` + `})();`
+      }
+    };
+    headNode[$props].children.unshift(liveReloadScriptNode);
   }
   const {
     content: _,

package/dist/render/processProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"processProps.d.ts","sourceRoot":"","sources":["../../src/render/processProps.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AAuBjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,6BAA6B,iCA2ChE"}
+{"version":3,"file":"processProps.d.ts","sourceRoot":"","sources":["../../src/render/processProps.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AAoBjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,6BAA6B,iCA8ChE"}

package/dist/render/processProps.js

@@ -1,10 +1,19 @@
 import { objects } from 'sxy-lib';
 import { jssToCss } from "../style/jssToCss.js";
-const omitProps = ['ref', 'onClick', 'onChange', 'onSubmit', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onMouseDown', 'onMouseUp', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onMouseOut', '__zoneHtml', '__opaque'];
+import { StringIsHtmlEvent } from "../htmlEvents.js";
+// Props that are instructions to Tungsten rather than HTML attributes.
+//
+// Event handlers are not listed here: they are recognised with
+// StringIsHtmlEvent, the same test the client uses. This list previously named
+// a dozen of them by hand and so let the rest — onInput, onFocus, onBlur,
+// onScroll and the rest of htmlEvents — through into the markup as attributes
+// holding a stringified function, and left the server and client disagreeing
+// about which props are attributes at all.
+const omitProps = ['ref', '__zoneHtml', '__opaque', 'dangerouslySetInnerHTML'];
 //// !!!! We need to handle bind here
 export function processProps(props) {
   props = objects.filter(props, key => {
-    return !omitProps.includes(key);
+    return !omitProps.includes(key) && !StringIsHtmlEvent(key);
   });
   // if ('className' in props) {
   //     if ('class' in props) {
@@ -36,6 +45,9 @@ export function processProps(props) {
     } else {
       props.style = props.css;
     }
+    // css is Tungsten's raw-string form of style, not an HTML attribute.
+    // It cannot go in omitProps, which is applied before it is read here.
+    delete props.css;
   }
   //delete props.bind
   return props;

package/dist/render/processProps.sxyt.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=processProps.sxyt.d.ts.map

package/dist/render/processProps.sxyt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processProps.sxyt.d.ts","sourceRoot":"","sources":["../../src/render/processProps.sxyt.ts"],"names":[],"mappings":""}

package/dist/render/processProps.sxyt.js

@@ -0,0 +1,90 @@
+import { describe } from 'sxy-test-runner';
+import { expect } from 'chai';
+import { processProps } from "./processProps.js";
+import { htmlEvents } from "../htmlEvents.js";
+describe('processProps()', ({
+  it
+}) => {
+  it('keeps ordinary attributes', () => {
+    expect(processProps({
+      name: 'a',
+      title: 't',
+      'data-x': '1'
+    })).to.deep.equal({
+      name: 'a',
+      title: 't',
+      'data-x': '1'
+    });
+  });
+  // The list of handlers used to be written out by hand and missed most of
+  // them, so anything not named leaked into the markup as an attribute
+  // holding a stringified function.
+  it('strips every event handler Tungsten recognises, not a hand-picked few', () => {
+    const handlers = Object.fromEntries(Object.keys(htmlEvents).map(name => [name, () => undefined]));
+    expect(processProps({
+      ...handlers,
+      name: 'a'
+    })).to.deep.equal({
+      name: 'a'
+    });
+  });
+  it('strips the handlers that were missing from the old list', () => {
+    const kept = processProps({
+      onInput: () => undefined,
+      onFocus: () => undefined,
+      onBlur: () => undefined,
+      onScroll: () => undefined,
+      onPaste: () => undefined,
+      name: 'a'
+    });
+    expect(Object.keys(kept)).to.deep.equal(['name']);
+  });
+  it('strips props that are instructions to Tungsten rather than attributes', () => {
+    const kept = processProps({
+      ref: {
+        current: null
+      },
+      __zoneHtml: '<b>x</b>',
+      __opaque: true,
+      dangerouslySetInnerHTML: {
+        __html: '<b>x</b>'
+      },
+      name: 'a'
+    });
+    expect(Object.keys(kept)).to.deep.equal(['name']);
+  });
+  it('renames className to class', () => {
+    expect(processProps({
+      className: 'a b'
+    })).to.deep.equal({
+      class: 'a b'
+    });
+    // a raw class prop is dropped; className is the one that reaches HTML
+    expect(processProps({
+      class: 'ignored'
+    })).to.deep.equal({});
+  });
+  it('turns a style object into a css string', () => {
+    expect(processProps({
+      style: {
+        backgroundColor: 'red'
+      }
+    }).style).to.equal('background-color: red;');
+  });
+  it('folds css into style and does not leave css behind as an attribute', () => {
+    const kept = processProps({
+      css: 'color: red'
+    });
+    expect(kept.style).to.equal('color: red');
+    expect('css' in kept).to.equal(false);
+  });
+  it('does not mutate the props it is given', () => {
+    const props = {
+      className: 'a',
+      onClick: () => undefined,
+      name: 'n'
+    };
+    processProps(props);
+    expect(Object.keys(props).sort()).to.deep.equal(['className', 'name', 'onClick']);
+  });
+});

package/dist/render/renderingTreeToHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderingTreeToHtml.d.ts","sourceRoot":"","sources":["../../src/render/renderingTreeToHtml.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAY7C,OAAO,EACH,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAG7C,MAAM,qBAAqB,CAAA;AAS5B,wBAAsB,mBAAmB,CACrC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAC1D,UAAU,EAAE,iBAAiB,GAAG,IAAI,GACrC,OAAO,CAAC,MAAM,CAAC,CA4IjB"}
+{"version":3,"file":"renderingTreeToHtml.d.ts","sourceRoot":"","sources":["../../src/render/renderingTreeToHtml.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAY7C,OAAO,EACH,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAG7C,MAAM,qBAAqB,CAAA;AAU5B,wBAAsB,mBAAmB,CACrC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAC1D,UAAU,EAAE,iBAAiB,GAAG,IAAI,GACrC,OAAO,CAAC,MAAM,CAAC,CAwJjB"}

package/dist/render/renderingTreeToHtml.js

@@ -13,6 +13,7 @@ import { printComponentNamesInSource } from "./printComponentNameInSource.js";
 import { RenderingNodeElementIsComponent, RenderingNodeElementIsHtml } from "../RenderingNode.js";
 import { processHead } from "./processHead.js";
 import { processRenderingNodeHtml } from "./processRenderingNodeHtml.js";
+import { innerHtmlFromProps } from "../innerHtmlFromProps.js";
 //// Maybe we should build the full tree before rendering
 //// may need some merging with componentTreeToHtml
 export async function renderingNodeToHtml(node, noEscape, headData, lastSelect) {
@@ -93,6 +94,13 @@ export async function renderingNodeToHtml(node, noEscape, headData, lastSelect)
       ...attribProps
     } = node[$props]);
     debug('validChildren(children)', validRenderingChildren(children));
+    const innerHtml = innerHtmlFromProps(type, node[$props], validRenderingChildren(children));
+    if (innerHtml !== null) {
+      if (type in htmlVoidTags) {
+        throw new TungstenError(`nodeToHtml() error: node type ${type} is an HTML void type` + ` (cannot have children), but the node has dangerouslySetInnerHTML.`);
+      }
+      return html + `<${type}${attribs}>${innerHtml}</${type}>`;
+    }
     if (validRenderingChildren(children)) {
       if (type in htmlVoidTags) {
         throw new TungstenError(`nodeToHtml() error: node ${JSON.stringify(node)} type ${type} is an HTML void type` + ` (cannot have children), but the node has children.`);

package/dist/routing/RouteTypes.d.ts

@@ -1,6 +1,6 @@
 import type { Routes } from './Routes.js';
 export type Path = `/${string}`;
-export type RouteKey = Path | 'default' | '404';
+export type RouteKey = Path | 'default' | '404' | 'error';
 export declare function StringIsValidRouteKey(string: string, routes: Routes): string is RouteKey;
 export declare function StringIsPath(string: string): string is Path;
 export declare function RouteKeyIsPath(path: RouteKey): path is Path;

package/dist/routing/RouteTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteTypes.d.ts","sourceRoot":"","sources":["../../src/routing/RouteTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAA;AAC/B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAA;AAC/C,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,QAAQ,CAExF;AACD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,IAAI,CAE3D;AACD,wBAAgB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,IAAI,IAAI,CAE3D"}
+{"version":3,"file":"RouteTypes.d.ts","sourceRoot":"","sources":["../../src/routing/RouteTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAA;AAC/B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAA;AACzD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,QAAQ,CAExF;AACD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,IAAI,CAE3D;AACD,wBAAgB,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,IAAI,IAAI,CAE3D"}

package/dist/routing/routeSymbols.d.ts

@@ -0,0 +1,9 @@
+export declare const $notFound: unique symbol;
+export type $NotFound = typeof $notFound;
+export declare const $404: unique symbol;
+export type $404 = typeof $404;
+export declare const $default: unique symbol;
+export type $Default = typeof $default;
+export declare const $error: unique symbol;
+export type $Error = typeof $error;
+//# sourceMappingURL=routeSymbols.d.ts.map

package/dist/routing/routeSymbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routeSymbols.d.ts","sourceRoot":"","sources":["../../src/routing/routeSymbols.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,SAAS,eAAqB,CAAA;AAC3C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAA;AAExC,eAAO,MAAM,IAAI,eAAgB,CAAA;AACjC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAA;AAE9B,eAAO,MAAM,QAAQ,eAAoB,CAAA;AACzC,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAA;AAEtC,eAAO,MAAM,MAAM,eAAkB,CAAA;AACrC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAA"}

package/dist/routing/routeSymbols.js

@@ -0,0 +1,4 @@
+export const $notFound = Symbol('notFound');
+export const $404 = Symbol('404');
+export const $default = Symbol('default');
+export const $error = Symbol('error');

package/dist/update/integrateUpdateVdom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integrateUpdateVdom.d.ts","sourceRoot":"","sources":["../../src/update/integrateUpdateVdom.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EACH,WAAW,EAAwC,eAAe,EAElE,uBAAuB,EAG1B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAKlD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAGjD,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAA;AAE1D,OAAO,EACe,mBAAmB,EAIT,4BAA4B,EAI3D,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAUhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAA;AAGlE,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC5C,wBAAwB,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,UAAU,KAAK,GAAG,CAAA;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB,CAAA;AAYD,wBAAsB,0BAA0B,CAC5C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,GAC/C,OAAO,CAAC,YAAY,CAAC,CA0GvB;AA+fD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,mBAAmB,QAuC5E;AAgED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,QAkK7E;AA6VD,KAAK,2BAA2B,GAAG;IAC/B,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,uBAAuB,CAAC;IAE9B,UAAU,EAAE,UAAU,CAAA;CACzB,CAAA;AACD,wBAAsB,uBAAuB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAC3G,OAAO,CAAC,4BAA4B,CAAC,CAU1C;AAED,MAAM,MAAM,mBAAmB,CAC3B,aAAa,SAAS,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,IACzD;IACA,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,CAAA;IACtC,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAsB,2BAA2B,CAC7C,aAAa,SAAS,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,EAEzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAC3C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAC/C,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,GACvB,OAAO,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAgD7C;AAED,wBAAgB,kBAAkB,CAC9B,IAAI,EAAE,mBAAmB,CAAC,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAC/D,IAAI,CAON"}
+{"version":3,"file":"integrateUpdateVdom.d.ts","sourceRoot":"","sources":["../../src/update/integrateUpdateVdom.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EACH,WAAW,EAAwC,eAAe,EAElE,uBAAuB,EAG1B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAKlD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAGjD,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAA;AAE1D,OAAO,EACe,mBAAmB,EAIT,4BAA4B,EAI3D,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAYhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAA;AAGlE,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC5C,wBAAwB,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,UAAU,KAAK,GAAG,CAAA;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACzB,CAAA;AAYD,wBAAsB,0BAA0B,CAC5C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,GAC/C,OAAO,CAAC,YAAY,CAAC,CA0GvB;AA8gBD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,mBAAmB,QAuC5E;AAgED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,QAkK7E;AA0WD,KAAK,2BAA2B,GAAG;IAC/B,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,uBAAuB,CAAC;IAE9B,UAAU,EAAE,UAAU,CAAA;CACzB,CAAA;AACD,wBAAsB,uBAAuB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAC3G,OAAO,CAAC,4BAA4B,CAAC,CAU1C;AAED,MAAM,MAAM,mBAAmB,CAC3B,aAAa,SAAS,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,IACzD;IACA,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,CAAA;IACtC,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAsB,2BAA2B,CAC7C,aAAa,SAAS,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,EAEzD,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAC3C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAC/C,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,GACvB,OAAO,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAgD7C;AAED,wBAAgB,kBAAkB,CAC9B,IAAI,EAAE,mBAAmB,CAAC,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAC/D,IAAI,CAON"}

package/dist/update/integrateUpdateVdom.js

@@ -17,6 +17,8 @@ import { $key, $props, $routeData, $routeParams, $type } from "../contentNodeSym
 import { printComponentNamesInSource } from "../render/printComponentNameInSource.js";
 import { bindableHtmlElementsNumber, bindableHtmlElementsString } from "../components/bindable/bindableHtmlElements.js";
 import { checkedValueToBoolean } from "../checkedValueToBoolean.js";
+import { innerHtmlFromProps } from "../innerHtmlFromProps.js";
+import { validChildren } from "../validChildren.js";
 import { setCurrentComponent } from 'tungsten/hooks/setCurrentComponent.js';
 import { clearCurrentComponent } from 'tungsten/hooks/clearCurrentComponent.js';
 import { isDev } from "../isDev.js";
@@ -401,6 +403,15 @@ async function updateHtmlElement(tungstenElement, instance, newNode, oldNode, do
   //console.log(newNode[$type], 'children', newChildren)
   const oldChildren = oldNode.renderedChildren;
   //console.log('oldChildren', oldChildren)
+  const newInnerHtml = innerHtmlFromProps(newNode[$type], newNode[$props], validChildren(newChildren));
+  if (newInnerHtml !== null) {
+    // Replacing the markup wholesale is the only option: Tungsten holds the
+    // subtree as one opaque string and cannot diff it. Guarded so an update
+    // for an unrelated reason does not discard DOM state under the host.
+    const oldInnerHtml = innerHtmlFromProps(oldNode[$type], oldNode[$props], false);
+    if (newInnerHtml !== oldInnerHtml) domNode.innerHTML = newInnerHtml;
+    return makeRenderedContentNodeHtml(newNode, domNode, oldChildren);
+  }
   const renderedChildren = newNode[$props].__opaque === true ? oldChildren : await applyUpdate({
     tungstenElement: tungstenElement,
     instance,
@@ -783,13 +794,22 @@ async function createHtmlElement(tungstenElement, instance, node, domPointer, pa
   //!!!! node.domElement = el
   if (IsHTMLElement(domPointer.parent)) debug('***', node[$type], 'html created', htmlEl);
   // children
-  const renderedChildren = await createNode({
-    tungstenElement: tungstenElement,
-    instance,
-    newNode: node[$props].children,
-    domPointer: new DomPointer(htmlEl, htmlEl.childNodes.length),
-    parentNode: node
-  });
+  const innerHtml = innerHtmlFromProps(node[$type], node[$props], validChildren(node[$props].children));
+  let renderedChildren;
+  if (innerHtml !== null) {
+    // The raw markup owns the whole subtree, so there is nothing to create
+    // and nothing to record as rendered children.
+    htmlEl.innerHTML = innerHtml;
+    renderedChildren = makeRenderedContentNodeNonRendered();
+  } else {
+    renderedChildren = await createNode({
+      tungstenElement: tungstenElement,
+      instance,
+      newNode: node[$props].children,
+      domPointer: new DomPointer(htmlEl, htmlEl.childNodes.length),
+      parentNode: node
+    });
+  }
   if (node[$type] === 'select') {
     if (node[$props].value !== undefined && node[$props].value !== null) {
       htmlEl.value = String(node[$props].value);
@@ -930,6 +950,7 @@ function processAttributes(node) {
   delete attributes.ref;
   delete attributes.__zoneHtml;
   delete attributes.__opaque;
+  delete attributes.dangerouslySetInnerHTML;
   delete attributes.class;
   if (attributes.className !== undefined) attributes.class = attributes.className;
   delete attributes.className;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tungsten",
-  "version": "0.2.24",
+  "version": "0.3.0",
   "description": "",
   "type": "module",
   "bin": {
@@ -134,8 +134,8 @@
   "scripts": {
     "__build": "pnpm clean && pnpm build-prep && pnpm build-watch",
     "build": "run-s -c clean build-prep build-watch",
-    "clean": "rimraf intermed && rimraf dist",
-    "build-once": "rimraf intermed && rimraf dist && pnpm build-ts-once && pnpm build-babel-once",
+    "clean": "rimraf intermed dist",
+    "build-once": "rimraf intermed dist && pnpm build-ts-once && pnpm build-babel-once",
     "build-quick": "pnpm build-watch",
     "build-prep": "pnpm build-ts-once",
     "build-watch": "run-p build-ts build-babel",