@shoppexio/builder-runtime 0.1.0 → 0.1.1

package/src/builder-runtime.test.ts

@@ -9,6 +9,7 @@ import {
   getBuilderContentList,
   getBuilderContentString,
   getPageBlocks,
+  getThemePageBlockOrderFromManifest,
   resolveBlockSettings,
   resolveStyleSlotValue,
 } from './index.js';
@@ -40,6 +41,7 @@ function createSettings(): BuilderSettings {
       style_slots: {
         'button.radius': { base: 8, md: 12 },
         'color.primary': '#ff5500',
+        'theme.hero.overlay.opacity': 0.72,
       },
       pages: [],
       terms: {},
@@ -95,6 +97,27 @@ describe('@shoppex/builder-runtime', () => {
     expect(getPageBlocks(settings, 'missing')).toEqual([]);
   });
 
+  test('reads canonical default page block order from a manifest', () => {
+    expect(getThemePageBlockOrderFromManifest({
+      pages: {
+        home: {
+          allowedBlocks: ['hero', 'faq'],
+          defaultBlocks: [{ type: 'hero' }],
+        },
+        product: {
+          allowedBlocks: ['gallery', 'buy-box'],
+        },
+      },
+    }, 'home')).toEqual(['hero']);
+    expect(getThemePageBlockOrderFromManifest({
+      pages: {
+        product: {
+          allowedBlocks: ['gallery', 'buy-box'],
+        },
+      },
+    }, 'product')).toEqual(['gallery', 'buy-box']);
+  });
+
   test('resolves style slots with breakpoint fallback and block override', () => {
     const settings = createSettings();
     const block = settings.theme.layout.home.blocks[0];
@@ -108,6 +131,7 @@ describe('@shoppex/builder-runtime', () => {
 
     expect(css).toContain('--builder-button-radius: 8px;');
     expect(css).toContain('--builder-color-primary: #ff5500;');
+    expect(css).toContain('--builder-theme-hero-overlay-opacity: 0.72;');
     expect(css).toContain('@media (min-width: 768px)');
     expect(css).toContain('--builder-button-radius: 12px;');
   });

package/src/css-vars.ts

@@ -1,4 +1,4 @@
-import type { BuilderSettings, Breakpoint, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
+import type { BuilderSettings, Breakpoint, CoreStyleSlotId, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
 import { CORE_STYLE_SLOT_IDS } from '@shoppex/builder-contracts';
 import { isResponsiveRecord } from './style-slots.js';
 
@@ -9,7 +9,7 @@ const BREAKPOINT_MEDIA: Record<Exclude<Breakpoint, 'base'>, string> = {
   xl: '(min-width: 1280px)',
 };
 
-const STYLE_SLOT_CSS_VARIABLES: Record<StyleSlotId, { name: string; unit?: string }> = {
+const STYLE_SLOT_CSS_VARIABLES: Record<CoreStyleSlotId, { name: string; unit?: string }> = {
   'button.radius': { name: '--builder-button-radius', unit: 'px' },
   'button.background': { name: '--builder-button-background' },
   'button.foreground': { name: '--builder-button-foreground' },
@@ -37,19 +37,19 @@ const STYLE_SLOT_CSS_VARIABLES: Record<StyleSlotId, { name: string; unit?: strin
 };
 
 export function getStyleSlotCssVariable(slotId: StyleSlotId): string {
-  return STYLE_SLOT_CSS_VARIABLES[slotId].name;
+  return getStyleSlotCssVariableConfig(slotId).name;
 }
 
 export function createStyleSlotCssVariables(slots: StyleSlots): Record<string, string> {
   const variables: Record<string, string> = {};
 
-  for (const slotId of CORE_STYLE_SLOT_IDS) {
+  for (const slotId of getRenderableStyleSlotIds(slots)) {
     const value = slots[slotId];
     if (value === undefined || isResponsiveRecord(value)) {
       continue;
     }
 
-    variables[STYLE_SLOT_CSS_VARIABLES[slotId].name] = formatStyleSlotValue(slotId, value);
+    variables[getStyleSlotCssVariable(slotId)] = formatStyleSlotValue(slotId, value);
   }
 
   return variables;
@@ -68,13 +68,13 @@ export function createStyleSlotsCss(slots: StyleSlots, selector = ':root'): stri
     xl: [],
   };
 
-  for (const slotId of CORE_STYLE_SLOT_IDS) {
+  for (const slotId of getRenderableStyleSlotIds(slots)) {
     const value = slots[slotId];
     if (value === undefined) {
       continue;
     }
 
-    const cssVariable = STYLE_SLOT_CSS_VARIABLES[slotId].name;
+    const cssVariable = getStyleSlotCssVariable(slotId);
 
     if (!isResponsiveRecord(value)) {
       baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value)};`);
@@ -114,7 +114,7 @@ export function createStyleSlotsCss(slots: StyleSlots, selector = ':root'): stri
 }
 
 function formatStyleSlotValue(slotId: StyleSlotId, value: unknown): string {
-  const unit = STYLE_SLOT_CSS_VARIABLES[slotId].unit;
+  const unit = getStyleSlotCssVariableConfig(slotId).unit;
 
   if (typeof value === 'number') {
     return unit ? `${value}${unit}` : `${value}`;
@@ -122,3 +122,24 @@ function formatStyleSlotValue(slotId: StyleSlotId, value: unknown): string {
 
   return String(value);
 }
+
+function getStyleSlotCssVariableConfig(slotId: StyleSlotId): { name: string; unit?: string } {
+  return isCoreStyleSlotId(slotId)
+    ? STYLE_SLOT_CSS_VARIABLES[slotId]
+    : { name: `--builder-${slotId.split('.').join('-')}` };
+}
+
+function getRenderableStyleSlotIds(slots: StyleSlots): StyleSlotId[] {
+  const declared = new Set<StyleSlotId>();
+  for (const slotId of CORE_STYLE_SLOT_IDS) {
+    declared.add(slotId);
+  }
+  for (const slotId of Object.keys(slots)) {
+    declared.add(slotId as StyleSlotId);
+  }
+  return [...declared];
+}
+
+function isCoreStyleSlotId(slotId: StyleSlotId): slotId is CoreStyleSlotId {
+  return (CORE_STYLE_SLOT_IDS as readonly string[]).includes(slotId);
+}

package/src/layout.ts

@@ -1,5 +1,12 @@
 import type { BlockInstance, BuilderSettings, PageLayout, ThemeManifest } from '@shoppex/builder-contracts';
 
+export type ThemePageBlockOrderManifest = {
+  pages?: Record<string, {
+    allowedBlocks?: string[];
+    defaultBlocks?: Array<{ type?: string }>;
+  }>;
+};
+
 export function getPageLayout(settings: BuilderSettings, pageId: string): PageLayout {
   return settings.theme.layout[pageId] ?? { blocks: [] };
 }
@@ -20,6 +27,22 @@ export function getAllowedBlockTypes(manifest: ThemeManifest, pageId: string): s
   return manifest.pages[pageId]?.allowedBlocks ?? [];
 }
 
+export function getThemePageBlockOrderFromManifest(
+  manifest: ThemePageBlockOrderManifest,
+  pageId: string,
+): string[] {
+  const page = manifest.pages?.[pageId];
+  if (!page) {
+    return [];
+  }
+
+  const defaultBlockTypes = (page.defaultBlocks ?? [])
+    .map((block) => block.type)
+    .filter((blockType): blockType is string => typeof blockType === 'string' && blockType.length > 0);
+
+  return defaultBlockTypes.length > 0 ? defaultBlockTypes : page.allowedBlocks ?? [];
+}
+
 export function canAddBlock(settings: BuilderSettings, manifest: ThemeManifest, pageId: string, blockType: string): boolean {
   const page = manifest.pages[pageId];
   const blockDefinition = manifest.blocks[blockType];

package/src/react-runtime.test.tsx

@@ -8,8 +8,10 @@ import {
   BuilderBlockProvider,
   BuilderPage,
   BuilderRuntimePreviewProvider,
+  resolvePreviewReloadTarget,
   useBuilderContent,
   useBuilderContentRecord,
+  useThemePageBlocks,
 } from './react.js';
 
 function createSettings(revision: number, title: string): BuilderSettings {
@@ -96,6 +98,21 @@ function ScopedProbeContent() {
   );
 }
 
+function PageBlocksProbe({ pageId = 'home', defaultOrder = ['hero', 'products'] }: {
+  pageId?: string;
+  defaultOrder?: string[];
+}) {
+  const blocks = useThemePageBlocks(pageId, defaultOrder);
+
+  return (
+    <ol data-testid="page-blocks">
+      {blocks.map((block) => (
+        <li key={block.id}>{block.id}:{block.type}</li>
+      ))}
+    </ol>
+  );
+}
+
 function HeroBlock({ block }: { block: BlockInstance }) {
   const title = useBuilderContent('hero.title', '');
 
@@ -106,6 +123,26 @@ function HeroBlock({ block }: { block: BlockInstance }) {
   );
 }
 
+describe('resolvePreviewReloadTarget', () => {
+  test('reloads through the worker session route when one was injected', () => {
+    expect(
+      resolvePreviewReloadTarget(
+        { search: '?shoppex-preview-mode=theme', hash: '#hero' },
+        '/s/session-1/draft-1/products/example',
+      ),
+    ).toBe('/s/session-1/draft-1/products/example?shoppex-preview-mode=theme#hero');
+  });
+
+  test('keeps normal browser reload behavior outside preview sessions', () => {
+    expect(
+      resolvePreviewReloadTarget(
+        { search: '?shoppex-preview-mode=theme', hash: '' },
+        '/products/example',
+      ),
+    ).toBeNull();
+  });
+});
+
 describe('BuilderRuntimePreviewProvider', () => {
   let dom: JSDOM;
   let root: Root;
@@ -184,10 +221,47 @@ describe('BuilderRuntimePreviewProvider', () => {
       );
     });
 
-    expect(postedMessages).toContainEqual({ type: 'READY', revision: 3 });
+    expect(postedMessages).toContainEqual({
+      type: 'READY',
+      revision: 3,
+      health: {
+        reactMounted: true,
+        builderRuntimeProvider: true,
+        protocolVersion: 2,
+      },
+    });
     expect(dom.window.document.body.textContent).toContain('Initial title');
   });
 
+  test('sends READY when the trusted parent origin is provided explicitly without a referrer', async () => {
+    dom.reconfigure({
+      url: 'https://preview.shoppex.test/?shoppex-preview-mode=theme&shoppex-preview-parent-origin=https%3A%2F%2Fdashboard.shoppex.test',
+    });
+    Object.defineProperty(dom.window.document, 'referrer', {
+      configurable: true,
+      value: '',
+    });
+
+    await act(async () => {
+      root.render(
+        <BuilderRuntimePreviewProvider initialSettings={createSettings(4, 'Explicit origin title')}>
+          <Probe />
+        </BuilderRuntimePreviewProvider>,
+      );
+    });
+
+    expect(postedMessages).toContainEqual({
+      type: 'READY',
+      revision: 4,
+      health: {
+        reactMounted: true,
+        builderRuntimeProvider: true,
+        protocolVersion: 2,
+      },
+    });
+    expect(dom.window.document.body.textContent).toContain('Explicit origin title');
+  });
+
   test('normalizes mixed initial builder settings before strict validation', async () => {
     await act(async () => {
       root.render(
@@ -222,7 +296,15 @@ describe('BuilderRuntimePreviewProvider', () => {
       );
     });
 
-    expect(postedMessages).toContainEqual({ type: 'READY', revision: 9 });
+    expect(postedMessages).toContainEqual({
+      type: 'READY',
+      revision: 9,
+      health: {
+        reactMounted: true,
+        builderRuntimeProvider: true,
+        protocolVersion: 2,
+      },
+    });
     expect(dom.window.document.body.textContent).toContain('Mixed title');
   });
 
@@ -261,7 +343,39 @@ describe('BuilderRuntimePreviewProvider', () => {
       );
     });
 
-    expect(postedMessages).toEqual([{ type: 'READY', revision: 3 }]);
+    expect(postedMessages).toEqual([{
+      type: 'READY',
+      revision: 3,
+      health: {
+        reactMounted: true,
+        builderRuntimeProvider: true,
+        protocolVersion: 2,
+      },
+    }]);
+  });
+
+  test('reports iframe runtime errors to the builder parent', async () => {
+    await act(async () => {
+      root.render(
+        <BuilderRuntimePreviewProvider initialSettings={createSettings(6, 'Initial title')}>
+          <Probe />
+        </BuilderRuntimePreviewProvider>,
+      );
+    });
+
+    postedMessages.length = 0;
+
+    dom.window.dispatchEvent(new dom.window.ErrorEvent('error', {
+      error: new Error('Preview crashed'),
+      message: 'Preview crashed',
+    }));
+
+    expect(postedMessages).toEqual([expect.objectContaining({
+      type: 'PREVIEW_ERROR',
+      revision: 6,
+      message: 'Preview crashed',
+      source: 'error',
+    })]);
   });
 
   test('applies preview state and acknowledges the exact revision', async () => {
@@ -313,6 +427,62 @@ describe('BuilderRuntimePreviewProvider', () => {
     expect(dom.window.document.body.textContent).toContain('Registry title');
   });
 
+  test('returns visible page blocks or manifest default order from the runtime helper', async () => {
+    await act(async () => {
+      root.render(
+        <BuilderRuntimePreviewProvider initialSettings={createEmptyBuilderSettings(1)}>
+          <PageBlocksProbe />
+        </BuilderRuntimePreviewProvider>,
+      );
+    });
+
+    expect(dom.window.document.querySelector('[data-testid="page-blocks"]')?.textContent).toBe('hero:heroproducts:products');
+
+    await act(async () => {
+      dom.window.dispatchEvent(
+        new dom.window.MessageEvent('message', {
+          origin: 'https://dashboard.shoppex.test',
+          source: parentWindow as Window,
+          data: {
+            type: 'APPLY_STATE',
+            revision: 2,
+            state: {
+              ...createEmptyBuilderSettings(2),
+              theme: {
+                ...createEmptyBuilderSettings(2).theme,
+                layout: {
+                  home: {
+                    blocks: [
+                      { id: 'hero-1', type: 'hero', visible: true, settings: {} },
+                      { id: 'faq-1', type: 'faq', visible: false, settings: {} },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        }),
+      );
+    });
+
+    expect(dom.window.document.querySelector('[data-testid="page-blocks"]')?.textContent).toBe('hero-1:hero');
+  });
+
+  test('shows missing registry blocks inside trusted builder preview', async () => {
+    await act(async () => {
+      root.render(
+        <BuilderRuntimePreviewProvider initialSettings={createSettings(3, 'Registry title')}>
+          <BuilderPage pageId="home" registry={{}} context={{}} />
+        </BuilderRuntimePreviewProvider>,
+      );
+    });
+
+    const missingBlock = dom.window.document.querySelector('[data-builder-runtime-error="missing-block-component"]');
+
+    expect(missingBlock?.getAttribute('data-builder-block')).toBe('hero-1');
+    expect(missingBlock?.textContent).toContain('Missing Builder component for block "hero".');
+  });
+
   test('prefers scoped block settings over global builder content inside a block provider', async () => {
     await act(async () => {
       root.render(