@codeyam/codeyam-cli 0.1.0-staging.ad31e3e → 0.1.0-staging.ae0de75

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioClientWrapper.ts

@@ -0,0 +1,221 @@
+import type { Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getImageReplacementCode from './getImageReplacementCode';
+import getNextJsErrorClosingCode from './getNextJsErrorClosingCode';
+
+/**
+ * Generates the ScenarioClientWrapper component code.
+ * This is a Client Component that handles all the interactive features
+ * (iframe messaging, console interception, error closing, etc.)
+ * while allowing the actual page to be a Server Component.
+ */
+export default function generateScenarioClientWrapper(
+  scenario: Scenario,
+): string {
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `"use client";
+/* eslint-disable */
+// ScenarioClientWrapper - Client Component for interactive features
+// This wraps Server Components to add client-side interactivity
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { scenarios } from "./MockData_${safeScenarioName}";
+
+// Inject image interception code at module level
+${getImageReplacementCode()}
+
+interface ScenarioClientWrapperProps {
+  scenarioName: string;
+  fileName: string;
+  version: string;
+  children: ReactNode;
+}
+
+export function ScenarioClientWrapper({
+  scenarioName,
+  fileName,
+  version,
+  children,
+}: ScenarioClientWrapperProps) {
+  const [internalVersion, setInternalVersion] = useState(1);
+  const [searchParams] = useState(() =>
+    typeof window !== 'undefined'
+      ? new URLSearchParams(window.location.search)
+      : new URLSearchParams()
+  );
+  const widthOverride = searchParams.get('width');
+  const heightOverride = searchParams.get('height') || 'auto';
+
+  // Set page metadata
+  useEffect(() => {
+    document.title = \`\${fileName}: \${scenarioName} CodeYam Demo v\${version}\`;
+    let metaDesc = document.querySelector('meta[name="description"]');
+    if (!metaDesc) {
+      metaDesc = document.createElement('meta');
+      metaDesc.setAttribute('name', 'description');
+      document.head.appendChild(metaDesc);
+    }
+    metaDesc.setAttribute('content', \`This is a demo of the \${fileName} component\`);
+  }, [fileName, scenarioName, version]);
+
+  // Message posting helper
+  const respond = useCallback((message: any) => {
+    try {
+      window.parent.postMessage({
+        type: 'codeyam-update',
+        name: scenarioName,
+        message,
+      }, '*');
+    } catch (e) {
+      console.warn('Error posting message to parent', message, e);
+    }
+  }, [scenarioName]);
+
+  // Handle data override messages from parent
+  useEffect(() => {
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.type === 'codeyam-override-data') {
+        const parsedData = JSON.parse(event.data.data);
+        console.log("Override data received");
+        respond("Set override data to " + JSON.stringify(parsedData, null, 2));
+        scenarios().updateData(scenarioName, parsedData);
+        setInternalVersion(prev => prev + 1);
+      }
+    };
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [respond, scenarioName]);
+
+  // Console interception and client error reporting
+  useEffect(() => {
+    function _codeyamReportToServer(type: string, message: string, stack?: string) {
+      try {
+        const body = JSON.stringify({
+          type,
+          message: String(message).slice(0, 2000),
+          stack: stack ? String(stack).slice(0, 3000) : undefined,
+          scenario: scenarioName,
+          url: window.location.href,
+        });
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon('/api/client-log', new Blob([body], { type: 'application/json' }));
+        } else {
+          fetch('/api/client-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {});
+        }
+      } catch (e) {}
+    }
+
+    const oldConsoleLog = console.log;
+    console.log = function(...args: any[]) {
+      oldConsoleLog(...args);
+      try {
+        window.parent.postMessage({
+          type: 'codeyam-log',
+          name: scenarioName,
+          data: {
+            log: {
+              name: "console.log",
+              args
+            }
+          }
+        }, '*');
+      } catch (e) {
+        oldConsoleLog('Error posting message to parent', e);
+      }
+    };
+
+    const oldConsoleError = console.error;
+    console.error = function(...args: any[]) {
+      oldConsoleError(...args);
+      window.parent.postMessage({
+        type: 'codeyam-log',
+        name: scenarioName,
+        data: {
+          log: {
+            name: "console.error",
+            args
+          }
+        }
+      }, '*');
+      const message = args.map((a: any) => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
+      _codeyamReportToServer('console.error', message);
+    };
+
+    window.addEventListener('error', function(event: ErrorEvent) {
+      _codeyamReportToServer('error', event.message, (event.error as any)?.stack);
+    });
+
+    window.addEventListener('unhandledrejection', function(event: PromiseRejectionEvent) {
+      const reason = event.reason;
+      _codeyamReportToServer('unhandledrejection', reason?.message || String(reason), reason?.stack);
+    });
+
+    return () => {
+      console.log = oldConsoleLog;
+      console.error = oldConsoleError;
+    };
+  }, [scenarioName]);
+
+  // Next.js error closing
+  ${getNextJsErrorClosingCode()}
+
+  // Height calculation and resize messaging
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const calculateHeight = () => {
+      const bodyHeight = document.body.offsetHeight;
+      const htmlHeight = document.documentElement.offsetHeight;
+      const scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.offsetHeight,
+        document.body.clientHeight,
+        document.documentElement.clientHeight
+      );
+      return Math.max(100, bodyHeight, htmlHeight, scrollHeight);
+    };
+
+    const calculatedHeight = calculateHeight();
+    parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.name === scenarioName) {
+        if (event.data.type === 'codeyam-respond') {
+          const calculatedHeight = calculateHeight();
+          parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+        }
+      }
+    };
+
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [scenarioName]);
+
+  const width = widthOverride || 'auto';
+
+  return (
+    <div className='flex flex-col justify-center items-center h-screen' data-version={internalVersion}>
+      <div className='w-full flex items-center justify-center'>
+        <div id='component' style={{
+          minWidth: width !== 'auto' ? \`min(\${width}, 100vw)\` : undefined,
+          height: heightOverride !== 'auto' ? heightOverride : undefined,
+          minHeight: heightOverride !== 'auto' ? heightOverride : undefined,
+          display: 'block',
+          padding: '6px'
+        }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioServerComponent.ts

@@ -0,0 +1,73 @@
+import { Entity, Analysis, type File, type Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getComponentImportStatement from '../getComponentImportStatement';
+import scenarioComponentForServer from '../scenarioComponentForServer';
+
+const VERSION = '0.5.1';
+
+/**
+ * Generates a Server Component page for async components (Server Components in Next.js).
+ *
+ * This is needed because:
+ * 1. Async components use await, which only works in Server Components
+ * 2. Client Components ("use client") don't support async/await in the component body
+ * 3. We use Next.js composition pattern: Server Component page renders the async component,
+ *    then wraps it in a Client Component (ScenarioClientWrapper) for interactive features
+ */
+export default function generateScenarioServerComponent({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  relativeMocksDir,
+}: {
+  file: File;
+  entity: Entity;
+  analysis: Analysis;
+  currentPath: string;
+  appPath: string;
+  scenario: Scenario;
+  relativeMocksDir: string;
+}) {
+  const fileName = file.name.split('.')[0];
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `/* eslint-disable */
+// Server Component page for async component: ${entity.name}
+// This page does NOT have "use client" - it runs on the server
+import { ScenarioClientWrapper } from "${relativeMocksDir}/ScenarioClientWrapper";
+${analysis.scenarios?.length > 0 ? `import { scenarios } from "${relativeMocksDir}/MockData_${safeScenarioName}";` : ''}
+${getComponentImportStatement({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  primary: true,
+  namedExport:
+    entity.name !== 'default' &&
+    (entity.metadata?.notExported || entity.metadata?.namedExport) &&
+    entity.entityType !== 'library',
+})}
+
+function getScenarioProps({ argumentIndex, propName }: { argumentIndex: number, propName?: string }) {
+  const data = scenarios().data();
+  const argument = data['arguments'][argumentIndex];
+  return propName ? argument[propName] : argument;
+}
+
+export default async function Index() {
+  return (
+    <ScenarioClientWrapper
+      scenarioName="${scenario.name}"
+      fileName="${fileName}"
+      version="${VERSION}"
+    >
+      ${scenarioComponentForServer(entity, analysis, scenario)}
+    </ScenarioClientWrapper>
+  );
+}`;
+}

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/getIFrameMessageListenerCode.ts

@@ -3,6 +3,11 @@ export default function getIFrameMessageListenerCode({
 }: {
   scenarioName: string;
 }): string {
+  // Escape backslashes first, then single quotes to produce valid JS string literals
+  const escapedScenarioName = scenarioName
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'");
+
   return `const [version, setVersion] = useState(1);
 
   function _getScenarioProps({ argumentIndex, propName }: { argumentIndex: number, propName?: string }) {
@@ -14,7 +19,7 @@ export default function getIFrameMessageListenerCode({
     try {
       window.parent.postMessage({ 
         type: 'codeyam-update', 
-        name: '${scenarioName}',
+        name: '${escapedScenarioName}',
         message,
       }, '*');
     } catch (e) {
@@ -28,7 +33,7 @@ export default function getIFrameMessageListenerCode({
         const parsedData = JSON.parse(event.data.data);
         console.log("Override data received");
         respond("Set override data to " + JSON.stringify(parsedData, null, 2));
-        scenarios().updateData('${scenarioName}', parsedData);
+        scenarios().updateData('${escapedScenarioName}', parsedData);
         setVersion(prev => prev + 1);
       }
     }
@@ -38,23 +43,40 @@ export default function getIFrameMessageListenerCode({
   }, [respond])
   
   useEffect(() => {
+    function _codeyamReportToServer(type, message, stack) {
+      try {
+        const body = JSON.stringify({
+          type,
+          message: String(message).slice(0, 2000),
+          stack: stack ? String(stack).slice(0, 3000) : undefined,
+          scenario: '${escapedScenarioName}',
+          url: window.location.href,
+        });
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon('/api/client-log', new Blob([body], { type: 'application/json' }));
+        } else {
+          fetch('/api/client-log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {});
+        }
+      } catch (e) {}
+    }
+
     const oldConsoleLog = console.log;
     console.log = function(...args) {
       oldConsoleLog(...args);
       try {
         window.parent.postMessage({
           type: 'codeyam-log',
-          name: '${scenarioName}',
+          name: '${escapedScenarioName}',
           data: {
             log: {
               name: "console.log",
-              args 
-            } 
+              args
+            }
           }
         }, '*');
       } catch (e) {
         oldConsoleLog('Error posting message to parent', e);
-      }      
+      }
     }
 
     const oldConsoleError = console.error;
@@ -62,16 +84,27 @@ export default function getIFrameMessageListenerCode({
       oldConsoleError(...args);
       window.parent.postMessage({
         type: 'codeyam-log',
-        name: '${scenarioName}',
+        name: '${escapedScenarioName}',
         data: {
           log: {
             name: "console.log",
-            args 
-          } 
+            args
+          }
         }
       }, '*');
+      const message = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
+      _codeyamReportToServer('console.error', message);
     }
 
+    window.addEventListener('error', function(event) {
+      _codeyamReportToServer('error', event.message, event.error?.stack);
+    });
+
+    window.addEventListener('unhandledrejection', function(event) {
+      const reason = event.reason;
+      _codeyamReportToServer('unhandledrejection', reason?.message || String(reason), reason?.stack);
+    });
+
     return () => {
       console.log = oldConsoleLog;
       console.error = oldConsoleError;

package/analyzer-template/packages/generate/src/lib/deepMerge.ts

@@ -14,16 +14,43 @@ export default function deepMerge(
       seen.add(changes);
     }
 
+    // Handle arrays at the top level - this is critical for nested arrays (tuples)
+    // like [["path", { data }]] which should NOT be converted to objects
+    if (Array.isArray(changes)) {
+      const defaultArray = Array.isArray(defaultData) ? defaultData : [];
+      const result: any[] = [];
+      for (let i = 0; i < changes.length; i++) {
+        const item = changes[i];
+        if (item && typeof item === 'object' && !Array.isArray(item)) {
+          // Merge object items with corresponding default array item
+          result[i] = deepMerge(defaultArray[i], item, seen);
+        } else if (Array.isArray(item)) {
+          // Recursively handle nested arrays (tuples)
+          result[i] = deepMerge(defaultArray[i], item, seen);
+        } else {
+          result[i] = item;
+        }
+      }
+      return result;
+    }
+
     const merge = { ...defaultData };
     for (const key in changes) {
       if (changes[key] === null) {
-        delete merge[key];
+        // Preserve null values explicitly - components often check `value !== null`
+        // to distinguish between "not loaded" (undefined) and "explicitly null" (null)
+        merge[key] = null;
       } else if (Array.isArray(changes[key])) {
+        // Get the original default array BEFORE we replace it
+        const defaultArray = Array.isArray(defaultData[key])
+          ? defaultData[key]
+          : [];
         merge[key] = [];
         for (let i = 0; i < changes[key].length; i++) {
           const item = changes[key][i];
           if (typeof item === 'object' && item !== null) {
-            merge[key][i] = deepMerge(merge?.[key]?.[i], item, seen);
+            // Merge with corresponding item from default array by index position
+            merge[key][i] = deepMerge(defaultArray[i], item, seen);
           } else {
             merge[key][i] = item;
           }

package/analyzer-template/packages/generate/src/lib/directExecutionScript.ts

@@ -18,6 +18,22 @@ export default function directExecutionScript(
   scenario: Scenario,
 ): string {
   const { name: entityName } = entity;
+
+  // notExported entities cannot be imported, so we can't generate an execution script
+  if (entity.metadata?.notExported) {
+    console.log(
+      'CodeYam Error: directExecutionScript called with notExported entity',
+      {
+        entityName,
+        filePath: file.path,
+        metadata: entity.metadata,
+      },
+    );
+    throw new Error(
+      `Cannot generate execution script for entity '${entityName}' - it is not exported from '${file.path}'`,
+    );
+  }
+
   const safeEntityName =
     entityName === 'default' ? 'defaultExport' : entityName;
 
@@ -46,8 +62,7 @@ export default function directExecutionScript(
 
   // Determine if it's a named or default export
   const isDefaultExport = entity.name === 'default';
-  const isNamedExport =
-    entity.metadata?.namedExport || entity.metadata?.notExported;
+  const isNamedExport = entity.metadata?.namedExport;
 
   let importStatement: string;
   if (isMethod) {

package/analyzer-template/packages/generate/src/lib/getComponentScenarioPath.ts

@@ -23,13 +23,18 @@ export default function getComponentScenarioPath(
     getRelativePath(currentPath, filePath).split('/').slice(0, -1).join('/'),
   );
 
+  // Check if the file is an index file (e.g., index.tsx, index.ts)
+  // This must match the logic in writeScenarioComponents.ts
+  const isIndexFile = file.name.startsWith('index.');
+  const indexPrefix = isIndexFile ? 'index_' : '';
+
   if (scenario) {
     // Include scenario name in path to allow multiple scenarios to coexist
     const importPath = isLibraryDemoPage
-      ? `${relativePath}/${entity.sha}_${safeFileName(entityName)}_${safeFileName(scenario.name)}`
-      : `${relativePath}/${entity.sha}_${safeFileName(entityName)}_${safeFileName(scenario.name)}`;
+      ? `${relativePath}/${entity.sha}_${indexPrefix}${safeFileName(entityName)}_${safeFileName(scenario.name)}`
+      : `${relativePath}/${entity.sha}_${indexPrefix}${safeFileName(entityName)}_${safeFileName(scenario.name)}`;
     return `${importPath}`;
   }
 
-  return `${relativePath}_${entity.sha}_${safeFileName(entityName)}`;
+  return `${relativePath}_${entity.sha}_${indexPrefix}${safeFileName(entityName)}`;
 }

package/analyzer-template/packages/generate/src/lib/scenarioComponentForServer.ts

@@ -0,0 +1,114 @@
+import type { Analysis, Entity, Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import handleWrappers from './handleWrappers';
+
+// Escape double quotes for use in JavaScript string literals
+const escapeForJsString = (s: string): string => s.replace(/"/g, '\\"');
+
+const dimensionString = (dimension?: string | number) => {
+  if (!dimension) return 'auto';
+  if (typeof dimension === 'string') {
+    if (dimension === 'full') return '100%';
+    if (dimension.indexOf('%') > -1) return dimension;
+    if (dimension.indexOf('px') > -1) return dimension;
+  }
+  return `${dimension}px`;
+};
+
+/**
+ * Generates the component JSX for Server Component pages.
+ * Unlike scenarioComponent, this doesn't wrap in a Scenario component
+ * (the ScenarioClientWrapper handles that on the client).
+ */
+export default function scenarioComponentForServer(
+  entity: Entity,
+  analysis: Analysis,
+  scenario: Scenario,
+) {
+  let entityComponentName =
+    entity.entityType === 'library' ? safeFileName(entity.name) : entity.name;
+
+  if (entityComponentName === 'default') {
+    entityComponentName =
+      entity.entityType === 'library' ? 'defaultExport' : 'DefaultExport';
+  }
+
+  const positionalArguments =
+    analysis.metadata?.scenariosDataStructure?.arguments ?? [];
+  const namedArguments =
+    typeof positionalArguments?.[0] === 'object'
+      ? Object.keys(positionalArguments?.[0])
+      : [];
+
+  // Use analysis.metadata.defaultWidth as override, otherwise fall back to entity.metadata.defaultWidth
+  const width = dimensionString(
+    entity?.entityType === 'library'
+      ? '100%'
+      : (analysis.metadata?.defaultWidth ?? entity.metadata?.defaultWidth),
+  );
+
+  console.log('CodeYam: Server Scenario', {
+    analysisId: scenario.analysisId,
+    scenarioId: scenario.id,
+    scenarioName: scenario.name,
+    scenarioDescription: scenario.description,
+    width,
+  });
+
+  const childrenArg = namedArguments.find((name) => name === 'children');
+  const nonChildrenAndRefProps = namedArguments.filter(
+    (name) => name !== 'children' && name !== 'ref',
+  );
+
+  // Deduplicate props by their base name (before parentheses for function overloads)
+  const seenBaseNames = new Set<string>();
+  const uniqueProps = nonChildrenAndRefProps.filter((name) => {
+    const baseName = name.endsWith(')') ? name.split('(')[0] : name;
+    if (seenBaseNames.has(baseName)) {
+      return false;
+    }
+    seenBaseNames.add(baseName);
+    return true;
+  });
+
+  const argsSpacing = '\n         ';
+  let args = `${argsSpacing}`;
+
+  if (positionalArguments.length === 0) {
+    args += '>';
+  } else if (positionalArguments.length === 1) {
+    if (typeof positionalArguments[0] === 'object') {
+      args +=
+        uniqueProps?.length > 0
+          ? `${uniqueProps
+              .map((name) =>
+                isNaN(parseInt(name))
+                  ? name.endsWith(')')
+                    ? `${name.split('(')[0]}={() => getScenarioProps({ argumentIndex: 0, propName: "${escapeForJsString(name)}" }) as any}`
+                    : `${name}={getScenarioProps({ argumentIndex: 0, propName: "${escapeForJsString(name)}" }) as any}`
+                  : `positionalArgument_${name}={getScenarioProps({ argumentIndex: 0, propName: "positionalArgument_${escapeForJsString(name)}" }) as any}`,
+              )
+              .join(argsSpacing)}\n      >`
+          : `>`;
+    } else {
+      args += `positionalArgument_0={getScenarioProps({ argumentIndex: 0 }) as any}${argsSpacing}\n      >`;
+    }
+  } else if (positionalArguments.length > 1) {
+    args += `${positionalArguments
+      .map(
+        (_, index) =>
+          `positionalArgument_${index}={getScenarioProps({ argumentIndex: ${index} }) as any}`,
+      )
+      .join(argsSpacing)}\n      >`;
+  }
+
+  const children = childrenArg
+    ? `\n             {getScenarioProps({ argumentIndex: 0, propName: 'children'})}`
+    : '';
+
+  // For server components, we don't wrap in Scenario - that's handled by ScenarioClientWrapper
+  return handleWrappers(
+    `<${entityComponentName}${args}${children}\n          </${entityComponentName}>`,
+    analysis,
+  );
+}