Fix hierarchical params regressions and restore derive callbacks

Author: mathpirate

packages/deno-web-test/utils.ts

@@ -81,6 +81,7 @@ async function copy(src: string, dest: string): Promise<void> {
   } else if (stat.isDirectory) {
     await copyDir(src, dest);
   } else {
+    await Deno.mkdir(path.dirname(dest), { recursive: true });
     await Deno.copyFile(src, dest);
   }
 }

packages/ts-transformers/src/transformers/builtins/derive.ts

@@ -204,16 +204,6 @@ function createDeriveArgs(
     }
   }
 
-  if (properties.length === 1 && fallbackEntries.length === 0) {
-    const first = captureTree.values().next();
-    if (!first.done) {
-      const node = first.value;
-      if (node.expression && node.properties.size === 0) {
-        return [node.expression];
-      }
-    }
-  }
-
   return [
     factory.createObjectLiteralExpression(properties, properties.length > 1),
   ];

packages/ts-transformers/src/utils/identifiers.ts

@@ -13,13 +13,20 @@ export interface UniqueIdentifierOptions extends SanitizeIdentifierOptions {
 
 export function isSafeIdentifierText(name: string): boolean {
   if (name.length === 0) return false;
-  const first = name.codePointAt(0)!;
-  if (!ts.isIdentifierStart(first, ts.ScriptTarget.ESNext)) {
+  const codePoints = Array.from(name);
+  const first = codePoints[0]?.codePointAt(0);
+  if (
+    first === undefined ||
+    !ts.isIdentifierStart(first, ts.ScriptTarget.ESNext)
+  ) {
     return false;
   }
-  for (let i = 1; i < name.length; i++) {
-    const code = name.codePointAt(i)!;
-    if (!ts.isIdentifierPart(code, ts.ScriptTarget.ESNext)) {
+  for (const codePoint of codePoints.slice(1)) {
+    const code = codePoint.codePointAt(0);
+    if (
+      code === undefined ||
+      !ts.isIdentifierPart(code, ts.ScriptTarget.ESNext)
+    ) {
       return false;
     }
   }
@@ -53,7 +60,11 @@ export function sanitizeIdentifierCandidate(
       return DEFAULT_FALLBACK;
     }
 
-    if (!ts.isIdentifierStart(text.charCodeAt(0), ts.ScriptTarget.ESNext)) {
+    const first = text.codePointAt(0);
+    if (
+      first === undefined ||
+      !ts.isIdentifierStart(first, ts.ScriptTarget.ESNext)
+    ) {
       text = `${DEFAULT_FALLBACK}${text}`;
     }
 
@@ -79,7 +90,11 @@ export function sanitizeIdentifierCandidate(
 
   const ensureIdentifierStart = (text: string): string => {
     if (text.length === 0) return fallback;
-    if (ts.isIdentifierStart(text.charCodeAt(0), ts.ScriptTarget.ESNext)) {
+    const first = text.codePointAt(0);
+    if (
+      first !== undefined &&
+      ts.isIdentifierStart(first, ts.ScriptTarget.ESNext)
+    ) {
       return text;
     }
     return `${fallback}${text}`;

packages/ts-transformers/test/fixtures/ast-transform/builder-conditional.expected.tsx

@@ -21,7 +21,7 @@ export default recipe({
     return {
         [NAME]: state.label,
         [UI]: (<section>
-        {__ctHelpers.ifElse(__ctHelpers.derive(state, ({ state }) => state && state.count > 0), <p>Positive</p>, <p>Non-positive</p>)}
+        {__ctHelpers.ifElse(__ctHelpers.derive(state, (state) => state && state.count > 0), <p>Positive</p>, <p>Non-positive</p>)}
       </section>),
     };
 });

packages/ts-transformers/test/fixtures/closures/map-computed-alias-side-effect.expected.tsx

@@ -42,7 +42,13 @@ export default recipe({
                     }
                 },
                 required: ["element", "params"]
-            } as const satisfies __ctHelpers.JSONSchema, ({ element: { [nextKey()]: amount }, params: {} }) => (<span>{amount}</span>)), {})}
+            } as const satisfies __ctHelpers.JSONSchema, ({ element, params: {} }) => {
+                const __ct_amount_key = nextKey();
+                return (<span>{__ctHelpers.derive({
+                    element,
+                    __ct_amount_key
+                }, ({ element: element, __ct_amount_key: __ct_amount_key }) => element[__ct_amount_key])}</span>);
+            }), {})}
       </div>),
     };
 });

packages/ts-transformers/test/fixtures/closures/map-outer-element.expected.tsx

@@ -29,6 +29,9 @@ export default recipe({
                     element: {
                         type: "number"
                     },
+                    index: {
+                        type: "number"
+                    },
                     params: {
                         type: "object",
                         properties: {
@@ -41,7 +44,7 @@ export default recipe({
                     }
                 },
                 required: ["element", "params"]
-            } as const satisfies __ctHelpers.JSONSchema, ({ element: __ct_element, params: { element } }) => (<span>{element}</span>)), {
+            } as const satisfies __ctHelpers.JSONSchema, ({ element: __ct_element, index: index, params: { element } }) => (<span key={index}>{element}</span>)), {
                 element: element
             })}
       </div>),

packages/ts-transformers/test/fixtures/closures/map-outer-element.input.tsx

@@ -11,8 +11,8 @@ export default recipe<State>("MapOuterElement", (state) => {
   return {
     [UI]: (
       <div>
-        {state.items.map(() => (
-          <span>{element}</span>
+        {state.items.map((_, index) => (
+          <span key={index}>{element}</span>
         ))}
       </div>
     ),

packages/ts-transformers/test/fixtures/jsx-expressions/map-array-length-conditional.expected.tsx

@@ -4,7 +4,7 @@ export default recipe("MapArrayLengthConditional", (_state) => {
     const list = cell(["apple", "banana", "cherry"]);
     return {
         [UI]: (<div>
-        {__ctHelpers.derive(list, ({ list }) => list.length > 0 && (<div>
+        {__ctHelpers.derive(list, (list) => list.length > 0 && (<div>
             {list.map((name) => (<span>{name}</span>))}
           </div>))}
       </div>),

packages/ts-transformers/test/fixtures/jsx-expressions/map-single-capture.expected.tsx

@@ -7,7 +7,7 @@ export default recipe("MapSingleCapture", (_state) => {
     ]);
     return {
         [UI]: (<div>
-        {__ctHelpers.derive(people, ({ people }) => people.length > 0 && (<ul>
+        {__ctHelpers.derive(people, (people) => people.length > 0 && (<ul>
             {people.map((person) => (<li key={person.id}>{person.name}</li>))}
           </ul>))}
       </div>),

packages/ts-transformers/test/fixtures/jsx-expressions/method-chains.expected.tsx

@@ -234,7 +234,7 @@ export default recipe({
                     }
                 },
                 required: ["element", "params"]
-            } as const satisfies __ctHelpers.JSONSchema, ({ element: name, params: {} }) => (<li>{__ctHelpers.derive(name, ({ name }) => name.trim().toLowerCase().replace(" ", "-"))}</li>)), {})}
+            } as const satisfies __ctHelpers.JSONSchema, ({ element: name, params: {} }) => (<li>{__ctHelpers.derive(name, (name) => name.trim().toLowerCase().replace(" ", "-"))}</li>)), {})}
         </ul>
 
         {/* Reduce with reactive accumulator */}