tungsten 0.2.25 → 0.3.0

package/dist/rawHtml/parseHtml.sxyt.js

@@ -0,0 +1,239 @@
+import { describe } from 'sxy-test-runner';
+import { expect } from 'chai';
+import { parseHtml } from "./parseHtml.js";
+import { safeHtmlAllowList } from "./safeHtmlAllowList.js";
+import { decodeHtmlEntities } from "./decodeHtmlEntities.js";
+import { tokenizeHtml } from "./tokenizeHtml.js";
+import { renderingNodeToHtml } from "../render/renderingTreeToHtml.js";
+import { $props, $type } from "../contentNodeSymbols.js";
+// `found: true` short-circuits the <head> handling these tests do not need.
+// eslint-disable-next-line no-type-assertion/no-type-assertion
+const noHeadData = {
+  found: true
+};
+// Renders a parsed tree back to markup. The renderer takes a RenderingNode,
+// which for plain HTML content is structurally what parseHtml returns.
+const render = async content => renderingNodeToHtml(
+// eslint-disable-next-line no-type-assertion/no-type-assertion
+content, false, noHeadData, null);
+const roundTrip = html => render(parseHtml(html));
+describe('decodeHtmlEntities()', ({
+  it
+}) => {
+  it('decodes named, decimal and hex references', () => {
+    expect(decodeHtmlEntities('&pound;100 &amp; more')).to.equal('£100 & more');
+    expect(decodeHtmlEntities('&#65;&#66;')).to.equal('AB');
+    expect(decodeHtmlEntities('&#x41;&#X42;')).to.equal('AB');
+  });
+  it('leaves unknown and malformed references exactly as written', () => {
+    expect(decodeHtmlEntities('&notareal; &amp')).to.equal('&notareal; &amp');
+    expect(decodeHtmlEntities('a & b')).to.equal('a & b');
+  });
+  it('does not throw on out-of-range numeric references', () => {
+    expect(decodeHtmlEntities('&#xFFFFFFFF;')).to.equal('&#xFFFFFFFF;');
+    expect(decodeHtmlEntities('&#0;')).to.equal('&#0;');
+    expect(decodeHtmlEntities('&#xD800;')).to.equal('&#xD800;');
+  });
+});
+describe('tokenizeHtml()', ({
+  it
+}) => {
+  it('reads attributes in every quoting style', () => {
+    const [token] = tokenizeHtml('<a href="/x" title=\'y\' data-n=3 hidden>');
+    expect(token?.kind).to.equal('open');
+    expect(token?.kind === 'open' && token.attributes).to.deep.equal({
+      href: '/x',
+      title: 'y',
+      'data-n': '3',
+      hidden: true
+    });
+  });
+  it('drops comments and doctypes', () => {
+    expect(tokenizeHtml('<!doctype html><!-- hi --><b>x</b>').map(token => token.kind)).to.deep.equal(['open', 'text', 'close']);
+  });
+  it('treats a bare < as text', () => {
+    expect(tokenizeHtml('5 < 6 and 7 > 2')).to.deep.equal([{
+      kind: 'text',
+      text: '5 < 6 and 7 > 2'
+    }]);
+  });
+  it('takes script content as literal text, not markup', () => {
+    expect(tokenizeHtml('<script>if (a<b) x()</script>').map(token => token.kind)).to.deep.equal(['open', 'text', 'close']);
+  });
+  // scanning for the first > would cut this tag short and build a tree the
+  // browser disagrees with
+  it('does not end a tag at a > inside a quoted attribute value', () => {
+    const [token] = tokenizeHtml('<a title="a > b" href="/x">');
+    expect(token?.kind === 'open' && token.attributes).to.deep.equal({
+      title: 'a > b',
+      href: '/x'
+    });
+  });
+});
+describe('parseHtml()', ({
+  it
+}) => {
+  it('returns null for empty and non-string input', () => {
+    expect(parseHtml('')).to.equal(null);
+    // eslint-disable-next-line no-type-assertion/no-type-assertion
+    expect(parseHtml(undefined)).to.equal(null);
+  });
+  it('builds an element tree with decoded text', async () => {
+    const content = parseHtml('<p>Bonus &pound;100</p>');
+    // eslint-disable-next-line no-type-assertion/no-type-assertion
+    const node = content;
+    expect(node[$type]).to.equal('p');
+    expect(node[$props].children).to.equal('Bonus £100');
+  });
+  it('maps class to className and style to css, which the renderer expects', async () => {
+    expect(await roundTrip('<p class="a b" style="color: red">x</p>')).to.equal('<p class="a b" style="color: red">x</p>');
+  });
+  it('keeps sibling paragraphs as siblings rather than nesting them', async () => {
+    expect(await roundTrip('<p>one</p><p>two</p>')).to.equal('<p>one</p><p>two</p>');
+  });
+  // The rule that broke the dashboard: a browser closes an open <p> at the
+  // next block-level start tag, so the parser must too, or the tree and the
+  // DOM disagree and hydration walks off the end.
+  it('applies the implied end tag that closes a p at a block element', async () => {
+    expect(await roundTrip('<p>one<div>two</div>')).to.equal('<p>one</p><div>two</div>');
+  });
+  it('closes list items and table cells implicitly', async () => {
+    expect(await roundTrip('<ul><li>a<li>b</ul>')).to.equal('<ul><li>a</li><li>b</li></ul>');
+    expect(await roundTrip('<table><tbody><tr><td>a<td>b</tbody></table>')).to.equal('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>');
+  });
+  // Parsers disagree over whether whitespace survives inside a table, so the
+  // markup carries none — the tree and the DOM then agree either way.
+  it('drops whitespace between table tags', async () => {
+    expect(await roundTrip('<table>\n<tbody>\n<tr><td>a</td></tr>\n</tbody>\n</table>')).to.equal('<table><tbody><tr><td>a</td></tr></tbody></table>');
+  });
+  it('foster-parents real text out to just before the table', async () => {
+    expect(await roundTrip('<table><tbody>stray<tr><td>a</td></tr></tbody></table>')).to.equal('stray<table><tbody><tr><td>a</td></tr></tbody></table>');
+  });
+  it('leaves stray text alone in lists and selects, which do not relocate it', async () => {
+    expect(await roundTrip('<ul>loose<li>a</li></ul>')).to.equal('<ul>loose<li>a</li></ul>');
+  });
+  it('handles void and self-closing elements', async () => {
+    expect(await roundTrip('<p>a<br>b<img src="/x" />c</p>')).to.equal('<p>a<br />b<img src="/x" />c</p>');
+  });
+});
+describe('parseHtml() resilience', ({
+  it
+}) => {
+  // "Safe" here means it always produces something renderable, whatever it
+  // is handed. None of these may throw.
+  const malformed = ['<p>unclosed', '</p>stray end tag', '<p><b>crossed</p></b>', '<<>><p>x</p>', '<p class="unterminated>x</p>', '<!-- never closed', '<p', '<>', '<p><p><p><p>deep', '&&&;&#;&#x;', '<div><span></div></span>', '<TABLE><TR><TD>caps</TD></TR></TABLE>'];
+  for (const html of malformed) {
+    it(`does not throw on ${JSON.stringify(html)}`, async () => {
+      const content = parseHtml(html);
+      const rendered = await render(content);
+      expect(rendered).to.be.a('string');
+    });
+  }
+  it('keeps the text of an unclosed element', async () => {
+    expect(await roundTrip('<p>unclosed')).to.equal('<p>unclosed</p>');
+  });
+  it('ignores a stray end tag but keeps its text', async () => {
+    expect(await roundTrip('</p>after')).to.equal('after');
+  });
+});
+describe('parseHtml() sanitizing', ({
+  it
+}) => {
+  it('drops script elements together with their contents', async () => {
+    expect(await roundTrip('<p>a</p><script>alert(1)</script><p>b</p>')).to.equal('<p>a</p><p>b</p>');
+  });
+  it('drops on* handler attributes', async () => {
+    expect(await roundTrip('<p onclick="alert(1)" onerror="x()" title="keep">a</p>')).to.equal('<p title="keep">a</p>');
+  });
+  it('drops javascript: urls, including obfuscated ones', async () => {
+    expect(await roundTrip('<a href="javascript:alert(1)">x</a>')).to.equal('<a>x</a>');
+    expect(await roundTrip('<a href="  JaVaScRiPt:alert(1)">x</a>')).to.equal('<a>x</a>');
+    // browsers ignore control characters inside the scheme, so this runs
+    expect(await roundTrip('<a href="java\tscript:alert(1)">x</a>')).to.equal('<a>x</a>');
+    expect(await roundTrip('<a href="vbscript:x">x</a>')).to.equal('<a>x</a>');
+    expect(await roundTrip('<a href="/safe">x</a>')).to.equal('<a href="/safe">x</a>');
+    expect(await roundTrip('<a href="https://x.test/">x</a>')).to.equal('<a href="https://x.test/">x</a>');
+  });
+  it('bars data: urls from navigation but allows them as image sources', async () => {
+    expect(await roundTrip('<a href="data:text/html,hello">x</a>')).to.equal('<a>x</a>');
+    expect(await roundTrip('<img src="data:image/png;base64,AAAA" />')).to.equal('<img src="data:image/png;base64,AAAA" />');
+  });
+  it('keeps handler attributes out even when sanitizing is off', async () => {
+    // Tungsten reads on* props as event listeners, so a string there is a
+    // hydration fault, not just a security question.
+    const content = parseHtml('<p onclick="alert(1)">a</p>', {
+      sanitize: false
+    });
+    expect(await render(content)).to.equal('<p>a</p>');
+  });
+  it('keeps scripts when sanitizing is turned off', async () => {
+    const content = parseHtml('<div><script>x()</script></div>', {
+      sanitize: false
+    });
+    expect(await render(content)).to.equal('<div><script>x()</script></div>');
+  });
+});
+describe('parseHtml() allow lists', ({
+  it
+}) => {
+  const withList = (html, allowList) => render(parseHtml(html, {
+    allowList
+  }));
+  const onlyEmphasis = {
+    tags: ['p', 'em'],
+    attributes: []
+  };
+  it('keeps listed tags and unwraps unlisted ones, preserving their text', async () => {
+    expect(await withList('<p>keep <em>this</em> and <b>that</b></p>', onlyEmphasis)).to.equal('<p>keep <em>this</em> and that</p>');
+  });
+  it('unwraps an unlisted element without losing its listed descendants', async () => {
+    expect(await withList('<div><p>inner</p></div>', onlyEmphasis)).to.equal('<p>inner</p>');
+  });
+  it('drops program-text elements entirely rather than unwrapping them', async () => {
+    // unwrapping <style> would put its CSS on the page as visible text
+    expect(await withList('<p>a</p><style>p { color: red }</style>', onlyEmphasis)).to.equal('<p>a</p>');
+  });
+  it('keeps only listed attributes', async () => {
+    const list = {
+      tags: ['p'],
+      attributes: ['title']
+    };
+    expect(await withList('<p title="t" id="i" data-x="1">a</p>', list)).to.equal('<p title="t">a</p>');
+  });
+  it('applies per-tag attributes only to their own tag', async () => {
+    const list = {
+      tags: ['a', 'p'],
+      attributes: [],
+      tagAttributes: {
+        a: ['href']
+      }
+    };
+    expect(await withList('<a href="/x">link</a><p href="/y">para</p>', list)).to.equal('<a href="/x">link</a><p>para</p>');
+  });
+});
+describe('safeHtmlAllowList', ({
+  it
+}) => {
+  const safely = html => render(parseHtml(html, {
+    allowList: safeHtmlAllowList
+  }));
+  it('keeps ordinary authored rich text intact', async () => {
+    const html = '<h2>Title</h2><p>Some <strong>bold</strong> and <em>italic</em>.</p>' + '<ul><li>one</li><li>two</li></ul>';
+    expect(await safely(html)).to.equal(html);
+  });
+  it('keeps tables with their layout attributes', async () => {
+    const html = '<table><tbody><tr><th align="left">H</th><td colspan="2">C</td></tr></tbody></table>';
+    expect(await safely(html)).to.equal(html);
+  });
+  it('keeps links and images with their own attributes', async () => {
+    expect(await safely('<a href="/x" target="_blank" rel="noopener">go</a>')).to.equal('<a href="/x" target="_blank" rel="noopener">go</a>');
+    expect(await safely('<img src="/a.png" alt="a" width="10" />')).to.equal('<img src="/a.png" alt="a" width="10" />');
+  });
+  it('strips style attributes, which can disguise the page without any script', async () => {
+    expect(await safely('<p style="position:fixed;top:0">a</p>')).to.equal('<p>a</p>');
+  });
+  it('removes embedding and form elements but keeps their text', async () => {
+    expect(await safely('<iframe src="//evil"></iframe><p>a</p>')).to.equal('<p>a</p>');
+    expect(await safely('<form><p>a</p></form>')).to.equal('<p>a</p>');
+  });
+});

