@shoppexio/builder-runtime 0.1.4 → 0.1.5

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './standard-product-page.js';
 export * from './attributes.js';
 export * from './content.js';
 export * from './css-vars.js';
+export { getThemePageBlockOrderFromManifest } from '@shoppex/builder-contracts';
 export * from './layout.js';
 export * from './react.js';
 export * from './storefront-google-fonts.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,kCAAkC,EAAE,MAAM,4BAA4B,CAAC;AAChF,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './standard-product-page.js';
 export * from './attributes.js';
 export * from './content.js';
 export * from './css-vars.js';
+export { getThemePageBlockOrderFromManifest } from '@shoppex/builder-contracts';
 export * from './layout.js';
 export * from './react.js';
 export * from './storefront-google-fonts.js';

package/dist/preview-mode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-mode.d.ts","sourceRoot":"","sources":["../src/preview-mode.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,QAAQ,GAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAmB,GAAG,OAAO,CAOlG"}
+{"version":3,"file":"preview-mode.d.ts","sourceRoot":"","sources":["../src/preview-mode.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,OAAO,CAOjF"}

package/dist/preview-mode.js

@@ -1,7 +1,7 @@
-export function isBuilderPreviewMode(location = window.location) {
+export function isBuilderPreviewMode(location) {
     if (typeof window === 'undefined') {
         return false;
     }
-    const mode = new URLSearchParams(location.search).get('shoppex-preview-mode');
+    const mode = new URLSearchParams((location ?? window.location).search).get('shoppex-preview-mode');
     return mode === 'theme' || mode === 'builder';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoppexio/builder-runtime",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Theme-side Builder v2 runtime helpers for Shoppex storefront themes",
   "type": "module",
   "repository": {
@@ -75,11 +75,11 @@
   "author": "Shoppex",
   "license": "MIT",
   "peerDependencies": {
-    "@shoppexio/builder-contracts": "0.1.1",
+    "@shoppexio/builder-contracts": "0.1.2",
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@shoppex/builder-contracts": "npm:@shoppexio/builder-contracts@0.1.1"
+    "@shoppex/builder-contracts": "npm:@shoppexio/builder-contracts@0.1.2"
   },
   "devDependencies": {
     "jsdom": "^28.1.0",

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './standard-product-page.js';
 export * from './attributes.js';
 export * from './content.js';
 export * from './css-vars.js';
+export { getThemePageBlockOrderFromManifest } from '@shoppex/builder-contracts';
 export * from './layout.js';
 export * from './react.js';
 export * from './storefront-google-fonts.js';

package/dist/builder-runtime.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=builder-runtime.test.d.ts.map

package/dist/builder-runtime.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"builder-runtime.test.d.ts","sourceRoot":"","sources":["../src/builder-runtime.test.ts"],"names":[],"mappings":""}

package/dist/builder-runtime.test.js

@@ -1,115 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-import { createBlockInstance, createEmptyBuilderSettings } from '@shoppex/builder-contracts';
-import { builderBlock, builderContent, builderSlot, canAddBlock, createBuilderCss, getBuilderContentList, getBuilderContentString, getPageBlocks, resolveBlockSettings, resolveStyleSlotValue, } from './index.js';
-function createSettings() {
-    return {
-        ...createEmptyBuilderSettings(1),
-        theme: {
-            content: {
-                'hero.title': 'Launch sale',
-                faq: {
-                    items: [{ question: 'Can I edit sections?', answer: 'Yes' }],
-                },
-            },
-            layout: {
-                home: {
-                    blocks: [
-                        createBlockInstance({
-                            id: 'hero-1',
-                            type: 'hero',
-                            settings: { title: 'Hero block' },
-                            style_overrides: {
-                                'button.radius': { base: 14 },
-                            },
-                        }),
-                    ],
-                },
-            },
-            style_slots: {
-                'button.radius': { base: 8, md: 12 },
-                'color.primary': '#ff5500',
-            },
-            pages: [],
-            terms: {},
-        },
-    };
-}
-const manifest = {
-    id: 'default',
-    name: 'Default',
-    version: '2.0.0',
-    pages: {
-        home: {
-            label: 'Home',
-            allowedBlocks: ['hero'],
-            defaultBlocks: [],
-        },
-    },
-    blocks: {
-        hero: {
-            label: 'Hero',
-            variants: [],
-            settings: {
-                title: { type: 'text', label: 'Headline', defaultValue: 'Default hero' },
-            },
-            exposedStyleSlots: ['button.radius'],
-            presets: [],
-        },
-    },
-    styleSlots: {},
-    presets: {},
-};
-describe('@shoppex/builder-runtime', () => {
-    test('reads direct and nested content values', () => {
-        const settings = createSettings();
-        expect(getBuilderContentString(settings, 'hero.title')).toBe('Launch sale');
-        expect(getBuilderContentList(settings, 'faq.items')).toEqual([{ question: 'Can I edit sections?', answer: 'Yes' }]);
-    });
-    test('preserves intentionally empty content strings', () => {
-        const settings = createSettings();
-        settings.theme.content['hero.subtitle'] = '';
-        expect(getBuilderContentString(settings, 'hero.subtitle', 'Default subtitle')).toBe('');
-    });
-    test('resolves page blocks', () => {
-        const settings = createSettings();
-        expect(getPageBlocks(settings, 'home')).toHaveLength(1);
-        expect(getPageBlocks(settings, 'missing')).toEqual([]);
-    });
-    test('resolves style slots with breakpoint fallback and block override', () => {
-        const settings = createSettings();
-        const block = settings.theme.layout.home.blocks[0];
-        expect(resolveStyleSlotValue(settings, 'button.radius', { breakpoint: 'lg' })).toBe(12);
-        expect(resolveStyleSlotValue(settings, 'button.radius', { block, breakpoint: 'md' })).toBe(14);
-    });
-    test('emits CSS variables with responsive media blocks', () => {
-        const css = createBuilderCss(createSettings());
-        expect(css).toContain('--builder-button-radius: 8px;');
-        expect(css).toContain('--builder-color-primary: #ff5500;');
-        expect(css).toContain('@media (min-width: 768px)');
-        expect(css).toContain('--builder-button-radius: 12px;');
-    });
-    test('checks block limits against the manifest', () => {
-        const settings = createSettings();
-        expect(canAddBlock(settings, manifest, 'home', 'hero')).toBe(true);
-        expect(canAddBlock(settings, manifest, 'home', 'faq')).toBe(false);
-    });
-    test('merges block defaults from the manifest', () => {
-        const block = createBlockInstance({
-            id: 'hero-2',
-            type: 'hero',
-            settings: {},
-        });
-        expect(resolveBlockSettings(block, manifest)).toEqual({ title: 'Default hero' });
-    });
-    test('creates the three supported builder attributes', () => {
-        expect(builderContent('hero.title')).toEqual({ 'data-builder-content': 'hero.title' });
-        expect(builderSlot('button.radius', { blockId: 'hero-1' })).toEqual({
-            'data-builder-slot': 'button.radius',
-            'data-builder-block': 'hero-1',
-        });
-        expect(builderBlock('hero-1', 'hero')).toEqual({
-            'data-builder-block': 'hero-1',
-            'data-builder-block-type': 'hero',
-        });
-    });
-});

package/dist/react-runtime.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=react-runtime.test.d.ts.map

package/dist/react-runtime.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-runtime.test.d.ts","sourceRoot":"","sources":["../src/react-runtime.test.tsx"],"names":[],"mappings":""}

package/dist/react-runtime.test.js

@@ -1,332 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
-import { createEmptyBuilderSettings } from '@shoppex/builder-contracts';
-import { JSDOM } from 'jsdom';
-import { act } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BuilderBlockFrame, BuilderBlockProvider, BuilderPage, BuilderRuntimePreviewProvider, useBuilderContent, useBuilderContentRecord, } from './react.js';
-function createSettings(revision, title) {
-    return {
-        ...createEmptyBuilderSettings(revision),
-        theme: {
-            content: {
-                'hero.title': title,
-            },
-            layout: {
-                home: {
-                    blocks: [
-                        {
-                            id: 'hero-1',
-                            type: 'hero',
-                            visible: true,
-                            settings: {},
-                        },
-                    ],
-                },
-            },
-            style_slots: {},
-            pages: [],
-            terms: {},
-        },
-    };
-}
-function Probe() {
-    const title = useBuilderContent('hero.title', '');
-    return (_jsx("section", { "data-builder-block": "hero-1", "data-builder-block-type": "hero", "data-page-id": "home", children: _jsx("h1", { "data-builder-content": "hero.title", children: title }) }));
-}
-function FallbackProbe() {
-    const title = useBuilderContent('hero.title', 'Default title');
-    return _jsx("h1", { "data-builder-content": "hero.title", children: title });
-}
-function SlotButtonProbe() {
-    return (_jsx("section", { "data-builder-block": "hero-1", "data-builder-block-type": "hero", "data-page-id": "home", children: _jsx("button", { type: "button", "data-builder-slot": "button.background", children: "Buy now" }) }));
-}
-function ScopedProbe() {
-    return (_jsx(BuilderBlockProvider, { block: {
-            id: 'hero-1',
-            type: 'hero',
-            visible: true,
-            settings: {
-                title: 'Scoped title',
-                subtitle: 'Scoped subtitle',
-            },
-        }, children: _jsx(ScopedProbeContent, {}) }));
-}
-function ScopedProbeContent() {
-    const title = useBuilderContent('hero.title', '');
-    const subtitle = useBuilderContent('hero.subtitle', '');
-    const contentRecord = useBuilderContentRecord();
-    return (_jsxs(_Fragment, { children: [_jsx("h1", { "data-testid": "scoped-title", children: title }), _jsx("p", { "data-testid": "scoped-subtitle", children: subtitle }), _jsx("span", { "data-testid": "scoped-record", children: String(contentRecord.hero.title) })] }));
-}
-function HeroBlock({ block }) {
-    const title = useBuilderContent('hero.title', '');
-    return (_jsx(BuilderBlockFrame, { as: "section", pageId: "home", block: block, children: _jsx("h1", { "data-builder-content": "hero.title", children: title }) }));
-}
-describe('BuilderRuntimePreviewProvider', () => {
-    let dom;
-    let root;
-    let postedMessages;
-    let parentWindow;
-    beforeEach(() => {
-        postedMessages = [];
-        parentWindow = {
-            postMessage: (message) => {
-                postedMessages.push(message);
-            },
-        };
-        dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
-            url: 'https://preview.shoppex.test/?shoppex-preview-mode=theme',
-            referrer: 'https://dashboard.shoppex.test/theme/editor',
-        });
-        Object.defineProperty(dom.window, 'parent', {
-            configurable: true,
-            value: parentWindow,
-        });
-        Object.assign(globalThis, {
-            window: dom.window,
-            document: dom.window.document,
-            navigator: dom.window.navigator,
-            Element: dom.window.Element,
-            HTMLElement: dom.window.HTMLElement,
-            HTMLImageElement: dom.window.HTMLImageElement,
-            Node: dom.window.Node,
-            MouseEvent: dom.window.MouseEvent,
-            MessageEvent: dom.window.MessageEvent,
-            CustomEvent: dom.window.CustomEvent,
-            CSS: {
-                escape: (value) => value.replaceAll('"', '\\"'),
-            },
-            IS_REACT_ACT_ENVIRONMENT: true,
-        });
-        root = createRoot(dom.window.document.getElementById('root'));
-    });
-    afterEach(async () => {
-        await act(async () => {
-            root.unmount();
-        });
-        dom.window.close();
-        const globals = globalThis;
-        for (const key of [
-            'window',
-            'document',
-            'navigator',
-            'Element',
-            'HTMLElement',
-            'HTMLImageElement',
-            'Node',
-            'MouseEvent',
-            'MessageEvent',
-            'CustomEvent',
-            'CSS',
-            'IS_REACT_ACT_ENVIRONMENT',
-        ]) {
-            delete globals[key];
-        }
-    });
-    test('sends READY with the initial revision', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
-        });
-        expect(postedMessages).toContainEqual({
-            type: 'READY',
-            revision: 3,
-            health: {
-                reactMounted: true,
-                builderRuntimeProvider: true,
-                protocolVersion: 2,
-            },
-        });
-        expect(dom.window.document.body.textContent).toContain('Initial title');
-    });
-    test('normalizes mixed initial builder settings before strict validation', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: {
-                    version: 2,
-                    revision: 9,
-                    theme: {
-                        content: {
-                            'hero.title': 'Mixed title',
-                        },
-                        layout: {
-                            home: {
-                                sections: [
-                                    {
-                                        id: 'hero',
-                                        visible: true,
-                                    },
-                                ],
-                            },
-                        },
-                        tokens_override: {
-                            colors: {
-                                primary: '#111827',
-                            },
-                        },
-                    },
-                }, children: _jsx(Probe, {}) }));
-        });
-        expect(postedMessages).toContainEqual({
-            type: 'READY',
-            revision: 9,
-            health: {
-                reactMounted: true,
-                builderRuntimeProvider: true,
-                protocolVersion: 2,
-            },
-        });
-        expect(dom.window.document.body.textContent).toContain('Mixed title');
-    });
-    test('preserves intentionally empty content strings in hooks', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(4, ''), children: _jsx(FallbackProbe, {}) }));
-        });
-        expect(dom.window.document.body.textContent).toBe('');
-    });
-    test('responds to explicit READY requests when the parent missed the initial message', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
-        });
-        postedMessages.length = 0;
-        await act(async () => {
-            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
-                origin: 'https://dashboard.shoppex.test',
-                source: parentWindow,
-                data: {
-                    type: 'REQUEST_READY',
-                },
-            }));
-        });
-        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(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(6, 'Initial title'), children: _jsx(Probe, {}) }));
-        });
-        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 () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Initial title'), children: _jsx(Probe, {}) }));
-        });
-        await act(async () => {
-            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
-                origin: 'https://dashboard.shoppex.test',
-                source: parentWindow,
-                data: {
-                    type: 'APPLY_STATE',
-                    revision: 4,
-                    state: createSettings(4, 'Updated title'),
-                },
-            }));
-        });
-        expect(postedMessages).toContainEqual({ type: 'APPLIED', revision: 4 });
-        expect(dom.window.document.body.textContent).toContain('Updated title');
-    });
-    test('renders page blocks through a typed registry and shared block frame', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Registry title'), children: _jsx(BuilderPage, { pageId: "home", registry: {
-                        hero: HeroBlock,
-                    }, context: {} }) }));
-        });
-        const renderedBlock = dom.window.document.querySelector('[data-builder-block="hero-1"]');
-        expect(renderedBlock?.getAttribute('data-page-id')).toBe('home');
-        expect(renderedBlock?.getAttribute('data-builder-block-type')).toBe('hero');
-        expect(dom.window.document.body.textContent).toContain('Registry title');
-    });
-    test('prefers scoped block settings over global builder content inside a block provider', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(3, 'Global title'), children: _jsx(ScopedProbe, {}) }));
-        });
-        expect(dom.window.document.querySelector('[data-testid="scoped-title"]')?.textContent).toBe('Scoped title');
-        expect(dom.window.document.querySelector('[data-testid="scoped-subtitle"]')?.textContent).toBe('Scoped subtitle');
-        expect(dom.window.document.querySelector('[data-testid="scoped-record"]')?.textContent).toBe('Scoped title');
-    });
-    test('rejects stale preview revisions without changing rendered content', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(5, 'Current title'), children: _jsx(Probe, {}) }));
-        });
-        await act(async () => {
-            dom.window.dispatchEvent(new dom.window.MessageEvent('message', {
-                origin: 'https://dashboard.shoppex.test',
-                source: parentWindow,
-                data: {
-                    type: 'APPLY_STATE',
-                    revision: 4,
-                    state: createSettings(4, 'Stale title'),
-                },
-            }));
-        });
-        expect(postedMessages).toContainEqual({
-            type: 'APPLY_FAILED',
-            revision: 4,
-            error: 'Stale builder revision',
-        });
-        expect(dom.window.document.body.textContent).toContain('Current title');
-    });
-    test('emits block selection details from iframe clicks', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(Probe, {}) }));
-        });
-        const heading = dom.window.document.querySelector('h1');
-        heading?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
-        expect(postedMessages).toContainEqual({
-            type: 'ELEMENT_CLICKED',
-            revision: 7,
-            selection: {
-                pageId: 'home',
-                blockId: 'hero-1',
-                blockType: 'hero',
-                contentPath: 'hero.title',
-                elementType: 'text',
-            },
-        });
-    });
-    test('classifies buttons before style slots for inspector clicks', async () => {
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(SlotButtonProbe, {}) }));
-        });
-        const button = dom.window.document.querySelector('button');
-        button?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
-        expect(postedMessages).toContainEqual({
-            type: 'ELEMENT_CLICKED',
-            revision: 7,
-            selection: {
-                pageId: 'home',
-                blockId: 'hero-1',
-                blockType: 'hero',
-                slotId: 'button.background',
-                elementType: 'button',
-            },
-        });
-    });
-    test('does not intercept clicks outside trusted builder preview embeds', async () => {
-        dom.reconfigure({
-            url: 'https://preview.shoppex.test/',
-        });
-        await act(async () => {
-            root.render(_jsx(BuilderRuntimePreviewProvider, { initialSettings: createSettings(7, 'Clickable title'), children: _jsx(Probe, {}) }));
-        });
-        postedMessages.length = 0;
-        const heading = dom.window.document.querySelector('h1');
-        heading?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true, cancelable: true }));
-        expect(postedMessages).toEqual([]);
-    });
-});