@rohal12/spindle 0.52.8 → 0.52.9

package/dist/pkg/headless.js

@@ -3767,6 +3767,7 @@ var RawTextContext = createContext(false);
 * no live form properties, so they are set as written (see splitAttributes).
 */
 var SvgContext = createContext(false);
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 /** Elements whose content is literal text, not markdown. */
 var PREFORMATTED_ELEMENTS = new Set(["pre", "textarea"]);
 var WidgetChildrenContext = createContext(null);
@@ -3811,20 +3812,42 @@ function expandPlaceholderText(text, ph) {
 	return splitPlaceholderText(text, ph).map((part) => typeof part === "number" ? ph.components[part] : part);
 }
 /**
-* An element whose attributes contain placeholders (a variable in image alt
-* text or a link title). Each such attribute is evaluated as text against
-* the store and locals, so it follows its variables as the component would.
+* An element of markdown output whose attributes contain placeholders (a
+* variable in image alt text or a link title). Each such attribute is
+* evaluated as text against the store and locals, so it follows its
+* variables as the component would.
 */
-function PlaceholderAttributes({ tag, props, attributes, children }) {
+function PlaceholderAttributes({ tag, attributes, placeholders, svg, children }) {
 	const scope = useTextScope();
-	const resolved = { ...props };
 	const errors = [];
-	for (const [name, nodes] of Object.entries(attributes)) {
+	const { props, direct } = splitAttributes(attributes.map(([name, value, written]) => {
+		const nodes = placeholders[name];
+		if (!nodes) return [
+			name,
+			value,
+			written
+		];
 		const result = renderText(nodes, scope);
-		resolved[name] = result.text;
 		for (const error of result.errors) errors.push([name, error]);
-	}
-	return withAttributeErrors(errors, h(tag, resolved, ...children));
+		return [
+			name,
+			result.text,
+			written
+		];
+	}), svg);
+	const ref = useDirectAttributes(direct);
+	return withAttributeErrors(errors, h(tag, ref ? {
+		...props,
+		ref
+	} : props, ...children));
+}
+/** An element of markdown output with attributes to set directly. */
+function DirectAttributes({ tag, props, direct, children }) {
+	const ref = useDirectAttributes(direct);
+	return h(tag, {
+		...props,
+		ref
+	}, ...children);
 }
 /**
 * Show the errors met in an element's attributes in front of it, the way a
@@ -3846,16 +3869,29 @@ function placeholderIndex(node, ph) {
 	return parseInt(value.slice(prefix.length), 10);
 }
 /**
+* Parse HTML into nodes without side effects. The content of a `<template>`
+* belongs to a document with no browsing context, so parsing it fetches no
+* images and media, runs no inline event handlers (`<img onerror>`) and
+* constructs no custom elements. A detached `<div>` belongs to the page's
+* document, which does all of these while parsing.
+*/
+function parseHtmlInert(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	return template.content;
+}
+/**
 * Convert an HTML string (from micromark) to Preact VNodes,
 * replacing placeholder elements with pre-rendered components.
 * With `unwrapParagraphs` (nobr or inline content), top-level <p> wrappers are
 * replaced by their children.
 */
 function htmlToPreact(html, ph, unwrapParagraphs = false) {
-	const temp = document.createElement("div");
-	temp.innerHTML = html.trim();
-	if (unwrapParagraphs) for (const p of Array.from(temp.querySelectorAll(":scope > p"))) p.replaceWith(...Array.from(p.childNodes));
-	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(temp.childNodes).map((child, i) => convertDomNode(child, i, ph)) });
+	const content = parseHtmlInert(html.trim());
+	if (unwrapParagraphs) {
+		for (const child of Array.from(content.childNodes)) if (child.nodeType === Node.ELEMENT_NODE && child.nodeName === "P") child.replaceWith(...Array.from(child.childNodes));
+	}
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(content.childNodes).map((child, i) => convertDomNode(child, i, ph)) });
 }
 function convertDomNode(node, key, ph) {
 	if (node.nodeType === Node.TEXT_NODE) {
@@ -3869,25 +3905,36 @@ function convertDomNode(node, key, ph) {
 		const tag = el.localName;
 		const idx = placeholderIndex(el, ph);
 		if (idx !== -1) return ph.components[idx];
-		const props = {};
-		let withPlaceholders;
-		for (const attr of Array.from(el.attributes)) {
-			const parts = splitPlaceholderText(attr.value, ph);
-			if (parts.every((part) => typeof part === "string")) {
-				props[attr.name] = attr.value;
-				continue;
-			}
-			withPlaceholders ??= {};
-			withPlaceholders[attr.name] = parts.map((part) => typeof part === "string" ? {
+		const svg = el.namespaceURI === SVG_NAMESPACE;
+		const attributes = [];
+		let placeholders;
+		for (const { name, value } of Array.from(el.attributes)) {
+			attributes.push([
+				name,
+				value,
+				value
+			]);
+			const parts = splitPlaceholderText(value, ph);
+			if (parts.every((part) => typeof part === "string")) continue;
+			placeholders ??= {};
+			placeholders[name] = parts.map((part) => typeof part === "string" ? {
 				type: "text",
 				value: part
 			} : ph.nodes[part]);
 		}
 		const children = Array.from(el.childNodes).map((child, i) => convertDomNode(child, i, ph));
-		if (withPlaceholders) return /* @__PURE__ */ jsx(PlaceholderAttributes, {
+		if (placeholders) return /* @__PURE__ */ jsx(PlaceholderAttributes, {
+			tag,
+			attributes,
+			placeholders,
+			svg,
+			children
+		}, key);
+		const { props, direct } = splitAttributes(attributes, svg);
+		if (direct.length > 0) return /* @__PURE__ */ jsx(DirectAttributes, {
 			tag,
 			props,
-			attributes: withPlaceholders,
+			direct,
 			children
 		}, key);
 		return h(tag, {
@@ -4002,9 +4049,7 @@ function setRawAttribute(el, name, value) {
 		el.setAttribute(name, value);
 		return;
 	}
-	const template = document.createElement("template");
-	template.innerHTML = `<i ${name}=""></i>`;
-	const parsed = template.content.firstChild.attributes[0];
+	const parsed = parseHtmlInert(`<i ${name}=""></i>`).firstChild.attributes[0];
 	if (!parsed) return;
 	const attr = parsed.cloneNode();
 	attr.value = value;
@@ -4042,6 +4087,23 @@ function splitAttributes(attributes, svg) {
 		direct
 	};
 }
+/**
+* Set the attributes `splitAttributes` leaves to set directly on the element
+* given the returned ref (none if there are none), and remove them again
+* when they change.
+*/
+function useDirectAttributes(direct) {
+	const elementRef = useRef(null);
+	useLayoutEffect(() => {
+		const el = elementRef.current;
+		if (!el || direct.length === 0) return;
+		for (const [name, value] of direct) setRawAttribute(el, name, value);
+		return () => {
+			for (const [name] of direct) el.removeAttribute(name);
+		};
+	}, [JSON.stringify(direct)]);
+	return direct.length > 0 ? elementRef : void 0;
+}
 var decodedAttributeText = /* @__PURE__ */ new Map();
 /**
 * Decode character references (`&amp;`, `&#123;`) in attribute text the way
@@ -4051,9 +4113,7 @@ function decodeAttributeText(text) {
 	if (!text.includes("&")) return text;
 	let decoded = decodedAttributeText.get(text);
 	if (decoded === void 0) {
-		const template = document.createElement("template");
-		template.innerHTML = `<i title="${text.replace(/"/g, "&quot;")}"></i>`;
-		decoded = template.content.firstChild.getAttribute("title") ?? text;
+		decoded = parseHtmlInert(`<i title="${text.replace(/"/g, "&quot;")}"></i>`).firstChild.getAttribute("title") ?? text;
 		decodedAttributeText.set(text, decoded);
 	}
 	return decoded;
@@ -4118,16 +4178,8 @@ function HtmlNodeRenderer({ node }) {
 		resolveAttributeValue(k, v, scope, errors),
 		v
 	]), inSvg || isSvgRoot);
-	const elementRef = useRef(null);
-	useLayoutEffect(() => {
-		const el = elementRef.current;
-		if (!el || direct.length === 0) return;
-		for (const [name, value] of direct) setRawAttribute(el, name, value);
-		return () => {
-			for (const [name] of direct) el.removeAttribute(name);
-		};
-	}, [JSON.stringify(direct)]);
-	if (direct.length > 0) props.ref = elementRef;
+	const ref = useDirectAttributes(direct);
+	if (ref) props.ref = ref;
 	const isInline = INLINE_ELEMENTS.has(tag);
 	let children = void 0;
 	if (node.children.length > 0) if (inRaw || isRawRoot) children = renderInlineNodes(node.children);
@@ -7335,19 +7387,92 @@ function App() {
 }
 //#endregion
 //#region src/parser.ts
+var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+/** HTML elements written without content or end tag, as innerHTML does. */
+var VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"basefont",
+	"bgsound",
+	"br",
+	"col",
+	"embed",
+	"frame",
+	"hr",
+	"img",
+	"input",
+	"keygen",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+/**
+* The passage markup in the nodes of passage data.
+*
+* A compiler that HTML-escapes passage text (Twine, Tweego) leaves a text
+* node whose text is the markup; a no-break space in it is U+00A0, which
+* innerHTML writes as `&nbsp;`. One that doesn't escape it leaves the
+* browser's parse of it, whose elements are written back as markup here.
+* innerHTML did that too, but its escaping can't be undone: a `"` in an
+* attribute value is written `&quot;`, and decoding that ends the value
+* early, while text it leaves unescaped (in `<style>`, comments) would be
+* decoded wrongly.
+*/
+function passageMarkup(parent) {
+	let markup = "";
+	for (const node of Array.from(parent.childNodes)) if (node.nodeType === Node.TEXT_NODE) markup += node.data;
+	else if (node.nodeType === Node.COMMENT_NODE) markup += `<!--${node.data}-->`;
+	else if (node.nodeType === Node.ELEMENT_NODE) markup += elementMarkup(node);
+	return markup;
+}
+/** An element of passage data as markup (see passageMarkup). */
+function elementMarkup(el) {
+	const name = el.localName;
+	let markup = `<${name}`;
+	for (const attr of Array.from(el.attributes)) markup += ` ${attr.name}=${quoteAttribute(attr.name, attr.value)}`;
+	markup += ">";
+	if (el.namespaceURI === HTML_NAMESPACE && VOID_ELEMENTS.has(name)) return markup;
+	const content = name === "template" ? el.content : el;
+	return `${markup}${passageMarkup(content)}</${name}>`;
+}
+/**
+* An attribute value quoted so that the passage tokenizer reads it back:
+* in double quotes, else single ones, else with the double quotes in its
+* text written as `&quot;`, which rendering decodes. Quotes inside markup in
+* the value (`{print "a"}`) are code, and don't end it.
+*/
+function quoteAttribute(name, value) {
+	const code = isCodeAttribute(name);
+	const probe = code ? "on" : "a";
+	const readsBack = (quoted) => {
+		const tokens = tokenize(`<i ${probe}=${quoted}>`);
+		const tag = tokens[0];
+		return tokens.length === 1 && tag?.type === "html" && tag.attributes[probe] === quoted.slice(1, -1);
+	};
+	return [`"${value}"`, `'${value}'`].find(readsBack) ?? `"${escapeTextQuotes(value, code)}"`;
+}
 /**
-* Decode the HTML entities that browsers use when serializing innerHTML.
-* &amp; is decoded last to avoid double-decoding (e.g. &amp;lt; → &lt;, not <).
+* `value` with the double quotes in its text written as `&quot;`, but not
+* those in markup (`{print "a"}`) or, in a code attribute, in sigil
+* references (see splitSigilTemplate), which are code.
 */
-function decodeHtmlEntities(html) {
-	return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&amp;/g, "&");
+function escapeTextQuotes(value, code) {
+	const escape = (text) => text.replace(/"/g, "&quot;");
+	if (code) return splitSigilTemplate(value).map((part) => "text" in part ? escape(part.text) : "expr" in part ? `{${part.expr}}` : part.verbatim).join("");
+	return tokenize(value, { text: true }).map((token) => {
+		const source = value.slice(token.start, token.end);
+		return token.type === "text" ? escape(source) : source;
+	}).join("");
 }
 /**
 * Parse <tw-storydata> and all <tw-passagedata> elements from the DOM.
 *
-* Uses innerHTML + entity decoding instead of textContent so that HTML
-* tags inside passage markup (e.g. <div> inside {button}) are preserved
-* regardless of whether the compiler HTML-encoded them.
+* Passage content is read with passageMarkup instead of textContent, so
+* that HTML tags inside passage markup (e.g. <div> inside {button}) are
+* preserved whether or not the compiler HTML-encoded them.
 */
 function parseStoryData() {
 	const storyEl = document.querySelector("tw-storydata");
@@ -7365,7 +7490,7 @@ function parseStoryData() {
 		const pid = parseInt(el.getAttribute("pid") || "0", 10);
 		const passageName = el.getAttribute("name") || "";
 		const tags = (el.getAttribute("tags") || "").split(/\s+/).filter((t) => t.length > 0);
-		const content = decodeHtmlEntities(el.innerHTML);
+		const content = passageMarkup(el);
 		const metadata = {};
 		const skipAttrs = new Set([
 			"pid",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.52.8",
+  "version": "0.52.9",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/markup/render.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'preact';
+import { createContext, type RefObject } from 'preact';
 import { useContext, useLayoutEffect, useRef } from 'preact/hooks';
 import { VarDisplay } from '../components/macros/VarDisplay';
 import { ExprDisplay } from '../components/macros/ExprDisplay';
@@ -63,6 +63,8 @@ export const RawTextContext = createContext(false);
  */
 const SvgContext = createContext(false);
 
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+
 /** Elements whose content is literal text, not markdown. */
 const PREFORMATTED_ELEMENTS = new Set(['pre', 'textarea']);
 export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
@@ -139,31 +141,59 @@ function expandPlaceholderText(
   );
 }
 
+/** An attribute: its name, value and value as written (see splitAttributes). */
+type Attribute = [name: string, value: string, written: string];
+
 /**
- * An element whose attributes contain placeholders (a variable in image alt
- * text or a link title). Each such attribute is evaluated as text against
- * the store and locals, so it follows its variables as the component would.
+ * An element of markdown output whose attributes contain placeholders (a
+ * variable in image alt text or a link title). Each such attribute is
+ * evaluated as text against the store and locals, so it follows its
+ * variables as the component would.
  */
 function PlaceholderAttributes({
   tag,
-  props,
   attributes,
+  placeholders,
+  svg,
   children,
 }: {
   tag: string;
-  props: Record<string, string>;
-  attributes: Record<string, ASTNode[]>;
+  attributes: Attribute[];
+  placeholders: Record<string, ASTNode[]>;
+  svg: boolean;
   children: preact.ComponentChildren[];
 }) {
   const scope = useTextScope();
-  const resolved: Record<string, string> = { ...props };
   const errors: AttributeError[] = [];
-  for (const [name, nodes] of Object.entries(attributes)) {
+  const resolved = attributes.map(([name, value, written]): Attribute => {
+    const nodes = placeholders[name];
+    if (!nodes) return [name, value, written];
     const result = renderText(nodes, scope);
-    resolved[name] = result.text;
     for (const error of result.errors) errors.push([name, error]);
-  }
-  return withAttributeErrors(errors, h(tag, resolved, ...children));
+    return [name, result.text, written];
+  });
+  const { props, direct } = splitAttributes(resolved, svg);
+  const ref = useDirectAttributes(direct);
+  return withAttributeErrors(
+    errors,
+    h(tag, ref ? { ...props, ref } : props, ...children),
+  );
+}
+
+/** An element of markdown output with attributes to set directly. */
+function DirectAttributes({
+  tag,
+  props,
+  direct,
+  children,
+}: {
+  tag: string;
+  props: Record<string, unknown>;
+  direct: [string, string][];
+  children: preact.ComponentChildren[];
+}) {
+  const ref = useDirectAttributes(direct);
+  return h(tag, { ...props, ref }, ...children);
 }
 
 /** An error met while evaluating the named attribute. */
@@ -201,6 +231,19 @@ function placeholderIndex(node: Node | null, ph: Placeholders): number {
   return parseInt(value.slice(prefix.length), 10);
 }
 
+/**
+ * Parse HTML into nodes without side effects. The content of a `<template>`
+ * belongs to a document with no browsing context, so parsing it fetches no
+ * images and media, runs no inline event handlers (`<img onerror>`) and
+ * constructs no custom elements. A detached `<div>` belongs to the page's
+ * document, which does all of these while parsing.
+ */
+export function parseHtmlInert(html: string): DocumentFragment {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content;
+}
+
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
  * replacing placeholder elements with pre-rendered components.
@@ -212,14 +255,15 @@ function htmlToPreact(
   ph: Placeholders,
   unwrapParagraphs = false,
 ): preact.ComponentChildren {
-  const temp = document.createElement('div');
-  temp.innerHTML = html.trim();
+  const content = parseHtmlInert(html.trim());
   if (unwrapParagraphs) {
-    for (const p of Array.from(temp.querySelectorAll(':scope > p'))) {
-      p.replaceWith(...Array.from(p.childNodes));
+    for (const child of Array.from(content.childNodes)) {
+      if (child.nodeType === Node.ELEMENT_NODE && child.nodeName === 'P') {
+        (child as Element).replaceWith(...Array.from(child.childNodes));
+      }
     }
   }
-  const children = Array.from(temp.childNodes).map((child, i) =>
+  const children = Array.from(content.childNodes).map((child, i) =>
     convertDomNode(child, i, ph),
   );
   return <>{children}</>;
@@ -252,17 +296,17 @@ function convertDomNode(
       return ph.components[idx];
     }
 
-    // Convert attributes
-    const props: Record<string, string> = {};
-    let withPlaceholders: Record<string, ASTNode[]> | undefined;
-    for (const attr of Array.from(el.attributes)) {
-      const parts = splitPlaceholderText(attr.value, ph);
-      if (parts.every((part) => typeof part === 'string')) {
-        props[attr.name] = attr.value;
-        continue;
-      }
-      withPlaceholders ??= {};
-      withPlaceholders[attr.name] = parts.map(
+    // Convert attributes, as author HTML's (see splitAttributes): markdown
+    // output holds raw HTML the passage tokenizer didn't take as a tag
+    const svg = el.namespaceURI === SVG_NAMESPACE;
+    const attributes: Attribute[] = [];
+    let placeholders: Record<string, ASTNode[]> | undefined;
+    for (const { name, value } of Array.from(el.attributes)) {
+      attributes.push([name, value, value]);
+      const parts = splitPlaceholderText(value, ph);
+      if (parts.every((part) => typeof part === 'string')) continue;
+      placeholders ??= {};
+      placeholders[name] = parts.map(
         (part): ASTNode =>
           typeof part === 'string'
             ? { type: 'text', value: part }
@@ -275,13 +319,26 @@ function convertDomNode(
       convertDomNode(child, i, ph),
     );
 
-    if (withPlaceholders) {
+    if (placeholders) {
       return (
         <PlaceholderAttributes
+          key={key}
+          tag={tag}
+          attributes={attributes}
+          placeholders={placeholders}
+          svg={svg}
+          children={children}
+        />
+      );
+    }
+    const { props, direct } = splitAttributes(attributes, svg);
+    if (direct.length > 0) {
+      return (
+        <DirectAttributes
           key={key}
           tag={tag}
           props={props}
-          attributes={withPlaceholders}
+          direct={direct}
           children={children}
         />
       );
@@ -395,9 +452,8 @@ function setRawAttribute(el: Element, name: string, value: string) {
     el.setAttribute(name, value);
     return;
   }
-  const template = document.createElement('template');
-  template.innerHTML = `<i ${name}=""></i>`;
-  const parsed = (template.content.firstChild as Element).attributes[0];
+  const parsed = (parseHtmlInert(`<i ${name}=""></i>`).firstChild as Element)
+    .attributes[0];
   if (!parsed) return;
   const attr = parsed.cloneNode() as Attr;
   attr.value = value;
@@ -422,7 +478,7 @@ function setRawAttribute(el: Element, name: string, value: string) {
  * `className` into `class`) are set directly instead.
  */
 function splitAttributes(
-  attributes: [name: string, value: string, written: string][],
+  attributes: Attribute[],
   svg: boolean,
 ): { props: Record<string, unknown>; direct: [string, string][] } {
   const props: Record<string, unknown> = {};
@@ -447,6 +503,27 @@ function splitAttributes(
   return { props, direct };
 }
 
+/**
+ * Set the attributes `splitAttributes` leaves to set directly on the element
+ * given the returned ref (none if there are none), and remove them again
+ * when they change.
+ */
+function useDirectAttributes(
+  direct: [string, string][],
+): RefObject<Element> | undefined {
+  const elementRef = useRef<Element>(null);
+  const directKey = JSON.stringify(direct);
+  useLayoutEffect(() => {
+    const el = elementRef.current;
+    if (!el || direct.length === 0) return;
+    for (const [name, value] of direct) setRawAttribute(el, name, value);
+    return () => {
+      for (const [name] of direct) el.removeAttribute(name);
+    };
+  }, [directKey]);
+  return direct.length > 0 ? elementRef : undefined;
+}
+
 const decodedAttributeText = new Map<string, string>();
 
 /**
@@ -457,10 +534,10 @@ function decodeAttributeText(text: string): string {
   if (!text.includes('&')) return text;
   let decoded = decodedAttributeText.get(text);
   if (decoded === undefined) {
-    const template = document.createElement('template');
-    template.innerHTML = `<i title="${text.replace(/"/g, '&quot;')}"></i>`;
+    const html = `<i title="${text.replace(/"/g, '&quot;')}"></i>`;
     decoded =
-      (template.content.firstChild as Element).getAttribute('title') ?? text;
+      (parseHtmlInert(html).firstChild as Element).getAttribute('title') ??
+      text;
     decodedAttributeText.set(text, decoded);
   }
   return decoded;
@@ -532,24 +609,11 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const isRawRoot = !inRaw && (isSvgRoot || PREFORMATTED_ELEMENTS.has(tag));
   const errors: AttributeError[] = [];
   const resolved = Object.entries(node.attributes).map(
-    ([k, v]): [string, string, string] => [
-      k,
-      resolveAttributeValue(k, v, scope, errors),
-      v,
-    ],
+    ([k, v]): Attribute => [k, resolveAttributeValue(k, v, scope, errors), v],
   );
   const { props, direct } = splitAttributes(resolved, inSvg || isSvgRoot);
-  const elementRef = useRef<Element>(null);
-  const directKey = JSON.stringify(direct);
-  useLayoutEffect(() => {
-    const el = elementRef.current;
-    if (!el || direct.length === 0) return;
-    for (const [name, value] of direct) setRawAttribute(el, name, value);
-    return () => {
-      for (const [name] of direct) el.removeAttribute(name);
-    };
-  }, [directKey]);
-  if (direct.length > 0) props.ref = elementRef;
+  const ref = useDirectAttributes(direct);
+  if (ref) props.ref = ref;
   const isInline = INLINE_ELEMENTS.has(tag);
   // Inside SVG and preformatted elements, skip markdown processing entirely
   // (see RawTextContext).