package/dist/rawHtml/safeHtmlAllowList.d.ts

@@ -0,0 +1,18 @@
+import type { HtmlAllowList } from './HtmlAllowList.js';
+/**
+ * A conservative allow list for authored rich text — the shape a CMS or WYSIWYG
+ * field produces: headings, paragraphs, lists, tables, links, images, emphasis.
+ *
+ * Reach for this via `<RawHtml safe />`, or import it and spread it into your
+ * own list where an application needs more.
+ *
+ * Deliberately absent:
+ *
+ * - `style`, on any element. Attacker-controlled CSS can reposition and
+ *   disguise page furniture, so it is a real vector even without script.
+ * - `script`, `iframe`, `object`, `embed`, `form`, `input`, `button`.
+ * - `target` without `rel`: `target="_blank"` hands the opener window to the
+ *   linked page, so `rel` is allowed alongside it to be set to `noopener`.
+ */
+export declare const safeHtmlAllowList: HtmlAllowList;
+//# sourceMappingURL=safeHtmlAllowList.d.ts.map

package/dist/rawHtml/safeHtmlAllowList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeHtmlAllowList.d.ts","sourceRoot":"","sources":["../../src/rawHtml/safeHtmlAllowList.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,aAmC/B,CAAA"}

package/dist/rawHtml/safeHtmlAllowList.js

