@lightspeed/crane 2.0.5 → 3.0.0

package/template/preview/shared/api-routes.ts

@@ -3,16 +3,18 @@ import type { IncomingMessage, ServerResponse } from 'http';
 import * as path from 'path';
 import { URL } from 'url';
 
-import type {
+import {
   ContentEditor,
   ContentSettings,
   DeckContentEditor,
   DesignSettings,
   LayoutSettings,
+  DesignEditorDefaults, DesignEditor,
 } from '@lightspeed/crane-api';
 
-import { getShowcaseData } from './preview';
-import { fetchTiles, updateTilesSection, updateCustomContent } from './utils';
+import { debugLog } from './logger';
+import { getShowcaseData,  BlockType, BLOCK_TYPES } from './preview';
+import { fetchTiles, updateTilesSection, updateCustomContent, getBlockType } from './utils';
 
 /**
  * AppBlock type definition for block-config response
@@ -51,7 +53,6 @@ interface LayoutConfigItem {
   svgIconText: string;
 }
 
-
 /**
  * Extract query parameter from URL
  */
@@ -139,6 +140,30 @@ function extractEnglishTranslations(value: unknown): unknown {
   return value;
 }
 
+function transformDesignDefaults(defaults: DesignEditor): DesignEditorDefaults | string {
+  //  Process nested properties first
+  const cleanedEntries = Object.entries(defaults).map(([key, value]) => {
+    const processedValue = (value && typeof value === 'object' && !Array.isArray(value))
+      ? transformDesignDefaults(value)
+      : value;
+
+    return [key, processedValue];
+  });
+
+  // Final default values don't need a type
+  const remainingEntries = cleanedEntries.filter(
+    ([key]) => key.toLowerCase() !== 'type',
+  );
+
+  // If we just have 1 key left, return the value
+  if (remainingEntries.length === 1) {
+    return remainingEntries[0][1] as string;
+  }
+
+  // Rebuild the object
+  return Object.fromEntries(remainingEntries);
+}
+
 /**
  * Transform editor type to the expected format
  * INPUTBOX -> TEXT_EDITOR
@@ -154,6 +179,12 @@ function transformEditorType(type: string): string {
       return 'MULTILINE_TEXT_EDITOR';
     case 'BUTTON':
       return 'ACTION_LINK_EDITOR';
+    case 'PRODUCT_SELECTOR':
+      return 'CUSTOM_CATEGORY_PRODUCTS_SELECTOR_EDITOR';
+    case 'CATEGORY_SELECTOR':
+      return 'CUSTOM_CATEGORY_SELECTOR_EDITOR';
+    case 'BACKGROUND':
+      return 'GENERAL_EDITOR';
     default:
       return `${upperType}_EDITOR`;
   }
@@ -233,19 +264,56 @@ function processEditor(editor: ContentEditor, fieldName: string): Record<string,
   return processEditorExceptDeck(editor, fieldName);
 }
 
+/**
+ * Process a design editor with additional properties for vuega compatibility
+ */
+function processDesignEditor(editor: ContentEditor, fieldName: string): Record<string, unknown> {
+  const editorType = (editor.type as string || '').toUpperCase();
+  const transformedType = transformEditorType(editorType);
+
+  // Start with field and transformed type
+  const result: Record<string, unknown> = {
+    field: fieldName,
+    type: transformedType,
+  };
+
+  // Copy all original properties except 'type', 'sizes', and 'defaults'
+  for (const [key, value] of Object.entries(editor)) {
+    if (key === 'type' || key === 'defaults') {
+      continue;
+    }
+    if (key === 'sizes') {
+      // Rename 'sizes' to 'textSizes' for vuega compatibility
+      result.textSizes = value;
+      continue;
+    }
+    result[key] = extractEnglishTranslations(value);
+  }
+
+  // Add contentSourceField (links design editor to content field)
+  result.contentSourceField = fieldName;
+  return result;
+}
 
 /**
  * Build layout config from appBlock data
  * Creates the config.layoutConfigList structure from appBlock's layouts, contentEditors, and designEditors
  */
-function buildLayoutConfig(appBlock: AppBlock): { type: string; layoutConfigList: LayoutConfigItem[] } {
+const DEFAULT_LAYOUT_CONFIG: LayoutSettings = {
+  layoutId: 'CUSTOM_LAYOUT',
+  selectedContentSettings: [],
+  selectedDesignSettings: [],
+};
+
+function buildLayoutConfig(appBlock: AppBlock): { type: string; config: { layoutConfigList: LayoutConfigItem[] } } {
   const { layouts, contentEditors, designEditors } = appBlock;
 
+  const layoutsToProcess = layouts?.length > 0 ? layouts : [DEFAULT_LAYOUT_CONFIG];
+
   // contentEditors and designEditors are objects with field names as keys
   const contentEditorKeys = Object.keys(contentEditors);
   const designEditorKeys = Object.keys(designEditors);
-
-  const layoutConfigList = layouts.map((layout, index) => {
+  const layoutConfigList = layoutsToProcess.map((layout, index) => {
     const { layoutId, selectedContentSettings, selectedDesignSettings } = layout;
 
     const contentFieldsToInclude = selectedContentSettings.length === 0
@@ -267,7 +335,7 @@ function buildLayoutConfig(appBlock: AppBlock): { type: string; layoutConfigList
       ? designEditorKeys
       : selectedDesignSettings.map(s => s.fieldName);
 
-    // Build design mainEditors - include all design editor types with all their fields
+    // Build design mainEditors - use processDesignEditor for vuega-compatible output
     const designMainEditors = designFieldsToInclude
       .filter((fieldName) => {
         const editor = designEditors[fieldName];
@@ -275,25 +343,16 @@ function buildLayoutConfig(appBlock: AppBlock): { type: string; layoutConfigList
       })
       .map((fieldName) => {
         const editor = designEditors[fieldName];
-        return processEditor(editor as ContentEditor, fieldName);
+        return processDesignEditor(editor as ContentEditor, fieldName);
       });
 
-    // Build defaults from design editors (extract English translations)
+    // Build defaults from design editors - only transform color to full object
     const defaults: Record<string, unknown> = {};
     designFieldsToInclude.forEach((fieldName) => {
       const editor = designEditors[fieldName];
       if (editor && editor.defaults) {
-        defaults[fieldName] = extractEnglishTranslations(editor.defaults);
-      }
-    });
-
-    // Apply layout-specific design overrides from selectedDesignSettings
-    selectedDesignSettings.forEach((setting) => {
-      if (typeof setting === 'object' && setting.fieldName && setting.defaults) {
-        defaults[setting.fieldName] = {
-          ...(defaults[setting.fieldName] as Record<string, unknown> || {}),
-          ...(extractEnglishTranslations(setting.defaults) as Record<string, unknown>),
-        };
+        const extracted = extractEnglishTranslations(editor.defaults) as DesignEditor;
+        defaults[fieldName] = transformDesignDefaults(extracted);
       }
     });
 
@@ -318,7 +377,9 @@ function buildLayoutConfig(appBlock: AppBlock): { type: string; layoutConfigList
 
   return {
     type: 'CUSTOM',
-    layoutConfigList,
+    config: {
+      layoutConfigList,
+    },
   };
 }
 
@@ -330,14 +391,12 @@ async function handleGetBlockConfigFull(
   req: IncomingMessage,
   res: ServerResponse,
   sectionName: string,
-  typeParam: string,
 ): Promise<void> {
   try {
     // Fetch appBlock from the CLI's /api/v1/block-config endpoint
     const host = req.headers.host || 'localhost:5173';
     const protocol = 'http';
-    const blockConfigUrl = `${protocol}://${host}/api/v1/block-config?section=${encodeURIComponent(sectionName)}&type=${encodeURIComponent(typeParam)}`;
-
+    const blockConfigUrl = `${protocol}://${host}/api/v1/block-config?section=${encodeURIComponent(sectionName)}`;
     const response = await fetch(blockConfigUrl);
 
     if (!response.ok) {
@@ -358,9 +417,7 @@ async function handleGetBlockConfigFull(
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
-    res.end(JSON.stringify({
-      config,
-    }, null, 2));
+    res.end(JSON.stringify(config, null, 2));
   } catch (error) {
     console.error('[API Routes] ❌ Error fetching block config:', error);
     res.statusCode = 500;
@@ -374,14 +431,14 @@ async function handleGetBlockConfigFull(
 }
 
 /**
- * Get all available showcases for a section from the dist folder
+ * Get all available showcases for a block from the dist folder
  */
-function getAvailableShowcases(sectionName: string, distPath: string): string[] {
+function getAvailableShowcases(blockType: BlockType, blockName: string, distPath: string): string[] {
   try {
-    const showcasesPath = path.join(distPath, 'sections', sectionName, 'js', 'showcases');
+    const showcasesPath = path.join(distPath, blockType, blockName, 'js', 'showcases');
 
     if (!fs.existsSync(showcasesPath)) {
-      console.warn(`[API Routes] Showcases directory not found for section "${sectionName}": ${showcasesPath}`);
+      console.warn(`[API Routes] Showcases directory not found for ${blockType}/"${blockName}": ${showcasesPath}`);
       return [];
     }
 
@@ -393,7 +450,27 @@ function getAvailableShowcases(sectionName: string, distPath: string): string[]
 
     return showcases;
   } catch (error) {
-    console.error(`[API Routes] Error reading showcases for section "${sectionName}":`, error);
+    console.error(`[API Routes] Error reading showcases for ${blockType}/"${blockName}":`, error);
+    return [];
+  }
+}
+
+/**
+ * Get all available blocks of a specific type (sections, headers, footers)
+ */
+function getAvailableBlocks(blockType: BlockType, distPath: string): string[] {
+  try {
+    const blocksPath = path.join(distPath, blockType);
+
+    if (!fs.existsSync(blocksPath)) {
+      return [];
+    }
+
+    return fs.readdirSync(blocksPath, { withFileTypes: true })
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+  } catch (error) {
+    console.error(`[API Routes] Error reading ${blockType}:`, error);
     return [];
   }
 }
@@ -401,8 +478,8 @@ function getAvailableShowcases(sectionName: string, distPath: string): string[]
 /**
  * Get all showcase IDs for a given section
  */
-function getShowcaseIds(sectionName: string, distPath: string): string[] {
-  return getAvailableShowcases(sectionName, distPath);
+function getShowcaseIds(blockType: BlockType, blockName: string, distPath: string): string[] {
+  return getAvailableShowcases(blockType, blockName, distPath);
 }
 
 /**
@@ -414,7 +491,7 @@ function getShowcaseIds(sectionName: string, distPath: string): string[] {
 async function handleGetTile(
   _req: IncomingMessage,
   res: ServerResponse,
-  sectionNames: string[],
+  blockNames: string[],
   authToken?: string,
   tileUrl?: string,
 ): Promise<void> {
@@ -423,25 +500,32 @@ async function handleGetTile(
 
     // Fetch tiles from remote once
     let responseData = await fetchTiles(authToken, tileUrl);
+    debugLog('[API Routes] Processing tile data');
+    // Process all selected blocks (sections, headers, or footers)
+    const blockPromises = blockNames.flatMap((blockName) => {
+      const blockType = getBlockType(blockName, distPath);
+      if (!blockType) {
+        console.warn(`[API Routes] Block not found: ${blockName}`);
+        return [];
+      }
 
-    // Fetch all showcase data in parallel
-    const showcaseDataPromises = sectionNames.flatMap((sectionName) => {
-      const showcaseIds = getShowcaseIds(sectionName, distPath);
+      const showcaseIds = getShowcaseIds(blockType, blockName, distPath);
       return showcaseIds.map(async (showcaseId) => {
         const { content, design } = await getShowcaseData(
-          sectionName,
+          blockType,
+          blockName,
           showcaseId,
           distPath,
         );
-        return { sectionName, showcaseId, content, design };
+        return { blockName, showcaseId, content, design };
       });
     });
 
-    const allShowcaseData = await Promise.all(showcaseDataPromises);
-    for (const { sectionName, showcaseId, content, design } of allShowcaseData) {
-      responseData = updateTilesSection(responseData, sectionName, showcaseId, content, design);
+    // Wait for all showcase data in parallel
+    const allShowcaseData = await Promise.all(blockPromises);
+    for (const { blockName, showcaseId, content, design } of allShowcaseData) {
+      responseData = updateTilesSection(responseData, blockName, showcaseId, content, design);
     }
-
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
@@ -458,12 +542,54 @@ async function handleGetTile(
   }
 }
 
+async function updateTile(url: string, authToken?: string, body?: unknown) {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  if (authToken) {
+    headers['Authorization'] = authToken;
+  }
+
+  const response = await fetch(url, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    console.error('[API Routes] Failed to update tiles at original_url:', response.status, response.statusText);
+    return null;
+  }
+
+  return response.json();
+}
+
 /**
  * Handle PUT /api/v1/tile
  * Updates tiles with content and design from remote
  * Accepts an array of tiles in the request body
  * For each tile, fetches remote data, updates content and design, and sends to original_url
  */
+
+async function handleIndividualTileUpdate(url: string, authToken?: string, body?: unknown) {
+  const remoteTile = await fetchTiles(authToken, url);
+
+  const content = (body as Record<string, unknown>).content;
+  const design = (body as Record<string, unknown>).design;
+
+  //change content and design
+  const tileToUpdate = { ...remoteTile, content, design };
+
+  //get update external content
+  const updatedTile = await updateTile(url, authToken, tileToUpdate);
+
+  //restore to original
+  await updateTile(url, authToken, remoteTile);
+
+  return updatedTile;
+}
+
 async function handleUpdateTile(
   req: IncomingMessage,
   res: ServerResponse,
@@ -477,7 +603,9 @@ async function handleUpdateTile(
       res.statusCode = 200;
       res.setHeader('Content-Type', 'application/json');
       setNoCacheHeaders(res);
-      res.end(JSON.stringify(requestBody, null, 2));
+      const updatedTile = await handleIndividualTileUpdate(originalUrl, authToken, requestBody);
+      res.end(JSON.stringify(updatedTile, null, 2));
+
       return;
     }
 
@@ -540,31 +668,15 @@ async function handleUpdateTile(
       return;
     }
 
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-    };
-
-    if (authToken) {
-      headers['Authorization'] = authToken;
-    }
-
-    const response = await fetch(originalUrl, {
-      method: 'PUT',
-      headers,
-      body: JSON.stringify(updatedRequestBody),
-    });
+    const responseData = await updateTile(originalUrl, authToken, updatedRequestBody);
 
-    if (!response.ok) {
-      console.error('[API Routes] Failed to update tiles at original_url:', response.status, response.statusText);
-      res.statusCode = response.status;
+    if (responseData == null) {
       res.setHeader('Content-Type', 'application/json');
       setNoCacheHeaders(res);
       res.end(JSON.stringify(requestBody, null, 2));
       return;
     }
 
-    const responseData = await response.json();
-
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
@@ -616,32 +728,22 @@ export function handleGetSections(
 ): void {
   try {
     const distPath = path.resolve(process.cwd(), 'dist');
-    const sectionsPath = path.join(distPath, 'sections');
-
-    // Check if sections directory exists
-    if (!fs.existsSync(sectionsPath)) {
-      res.statusCode = 200;
-      res.setHeader('Content-Type', 'application/json');
-      setNoCacheHeaders(res);
-      res.end(JSON.stringify({ sections: [] }));
-      return;
-    }
 
-    // Read all directories in the sections folder
-    const sectionNames = fs.readdirSync(sectionsPath, { withFileTypes: true })
-      .filter(dirent => dirent.isDirectory())
-      .map(dirent => dirent.name);
-
-    // Build sections array with showcase data
-    const sections = sectionNames.map(sectionName => ({
-      name: sectionName,
-      showcases: getAvailableShowcases(sectionName, distPath),
-    }));
+    // Build block lists for all types
+    const result = Object.fromEntries(
+      BLOCK_TYPES.map(blockType => [
+        blockType,
+        getAvailableBlocks(blockType, distPath).map(blockName => ({
+          name: blockName,
+          showcases: getAvailableShowcases(blockType, blockName, distPath),
+        })),
+      ]),
+    );
 
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
-    res.end(JSON.stringify({ sections }, null, 2));
+    res.end(JSON.stringify(result, null, 2));
   } catch (error) {
     console.error('[API Routes] ❌ Error listing sections:', error);
     res.statusCode = 500;
@@ -706,17 +808,28 @@ export async function handleUpdateCustomContent(
  */
 async function serveClientFile(
   res: ServerResponse,
-  sectionName: string,
+  blockName: string,
   filePath: string,
   contentType: string,
 ): Promise<void> {
   try {
     const distPath = path.resolve(process.cwd(), 'dist');
-    const fullPath = path.join(distPath, 'sections', sectionName, 'js', 'main', 'client', filePath);
+
+    // Determine block type from folder
+    const blockType = getBlockType(blockName, distPath);
+    if (!blockType) {
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Block not found', block: blockName }));
+      return;
+    }
+
+    const fullPath = path.join(distPath, blockType, blockName, 'js', 'main', 'client', filePath);
 
     // Security: prevent directory traversal
     const resolvedPath = path.resolve(fullPath);
-    const basePath = path.resolve(distPath, 'sections', sectionName);
+    const basePath = path.resolve(distPath, blockType, blockName);
     if (!resolvedPath.startsWith(basePath)) {
       res.statusCode = 403;
       res.setHeader('Content-Type', 'application/json');
@@ -729,7 +842,7 @@ async function serveClientFile(
       res.statusCode = 404;
       res.setHeader('Content-Type', 'application/json');
       setNoCacheHeaders(res);
-      res.end(JSON.stringify({ error: 'File not found', file: filePath, section: sectionName }));
+      res.end(JSON.stringify({ error: 'File not found', file: filePath, block: blockName }));
       return;
     }
 
@@ -752,36 +865,36 @@ async function serveClientFile(
 
 /**
  * Handle GET /api/v1/client-js
- * Returns client.js for a specific section
+ * Returns client.js for a specific block (section, header, or footer)
  */
 async function handleGetClientJs(
   _req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
+  blockName: string,
 ): Promise<void> {
-  await serveClientFile(res, sectionName, 'client.js', 'application/javascript');
+  await serveClientFile(res, blockName, 'client.js', 'application/javascript');
 }
 
 /**
  * Handle GET /api/v1/client-css
- * Returns client.css for a specific section
+ * Returns client.css for a specific block (section, header, or footer)
  */
 async function handleGetClientCss(
   _req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
+  blockName: string,
 ): Promise<void> {
-  await serveClientFile(res, sectionName, 'assets/client.css', 'text/css');
+  await serveClientFile(res, blockName, 'assets/client.css', 'text/css');
 }
 
 /**
  * Handle GET /api/v1/assets
- * Returns assets for a specific section
+ * Returns assets for a specific block (section, header, or footer)
  */
 async function handleGetAssets(
   req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
+  blockName: string,
 ): Promise<void> {
   try {
     const url = req.url || '';
@@ -805,9 +918,20 @@ async function handleGetAssets(
     }
 
     const distPath = path.resolve(process.cwd(), 'dist');
-    const fullPath = path.join(distPath, 'sections', sectionName, 'assets', filePath);
+
+    // Determine block type from folder
+    const blockType = getBlockType(blockName, distPath);
+    if (!blockType) {
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Block not found', block: blockName }));
+      return;
+    }
+
+    const fullPath = path.join(distPath, blockType, blockName, 'assets', filePath);
     const resolvedPath = path.resolve(fullPath);
-    const basePath = path.resolve(distPath, 'sections', sectionName, 'assets');
+    const basePath = path.resolve(distPath, blockType, blockName, 'assets');
 
     if (!resolvedPath.startsWith(basePath)) {
       res.statusCode = 403;
@@ -821,7 +945,7 @@ async function handleGetAssets(
       res.statusCode = 404;
       res.setHeader('Content-Type', 'application/json');
       setNoCacheHeaders(res);
-      res.end(JSON.stringify({ error: 'Asset not found', file: filePath, section: sectionName }));
+      res.end(JSON.stringify({ error: 'Asset not found', file: filePath, block: blockName }));
       return;
     }
 
@@ -881,6 +1005,16 @@ export function handleApiRequest(
     return;
   }
 
+  // Return WebSocket port for Chrome extension
+  if (url.startsWith('/api/v1/extension-ws-port')) {
+    const wsPort = process.env.CRANE_WEBSOCKET_PORT || null;
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({ port: wsPort }));
+    return;
+  }
+
   // Extract section name from query parameter if provided
   const sectionName = getQueryParam(url, 'section') || '';
 
@@ -904,8 +1038,7 @@ export function handleApiRequest(
   }
 
   if (url.startsWith('/api/v1/block-config-full')) {
-    const typeParam = getQueryParam(url, 'type') || 'SECTION';
-    handleGetBlockConfigFull(req, res, sectionName, typeParam);
+    handleGetBlockConfigFull(req, res, sectionName);
     return;
   }
 

package/template/preview/shared/logger.ts

@@ -0,0 +1,9 @@
+/**
+ * Debug logging for preview runtime.
+ * Checks CRANE_DEBUG_ENABLED env set by CLI --verbose flag.
+ */
+export function debugLog(message: string, ...args: unknown[]): void {
+  if (process.env.CRANE_DEBUG_ENABLED === 'true') {
+    console.debug(`[DEBUG] ${message}`, ...args);
+  }
+}