@reckona/mreact-compiler 0.0.132 → 0.0.135

package/src/emit-server-shared.ts

@@ -291,6 +291,21 @@ export function htmlAttributeName(name: string): string {
   return HTML_ATTRIBUTE_ALIASES[name] ?? name;
 }
 
+export function isBooleanishStringAttribute(name: string): boolean {
+  const attributeName = htmlAttributeName(name).toLowerCase();
+  return (
+    attributeName.startsWith("aria-") ||
+    attributeName.startsWith("data-") ||
+    BOOLEANISH_STRING_ATTRIBUTES.has(attributeName)
+  );
+}
+
+const BOOLEANISH_STRING_ATTRIBUTES = new Set<string>([
+  "contenteditable",
+  "draggable",
+  "spellcheck",
+]);
+
 function unwrapParenthesized(code: string): string {
   let current = code;
 

package/src/emit-server-stream.ts

@@ -18,6 +18,7 @@ import {
 import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
 import {
   htmlAttributeName,
+  isBooleanishStringAttribute,
   isDangerousHtmlAttribute,
   isStaticUrlValueUnsafe,
   isUrlAttribute,
@@ -286,7 +287,12 @@ function emitClientBoundaryHelper(name: string): string {
     `  const _props = props ?? {};`,
     `  const _nonSerializable = ${propsHelperName}(_props);`,
     `  const _nonSerializableAttr = _nonSerializable ? ' data-mreact-client-boundary-nonserializable="true"' : "";`,
-    `  const _json = (JSON.stringify(_props) ?? "{}").replaceAll("<", "\\\\u003c");`,
+    `  const _json = (JSON.stringify(_props) ?? "{}")`,
+    `    .replaceAll("&", "\\\\u0026")`,
+    `    .replaceAll("<", "\\\\u003c")`,
+    `    .replaceAll(">", "\\\\u003e")`,
+    `    .replaceAll("\\u2028", "\\\\u2028")`,
+    `    .replaceAll("\\u2029", "\\\\u2029");`,
     `  return \`<template data-mreact-client-boundary="\${_escapedName}"\${_nonSerializableAttr}></template>\${childrenHtml}<script type="application/json" data-mreact-client-boundary-props="\${_escapedName}">\${_json}</script>\`;`,
     `}`,
   ].join("\n");
@@ -357,11 +363,13 @@ function emitSpreadAttributesHelper(
     `  let _out = "";`,
     `  for (const _rawName of Object.keys(props)) {`,
     `    let _value = props[_rawName];`,
-    `    if (_value == null || _value === false) continue;`,
+    `    if (_value == null) continue;`,
     `    if (_rawName === "key" || _rawName === "ref" || _rawName === "children") continue;`,
     `    if (/^on[A-Za-z]/.test(_rawName)) continue;`,
     `    let _name = tagName === "input" && _rawName === "defaultValue" ? "value" : tagName === "input" && _rawName === "defaultChecked" ? "checked" : (${name}$aliases[_rawName] ?? _rawName);`,
     `    if (!/^[A-Za-z_:][A-Za-z0-9:_.-]*$/.test(_name)) continue;`,
+    `    const _booleanish = _name.startsWith("aria-") || _name.startsWith("data-") || _name === "contenteditable" || _name === "draggable" || _name === "spellcheck";`,
+    `    if (_value === false && !_booleanish) continue;`,
     `    if (_name === "style") {`,
     `      const _style = ${name}$style(_value);`,
     `      if (_style !== "") _out += " style=\\"" + ${escapeHelperName}(_style) + "\\"";`,
@@ -377,7 +385,7 @@ function emitSpreadAttributesHelper(
     `      _value = ${urlSafeHelperName}(_name, _value === true ? "" : _value);`,
     `      if (_value === undefined) continue;`,
     `    }`,
-    `    _out += " " + _name + "=\\"" + ${escapeHelperName}(_value === true ? "" : _value) + "\\"";`,
+    `    _out += " " + _name + "=\\"" + ${escapeHelperName}(_value === true && !_booleanish ? "" : _value) + "\\"";`,
     `  }`,
     `  return _out;`,
     `}`,
@@ -1737,6 +1745,8 @@ function emitDynamicAttributeExpression(
   code: string,
   escapeHelperName: string,
 ): string {
+  const booleanishString = isBooleanishStringAttribute(name);
+
   if (isUrlAttribute(name)) {
     return `(() => { const _value = (${code}); if (_value == null || _value === false) return ""; const _checked = ${currentUrlSafeHelperName}(${stringLiteral(name)}, _value === true ? "" : _value); return _checked === undefined ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_checked) + ${stringLiteral('"')}; })()`;
   }
@@ -1745,10 +1755,14 @@ function emitDynamicAttributeExpression(
 
   if (inlineExpr !== undefined) {
     // Inline 3 evaluations to avoid per-attribute IIFE closure allocation.
-    return `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
+    return booleanishString
+      ? `(${inlineExpr} == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr}) + ${stringLiteral('"')})`
+      : `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
   }
 
-  return `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
+  return booleanishString
+    ? `(() => { const _value = (${code}); return _value == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value) + ${stringLiteral('"')}; })()`
+    : `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
 }
 
 function emitDynamicStyleAttributeExpression(

package/src/emit-server.ts

@@ -5,6 +5,7 @@ import { createCodeBuilder } from "./emit-code-builder.js";
 import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
 import {
   htmlAttributeName,
+  isBooleanishStringAttribute,
   isDangerousHtmlAttribute,
   isStaticUrlValueUnsafe,
   isUrlAttribute,
@@ -1144,6 +1145,8 @@ function emitDynamicAttributeExpression(
   code: string,
   escapeHelperName: string,
 ): string {
+  const booleanishString = isBooleanishStringAttribute(name);
+
   if (isUrlAttribute(name)) {
     // Run the value through the inline URL safety helper. The helper
     // returns the value when safe and `undefined` when the attribute
@@ -1159,10 +1162,14 @@ function emitDynamicAttributeExpression(
     // Safe because `simpleSideEffectFreeExpression` only matches expressions
     // whose evaluation has no observable side effects (identifier read,
     // member chain, literal, this).
-    return `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
+    return booleanishString
+      ? `(${inlineExpr} == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr}) + ${stringLiteral('"')})`
+      : `(${inlineExpr} == null || ${inlineExpr} === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(${inlineExpr} === true ? "" : ${inlineExpr}) + ${stringLiteral('"')})`;
   }
 
-  return `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
+  return booleanishString
+    ? `(() => { const _value = (${code}); return _value == null ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value) + ${stringLiteral('"')}; })()`
+    : `(() => { const _value = (${code}); return _value == null || _value === false ? "" : ${stringLiteral(` ${name}="`)} + ${escapeHelperName}(_value === true ? "" : _value) + ${stringLiteral('"')}; })()`;
 }
 
 function emitDynamicStyleAttributeExpression(
@@ -1676,7 +1683,12 @@ function emitClientBoundaryHelper(name: string): string {
     `  const _props = props ?? {};`,
     `  const _nonSerializable = ${propsHelperName}(_props);`,
     `  const _nonSerializableAttr = _nonSerializable ? ' data-mreact-client-boundary-nonserializable="true"' : "";`,
-    `  const _json = (JSON.stringify(_props) ?? "{}").replaceAll("<", "\\\\u003c");`,
+    `  const _json = (JSON.stringify(_props) ?? "{}")`,
+    `    .replaceAll("&", "\\\\u0026")`,
+    `    .replaceAll("<", "\\\\u003c")`,
+    `    .replaceAll(">", "\\\\u003e")`,
+    `    .replaceAll("\\u2028", "\\\\u2028")`,
+    `    .replaceAll("\\u2029", "\\\\u2029");`,
     `  return \`<template data-mreact-client-boundary="\${_escapedName}"\${_nonSerializableAttr}></template>\${childrenHtml}<script type="application/json" data-mreact-client-boundary-props="\${_escapedName}">\${_json}</script>\`;`,
     `}`,
   ].join("\n");
@@ -1747,11 +1759,13 @@ function emitSpreadAttributesHelper(
     `  let _out = "";`,
     `  for (const _rawName of Object.keys(props)) {`,
     `    let _value = props[_rawName];`,
-    `    if (_value == null || _value === false) continue;`,
+    `    if (_value == null) continue;`,
     `    if (_rawName === "key" || _rawName === "ref" || _rawName === "children") continue;`,
     `    if (/^on[A-Za-z]/.test(_rawName)) continue;`,
     `    let _name = tagName === "input" && _rawName === "defaultValue" ? "value" : tagName === "input" && _rawName === "defaultChecked" ? "checked" : (${name}$aliases[_rawName] ?? _rawName);`,
     `    if (!/^[A-Za-z_:][A-Za-z0-9:_.-]*$/.test(_name)) continue;`,
+    `    const _booleanish = _name.startsWith("aria-") || _name.startsWith("data-") || _name === "contenteditable" || _name === "draggable" || _name === "spellcheck";`,
+    `    if (_value === false && !_booleanish) continue;`,
     `    if (_name === "style") {`,
     `      const _style = ${name}$style(_value);`,
     `      if (_style !== "") _out += " style=\\"" + ${escapeHelperName}(_style) + "\\"";`,
@@ -1767,7 +1781,7 @@ function emitSpreadAttributesHelper(
     `      _value = ${urlSafeHelperName}(_name, _value === true ? "" : _value);`,
     `      if (_value === undefined) continue;`,
     `    }`,
-    `    _out += " " + _name + "=\\"" + ${escapeHelperName}(_value === true ? "" : _value) + "\\"";`,
+    `    _out += " " + _name + "=\\"" + ${escapeHelperName}(_value === true && !_booleanish ? "" : _value) + "\\"";`,
     `  }`,
     `  return _out;`,
     `}`,