@@ -0,0 +1,47 @@
+/**
+ * A conservative allow list for authored rich text — the shape a CMS or WYSIWYG
+ * field produces: headings, paragraphs, lists, tables, links, images, emphasis.
+ *
+ * Reach for this via `<RawHtml safe />`, or import it and spread it into your
+ * own list where an application needs more.
+ *
+ * Deliberately absent:
+ *
+ * - `style`, on any element. Attacker-controlled CSS can reposition and
+ *   disguise page furniture, so it is a real vector even without script.
+ * - `script`, `iframe`, `object`, `embed`, `form`, `input`, `button`.
+ * - `target` without `rel`: `target="_blank"` hands the opener window to the
+ *   linked page, so `rel` is allowed alongside it to be set to `noopener`.
+ */
+export const safeHtmlAllowList = {
+  tags: [
+  // text flow
+  'p', 'br', 'hr', 'span', 'div', 'blockquote', 'pre', 'code',
+  // headings
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  // emphasis
+  'strong', 'b', 'em', 'i', 'u', 's', 'strike', 'sub', 'sup', 'small', 'mark',
+  // lists
+  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+  // tables
+  'table', 'caption', 'colgroup', 'col', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+  // media and links
+  'a', 'img', 'figure', 'figcaption'],
+  attributes: ['class', 'id', 'title', 'dir', 'lang'],
+  tagAttributes: {
+    a: ['href', 'target', 'rel', 'name'],
+    img: ['src', 'alt', 'width', 'height', 'loading'],
+    td: ['colspan', 'rowspan', 'align', 'valign', 'scope', 'headers'],
+    th: ['colspan', 'rowspan', 'align', 'valign', 'scope', 'headers', 'abbr'],
+    tr: ['align', 'valign'],
+    table: ['align', 'summary'],
+    thead: ['align', 'valign'],
+    tbody: ['align', 'valign'],
+    tfoot: ['align', 'valign'],
+    col: ['span', 'align', 'valign', 'width'],
+    colgroup: ['span', 'align', 'valign', 'width'],
+    ol: ['start', 'type', 'reversed'],
+    ul: ['type'],
+    li: ['value']
+  }
+};

package/dist/rawHtml/tokenizeHtml.d.ts

@@ -0,0 +1,25 @@
+export type HtmlAttributes = Record<string, string | true>;
+export type HtmlToken = {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'open';
+    name: string;
+    attributes: HtmlAttributes;
+    selfClosing: boolean;
+} | {
+    kind: 'close';
+    name: string;
+};
+/**
+ * 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 declare function tokenizeHtml(html: string): HtmlToken[];
+//# sourceMappingURL=tokenizeHtml.d.ts.map

package/dist/rawHtml/tokenizeHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizeHtml.d.ts","sourceRoot":"","sources":["../../src/rawHtml/tokenizeHtml.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAA;AAE1D,MAAM,MAAM,SAAS,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,cAAc,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,GAChF;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAoDrC;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,CA4FtD"}

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"}