@codeyam/codeyam-cli 0.1.0-staging.483fdc2 → 0.1.0-staging.62d4615

package/analyzer-template/project/writeMockDataTsx.ts

@@ -192,6 +192,36 @@ const safeString = (s: string, level: number) => {
   return s?.replace ? s.replace(/"/g, "'").replace(/\n/g, '\\n') : s;
 };
 
+/**
+ * Clean up malformed LLM-generated function values.
+ * The LLM sometimes generates function values with an invalid "(function)" prefix like:
+ * - "(function)() => {}"
+ * - "(function)(event) => {}"
+ * - "(function)(id) => {}"
+ *
+ * This strips the prefix and adds TypeScript `any` type annotations to parameters.
+ * Returns null if the value doesn't match the malformed pattern.
+ */
+const cleanMalformedFunctionValue = (value: string): string | null => {
+  // Match "(function)" followed by optional params in parens, then "=>"
+  const match = value.match(/^\(function\)(\([^)]*\))\s*=>\s*(.*)$/);
+  if (!match) return null;
+
+  const [, paramsWithParens, body] = match;
+
+  // Extract parameter names and add `: any` type annotation
+  // e.g., "(event)" -> "(event: any)", "()" -> "()"
+  const params = paramsWithParens.slice(1, -1).trim(); // Remove outer parens
+  const typedParams = params
+    ? params
+        .split(',')
+        .map((p) => `${p.trim()}: any`)
+        .join(', ')
+    : '';
+
+  return `(${typedParams}) => ${body}`;
+};
+
 /**
  * Check if a mock key's schema indicates it should be instantiated as a Map.
  * A Map is indicated by:
@@ -310,6 +340,38 @@ function extractAllKeys(obj: JsonTypeDefinition | undefined): string[] {
  */
 const BARE_TYPE_MARKERS = ['function', 'async-function'];
 
