@solidjs/babel-plugin 2.0.0-rc.19 → 2.0.0-rc.20

package/.turbo/turbo-build.log

@@ -7,4 +7,4 @@ src/shared/transform.ts -> src/dom/element.ts -> src/universal/element.ts -> src
 src/shared/transform.ts -> src/ssr/element.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/component.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/fragment.ts -> src/shared/transform.ts
-created index.js in 2.2s
+created index.js in 3.1s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.20
+
+### Patch Changes
+
+- 56683ea: SSR templates write characters above U+00FF in static text and quoted attribute values as numeric character references (`→` becomes `&#8594;`), as do the static attributes baked into a spread element's attribute string. One character above U+00FF in a template made V8 store the whole rendered page as a two-byte string, which roughly doubled the cost of flattening and UTF-8 encoding the response (#4328). Latin-1 characters stay literal. Tag internals, comments, raw-text bodies such as `<script>` and `<style>`, and the children of a spread `<script>` or `<style>` keep their characters, since browsers do not decode references there. Client output is unchanged.
+
 ## 2.0.0-rc.19
 
 ### Patch Changes

package/README.md

@@ -4,6 +4,8 @@ Solid 2.0's Babel compiler integration. Configure this plugin once in a Babel pi
 
 The native Oxc compiler — [`@solidjs/compiler`](../compiler) — is the default in `vite-plugin-solid`. Use this plugin when you need a Babel pipeline (or as the JavaScript fallback).
 
+It runs on `@babel/core` 7 (7.20.12 or later) and 8.
+
 > **Solid 2.0 (Release Candidate).** Pin exact versions.
 
 ## Features

package/index.js

@@ -4055,13 +4055,13 @@ wrap)
   }
 
   let template, id;
+  const raw = Array.isArray(result.template) ? result.template : [result.template];
+  const parts = result.rawText ? raw : asciiTemplateParts(raw);
 
-  if (!Array.isArray(result.template)) {
-    template = t__namespace.stringLiteral(result.template);
-  } else if (result.template.length === 1) {
-    template = t__namespace.stringLiteral(result.template[0]);
+  if (parts.length === 1) {
+    template = t__namespace.stringLiteral(parts[0]);
   } else {
-    const strings = result.template.map((tmpl) => t__namespace.stringLiteral(tmpl));
+    const strings = parts.map((tmpl) => t__namespace.stringLiteral(tmpl));
     template = t__namespace.arrayExpression(strings);
   }
 
@@ -4171,6 +4171,132 @@ wrap)
   );
 }
 
