@lightspeed/crane 1.4.2 → 2.0.0

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

@@ -1,8 +1,22 @@
 import * as path from 'path';
-import { getContentAndDesign } from './preview';
+import * as fs from 'fs';
+import { URL } from 'url';
+import { getShowcaseData } from './preview';
 import { fetchTiles, updateTilesSection, updateCustomContent } from './utils';
 import type { IncomingMessage, ServerResponse } from 'http';
 
+/**
+ * Extract query parameter from URL
+ */
+function getQueryParam(url: string, paramName: string): string | null {
+  try {
+    const urlObj = new URL(url, 'http://localhost');
+    return urlObj.searchParams.get(paramName);
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Set no-cache headers to prevent browser caching
  */
@@ -13,88 +27,352 @@ function setNoCacheHeaders(res: ServerResponse): void {
   res.setHeader('Surrogate-Control', 'no-store');
 }
 
+/**
+ * Get all available showcases for a section from the dist folder
+ */
+function getAvailableShowcases(sectionName: string, distPath: string): string[] {
+  try {
+    const showcasesPath = path.join(distPath, 'sections', sectionName, 'js', 'showcases');
+
+    if (!fs.existsSync(showcasesPath)) {
+      console.warn(`[API Routes] Showcases directory not found for section "${sectionName}": ${showcasesPath}`);
+      return [];
+    }
+
+    const showcases = fs.readdirSync(showcasesPath, { withFileTypes: true })
+      .filter(dirent => dirent.isFile() && dirent.name.endsWith('.mjs'))
+      .map(dirent => dirent.name.replace('.mjs', ''))
+      .sort((a, b) => {
+        // Sort numerically if both are numbers, otherwise alphabetically
+        const aNum = parseInt(a, 10);
+        const bNum = parseInt(b, 10);
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          return aNum - bNum;
+        }
+        return a.localeCompare(b);
+      });
+
+    return showcases;
+  } catch (error) {
+    console.error(`[API Routes] Error reading showcases for section "${sectionName}":`, error);
+    return [];
+  }
+}
+
+/**
+ * Get all showcase IDs for a given section
+ */
+function getShowcaseIds(sectionName: string, distPath: string): string[] {
+  return getAvailableShowcases(sectionName, distPath);
+}
+
 /**
  * Handle GET /api/v1/tile
- * Returns tile data with content and design
+ * Returns tile data with content and design for all showcases in multiple sections
+ * Fetches tiles from remote once and updates them for each section/showcase
+ * Accepts section names as parameter from Chrome extension
  */
 export async function handleGetTile(
   _req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
-  showcaseId: string
+  sectionNames: string[],
+  authToken?: string,
+  tileUrl?: string,
 ): Promise<void> {
   try {
     const distPath = path.resolve(process.cwd(), 'dist');
 
-    // Use getContentAndDesign from preview.ts to fetch content and design
-    const { content, design } = await getContentAndDesign(sectionName, showcaseId, distPath);
+    // Fetch tiles from remote once
+    let responseData = await fetchTiles(authToken, tileUrl);
+
+    // Fetch all showcase data in parallel
+    const showcaseDataPromises = sectionNames.flatMap((sectionName) => {
+      const showcaseIds = getShowcaseIds(sectionName, distPath);
+      return showcaseIds.map(async (showcaseId) => {
+        const { content, design } = await getShowcaseData(
+          sectionName,
+          showcaseId,
+          distPath,
+        );
+        return { sectionName, showcaseId, content, design };
+      });
+    });
 
-    // Fetch and update tiles
-    const tilesResponse = await fetchTiles();
-    const responseData = updateTilesSection(tilesResponse, sectionName, showcaseId, content, design);
+    const allShowcaseData = await Promise.all(showcaseDataPromises);
+
+    for (const { sectionName, showcaseId, content, design } of allShowcaseData) {
+      responseData = updateTilesSection(responseData, sectionName, showcaseId, content, design);
+    }
 
     res.statusCode = 200;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
     res.end(JSON.stringify(responseData, null, 2));
+  } catch (error) {
+    console.error('[API Routes] ❌ Error processing tile data:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Failed to process tile data',
+      message: error instanceof Error ? error.message : String(error),
+    }));
+  }
+}
+
+/**
+ * Handle GET /api/v1/sections
+ * Returns list of available sections with their showcases
+ */
+export function handleGetSections(
+  _req: IncomingMessage,
+  res: ServerResponse,
+): 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),
+    }));
+
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({ sections }, null, 2));
   } catch (error) {
-    console.error('[API Routes] ❌ Error loading tile data:', error);
+    console.error('[API Routes] ❌ Error listing sections:', error);
     res.statusCode = 500;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
     res.end(JSON.stringify({
-      error: 'Failed to load tile data',
+      error: 'Failed to list sections',
       message: error instanceof Error ? error.message : String(error),
-      sectionName,
-      showcaseId
     }));
   }
 }
 
 /**
  * Handle POST /api/v1/custom_content
- * Updates custom content for a section
+ * Updates custom content for multiple sections
+ * Accepts section names as parameter from Chrome extension
  */
 export async function handleUpdateCustomContent(
   _req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
-  showcaseId: string
+  sectionNames: string[],
+  authToken?: string,
+  customContentUrl?: string,
 ): Promise<void> {
   try {
     const distPath = path.resolve(process.cwd(), 'dist');
-    let finalResponseData = null;
-
-    // Use updateCustomContent function
-    const updatedCustomContent = await updateCustomContent(sectionName, showcaseId, distPath);
+    const tilesUrl = customContentUrl ? customContentUrl.replace('/custom_content', '/tile?published=false') : '';
 
-    if (updatedCustomContent) {
-      finalResponseData = updatedCustomContent;
-    }
+    // Update custom content for all sections
+    const updatedCustomContent = await updateCustomContent(
+      sectionNames,
+      distPath,
+      authToken,
+      customContentUrl,
+      tilesUrl,
+    );
 
     // Build the response data
-    const responseData = finalResponseData || {
+    const responseData = updatedCustomContent || {
       error: 'Failed to update custom content',
-      sectionName,
-      showcaseId
+      sectionNames,
     };
 
-    res.statusCode = finalResponseData ? 200 : 500;
+    res.statusCode = updatedCustomContent ? 200 : 500;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
     res.end(JSON.stringify(responseData, null, 2));
-
   } catch (error) {
-    console.error('[API Routes] ❌ Error in update-custom-content endpoint:', error);
+    console.error('[API Routes] ❌ Error processing custom content update:', error);
     res.statusCode = 500;
     res.setHeader('Content-Type', 'application/json');
     setNoCacheHeaders(res);
     res.end(JSON.stringify({
       error: 'Failed to process request',
       message: error instanceof Error ? error.message : String(error),
-      sectionName,
-      showcaseId
+    }));
+  }
+}
+
+/**
+ * Serve a client file (JS or CSS)
+ */
+async function serveClientFile(
+  res: ServerResponse,
+  sectionName: 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);
+
+    // Security: prevent directory traversal
+    const resolvedPath = path.resolve(fullPath);
+    const basePath = path.resolve(distPath, 'sections', sectionName);
+    if (!resolvedPath.startsWith(basePath)) {
+      res.statusCode = 403;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Access denied' }));
+      return;
+    }
+
+    if (!fs.existsSync(resolvedPath)) {
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'File not found', file: filePath, section: sectionName }));
+      return;
+    }
+
+    const fileContent = fs.readFileSync(resolvedPath, 'utf-8');
+    res.statusCode = 200;
+    res.setHeader('Content-Type', contentType);
+    setNoCacheHeaders(res);
+    res.end(fileContent);
+  } catch (error) {
+    console.error('[API Routes] ❌ Error serving client file:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Failed to serve file',
+      message: error instanceof Error ? error.message : String(error),
+    }));
+  }
+}
+
+/**
+ * Handle GET /api/v1/client-js
+ * Returns client.js for a specific section
+ */
+async function handleGetClientJs(
+  _req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+): Promise<void> {
+  await serveClientFile(res, sectionName, 'client.js', 'application/javascript');
+}
+
+/**
+ * Handle GET /api/v1/client-css
+ * Returns client.css for a specific section
+ */
+async function handleGetClientCss(
+  _req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+): Promise<void> {
+  await serveClientFile(res, sectionName, 'assets/client.css', 'text/css');
+}
+
+/**
+ * Handle GET /api/v1/assets
+ * Returns assets for a specific section
+ */
+async function handleGetAssets(
+  req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+): Promise<void> {
+  try {
+    const url = req.url || '';
+    const filePath = getQueryParam(url, 'file');
+
+    if (!filePath) {
+      res.statusCode = 400;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Missing file parameter' }));
+      return;
+    }
+
+    // Security: prevent directory traversal
+    if (filePath.includes('..') || filePath.startsWith('/')) {
+      res.statusCode = 403;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Access denied' }));
+      return;
+    }
+
+    const distPath = path.resolve(process.cwd(), 'dist');
+    const fullPath = path.join(distPath, 'sections', sectionName, 'assets', filePath);
+    const resolvedPath = path.resolve(fullPath);
+    const basePath = path.resolve(distPath, 'sections', sectionName, 'assets');
+
+    if (!resolvedPath.startsWith(basePath)) {
+      res.statusCode = 403;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Access denied' }));
+      return;
+    }
+
+    if (!fs.existsSync(resolvedPath)) {
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({ error: 'Asset not found', file: filePath, section: sectionName }));
+      return;
+    }
+
+    // Detect content type based on file extension
+    const ext = path.extname(filePath).toLowerCase();
+    const contentTypeMap: { [key: string]: string } = {
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+      '.woff': 'font/woff',
+      '.woff2': 'font/woff2',
+      '.ttf': 'font/ttf',
+      '.eot': 'application/vnd.ms-fontobject',
+      '.json': 'application/json',
+      '.css': 'text/css',
+      '.js': 'application/javascript',
+    };
+
+    const contentType = contentTypeMap[ext] || 'application/octet-stream';
+    const fileContent = fs.readFileSync(resolvedPath);
+
+    res.statusCode = 200;
+    res.setHeader('Content-Type', contentType);
+    setNoCacheHeaders(res);
+    res.end(fileContent);
+  } catch (error) {
+    console.error('[API Routes] ❌ Error serving asset:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Failed to serve asset',
+      message: error instanceof Error ? error.message : String(error),
     }));
   }
 }
@@ -102,24 +380,55 @@ export async function handleUpdateCustomContent(
 /**
  * Main API router
  * Routes requests to appropriate handlers
+ * Extracts section name and original_url from query parameters if available
+ * Resolves showcase ID from dist folder based on available showcases
  */
 export function handleApiRequest(
   req: IncomingMessage,
   res: ServerResponse,
-  sectionName: string,
-  showcaseId: string
+  authToken?: string,
 ): void {
   const url = req.url || '';
 
-  // Route: GET /api/v1/tile
+  if (url.startsWith('/api/v1/sections')) {
+    handleGetSections(req, res);
+    return;
+  }
+
+  // Extract section name from query parameter if provided
+  const sectionName = getQueryParam(url, 'section') || '';
+
+  // Extract original_url from query parameter if provided
+  const originalUrl = getQueryParam(url, 'original_url') || '';
+
   if (url.startsWith('/api/v1/tile')) {
-    handleGetTile(req, res, sectionName, showcaseId);
+    // Extract section names from query parameter (comma-separated)
+    const sectionNamesParam = getQueryParam(url, 'sections');
+    const sectionNames = sectionNamesParam ? sectionNamesParam.split(',').map(s => s.trim()) : [];
+    handleGetTile(req, res, sectionNames, authToken, originalUrl);
     return;
   }
 
-  // Route: POST /api/v1/custom_content
   if (url.startsWith('/api/v1/custom_content')) {
-    handleUpdateCustomContent(req, res, sectionName, showcaseId);
+    // Extract section names from query parameter (comma-separated)
+    const sectionNamesParam = getQueryParam(url, 'sections');
+    const sectionNames = sectionNamesParam ? sectionNamesParam.split(',').map(s => s.trim()) : [];
+    handleUpdateCustomContent(req, res, sectionNames, authToken, originalUrl);
+    return;
+  }
+
+  if (url.startsWith('/api/v1/client-js')) {
+    handleGetClientJs(req, res, sectionName);
+    return;
+  }
+
+  if (url.startsWith('/api/v1/client-css')) {
+    handleGetClientCss(req, res, sectionName);
+    return;
+  }
+
+  if (url.startsWith('/api/v1/assets')) {
+    handleGetAssets(req, res, sectionName);
     return;
   }
 
@@ -129,7 +438,6 @@ export function handleApiRequest(
   setNoCacheHeaders(res);
   res.end(JSON.stringify({
     error: 'API route not found',
-    url: url
+    url,
   }));
 }
-

package/template/preview/shared/mock.ts

@@ -1,5 +1,4 @@
-
-export type ExternalContentMock = ExternalContentData
+export type ExternalContentMock = ExternalContentData;
 
 /**
  * Default mock configuration
@@ -11,11 +10,11 @@ export const externalContentMock: ExternalContentMock = {
     account: {
       title: 'My Account',
       url: '/account',
-      target: '_self'
+      target: '_self',
     },
     cart: {
       url: '/cart',
-      count: 3
+      count: 3,
     },
     languages: [
       {
@@ -23,42 +22,42 @@ export const externalContentMock: ExternalContentMock = {
         description: 'English',
         main: true,
         selected: true,
-        url: '/en'
+        url: '/en',
       },
       {
         code: 'es',
         description: 'Español',
         main: false,
         selected: false,
-        url: '/es'
-      }
+        url: '/es',
+      },
     ],
     legalPages: [
       {
         title: 'Privacy Policy',
-        url: '/privacy'
+        url: '/privacy',
       },
       {
         title: 'Terms of Service',
-        url: '/terms'
+        url: '/terms',
       },
       {
         title: 'Refund Policy',
-        url: '/refunds'
-      }
+        url: '/refunds',
+      },
     ],
     reportAbuse: {
       title: 'Report Abuse',
       url: '/report-abuse',
-      target: '_blank'
+      target: '_blank',
     },
     madeWith: {
       url: 'https://www.lightspeedhq.com',
       target: '_blank',
       icon: '/assets/lightspeed-icon.png',
       poweredBy: 'Powered by',
-      company: 'Lightspeed'
-    }
+      company: 'Lightspeed',
+    },
   },
 
   category: {
@@ -70,15 +69,16 @@ export const externalContentMock: ExternalContentMock = {
         imageUrl: '/assets/electronics-category.jpg',
         thumbnailImageUrl: '/assets/electronics-thumb.jpg',
         alt: 'Electronics category',
+        productsCount: 0,
         imageBorderInfo: {
           homogeneity: true,
-          color: {
-            r: 255,
-            g: 255,
-            b: 255,
-            a: 1
-          }
-        }
+          dominatingColor: {
+            red: 255,
+            green: 255,
+            blue: 255,
+            alpha: 1,
+          },
+        },
       },
       {
         id: 2,
@@ -86,7 +86,8 @@ export const externalContentMock: ExternalContentMock = {
         url: '/categories/clothing',
         imageUrl: '/assets/clothing-category.jpg',
         thumbnailImageUrl: '/assets/clothing-thumb.jpg',
-        alt: 'Clothing category'
+        alt: 'Clothing category',
+        productsCount: 0,
       },
       {
         id: 3,
@@ -94,8 +95,9 @@ export const externalContentMock: ExternalContentMock = {
         url: '/categories/home-garden',
         imageUrl: '/assets/home-garden-category.jpg',
         thumbnailImageUrl: '/assets/home-garden-thumb.jpg',
-        alt: 'Home & Garden category'
-      }
+        alt: 'Home & Garden category',
+        productsCount: 0,
+      },
     ],
     categoryTree: [
       {
@@ -103,7 +105,7 @@ export const externalContentMock: ExternalContentMock = {
         name: 'Electronics',
         nameTranslated: {
           en: 'Electronics',
-          es: 'Electrónicos'
+          es: 'Electrónicos',
         },
         urlPath: '/electronics',
         enabled: true,
@@ -113,31 +115,31 @@ export const externalContentMock: ExternalContentMock = {
             name: 'Smartphones',
             nameTranslated: {
               en: 'Smartphones',
-              es: 'Teléfonos inteligentes'
+              es: 'Teléfonos inteligentes',
             },
             urlPath: '/electronics/smartphones',
             enabled: true,
-            children: []
+            children: [],
           },
           {
             id: 12,
             name: 'Laptops',
             nameTranslated: {
               en: 'Laptops',
-              es: 'Portátiles'
+              es: 'Portátiles',
             },
             urlPath: '/electronics/laptops',
             enabled: true,
-            children: []
-          }
-        ]
+            children: [],
+          },
+        ],
       },
       {
         id: 2,
         name: 'Clothing',
         nameTranslated: {
           en: 'Clothing',
-          es: 'Ropa'
+          es: 'Ropa',
         },
         urlPath: '/clothing',
         enabled: true,
@@ -147,27 +149,27 @@ export const externalContentMock: ExternalContentMock = {
             name: 'Men\'s Clothing',
             nameTranslated: {
               en: 'Men\'s Clothing',
-              es: 'Ropa para hombres'
+              es: 'Ropa para hombres',
             },
             urlPath: '/clothing/mens',
             enabled: true,
-            children: []
+            children: [],
           },
           {
             id: 22,
             name: 'Women\'s Clothing',
             nameTranslated: {
               en: 'Women\'s Clothing',
-              es: 'Ropa para mujeres'
+              es: 'Ropa para mujeres',
             },
             urlPath: '/clothing/womens',
             enabled: true,
-            children: []
-          }
-        ]
-      }
-    ]
-  }
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
 };
 
 export function getExternalContentMock(): ExternalContentMock {