@lightspeed/crane 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -26,10 +26,12 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild",
+    "link": "npm link",
     "type-check": "tsc --noEmit",
     "lint": "eslint \"./{src,tests}/**/*.{js,ts}\"",
     "lint:all": "yarn lint && yarn type-check",
-    "test": "jest"
+    "test": "jest",
+    "test:end-to-end": "jest end-to-end.test.ts --no-coverage"
   },
   "engines": {
     "node": "22"
@@ -55,50 +57,50 @@
     "mock-fs": "^5.5.0",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.4.5",
+    "typescript": "5.9.2",
     "unbuild": "^3.5.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.0"
   },
   "dependencies": {
-    "@jridgewell/sourcemap-codec": "^1.4.15",
-    "@lightspeed/eslint-config-crane": "1.1.2",
+    "@jridgewell/sourcemap-codec": "^1.5.4",
+    "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/prompts": "^2.4.2",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "adm-zip": "^0.5.16",
-    "ajv": "^8.12.0",
-    "ajv-formats": "^2.1.1",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
     "axios": "^1.11.0",
     "axios-concurrency": "^1.0.4",
     "cac": "^6.7.14",
     "cli-progress": "^3.12.0",
     "eslint": "^9.33.0",
-    "fs-extra": "^11.1.1",
-    "glob": "^9.3.5",
+    "fs-extra": "^11.3.1",
+    "glob": "^11.0.3",
     "jsonpath-plus": "^10.3.0",
     "kolorist": "^1.8.0",
     "prompts": "^2.4.2",
-    "semver": "^7.5.4",
-    "terser": "^5.35.0",
+    "semver": "^7.7.2",
+    "terser": "^5.44.0",
     "tinycolor2": "^1.6.0",
-    "typescript": "5.4.5",
-    "vite": "^6.3.5",
-    "vite-plugin-checker": "^0.6.1",
+    "typescript": "5.9.2",
+    "vite": "^7.1.4",
+    "vite-plugin-checker": "^0.10.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-externals": "^0.6.2",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vue": "^3.4.0",
-    "vue-tsc": "^1.8.0"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vue": "^3.5.21",
+    "vue-tsc": "^3.0.6"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^3.5.21"
   },
   "overrides": {
     "axios-concurrency": {
       "axios": "1.11.0"
     },
     "magic-string": "0.30.10",
-    "glob": "^9.3.5",
-    "stylus": "^0.63.0"
+    "glob": "^11.0.3",
+    "stylus": "^0.64.0"
   }
 }

package/template/headers/example-header/showcases/1.ts

@@ -16,7 +16,6 @@ export default {
     },
     menu: {
       type: 'NAVIGATION_MENU',
-      text: '$label.showcase_1.menu.text',
     },
   },
   design: {

package/template/headers/example-header/showcases/2.ts

@@ -11,7 +11,6 @@ export default {
   content: {
     menu: {
       type: 'NAVIGATION_MENU',
-      text: '$label.showcase_2.menu.text',
     },
     logo: {
       type: 'LOGO',

package/template/package.json

@@ -2,6 +2,7 @@
   "name": "__placeholder__",
   "private": true,
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "build": "crane build",
     "deploy": "crane build && crane deploy"
@@ -10,13 +11,13 @@
     "@lightspeed/crane": "latest",
     "@lightspeed/eslint-config-crane": "latest",
     "vue": "^3.4.0",
-    "eslint": "9.22.0"
+    "eslint": "9.33.0"
   },
   "engines": {
     "node": ">=22"
   },
   "overrides": {
-    "glob": "^9.3.5",
-    "stylus": "^0.63.0"
+    "glob": "^11.0.3",
+    "stylus": "^0.64.0"
   }
 }

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

@@ -0,0 +1,135 @@
+import * as path from 'path';
+import { getContentAndDesign } from './preview';
+import { fetchTiles, updateTilesSection, updateCustomContent } from './utils';
+import type { IncomingMessage, ServerResponse } from 'http';
+
+/**
+ * Set no-cache headers to prevent browser caching
+ */
+function setNoCacheHeaders(res: ServerResponse): void {
+  res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+  res.setHeader('Pragma', 'no-cache');
+  res.setHeader('Expires', '0');
+  res.setHeader('Surrogate-Control', 'no-store');
+}
+
+/**
+ * Handle GET /api/v1/tile
+ * Returns tile data with content and design
+ */
+export async function handleGetTile(
+  _req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+  showcaseId: 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 and update tiles
+    const tilesResponse = await fetchTiles();
+    const responseData = updateTilesSection(tilesResponse, 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 loading tile data:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Failed to load tile data',
+      message: error instanceof Error ? error.message : String(error),
+      sectionName,
+      showcaseId
+    }));
+  }
+}
+
+/**
+ * Handle POST /api/v1/custom_content
+ * Updates custom content for a section
+ */
+export async function handleUpdateCustomContent(
+  _req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+  showcaseId: string
+): Promise<void> {
+  try {
+    const distPath = path.resolve(process.cwd(), 'dist');
+    let finalResponseData = null;
+
+    // Use updateCustomContent function
+    const updatedCustomContent = await updateCustomContent(sectionName, showcaseId, distPath);
+
+    if (updatedCustomContent) {
+      finalResponseData = updatedCustomContent;
+    }
+
+    // Build the response data
+    const responseData = finalResponseData || {
+      error: 'Failed to update custom content',
+      sectionName,
+      showcaseId
+    };
+
+    res.statusCode = finalResponseData ? 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);
+    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
+    }));
+  }
+}
+
+/**
+ * Main API router
+ * Routes requests to appropriate handlers
+ */
+export function handleApiRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+  showcaseId: string
+): void {
+  const url = req.url || '';
+
+  // Route: GET /api/v1/tile
+  if (url.startsWith('/api/v1/tile')) {
+    handleGetTile(req, res, sectionName, showcaseId);
+    return;
+  }
+
+  // Route: POST /api/v1/custom_content
+  if (url.startsWith('/api/v1/custom_content')) {
+    handleUpdateCustomContent(req, res, sectionName, showcaseId);
+    return;
+  }
+
+  // Unknown API route
+  res.statusCode = 404;
+  res.setHeader('Content-Type', 'application/json');
+  setNoCacheHeaders(res);
+  res.end(JSON.stringify({
+    error: 'API route not found',
+    url: url
+  }));
+}
+

package/template/preview/shared/preview.ts

@@ -376,3 +376,36 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
     mount('#app', state);
   }
 }
+
+export async function getContentAndDesign(sectionName: string, showcaseId: string, distFolder:string) {
+  const content = await loadModule(`${distFolder}/sections/${sectionName}/js/settings/content.mjs`);
+  const contentTranslations = await loadModule(`${distFolder}/sections/${sectionName}/js/settings/translations.mjs`);
+  const showcaseTranslations = await loadModule(`${distFolder}/sections/${sectionName}/js/showcases/translations.mjs`);
+  const showcase = await loadModule(`${distFolder}/sections/${sectionName}/js/showcases/${showcaseId}.mjs`);
+  const design = await loadModule(`${distFolder}/sections/${sectionName}/js/settings/design.mjs`);
+
+  // Get showcase background and create background design
+  const showcaseBackground = showcase.default?.design?.background;
+  const backgroundDesign = createBackgroundDesign(showcaseBackground);
+
+  const ovveridenDesign = designTransformer(design.default, showcase.default.design || {});
+
+  const overriddenContent = getContentToRender(
+    content.default,
+    showcase.default.content || {},
+    contentTranslations.default.en,
+    showcaseTranslations.default.en,
+    sectionName
+  );
+
+  // Ensure background design always overrides any existing background
+  const finalDesign = {...ovveridenDesign};
+  finalDesign.background = backgroundDesign.background;
+
+  const state = {
+      content: overriddenContent,
+      design: finalDesign,
+  };
+
+  return state;
+}

package/template/preview/shared/utils.ts

@@ -1,3 +1,170 @@
+import { getContentAndDesign } from './preview';
+
+// Hardcoded URLs and token
+const TILES_URL = '';
+const CUSTOM_CONTENT_URL = '';
+const BEARER_TOKEN = '';
+
 export async function loadModule(path: string): Promise<any> {
-  return import(/* @vite-ignore */ path);
+  // Add cache busting parameter with timestamp
+  const cacheBuster = `?t=${Date.now()}`;
+  const pathWithCacheBuster = path + cacheBuster;
+  return import(/* @vite-ignore */ pathWithCacheBuster);
+}
+
+/**
+ * Fetches tiles from the hardcoded URL using hardcoded bearer token
+ * @returns The tiles response object or null if failed
+ */
+export async function fetchTiles(): Promise<any> {
+  try {
+    const response = await fetch(TILES_URL, {
+      method: 'GET',
+      headers: {
+        'Authorization': BEARER_TOKEN
+      }
+    });
+
+    if (!response.ok) {
+      console.error('Failed to fetch tiles:', response.status, response.statusText);
+      return null;
+    }
+
+    const tilesResponse = await response.json();
+    return tilesResponse;
+
+  } catch (error) {
+    console.error('Error fetching tiles:', error);
+    return null;
+  }
+}
+
+/**
+ * Updates the matching section in tiles with new content and design
+ * @param tilesResponse - The tiles response object
+ * @param sectionName - The section name to match (e.g., 'example-section')
+ * @param showcaseId - The showcase ID to match
+ * @param content - The new content to replace
+ * @param design - The new design to replace
+ * @returns The updated tiles response object
+ */
+export function updateTilesSection(
+  tilesResponse: any,
+  sectionName: string,
+  showcaseId: string,
+  content: any,
+  design: any
+): any {
+  const targetPattern = `_${sectionName}_${showcaseId}`;
+
+  const targetItem = tilesResponse.tiles.find((item: any) => {
+    const itemId = item.sourceId;
+    if (itemId && typeof itemId === 'string') {
+      return itemId.includes(targetPattern);
+    }
+    return false;
+  });
+
+  if (targetItem) {
+    // Replace only content and design, preserve all other properties including tils
+    targetItem.content = content;
+    targetItem.design = design;
+  }
+
+  return tilesResponse;
+}
+
+/**
+ * Fetches tiles and returns the ID of a section matching the pattern
+ * @param sectionName - The section name to match (e.g., 'example-section')
+ * @param showcaseId - The showcase ID to match
+ * @returns The section ID or null if not found
+ */
+export async function getSectionId(sectionName: string, showcaseId: string): Promise<string | null> {
+  try {
+    const tilesResponse = await fetchTiles();
+    if (!tilesResponse || !tilesResponse.tiles) {
+      return null;
+    }
+
+    const targetPattern = `_${sectionName}_${showcaseId}`;
+
+    const targetItem = tilesResponse.tiles.find((item: any) => {
+      const itemId = item.sourceId;
+      return itemId?.includes(targetPattern);
+    });
+
+    return targetItem ? targetItem.id : null;
+
+  } catch (error) {
+    console.error('Error getting section ID:', error);
+    return null;
+  }
+}
+
+
+/**
+ * Fetches custom content and updates the matching section with content and design from getContentAndDesign
+ * @param sectionName - The section name to match (e.g., 'example-section')
+ * @param showcaseId - The showcase ID to match
+ * @param distPath - The dist path for getContentAndDesign
+ * @returns The updated custom content response or null if failed
+ */
+export async function updateCustomContent(
+  sectionName: string,
+  showcaseId: string,
+  distPath: string
+): Promise<any> {
+  try {
+    // First, get the section ID from tiles
+    const sectionId = await getSectionId(sectionName, showcaseId);
+
+    if (!sectionId) {
+      console.error('Section ID not found for:', sectionName, showcaseId);
+      return null;
+    }
+
+    // Fetch content and design using getContentAndDesign from preview.ts
+    const { content, design } = await getContentAndDesign(sectionName, showcaseId, distPath);
+
+    // Fetch custom content
+    const response = await fetch(CUSTOM_CONTENT_URL, {
+      method: 'GET',
+      headers: {
+        'Authorization': BEARER_TOKEN
+      }
+    });
+
+    if (!response.ok) {
+      console.error('Failed to fetch custom content:', response.status, response.statusText);
+      return null;
+    }
+
+    const customContentResponse = await response.json();
+
+    if (!customContentResponse.customContent || !customContentResponse.customContent.sections) {
+      console.error('Invalid custom content response structure');
+      return null;
+    }
+
+    // Find the section by ID
+    const targetSection = customContentResponse.customContent.sections.find((section: any) => {
+      return section.state.data.tileId === sectionId;
+    });
+
+    if (!targetSection) {
+      console.error('Section not found in custom content with ID:', sectionId);
+      return null;
+    }
+
+    // Update content and design
+    targetSection.state.data.content = JSON.stringify(content);
+    targetSection.state.data.design = JSON.stringify(design);
+
+    return customContentResponse;
+
+  } catch (error) {
+    console.error('Error updating custom content:', error);
+    return null;
+  }
 }

package/template/preview/vite.config.js

@@ -1,11 +1,22 @@
 import {defineConfig} from 'vite';
 import path from "path";
 import fs from "fs";
+import { handleApiRequest } from './shared/api-routes.js';
+
+// Hardcoded configuration
+const SECTION_NAME = 'example-section';
+const SHOWCASE_ID = '1';
 
 export default defineConfig({
   root: '.',
   server: {
     fs: {strict: false},
+    cors: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
+    },
   },
   plugins: [
     {
@@ -44,9 +55,29 @@ export default defineConfig({
         server.middlewares.use((req, res, next) => {
             const url = req.url || ''
 
-            // cache-bust for any /sections/ URL
-            if (url.includes('/sections/')) {
-              server.moduleGraph.invalidateAll()
+            // Skip HMR and internal Vite requests
+            if (url.startsWith('/@') || url.includes('__vite') || url.includes('.hot-update.')) {
+              return next()
+            }
+
+            // Add CORS headers and disable caching for our API responses
+            if (url.startsWith('/api/') || url.startsWith('/chosen-section')) {
+              res.setHeader('Access-Control-Allow-Origin', '*')
+              res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
+              res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization')
+              res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate')
+              res.setHeader('Pragma', 'no-cache')
+              res.setHeader('Expires', '0')
+            }
+
+            // Handle preflight OPTIONS requests
+            if (req.method === 'OPTIONS') {
+              res.statusCode = 200
+              return res.end()
+            }
+
+            // Let Vite handle all non-API requests for proper HMR
+            if (!url.startsWith('/api/') && !url.startsWith('/chosen-section')) {
               return next()
             }
 
@@ -64,6 +95,18 @@ export default defineConfig({
               }))
             }
 
+            // Handle API routes
+            if (url.startsWith('/api/v1/')) {
+              const sectionName = SECTION_NAME;
+              const showcaseId = SHOWCASE_ID;
+
+              // Delegate to API router
+              (async () => {
+                await handleApiRequest(req, res, sectionName, showcaseId);
+              })();
+              return; // Exit early for async handling
+            }
+
             // all other requests
             next()
           }