Refactor Solid emitter to align textarea handling with other runtimes

- Updated SOLID_ATTR_TYPES to correct attribute names for dialog and details elements.
- Modified textarea handling in SolidEmitter to use a controlled value prop instead of children, ensuring consistency with other runtimes.
- Enhanced normalization logic to accommodate textarea value attributes, improving SSR compatibility.

These changes aim to improve the SolidJS emitter's behavior and maintain parity with other rendering runtimes.

Author: alexy-os

src/emitters/solid.ts

@@ -55,10 +55,10 @@ const SOLID_ATTR_TYPES: Record<string, [string, string]> = {
   img: ["ImgHTMLAttributes", "HTMLImageElement"],
   source: ["SourceHTMLAttributes", "HTMLSourceElement"],
   picture: ["HTMLAttributes", "HTMLElement"],
-  dialog: ["DialogHTMLAttributes", "HTMLDialogElement"],
-  details: ["DetailsHTMLAttributes", "HTMLDetailsElement"],
+  dialog: ["DialogHtmlAttributes", "HTMLDialogElement"],
+  details: ["DetailsHtmlAttributes", "HTMLDetailsElement"],
   summary: ["HTMLAttributes", "HTMLElement"],
-  table: ["TableHTMLAttributes", "HTMLTableElement"],
+  table: ["HTMLAttributes", "HTMLTableElement"],
   caption: ["HTMLAttributes", "HTMLTableCaptionElement"],
   thead: ["HTMLAttributes", "HTMLTableSectionElement"],
   tbody: ["HTMLAttributes", "HTMLTableSectionElement"],
@@ -480,16 +480,17 @@ export class SolidEmitter implements Emitter {
         });
         let open = attrs.length > 0 ? `<${tagCode} ${attrs}` : `<${tagCode}`;
 
-        // Match other runtimes' SSR DOM: textarea text is children, not a
-        // `value=""` attribute (Solid controlled `value` would add that attr).
+        // Controlled `value` for client updates; empty string is stripped in
+        // parity normalizeHtml so SSR DOM matches runtimes that use children.
         if (
           !isDynamic &&
           tagCode === "textarea" &&
           node.children.length === 1 &&
           node.children[0]!.kind === "text"
         ) {
           const value = printTsExpr((node.children[0] as { expr: Expr }).expr, ctx);
-          return `${open}>{(${value}) ?? ""}\n</textarea>`;
+          open += ` value={(${value}) ?? ""}`;
+          return `${open} />`;
         }
         if (node.void || node.children.length === 0) return `${open} />`;
         const children = node.children

tests/emitters.test.ts

@@ -112,9 +112,8 @@ describe("solid emitter", () => {
     expect(file("ui/stack/stack.solid.tsx")).toContain("<Dynamic component={resolvedTagValue()}");
   });
 
-  it("maps the textarea content contract to children (not value attr)", () => {
-    expect(file("ui/textarea/textarea.solid.tsx")).toContain(">{(");
-    expect(file("ui/textarea/textarea.solid.tsx")).not.toContain("value={(");
+  it("maps the textarea content contract to a controlled value prop", () => {
+    expect(file("ui/textarea/textarea.solid.tsx")).toContain("value={(");
   });
 });
 

tests/support/normalize.ts

@@ -37,6 +37,7 @@ function normalizeNode(node: P5Node): NormalizedNode | string | null {
   if (!node.tagName) return null;
 
   const attrs: Record<string, string> = {};
+  let textareaValue: string | undefined;
   for (const attr of node.attrs ?? []) {
     // Svelte SSR adds event-replay shims on media elements; not part of the
     // DOM contract.
@@ -51,13 +52,21 @@ function normalizeNode(node: P5Node): NormalizedNode | string | null {
     }
     // Solid SSR (`Dynamic` / hydratable markers) — not part of the DOM contract.
     if (attr.name === "data-hk") continue;
+    // Solid controlled textarea uses value=; other runtimes put text as children.
+    if (attr.name === "value" && node.tagName === "textarea") {
+      textareaValue = attr.value;
+      continue;
+    }
     attrs[attr.name] = attr.value;
   }
-  const children = mergeText(
+  let children = mergeText(
     (node.childNodes ?? [])
       .map(normalizeNode)
       .filter((c): c is NormalizedNode | string => c !== null)
   );
+  if (textareaValue !== undefined && children.length === 0 && textareaValue !== "") {
+    children = [textareaValue];
+  }
   return { tag: node.tagName, attrs, children };
 }