@lightspeed/crane 1.4.2 → 2.0.0

package/template/preview/shared/preview.ts

@@ -1,7 +1,6 @@
-/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { loadModule} from "./utils.ts";
-import { getExternalContentMock } from "./mock";
+import { loadModule, renderServerModule } from './utils';
+import { getExternalContentMock } from './mock';
 
 let distFolderPath: string | null = null;
 let currentApp: any = null;
@@ -10,10 +9,29 @@ export function setDistFolderPath(path: string): void {
   distFolderPath = path;
 }
 
+// ============================================================================
+// Module Loading Helpers
+// ============================================================================
+
+/**
+ * Loads all required modules for a showcase.
+ */
+async function loadShowcaseModules(sectionName: string, showcaseId: string, distFolder: string): Promise<[any, any, any, any, any]> {
+  const basePath = `${distFolder}/sections/${sectionName}`;
+  return Promise.all([
+    loadModule(`${basePath}/js/settings/content.mjs`),
+    loadModule(`${basePath}/js/settings/translations.mjs`),
+    loadModule(`${basePath}/js/showcases/translations.mjs`),
+    loadModule(`${basePath}/js/showcases/${showcaseId}.mjs`),
+    loadModule(`${basePath}/js/settings/design.mjs`),
+  ]) as Promise<[any, any, any, any, any]>;
+}
+
 interface HSLColor {
   h: number;
   s: number;
   l: number;
+  a: number;
 }
 
 interface RGBAColor {
@@ -27,12 +45,14 @@ interface ColorObject {
   hex: string;
   hsl: HSLColor;
   rgba: RGBAColor;
+  auto: boolean;
+  raw: string;
 }
 
 function hexToColorObject(hex: string): ColorObject {
   // Support both 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex colors
   const match = /^#?([0-9a-fA-F]{6}([0-9a-fA-F]{2})?)$/.exec(hex);
-  if (!match) throw new Error("Invalid hex color format");
+  if (!match) throw new Error('Invalid hex color format');
   const cleanHex = match[1].toLowerCase();
   const r = parseInt(cleanHex.substring(0, 2), 16);
   const g = parseInt(cleanHex.substring(2, 4), 16);
@@ -42,21 +62,38 @@ function hexToColorObject(hex: string): ColorObject {
   const rNorm = r / 255, gNorm = g / 255, bNorm = b / 255;
   const max = Math.max(rNorm, gNorm, bNorm), min = Math.min(rNorm, gNorm, bNorm);
   const delta = max - min;
-  let h = 0, s = 0, l = (max + min) / 2;
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
   if (delta !== 0) {
     s = delta / (1 - Math.abs(2 * l - 1));
     switch (max) {
-      case rNorm: h = ((gNorm - bNorm) / delta) % 6; break;
-      case gNorm: h = (bNorm - rNorm) / delta + 2; break;
-      case bNorm: h = (rNorm - gNorm) / delta + 4; break;
+      case rNorm: {
+        h = ((gNorm - bNorm) / delta) % 6;
+        break;
+      }
+      case gNorm: {
+        h = (bNorm - rNorm) / delta + 2;
+        break;
+      }
+      case bNorm: {
+        h = (rNorm - gNorm) / delta + 4;
+        break;
+      }
     }
     h *= 60;
     if (h < 0) h += 360;
   }
   return {
     hex: `#${cleanHex.substring(0, 6)}${a.toString(16).padStart(2, '0')}`,
-    hsl: { h: Math.round(h), s: +(s * 100).toFixed(1), l: +(l * 100).toFixed(1) },
+    hsl: {
+      h: +(h / 360).toFixed(4),
+      s: +s.toFixed(4),
+      l: +l.toFixed(4),
+      a: +(a / 255).toFixed(2),
+    },
     rgba: { r, g, b, a: +(a / 255).toFixed(2) },
+    auto: false,
+    raw: `#${cleanHex.substring(0, 6).toUpperCase()}`,
   };
 }
 
@@ -73,7 +110,7 @@ function updateHexColors(obj: any): any {
           // If it’s a 3-digit hex, expand it to 6 digits
           const expanded = v.replace(
             /^#?([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/,
-            (_m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`
+            (_m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`,
           );
           value[key] = hexToColorObject(expanded);
         } else {
@@ -96,75 +133,68 @@ const replaceGlobalFont = (obj: any, font: string): void => {
   });
 };
 
-function createBackgroundStructure(type: 'solid' | 'gradient', config: any): any {
+function createBackgroundObject(type: string, fromColor: any, toColor: any): any {
   return {
     background: {
-      background: {
-        type,
-        ...config,
+      type: type,
+      solid: {
+        color: fromColor,
       },
+      gradient: { fromColor: fromColor, toColor: toColor },
     },
   };
 }
 
-// Helper function to create default gray background
-function createDefaultBackground(): any {
+function createBackgroundDesign(showcaseBackground: any, isApiRender: boolean = false): any {
+  // Helper to check if color is global reference
+  const isGlobalColor = (color: string) => typeof color === 'string' && color.startsWith('global.');
   const defaultGrayColor = hexToColorObject('#F9F9F9');
-  return createBackgroundStructure('solid', {
-    solid: { color: defaultGrayColor },
-    color: 'global.color.background',
-  });
-}
-
-// Helper function to check if color is global reference
-function isGlobalColor(color: string): boolean {
-  return typeof color === 'string' && color.startsWith('global.');
-}
 
-function createBackgroundDesign(showcaseBackground: any): any {
   // No background or invalid background
   if (!showcaseBackground) {
-    return createDefaultBackground();
+    const defaultColor = 'global.color.background';
+    if (isApiRender) {
+      // API render: keep global as string
+      return createBackgroundObject('solid', defaultColor, defaultColor);
+    } else {
+      // Local preview: convert to color object
+      return createBackgroundObject('solid', defaultGrayColor, defaultGrayColor);
+    }
   }
 
   // Handle gradient backgrounds
   if (showcaseBackground.style === 'GRADIENT' && Array.isArray(showcaseBackground.color)) {
     const [fromColor, toColor] = showcaseBackground.color;
 
-    // If either color is global, use default
-    if (isGlobalColor(fromColor) || isGlobalColor(toColor)) {
-      return createDefaultBackground();
+    // Check if colors are global references
+    const fromIsGlobal = isGlobalColor(fromColor);
+    const toIsGlobal = isGlobalColor(toColor);
+    if (isApiRender) {
+      // Convert each color: keep global as string, convert hex to object
+      const fromColorValue = fromIsGlobal ? fromColor : hexToColorObject(fromColor);
+      const toColorValue = toIsGlobal ? toColor : hexToColorObject(toColor);
+      return createBackgroundObject('gradient', fromColorValue, toColorValue);
+    } else {
+      const fromColorValue = fromIsGlobal ? defaultGrayColor : hexToColorObject(fromColor);
+      const toColorValue = toIsGlobal ? defaultGrayColor : hexToColorObject(toColor);
+      return createBackgroundObject('gradient', fromColorValue, toColorValue);
     }
-
-    // Create gradient background
-    return createBackgroundStructure('gradient', {
-      solid: { color: hexToColorObject(fromColor) },
-      gradient: {
-        fromColor: hexToColorObject(fromColor),
-        toColor: hexToColorObject(toColor),
-      },
-      color: `gradient(${fromColor}, ${toColor})`,
-    });
   }
 
   // Handle solid color backgrounds
-  const solidColor = showcaseBackground.color;
-
-  // Global color reference
-  if (isGlobalColor(solidColor)) {
-    return createDefaultBackground();
-  }
-
-  // Specific hex color
-  if (typeof solidColor === 'string') {
-    return createBackgroundStructure('solid', {
-      solid: { color: hexToColorObject(solidColor) },
-      color: solidColor,
-    });
+  if (showcaseBackground.style === 'COLOR') {
+    // According to source code array is also possible
+    const showcaseColor = showcaseBackground.color;
+    const solidColor = Array.isArray(showcaseColor) ? showcaseColor[0] : showcaseColor;
+    if (isApiRender) {
+      const finalColor = isGlobalColor(solidColor) ? solidColor : hexToColorObject(solidColor);
+      return createBackgroundObject('solid', finalColor, finalColor);
+    } else {
+      // Hex color - convert to color object
+      const finalColor = isGlobalColor(solidColor) ? defaultGrayColor : hexToColorObject(solidColor);
+      return createBackgroundObject('solid', finalColor, finalColor);
+    }
   }
-
-  // Fallback to default
-  return createDefaultBackground();
 }
 
 function overrideSettingsFromShowcase(content: any, showcases: any): any {
@@ -173,7 +203,7 @@ function overrideSettingsFromShowcase(content: any, showcases: any): any {
 
 export function mergeDesign(
   design: Record<string, any>,
-  showcase: Record<string, any>
+  showcase: Record<string, any>,
 ): Record<string, any> {
   const result: Record<string, any> = { ...design };
 
@@ -183,9 +213,9 @@ export function mergeDesign(
       const override = showcase[key];
 
       if (
-        base !== null && override !== null &&
-        typeof base === 'object' && typeof override === 'object' &&
-        !Array.isArray(base) && !Array.isArray(override)
+        base !== null && override !== null
+        && typeof base === 'object' && typeof override === 'object'
+        && !Array.isArray(base) && !Array.isArray(override)
       ) {
         // shallow merge nested objects
         result[key] = { ...base, ...override };
@@ -199,20 +229,36 @@ export function mergeDesign(
   return result;
 }
 
-export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any> ): Record<string, any> {
+export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any>): Record<string, any> {
   const parsedDesign: Record<string, any> = {};
   const parsedShowcaseDesign: Record<string, any> = {};
   Object.entries(design).forEach(([key, comp]) => {
-    parsedDesign[key] = comp?.defaults;
+    // Skip DIVIDER elements - they're UI-only and don't have runtime data
+    if (comp?.type === 'DIVIDER') {
+      return;
+    }
+    // Skip BACKGROUND - it's handled separately by createBackgroundDesign
+    if (comp?.type === 'BACKGROUND') {
+      return;
+    }
+    // Use defaults if available, otherwise use empty object
+    parsedDesign[key] = comp?.defaults || {};
   });
 
   Object.entries(showCaseDesign).forEach(([key, comp]) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // Skip DIVIDER elements - they're UI-only and don't have runtime data
+    if (comp?.type === 'DIVIDER') {
+      return;
+    }
+    // Skip BACKGROUND - it's handled separately by createBackgroundDesign
+    if (comp?.type === 'BACKGROUND') {
+      return;
+    }
     const { type, ...withoutType } = comp;
-    parsedShowcaseDesign[key] = type == 'TEXT' ? { ... withoutType, visible: true} : withoutType
+    parsedShowcaseDesign[key] = type == 'TEXT' ? { ...withoutType, visible: true } : withoutType;
   });
 
-  let overridenDesign = mergeDesign(parsedDesign, parsedShowcaseDesign)
+  let overridenDesign = mergeDesign(parsedDesign, parsedShowcaseDesign);
   overridenDesign = updateHexColors(overridenDesign);
   replaceGlobalFont(overridenDesign, 'Roboto');
   return overridenDesign;
@@ -231,13 +277,13 @@ function processImage(component: any, sectionName: string, key: string): Record<
     [key]: {
       set: newSet,
       ...(component.imageData?.borderInfo && { borderInfo: component.imageData.borderInfo }),
-      ...(component.imageData && { bucket: {} })
+      ...(component.imageData && { bucket: {} }),
     },
   };
 }
 
 function processComponent(key: string, component: any, translations: any, sectionName?: string): any {
-  if (!component?.type) return '';
+  if (!component?.type) return {};
   switch (component.type) {
     case 'INPUTBOX':
     case 'TEXTAREA': {
@@ -281,9 +327,19 @@ function processComponent(key: string, component: any, translations: any, sectio
       return { [key]: component.defaults.value };
     case 'IMAGE':
       return processImage(component, sectionName!, key);
+    case 'INFO':
+      return {
+        [key]: {
+          label: translations[component.label],
+          description: translations[component.description],
+          button: {
+            label: translations[component.button.label],
+            link: component.button.link,
+          },
+        },
+      };
     default:
-      console.warn(`Unknown type: ${component.type}`);
-      return '';
+      return {};
   }
 }
 
@@ -292,7 +348,7 @@ function getContentToRender(
   showcase: any,
   contentTranslations: any,
   showcaseTranslations: any,
-  sectionName: string
+  sectionName: string,
 ): any {
   const parsedContent = Object.entries(content).reduce((acc, [k, c]) => {
     return { ...acc, ...processComponent(k, c, contentTranslations, sectionName) };
@@ -306,7 +362,7 @@ function getContentToRender(
 }
 
 export function dropdownOptions(showcaseModules: Record<string, any>): Array<{ value: string; label: string }> {
-  return Object.keys(showcaseModules).map(path => {
+  return Object.keys(showcaseModules).map((path) => {
     const match = path.match(/\/sections\/([^/]+)\/js\/showcases\/(\d+)\.mjs$/);
     if (!match) return null;
     return {
@@ -323,89 +379,112 @@ export function loadSectionCss(sectionName: string): void {
   document.head.appendChild(link);
 }
 
+/**
+ * Renders a showcase in the browser (client-side).
+ */
 export async function renderShowcase(sectionName: string, showcaseId: string): Promise<void> {
-  const client = await loadModule(`${distFolderPath}/sections/${sectionName}/js/main/client/client.js`);
-  const content = await loadModule(`${distFolderPath}/sections/${sectionName}/js/settings/content.mjs`);
-  const contentTranslations = await loadModule(`${distFolderPath}/sections/${sectionName}/js/settings/translations.mjs`);
-  const showcaseTranslations = await loadModule(`${distFolderPath}/sections/${sectionName}/js/showcases/translations.mjs`);
-  const showcase = await loadModule(`${distFolderPath}/sections/${sectionName}/js/showcases/${showcaseId}.mjs`);
-  const design = await loadModule(`${distFolderPath}/sections/${sectionName}/js/settings/design.mjs`);
+  if (!distFolderPath) throw new Error('distFolderPath not set');
 
-  // Get showcase background and create background design
-  const showcaseBackground = showcase.default?.design?.background;
-  const backgroundDesign = createBackgroundDesign(showcaseBackground);
+  const basePath = `${distFolderPath}/sections/${sectionName}`;
+  const [content, contentTranslations, showcaseTranslations, showcase, design]
+    = await loadShowcaseModules(sectionName, showcaseId, distFolderPath);
 
-  const ovveridenDesign = designTransformer(design.default, showcase.default.design || {});
+  const client = await loadModule(`${basePath}/js/main/client/client.js`) as any;
 
-  loadSectionCss(sectionName);
+  // Prepare design
+  const showcaseBackground = (showcase as any).default?.design?.background;
+  const backgroundDesign = createBackgroundDesign(showcaseBackground, false); // Local preview
+  const overriddenDesign = designTransformer((design as any).default, (showcase as any).default.design || {});
+  overriddenDesign.background = backgroundDesign;
 
+  // Prepare content
   const overriddenContent = getContentToRender(
-    content.default,
-    showcase.default.content || {},
-    contentTranslations.default.en,
-    showcaseTranslations.default.en,
-    sectionName
+    (content as any).default,
+    (showcase as any).default.content || {},
+    (contentTranslations as any).default.en,
+    (showcaseTranslations as any).default.en,
+    sectionName,
   );
 
-  // Get external content mock (can be customized in compiled mock.js)
-  const externalContentMock = getExternalContentMock();
-
-  // Ensure background design always overrides any existing background
-  const finalDesign = { ...ovveridenDesign };
-  finalDesign.background = backgroundDesign.background;
+  // Load CSS
+  loadSectionCss(sectionName);
 
+  // Prepare state
   const state = {
-    context: {
-      globalDesign: { color: 'global.color.background' },
-    },
+    context: { globalDesign: { color: 'global.color.background' } },
     data: {
       content: overriddenContent,
-      design: finalDesign,
+      design: overriddenDesign,
       defaults: {},
       background: {},
-      externalContent: externalContentMock,
+      externalContent: getExternalContentMock(),
     },
   };
 
-  // If app is already mounted, update it; otherwise mount it
+  // Mount or update app
   if (currentApp) {
     currentApp.update(state);
   } else {
-    const { mount, update, unmount } = client.default.init();
+    const { mount, update, unmount } = (client as any).default.init();
     currentApp = { update, unmount };
     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 || {});
-
+/**
+ * Prepares showcase data (content and design) without rendering.
+ * Used by API routes to return tile data.
+ */
+export async function getShowcaseData(sectionName: string, showcaseId: string, distFolder: string) {
+  const [content, contentTranslations, showcaseTranslations, showcase, design]
+    = await loadShowcaseModules(sectionName, showcaseId, distFolder);
+
+  // Prepare design
+  const showcaseBackground = (showcase as any).default?.design?.background;
+  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;
+
+  // Prepare content
   const overriddenContent = getContentToRender(
-    content.default,
-    showcase.default.content || {},
-    contentTranslations.default.en,
-    showcaseTranslations.default.en,
-    sectionName
+    (content as any).default,
+    (showcase as any).default.content || {},
+    (contentTranslations as any).default.en,
+    (showcaseTranslations as any).default.en,
+    sectionName,
   );
 
-  // Ensure background design always overrides any existing background
-  const finalDesign = {...ovveridenDesign};
-  finalDesign.background = backgroundDesign.background;
+  return {
+    content: overriddenContent,
+    design: overriddenDesign,
+  };
+}
 
-  const state = {
-      content: overriddenContent,
-      design: finalDesign,
+/**
+ * Gets the showcase state by rendering server-side.
+ * Uses renderServerModule to get HTML directly from the SSR server.
+ */
+export async function getShowcaseState(sectionName: string, showcaseId: string, distFolder: string, context: Record<string, any>) {
+  const { content: overriddenContent, design: overriddenDesign }
+    = await getShowcaseData(sectionName, showcaseId, distFolder);
+
+  const data = {
+    content: overriddenContent,
+    design: overriddenDesign,
+    defaults: {},
+    background: {},
+    externalContent: getExternalContentMock(),
   };
 
-  return state;
+  // Render server-side using the SSR server
+  const basePath = `${distFolder}/sections/${sectionName}`;
+  const serverModulePath = `${basePath}/js/main/server/server.js`;
+  const html = await renderServerModule(serverModulePath, context, data);
+
+  return {
+    content: overriddenContent,
+    design: overriddenDesign,
+    html,
+  };
 }