+
+
+
+
+
+
+
+
+
+
+// Browsers do not decode references in raw-text bodies, so those keep their characters.
+const rawTextElements = new Set([
+"script",
+"style",
+"noscript",
+"iframe",
+"noembed",
+"noframes",
+"xmp",
+// `<plaintext>` has no end tag.
+"plaintext"]
+);
+// Latin-1 already keeps a V8 string one-byte, and `&#128;`-`&#159;` decode to other characters.
+const nonLatin1 = /[^\x00-\xff]/;
+const preservedOpens = [
+["<!--", "-->"],
+["<![CDATA[", "]]>"],
+["<!", ">"],
+["<?", ">"]];
+
+const tagName = /[^\t\n\f\r />]*/y;
+const endsTagName = (next) => next === undefined || /[\t\n\f\r />]/.test(next);
+
+/** Characters above U+00FF outside tags, comments and raw text become `&#N;`, keeping SSR output one-byte in V8. */
+function asciiTemplateParts(parts) {
+  return asciiParts(parts, { kind: "text" });
+}
+
+/** `asciiTemplateParts` for a spread element's static attribute markup. */
+function asciiAttributeMarkup(markup) {
+  return nonLatin1.test(markup) ? asciiParts([markup], { kind: "tag" })[0] : markup;
+}
+
+// State carries across parts because holes can split a tag or a raw-text body.
+function asciiParts(parts, state) {
+  if (!parts.some((part) => nonLatin1.test(part))) return parts;
+  return parts.map((part) => {
+    let out = "";
+    let i = 0;
+    while (i < part.length) {
+      const ch = String.fromCodePoint(part.codePointAt(i));
+      let len = ch.length;
+      if (state.kind === "text") {
+        const open = preservedOpens.find(([open]) => part.startsWith(open, i));
+        if (open) {
+          state = { kind: "preserve", end: open[1] };
+          len = open[0].length;
+        } else if (ch === "<") {
+          const closing = part[i + 1] === "/";
+          const start = i + (closing ? 2 : 1);
+          if (/[a-z]/i.test(part[start] ?? "")) {
+            tagName.lastIndex = start;
+            const name = tagName.exec(part)[0].toLowerCase();
+            state = {
+              kind: "tag",
+              raw:
+              closing || !rawTextElements.has(name) ?
+              undefined :
+              name === "plaintext" ?
+              "" :
+              `</${name}`,
+              value: false
+            };
+          } else if (closing) {
+            state = { kind: "preserve", end: ">" };
+            len = 2;
+          }
+        }
+        out += len === ch.length ? toAscii(ch) : part.slice(i, i + len);
+      } else if (state.kind === "tag") {
+        if (state.value && (ch === '"' || ch === "'"))
+        state = { kind: "quoted", quote: ch, raw: state.raw };else
+        if (ch === ">")
+        state =
+        state.raw !== undefined ?
+        { kind: "raw", close: state.raw, escaped: false } :
+        { kind: "text" };else
+
+        state = {
+          kind: "tag",
+          raw: state.raw,
+          value: ch === "=" || !!state.value && /[\t\n\f\r ]/.test(ch)
+        };
+        out += ch;
+      } else if (state.kind === "quoted") {
+        if (ch === state.quote) state = { kind: "tag", raw: state.raw };
+        out += toAscii(ch);
+      } else if (state.kind === "preserve") {
+        if (part.startsWith(state.end, i)) {
+          len = state.end.length;
+          state = { kind: "text" };
+        }
+        out += part.slice(i, i + len);
+      } else {
+        const end = i + state.close.length;
+        if (state.close === "</script" && part.startsWith("<!--", i))
+        state = { ...state, escaped: true };else
+        if (
+        !state.escaped &&
+        state.close !== "" &&
+        part.slice(i, end).toLowerCase() === state.close &&
+        endsTagName(part[end]))
+
+        state = { kind: "tag" };
+        out += ch;
+      }
+      i += len;
+    }
+    return out;
+  });
+}
+
+function toAscii(ch) {
+  return ch.charCodeAt(0) <= 0xff ? ch : `&#${ch.codePointAt(0)};`;
+}
+
 function appendTemplates(path, templates) {
   const declarators = templates.map((template) => {
     return t__namespace.variableDeclarator(template.id, template.template);
@@ -5738,6 +5864,7 @@ path,
         const allocatesIds = hydratable && canChildSlotAllocateIds(path);
         const child = transformNode(path, { doNotEscape });
         if (!child) return memo;
+        if (rawTextElements.has(tagName)) child.rawText = true;
         if (markers && child.exprs.length && !child.spreadElement)
         memo.push(t.stringLiteral("<!--$-->"));
         if (child.exprs.length && !doNotEscape && !child.spreadElement)
@@ -6016,7 +6143,7 @@ node)
       text = trimWhitespace(text);
       if (key === "style") text = text.replace(/; /g, ";").replace(/: /g, ":");
     }
-    return text === "" ? ` ${key}` : ` ${key}="${escapeHTML(text, true)}"`;
+    return text === "" ? ` ${key}` : asciiAttributeMarkup(` ${key}="${escapeHTML(text, true)}"`);
   }
   if (t.isJSXEmptyExpression(literal) || t.isJSXElement(literal) || t.isJSXFragment(literal))
   return undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/babel-plugin",
   "description": "Babel compiler plugin for Solid templates",
-  "version": "2.0.0-rc.19",
+  "version": "2.0.0-rc.20",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {