@lightspeed/crane 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -39,7 +39,7 @@
   "license": "MIT",
   "devDependencies": {
     "@jest/globals": "^30.0.4",
-    "@stylistic/eslint-plugin": "^5.1.0",
+    "@lightspeed/eslint-config": "workspace:*",
     "@types/adm-zip": "^0.5.7",
     "@types/axios-concurrency": "^1.0.0",
     "@types/cli-progress": "^3.11.6",
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "1.0.0",
+    "@lightspeed/crane-api": "1.0.1",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/prompts": "^2.4.2",
     "@vitejs/plugin-vue": "^6.0.1",

package/template/footers/example-footer/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import ExampleFooter from './ExampleFooter.vue';
 import { Content, Design } from './type.ts';
 

package/template/footers/example-footer/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import ExampleFooter from './ExampleFooter.vue';
 import { Content, Design } from './type.ts';
 

package/template/headers/example-header/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import ExampleHeader from './ExampleHeader.vue';
 import { Content, Design } from './type.ts';
 

package/template/headers/example-header/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import ExampleHeader from './ExampleHeader.vue';
 import { Content, Design } from './type.ts';
 

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import CustomBottomBar from './CustomBottomBar.vue';
 import { Content, Design } from '../../type.ts';
 

package/template/layouts/catalog/example-catalog/slots/custom-bottom-bar/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import CustomBottomBar from './CustomBottomBar.vue';
 import { Content, Design } from '../../type.ts';
 

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

@@ -1,9 +1,11 @@
-import * as path from 'path';
 import * as fs from 'fs';
+import type { IncomingMessage, ServerResponse } from 'http';
+import * as path from 'path';
 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
@@ -17,6 +19,29 @@ function getQueryParam(url: string, paramName: string): string | null {
   }
 }
 
+/**
+ * Read request body as JSON
+ */
+function readRequestBody(req: IncomingMessage): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', (chunk) => {
+      body += chunk.toString();
+    });
+    req.on('end', () => {
+      try {
+        const parsed = body ? JSON.parse(body) : null;
+        resolve(parsed);
+      } catch (error) {
+        reject(error);
+      }
+    });
+    req.on('error', (error) => {
+      reject(error);
+    });
+  });
+}
+
 /**
  * Set no-cache headers to prevent browser caching
  */
@@ -72,7 +97,7 @@ function getShowcaseIds(sectionName: string, distPath: string): string[] {
  * Fetches tiles from remote once and updates them for each section/showcase
  * Accepts section names as parameter from Chrome extension
  */
-export async function handleGetTile(
+async function handleGetTile(
   _req: IncomingMessage,
   res: ServerResponse,
   sectionNames: string[],
@@ -120,6 +145,147 @@ export async function handleGetTile(
   }
 }
 
+/**
+ * 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 handleUpdateTile(
+  req: IncomingMessage,
+  res: ServerResponse,
+  authToken?: string,
+  originalUrl?: string,
+): Promise<void> {
+  const requestBody = await readRequestBody(req);
+  try {
+    // Read request body containing tiles array
+
+    if (!requestBody || !Array.isArray(requestBody.tiles)) {
+      res.statusCode = 400;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify({
+        error: 'Invalid request body',
+        message: 'Expected { tiles: [...] } in request body',
+      }));
+      return;
+    }
+
+    const tiles = requestBody.tiles;
+
+    // Fetch tiles from remote - add published=false query parameter
+    const tilesUrl = originalUrl ? `${originalUrl}?published=false` : '';
+    const remoteTiles = await fetchTiles(authToken, tilesUrl);
+
+    if (!remoteTiles || !remoteTiles.tiles) {
+      console.error('Can\'t fetch remote tiles or they dont exist from url', tilesUrl);
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify(requestBody, null, 2));
+      return;
+    }
+
+    // Iterate over tiles from request body and update with remote data
+    const updatedTiles = tiles.map((tile: Record<string, unknown>) => {
+      // Find matching tile in remote data by id
+      const remoteTile = remoteTiles.tiles.find((rt: Record<string, unknown>) => rt.id === tile.id);
+
+      if (remoteTile) {
+        // Update content and design from remote
+        return {
+          ...tile,
+          content: remoteTile.content,
+          design: remoteTile.design,
+        };
+      }
+
+      // If no match found, return tile as-is
+      return tile;
+    });
+
+    // Prepare updated request body
+    const updatedRequestBody = {
+      ...requestBody,
+      tiles: updatedTiles,
+    };
+
+    // Make PUT request to original_url with updated tiles
+    if (!originalUrl) {
+      console.error('Tile update url was not provided');
+      res.statusCode = 400;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify(requestBody, null, 2));
+      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),
+    });
+
+    if (!response.ok) {
+      console.error('[API Routes] Failed to update tiles at original_url:', response.status, response.statusText);
+      res.statusCode = response.status;
+      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);
+    res.end(JSON.stringify(responseData, null, 2));
+  } catch (error) {
+    console.error('[API Routes] ❌ Error updating tiles:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify(requestBody, null, 2));
+  }
+}
+
+/**
+ * Handle /api/v1/tile (GET and PUT)
+ * Routes to appropriate handler based on request method
+ */
+export async function handleTile(
+  req: IncomingMessage,
+  res: ServerResponse,
+  sectionNames: string[],
+  authToken?: string,
+  originalUrl?: string,
+): Promise<void> {
+  const method = req.method?.toUpperCase();
+
+  if (method === 'GET') {
+    await handleGetTile(req, res, sectionNames, authToken, originalUrl);
+  } else if (method === 'PUT') {
+    await handleUpdateTile(req, res, authToken, originalUrl);
+  } else {
+    res.statusCode = 405;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Method not allowed',
+      allowedMethods: ['GET', 'PUT'],
+    }));
+  }
+}
+
 /**
  * Handle GET /api/v1/sections
  * Returns list of available sections with their showcases
@@ -405,7 +571,7 @@ export function handleApiRequest(
     // 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);
+    handleTile(req, res, sectionNames, authToken, originalUrl);
     return;
   }
 

package/template/preview/shared/preview.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { loadModule, renderServerModule } from './utils';
 import { getExternalContentMock } from './mock';
+import { loadModule, renderServerModule } from './utils';
 
 let distFolderPath: string | null = null;
 let currentApp: any = null;
@@ -431,6 +431,24 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
   }
 }
 
+async function getLayout(showcase: any, sectionName: string, distFolder: string) {
+  // First, try to get layoutId from showcase
+  if (showcase.default?.layoutId) {
+    return showcase.default.layoutId;
+  }
+
+  // If not present in showcase, read from section's layout.mjs
+  const basePath = `${distFolder}/sections/${sectionName}`;
+  const layoutModule = await loadModule(`${basePath}/js/settings/layout.mjs`) as any;
+
+  // layout.mjs exports an array of layout configurations
+  // Return the first element's layoutId
+  if (Array.isArray(layoutModule.default) && layoutModule.default.length > 0) {
+    return layoutModule.default[0].layoutId;
+  }
+  throw new Error('Layout module is not an array or is empty');
+}
+
 /**
  * Prepares showcase data (content and design) without rendering.
  * Used by API routes to return tile data.
@@ -444,7 +462,7 @@ export async function getShowcaseData(sectionName: string, showcaseId: string, d
   const backgroundDesign = createBackgroundDesign(showcaseBackground, true); // API render
   const overriddenDesign = designTransformer((design as any).default, (showcase as any).default.design || {});
   overriddenDesign.background = backgroundDesign;
-  overriddenDesign.layout = (showcase as any).default?.layoutId;
+  overriddenDesign.layout = await getLayout(showcase, sectionName, distFolder);
 
   // Prepare content
   const overriddenContent = getContentToRender(

package/template/preview/shared/utils.ts

@@ -1,7 +1,8 @@
 /* eslint-disable  @typescript-eslint/no-explicit-any */
-import { getShowcaseState } from './preview';
-import * as path from 'path';
 import * as fs from 'fs';
+import * as path from 'path';
+
+import { getShowcaseState } from './preview';
 
 /**
  * Renders a server.js module by directly calling the SSR server.

package/template/preview/ssr-server.ts

@@ -4,11 +4,12 @@
  * Uses Blockbuster's approach: @swc/core for parsing + importFromString for execution
  */
 
-import * as http from 'http';
 import { readFileSync } from 'fs';
+import * as http from 'http';
+
 import { parse } from '@swc/core';
-import { importFromString } from 'module-from-string';
 import { parseHTML } from 'linkedom';
+import { importFromString } from 'module-from-string';
 
 const PREVIEW_SSR_PORT = process.env.PREVIEW_SSR_PORT ? parseInt(process.env.PREVIEW_SSR_PORT, 10) : 3001;
 const EXTERNAL_IMPORTS_BLOCK_START = '/* EXTERNAL_IMPORTS_START */';

package/template/preview/vite.config.js

@@ -1,6 +1,8 @@
-import { defineConfig } from 'vite';
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
+
+import { defineConfig } from 'vite';
+
 import { handleApiRequest } from './shared/api-routes.js';
 
 export default defineConfig({

package/template/reference/sections/featured-products/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import FeaturedProducts from './FeaturedProducts.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/featured-products/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import FeaturedProducts from './FeaturedProducts.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/intro-slider/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './IntroSlider.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/intro-slider/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './IntroSlider.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/tag-lines/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './TagLines.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/tag-lines/composables/highlighted-text-image-list.ts

@@ -1,4 +1,3 @@
-import { computed } from 'vue';
 import {
   EditorTypes,
   ImageContent,
@@ -6,6 +5,8 @@ import {
   useDeckElementContent,
   useTextElementDesign,
 } from '@lightspeed/crane-api';
+import { computed } from 'vue';
+
 import { Content, Design } from '../type.ts';
 
 export type Highlight = {

package/template/reference/sections/tag-lines/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './TagLines.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/trending-categories/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import TrendingCategories from './TrendingCategories.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/trending-categories/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import TrendingCategories from './TrendingCategories.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/shared/utils/styles.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'vue';
+
 import { getColorString } from './color.ts';
 
 export function getTextStyles(design: TextDesignData): CSSProperties {

package/template/sections/example-section/client.ts

@@ -1,4 +1,5 @@
 import { createVueClientApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './ExampleSection.vue';
 import { Content, Design } from './type.ts';
 

package/template/sections/example-section/server.ts

@@ -1,4 +1,5 @@
 import { createVueServerApp } from '@lightspeed/crane-api';
+
 import ExampleSection from './ExampleSection.vue';
 import { Content, Design } from './type.ts';
 

package/template/sections/example-section/showcases/1.ts

@@ -160,30 +160,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_1.toggle.label',
-      description: '$label.showcase_1.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_1.selectbox.placeholder',
-      label: '$label.showcase_1.selectbox.label',
-      description: '$label.showcase_1.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_1.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_1.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -196,7 +177,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_1.button.label',
       title: '$label.showcase_1.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',

package/template/sections/example-section/showcases/2.ts

@@ -139,30 +139,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_2.toggle.label',
-      description: '$label.showcase_2.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_2.selectbox.placeholder',
-      label: '$label.showcase_2.selectbox.label',
-      description: '$label.showcase_2.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_2.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_2.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -175,7 +156,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_2.button.label',
       title: '$label.showcase_2.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',

package/template/sections/example-section/showcases/3.ts

@@ -156,30 +156,11 @@ export default {
     },
     toggle: {
       type: 'TOGGLE',
-      label: '$label.showcase_3.toggle.label',
-      description: '$label.showcase_3.toggle.description',
-      defaults: {
-        enabled: true,
-      },
+      enabled: true,
     },
     selectbox: {
       type: 'SELECTBOX',
-      placeholder: '$label.showcase_3.selectbox.placeholder',
-      label: '$label.showcase_3.selectbox.label',
-      description: '$label.showcase_3.selectbox.description',
-      options: [
-        {
-          value: 'one',
-          label: '$label.showcase_3.selectbox.one.label',
-        },
-        {
-          value: 'two',
-          label: '$label.showcase_3.selectbox.two.label',
-        },
-      ],
-      defaults: {
-        value: 'one',
-      },
+      value: 'one',
     },
     info: {
       type: 'INFO',
@@ -192,7 +173,6 @@ export default {
     },
     button: {
       type: 'BUTTON',
-      label: '$label.showcase_1.button.label',
       title: '$label.showcase_1.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',