@codeyam/codeyam-cli 0.1.0-staging.6e699e5 → 0.1.0-staging.73a4bf4

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.
@@ -336,6 +398,59 @@ const isBareTypeMarker = (value: unknown): boolean => {
   return false;
 };
 
+/**
+ * Escape newlines that appear inside string literals within a code string,
+ * while preserving structural newlines (those between statements/lines of code).
+ *
+ * This handles cases where LLM generates function bodies like:
+ * - "() => { console.log('line1\nline2'); }" - escape the \n inside the string
+ * - "() => {\n  console.log('x');\n}" - preserve structural \n between statements
+ * - "() => Promise.resolve('a\nb')" - escape the \n inside the string argument
+ *
+ * The algorithm tracks whether we're inside a string literal (single, double, or
+ * backtick quotes) and only escapes newlines that appear within quotes.
+ */
+const escapeNewlinesInStringLiterals = (code: string): string => {
+  let result = '';
+  let inString = false;
+  let stringChar = ''; // The quote character that started the current string
+
+  for (let i = 0; i < code.length; i++) {
+    const char = code[i];
+    const prevChar = i > 0 ? code[i - 1] : '';
+
+    // Check for string literal boundaries (single, double, or backtick quotes)
+    // Skip escaped quotes (preceded by backslash)
+    if ((char === '"' || char === "'" || char === '`') && prevChar !== '\\') {
+      if (!inString) {
+        // Starting a string literal
+        inString = true;
+        stringChar = char;
+      } else if (char === stringChar) {
+        // Ending the current string literal
+        inString = false;
+        stringChar = '';
+      }
+      // If char is a different quote type while in a string, it's just a character
+    }
+
+    // Escape newlines only when inside a string literal
+    if (char === '\n') {
+      if (inString) {
+        // Inside a string literal - escape the newline
+        result += '\\n';
+      } else {
+        // Outside string - keep the structural newline
+        result += char;
+      }
+    } else {
+      result += char;
+    }
+  }
+
+  return result;
+};
+
 /**
  * Normalize mock data by merging entries that have the same normalized function name.
  * e.g., "useLastLogLine(projectSlug, !!simulatingEntitySha)" and
@@ -734,13 +849,19 @@ const jsonToCode = (
               stringValue.startsWith('Promise.') ||
               stringValue.startsWith('new Promise');
 
+            // Check if the string contains newlines (potential issue for string literals)
+            const hasNewlines = stringValue.includes('\n');
+
             // Handle special type indicators that need transformation
             let outputValue: string;
             if (stringValue === 'promise' || looksLikePromise) {
               // The key is a function call (e.g., "revalidate()"), so output a function
               // that returns a Promise, not the Promise itself
+              // Important: Escape newlines inside Promise expressions to avoid
+              // "unterminated string literal" errors when the Promise contains
+              // multi-line string arguments like Promise.resolve('line1\nline2')
               const promiseExpr = looksLikePromise
-                ? stringValue
+                ? stringValue.replace(/\n/g, '\\n')
                 : 'Promise.resolve()';
               outputValue = `() => ${promiseExpr}`;
               console.log(
@@ -752,10 +873,49 @@ const jsonToCode = (
                 `CodeYam: Nested func transform (string->function): "${key}" -> "${funcName}": () => {}`,
               );
             } else if (looksLikeFunction) {
-              outputValue = stringValue;
-              console.log(
-                `CodeYam: Nested func transform (string): "${key}" -> "${funcName}": ${stringValue.substring(0, 30)}...`,
-              );
+              // Check for "[native code]" in function body — this is what
+              // Function.prototype.toString() returns for built-in functions.
+              // The LLM sometimes generates "function () { [native code] }" which
+              // is not valid JavaScript (the "[" is parsed as array destructuring).
+              if (stringValue.includes('[native code]')) {
+                outputValue = '() => {}';
+                console.log(
+                  `CodeYam: Nested func transform (native-code->noop): "${key}" -> "${funcName}": () => {}`,
+                );
+              } else if (cleanMalformedFunctionValue(stringValue)) {
+                // Check for malformed LLM-generated function values like "(function)() => {}"
+                // These have an invalid "(function)" prefix that must be stripped
+                outputValue = cleanMalformedFunctionValue(stringValue)!;
+                console.log(
+                  `CodeYam: Nested func transform (malformed->clean): "${key}" -> "${funcName}": ${outputValue}`,
+                );
+              } 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 {
+                // 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)}...`,
+                );
+              }
             } else {
               // Plain string value - must be quoted
               outputValue = `"${safeString(stringValue, level)}"`;
@@ -783,9 +943,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;
 }`;
       }
     }
@@ -1205,6 +1253,21 @@ function addMockToContent(
         fileContent = fileContent.replace(importRegExp, '$1$2');
       }
 
+      // Also handle namespace imports (import * as foo from '...')
+      // These need to be renamed to foo__cyOriginal when the mock code spreads from the original.
+      // Note: We match any path (not just escapedImportPath) because the import path may have
+      // been rewritten by transitive import handling before this code runs.
+      if (shouldRenameToOriginal) {
+        const namespaceImportRegExp = new RegExp(
+          `(import\\s+\\*\\s+as\\s+)${escapeRegExp(firstPart)}(\\s+from\\s+['"][^'"]*['"])`,
+          'm',
+        );
+        fileContent = fileContent.replace(
+          namespaceImportRegExp,
+          `$1${firstPart}__cyOriginal$2`,
+        );
+      }
+
       // Remove empty imports entirely to avoid partial commenting issues with multiline imports
       // This handles both single-line and multiline empty imports
       fileContent = fileContent.replace(
@@ -2916,6 +2979,34 @@ ${exportKeyword}const ${functionName} = new Proxy(() => scenarios().data()?.["${
 // Scenario: ${scenario.id} - ${scenario.name}
 `;
 
+  // Final pass: Rename any namespace imports (import * as X from '...') that have
+  // corresponding mock code using ...X__cyOriginal spread pattern.
+  // This handles cases where:
+  // 1. The import path was rewritten by transitive import handling
+  // 2. The import wasn't caught by the earlier renaming logic
+  // We scan for all __cyOriginal references in the mock code and ensure the imports are renamed.
+  const cyOriginalReferences = fileContent.match(/\.\.\.(\w+)__cyOriginal/g);
+  if (cyOriginalReferences) {
+    const uniqueNames = [
+      ...new Set(
+        cyOriginalReferences.map((ref) =>
+          ref.replace('...', '').replace('__cyOriginal', ''),
+        ),
+      ),
+    ];
+    for (const name of uniqueNames) {
+      // Match namespace imports for this name that haven't been renamed yet
+      const namespaceImportRegex = new RegExp(
+        `(import\\s+\\*\\s+as\\s+)${escapeRegExp(name)}(\\s+from\\s+['"][^'"]*['"])`,
+        'g',
+      );
+      fileContent = fileContent.replace(
+        namespaceImportRegex,
+        `$1${name}__cyOriginal$2`,
+      );
+    }
+  }
+
   // Use the directive that was extracted at the beginning of processing
   // This ensures it stays at the very top even after imports are prepended
   // NOTE: We only preserve "use client" directives, NOT "use server" directives.

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) {