+/**
+ * Check if a string is a TypeScript arrow function type annotation rather than
+ * a valid JavaScript arrow function expression.
+ *
+ * TypeScript arrow types look like function expressions (they contain '=>') but
+ * their "body" is a type name, not a JS expression:
+ * - "() => void"
+ * - "(event: MouseEvent) => void"
+ * - "() => string"
+ * - "() => Promise<void>"
+ * - "(id: string, name: string) => boolean"
+ *
+ * Valid JS arrow functions have actual expression bodies:
+ * - "() => {}"
+ * - "() => 'hello'"
+ * - "(x) => x + 1"
+ * - "() => { console.log('hi'); }"
+ */
+const ARROW_TYPE_RETURN_TYPES =
+  /^(void|string|number|boolean|any|unknown|never|null|undefined|object|Date|Promise<\w+>)$/i;
+
+const isArrowFunctionTypeAnnotation = (value: string): boolean => {
+  const arrowIndex = value.indexOf('=>');
+  if (arrowIndex === -1) return false;
+
+  const body = value.slice(arrowIndex + 2).trim();
+
+  // A real JS function would have {}, an expression, a string literal, etc.
+  // A type annotation has a bare type keyword as the "body".
+  return ARROW_TYPE_RETURN_TYPES.test(body);
+};
+
 /**
  * Check if a value is a bare function type marker that should be filtered out.
  * These markers indicate the LLM detected a function but couldn't generate meaningful mock data.
@@ -811,22 +873,41 @@ const jsonToCode = (
                 `CodeYam: Nested func transform (string->function): "${key}" -> "${funcName}": () => {}`,
               );
             } else if (looksLikeFunction) {
-              // Handle newlines in function expressions:
-              // - Newlines inside string literals must be escaped to avoid
-              //   "unterminated string literal" errors
-              // - Structural newlines (between statements) should be kept as-is
-              //   to produce valid multi-line JavaScript
-              //
-              // We escape ONLY newlines that appear inside string literals (single,
-              // double, or template quotes). Structural newlines are preserved.
-              if (hasNewlines) {
-                outputValue = escapeNewlinesInStringLiterals(stringValue);
+              // First, check for malformed LLM-generated function values like "(function)() => {}"
+              // These have an invalid "(function)" prefix that must be stripped
+              const cleanedFn = cleanMalformedFunctionValue(stringValue);
+              if (cleanedFn) {
+                outputValue = cleanedFn;
+                console.log(
+                  `CodeYam: Nested func transform (malformed->clean): "${key}" -> "${funcName}": ${cleanedFn}`,
+                );
+              } else if (isArrowFunctionTypeAnnotation(stringValue)) {
+                // TypeScript arrow function type annotations like "() => void",
+                // "(event: MouseEvent) => void", "() => Promise<void>" contain '=>'
+                // so they pass the looksLikeFunction check, but they are TYPE syntax,
+                // not valid JavaScript expressions. Convert to a no-op function.
+                outputValue = '() => {}';
+                console.log(
+                  `CodeYam: Nested func transform (type-annotation->function): "${key}" -> "${funcName}": () => {}`,
+                );
               } else {
-                outputValue = stringValue;
+                // Handle newlines in function expressions:
+                // - Newlines inside string literals must be escaped to avoid
+                //   "unterminated string literal" errors
+                // - Structural newlines (between statements) should be kept as-is
+                //   to produce valid multi-line JavaScript
+                //
+                // We escape ONLY newlines that appear inside string literals (single,
+                // double, or template quotes). Structural newlines are preserved.
+                if (hasNewlines) {
+                  outputValue = escapeNewlinesInStringLiterals(stringValue);
+                } else {
+                  outputValue = stringValue;
+                }
+                console.log(
+                  `CodeYam: Nested func transform (string): "${key}" -> "${funcName}": ${stringValue.substring(0, 30)}...`,
+                );
               }
-              console.log(
-                `CodeYam: Nested func transform (string): "${key}" -> "${funcName}": ${stringValue.substring(0, 30)}...`,
-              );
             } else {
               // Plain string value - must be quoted
               outputValue = `"${safeString(stringValue, level)}"`;
@@ -854,9 +935,22 @@ const jsonToCode = (
             if (isBareTypeMarker(stringValue)) {
               continue;
             }
-            keyStrings.push(
-              `${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`,
-            );
+            // Check for malformed LLM-generated function values like "(function)(id) => {}"
+            // These can appear on plain keys (e.g., "closeToast") and need to be output as
+            // actual functions, not quoted strings
+            const cleanedPlainKeyFn = cleanMalformedFunctionValue(stringValue);
+            if (cleanedPlainKeyFn) {
+              keyStrings.push(
+                `${levelSpacing}"${safeString(key, level)}": ${cleanedPlainKeyFn}`,
+              );
+              console.log(
+                `CodeYam: Plain key func transform (malformed->clean): "${key}": ${cleanedPlainKeyFn}`,
+              );
+            } else {
+              keyStrings.push(
+                `${levelSpacing}"${safeString(key, level)}": "${safeString(stringValue, level)}"`,
+              );
+            }
           }
         } else {
           // Skip plain keys that have function-call versions (at the same nesting level where

package/analyzer-template/project/writeScenarioComponents.ts

@@ -987,10 +987,19 @@ function addMockToContent(
           /[.*+?^${}()|[\]\\]/g,
           '\\$&',
         );
-        // Create regex that matches the call (with optional whitespace variations)
+        // Create regex that matches the call (with optional whitespace variations).
+        // TypeScript formatters commonly break type parameters across lines, e.g.:
+        //   useLoaderData<
+        //     typeof loader
+        //   >()
+        // So we allow optional whitespace around < and > delimiters, not just
+        // where whitespace already exists in the call signature string.
         const callRegex = new RegExp(
-          escapedCallSignature.replace(/\s+/g, '\\s*'),
-          'g',
+          escapedCallSignature
+            .replace(/\s+/g, '\\s*')
+            .replace(/</g, '\\s*<\\s*')
+            .replace(/>/g, '\\s*>\\s*'),
+          'gs',
         );
         fileContent = fileContent.replace(callRegex, `${mockFunctionName}()`);
       }
@@ -1012,15 +1021,29 @@ function addMockToContent(
         rootAnalysis.metadata?.scenariosDataStructure?.dataForMocks;
 
       // Find matching call signature key in dataForMocks
+      // IMPORTANT: First try exact match with type parameters (e.g., "useLoaderData<LoaderData>()")
+      // to avoid picking the wrong variant (e.g., "useLoaderData<typeof loader>()" which may
+      // have different properties). Fall back to base name matching only if exact match fails.
       const hookBaseName = importedExport.name.split(/[<(]/)[0];
-      const callSignatureKey = dataForMocks
-        ? Object.keys(dataForMocks).find((key) => {
+      const expectedKey = importedExport.calls?.[0];
+      let callSignatureKey: string | undefined;
+
+      if (dataForMocks) {
+        const keys = Object.keys(dataForMocks);
+
+        // First try exact match with the expected call signature
+        if (expectedKey && keys.includes(expectedKey)) {
+          callSignatureKey = expectedKey;
+        } else {
+          // Fall back to base name matching
+          callSignatureKey = keys.find((key) => {
             // Split on ., <, or ( to get the true base name
             // This handles both "useFlags()" -> "useFlags" and "trpc.useUtils()" -> "trpc"
             const keyBaseName = key.split(/[.<(]/)[0];
             return keyBaseName === hookBaseName;
-          })
-        : undefined;
+          });
+        }
+      }
 
       // Use the call signature if found, otherwise construct it
       const dataKey =
@@ -1061,18 +1084,36 @@ function addMockToContent(
       // IMPORTANT: We inline scenarios().data() inside the function rather than
       // storing in a const - see comment in constructMockCode.ts for why.
       if (!mockCode) {
-        mockCode = `function ${importedExport.name}(...args) {
-  return scenarios().data()?.["${dataKey}"];
+        mockCode = `// PATCHED: memoize to return stable reference (prevents infinite useEffect re-triggers)
+const _${importedExport.name}Ref = {
+  current: null,
+};
+function ${importedExport.name}(...args) {
+  if (!_${importedExport.name}Ref.current) {
+    _${importedExport.name}Ref.current = scenarios().data()?.["${dataKey}"];
+  }
+  return _${importedExport.name}Ref.current;
 }`;
       }
     } else {
       // Helper to find matching call signature key from dataForMocks
+      // IMPORTANT: First try exact match with type parameters (e.g., "useLoaderData<LoaderData>()")
+      // to avoid picking the wrong variant. Fall back to base name matching only if needed.
       const hookBaseName = importedExport.name.split(/[<(]/)[0];
+      const expectedKey = importedExport.calls?.[0];
       const findMatchingKey = (
         dataForMocks: Record<string, unknown> | undefined,
       ): string | undefined => {
         if (!dataForMocks) return undefined;
-        return Object.keys(dataForMocks).find((key) => {
+        const keys = Object.keys(dataForMocks);
+
+        // First try exact match with the expected call signature
+        if (expectedKey && keys.includes(expectedKey)) {
+          return expectedKey;
+        }
+
+        // Fall back to base name matching
+        return keys.find((key) => {
           // Split on ., <, or ( to get the true base name
           // This handles both "useFlags()" -> "useFlags" and "trpc.useUtils()" -> "trpc"
           const keyBaseName = key.split(/[.<(]/)[0];
@@ -1131,8 +1172,15 @@ function addMockToContent(
       // IMPORTANT: We inline scenarios().data() inside the function rather than
       // storing in a const - see comment in constructMockCode.ts for why.
       if (!mockCode && dataKey) {
-        mockCode = `function ${importedExport.name}(...args) {
-  return scenarios().data()?.["${dataKey}"];
+        mockCode = `// PATCHED: memoize to return stable reference (prevents infinite useEffect re-triggers)
+const _${importedExport.name}Ref = {
+  current: null,
+};
+function ${importedExport.name}(...args) {
+  if (!_${importedExport.name}Ref.current) {
+    _${importedExport.name}Ref.current = scenarios().data()?.["${dataKey}"];
+  }
+  return _${importedExport.name}Ref.current;
 }`;
       }
     }

package/analyzer-template/project/writeSimpleRoot.ts

@@ -277,16 +277,17 @@ export default async function writeSimpleRoot(
               let mockKey: string | undefined;
 
               if (matchingKeys.length > 1) {
-                // Parse root.tsx to find how this hook is used
-                // Look for patterns like: const { prop1, prop2 } = useLoaderData()
-                // or: const result = useLoaderData()
+                // Parse root.tsx to find how this hook is used, INCLUDING type parameters
+                // Look for patterns like: const { prop1, prop2 } = useLoaderData<LoaderData>()
+                // or: const result = useLoaderData<typeof loader>()
                 const hookUsageRegex = new RegExp(
-                  `(?:const|let|var)\\s+(?:\\{([^}]+)\\}|([a-zA-Z_][a-zA-Z0-9_]*))\\s*=\\s*${entityName}(?:<[^>]*>)?\\s*\\(`,
+                  `(?:const|let|var)\\s+(?:\\{([^}]+)\\}|([a-zA-Z_][a-zA-Z0-9_]*))\\s*=\\s*${entityName}(<[^>]+>)?\\s*\\(`,
                   'g',
                 );
 
                 const matches = [...newContent.matchAll(hookUsageRegex)];
                 const rootPropertyNames: string[] = [];
+                const typeParamsUsed: Set<string> = new Set();
 
                 for (const match of matches) {
                   if (match[1]) {
@@ -300,17 +301,26 @@ export default async function writeSimpleRoot(
                     // Simple assignment: const result = ...
                     rootPropertyNames.push(match[2]);
                   }
+                  // Capture type parameters used (e.g., "<LoaderData>", "<typeof loader>")
+                  if (match[3]) {
+                    typeParamsUsed.add(match[3]);
+                  }
                 }
 
-                // Find a key that matches by call signature
-                // For call signature format (e.g., "useLoaderData()"), just use the first match
-                mockKey = matchingKeys[0];
+                // First, try to find a key that matches the exact type parameters used in the source
+                // e.g., if source has useLoaderData<LoaderData>(), prefer "useLoaderData<LoaderData>()" key
+                if (typeParamsUsed.size > 0) {
+                  for (const typeParam of typeParamsUsed) {
+                    const exactKey = `${entityName}${typeParam}()`;
+                    if (matchingKeys.includes(exactKey)) {
+                      mockKey = exactKey;
+                      break;
+                    }
+                  }
+                }
 
-                // Fallback: if no match found but there are multiple keys,
-                // exclude the route's key (which we can identify from mockedImports variable names)
+                // Fallback: if no exact type parameter match, use the first match
                 if (!mockKey) {
-                  // The route's variable names would be in its own analysis
-                  // For simplicity, just use the first key that's different from the most common pattern
                   mockKey = matchingKeys[0];
                 }
               } else if (matchingKeys.length === 1) {

package/background/src/lib/virtualized/project/constructMockCode.js

@@ -1170,6 +1170,16 @@ options) {
                                     returnValueContents = `${arrayBasePath}?.map((__item__, __idx__) => (\n${indent(trimmedContent)}\n))`;
                                 }
                                 else {
+                                    // When generating object-wrapped .map(), ensure original item data is preserved.
+                                    // If no data spread was included (e.g., because this is a plain array property,
+                                    // not a function return), add ...__item__ to spread the original item properties.
+                                    // Without this, the .map() would create new objects with only nested function
+                                    // properties, losing data like filePath, frontmatter, body, etc.
+                                    const hasDataSpread = mappedContents.includes('...scenarios()') ||
+                                        mappedContents.includes('...__item__');
+                                    if (!hasDataSpread) {
+                                        mappedContents = `...__item__,\n${mappedContents}`;
+                                    }
                                     returnValueContents = `${arrayBasePath}?.map((__item__, __idx__) => ({\n${indent(mappedContents)}\n}))`;
                                 }
                             } // Close the empty content check else block
@@ -1231,6 +1241,13 @@ options) {
                             mappedContents = filterOutArrowFunctions(mappedContents);
                             mappedContents = filterOutBareObjects(mappedContents, true);
                             mappedContents = cleanupContent(mappedContents);
+                            // Same as needsWrapper branch: ensure item data is preserved in .map()
+                            const hasDataSpreadInner = mappedContents.includes('...scenarios()') ||
+                                mappedContents.includes('...__item__');
+                            if (!hasDataSpreadInner && mappedContents.trim().length > 0) {
+                                // Insert ...__item__ after the opening brace
+                                mappedContents = mappedContents.replace(/^\s*\{/, '{\n...__item__,');
+                            }
                             returnValueContents = `${arrayBasePath}?.map((__item__, __idx__) => (\n${indent(mappedContents)}\n))`;
                         }
                     }
@@ -2047,7 +2064,19 @@ options) {
         const safeReturnValue = isSimpleDataPath
             ? `${returnValue} ?? {}`
             : returnValue;
-        return `${isRootAsyncFunction ? 'async ' : ''}function ${safeFunctionName}(...args) {\n${indent(`return ${safeReturnValue};`)}\n}`;
+        const refName = `_${safeFunctionName}Ref`;
+        const assignment = `${refName}.current = ${safeReturnValue};`;
+        const ifBlock = `if (!${refName}.current) {\n${indent(assignment)}\n}`;
+        const body = `${ifBlock}\nreturn ${refName}.current;`;
+        return [
+            `// PATCHED: memoize to return stable reference (prevents infinite useEffect re-triggers)`,
+            `const ${refName} = {`,
+            `  current: null,`,
+            `};`,
+            `${isRootAsyncFunction ? 'async ' : ''}function ${safeFunctionName}(...args) {`,
+            indent(body),
+            `}`,
+        ].join('\n');
     }
     else {
         // Generate safe const name: