@shoppexio/builder-runtime 0.1.0

package/src/builder-runtime.test.ts

@@ -0,0 +1,143 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance, createEmptyBuilderSettings, type BuilderSettings, type ThemeManifest } from '@shoppex/builder-contracts';
+import {
+  builderBlock,
+  builderContent,
+  builderSlot,
+  canAddBlock,
+  createBuilderCss,
+  getBuilderContentList,
+  getBuilderContentString,
+  getPageBlocks,
+  resolveBlockSettings,
+  resolveStyleSlotValue,
+} from './index.js';
+
+function createSettings(): BuilderSettings {
+  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: ThemeManifest = {
+  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/src/content.ts

@@ -0,0 +1,58 @@
+import type { BuilderSettings } from '@shoppex/builder-contracts';
+
+export type JsonRecord = Record<string, unknown>;
+
+export function getBuilderContentValue(settings: BuilderSettings, path: string): unknown {
+  const content = settings.theme.content;
+
+  if (Object.prototype.hasOwnProperty.call(content, path)) {
+    return content[path];
+  }
+
+  return getByDottedPath(content, path);
+}
+
+export function getBuilderContentString(settings: BuilderSettings, path: string, fallback?: string): string | undefined {
+  const value = getBuilderContentValue(settings, path);
+  return typeof value === 'string' ? value : fallback;
+}
+
+export function getBuilderContentList<T = unknown>(settings: BuilderSettings, path: string, fallback: T[] = []): T[] {
+  const value = getBuilderContentValue(settings, path);
+  return Array.isArray(value) ? (value as T[]) : fallback;
+}
+
+export function getBuilderContentRecord(settings: BuilderSettings): JsonRecord {
+  return settings.theme.content;
+}
+
+export function getBlockSettingValue<T = unknown>(
+  settings: BuilderSettings,
+  input: { pageId: string; blockId: string; path: string; fallback: T },
+): T {
+  const block = settings.theme.layout[input.pageId]?.blocks.find((candidate) => candidate.id === input.blockId);
+  if (!block) {
+    return input.fallback;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(block.settings, input.path)) {
+    return block.settings[input.path] as T;
+  }
+
+  const nested = getByDottedPath(block.settings, input.path);
+  return nested === undefined ? input.fallback : (nested as T);
+}
+
+function getByDottedPath(record: JsonRecord, path: string): unknown {
+  let current: unknown = record;
+
+  for (const segment of path.split('.')) {
+    if (!current || typeof current !== 'object') {
+      return undefined;
+    }
+
+    current = (current as JsonRecord)[segment];
+  }
+
+  return current;
+}

package/src/css-vars.ts

@@ -0,0 +1,124 @@
+import type { BuilderSettings, Breakpoint, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
+import { CORE_STYLE_SLOT_IDS } from '@shoppex/builder-contracts';
+import { isResponsiveRecord } from './style-slots.js';
+
+const BREAKPOINT_MEDIA: Record<Exclude<Breakpoint, 'base'>, string> = {
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)',
+  xl: '(min-width: 1280px)',
+};
+
+const STYLE_SLOT_CSS_VARIABLES: Record<StyleSlotId, { name: string; unit?: string }> = {
+  'button.radius': { name: '--builder-button-radius', unit: 'px' },
+  'button.background': { name: '--builder-button-background' },
+  'button.foreground': { name: '--builder-button-foreground' },
+  'button.border': { name: '--builder-button-border' },
+  'button.font.weight': { name: '--builder-button-font-weight' },
+  'input.radius': { name: '--builder-input-radius', unit: 'px' },
+  'input.height': { name: '--builder-input-height', unit: 'px' },
+  'input.border': { name: '--builder-input-border' },
+  'input.background': { name: '--builder-input-background' },
+  'input.foreground': { name: '--builder-input-foreground' },
+  'card.radius': { name: '--builder-card-radius', unit: 'px' },
+  'card.background': { name: '--builder-card-background' },
+  'card.border': { name: '--builder-card-border' },
+  'section.padding.y': { name: '--builder-section-padding-y', unit: 'px' },
+  'section.padding.x': { name: '--builder-section-padding-x', unit: 'px' },
+  'container.width': { name: '--builder-container-width', unit: 'px' },
+  'color.primary': { name: '--builder-color-primary' },
+  'color.accent': { name: '--builder-color-accent' },
+  'color.background': { name: '--builder-color-background' },
+  'color.foreground': { name: '--builder-color-foreground' },
+  'color.muted': { name: '--builder-color-muted' },
+  'link.color': { name: '--builder-link-color' },
+  'typography.heading.weight': { name: '--builder-typography-heading-weight' },
+  'typography.body.size': { name: '--builder-typography-body-size', unit: 'px' },
+};
+
+export function getStyleSlotCssVariable(slotId: StyleSlotId): string {
+  return STYLE_SLOT_CSS_VARIABLES[slotId].name;
+}
+
+export function createStyleSlotCssVariables(slots: StyleSlots): Record<string, string> {
+  const variables: Record<string, string> = {};
+
+  for (const slotId of CORE_STYLE_SLOT_IDS) {
+    const value = slots[slotId];
+    if (value === undefined || isResponsiveRecord(value)) {
+      continue;
+    }
+
+    variables[STYLE_SLOT_CSS_VARIABLES[slotId].name] = formatStyleSlotValue(slotId, value);
+  }
+
+  return variables;
+}
+
+export function createBuilderCss(settings: BuilderSettings, selector = ':root'): string {
+  return createStyleSlotsCss(settings.theme.style_slots, selector);
+}
+
+export function createStyleSlotsCss(slots: StyleSlots, selector = ':root'): string {
+  const baseDeclarations: string[] = [];
+  const responsiveDeclarations: Record<Exclude<Breakpoint, 'base'>, string[]> = {
+    sm: [],
+    md: [],
+    lg: [],
+    xl: [],
+  };
+
+  for (const slotId of CORE_STYLE_SLOT_IDS) {
+    const value = slots[slotId];
+    if (value === undefined) {
+      continue;
+    }
+
+    const cssVariable = STYLE_SLOT_CSS_VARIABLES[slotId].name;
+
+    if (!isResponsiveRecord(value)) {
+      baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value)};`);
+      continue;
+    }
+
+    if (value.base !== undefined) {
+      baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value.base)};`);
+    }
+
+    for (const breakpoint of ['sm', 'md', 'lg', 'xl'] as const) {
+      if (value[breakpoint] !== undefined) {
+        responsiveDeclarations[breakpoint].push(`${cssVariable}: ${formatStyleSlotValue(slotId, value[breakpoint])};`);
+      }
+    }
+  }
+
+  const chunks: string[] = [];
+
+  if (baseDeclarations.length > 0) {
+    chunks.push(`${selector} {\n  ${baseDeclarations.join('\n  ')}\n}`);
+  }
+
+  for (const breakpoint of ['sm', 'md', 'lg', 'xl'] as const) {
+    if (responsiveDeclarations[breakpoint].length === 0) {
+      continue;
+    }
+
+    chunks.push(
+      `@media ${BREAKPOINT_MEDIA[breakpoint]} {\n  ${selector} {\n    ${responsiveDeclarations[breakpoint].join(
+        '\n    ',
+      )}\n  }\n}`,
+    );
+  }
+
+  return chunks.join('\n\n');
+}
+
+function formatStyleSlotValue(slotId: StyleSlotId, value: unknown): string {
+  const unit = STYLE_SLOT_CSS_VARIABLES[slotId].unit;
+
+  if (typeof value === 'number') {
+    return unit ? `${value}${unit}` : `${value}`;
+  }
+
+  return String(value);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './attributes.js';
+export * from './content.js';
+export * from './css-vars.js';
+export * from './layout.js';
+export * from './react.js';
+export * from './style-slots.js';

package/src/jsdom.d.ts

@@ -0,0 +1,6 @@
+declare module 'jsdom' {
+  export class JSDOM {
+    window: Window & typeof globalThis;
+    constructor(html?: string, options?: { url?: string; referrer?: string });
+  }
+}

package/src/layout.ts

@@ -0,0 +1,55 @@
+import type { BlockInstance, BuilderSettings, PageLayout, ThemeManifest } from '@shoppex/builder-contracts';
+
+export function getPageLayout(settings: BuilderSettings, pageId: string): PageLayout {
+  return settings.theme.layout[pageId] ?? { blocks: [] };
+}
+
+export function getPageBlocks(settings: BuilderSettings, pageId: string): BlockInstance[] {
+  return getPageLayout(settings, pageId).blocks;
+}
+
+export function getVisiblePageBlocks(settings: BuilderSettings, pageId: string): BlockInstance[] {
+  return getPageBlocks(settings, pageId).filter((block) => block.visible);
+}
+
+export function getBlockById(settings: BuilderSettings, pageId: string, blockId: string): BlockInstance | null {
+  return getPageBlocks(settings, pageId).find((block) => block.id === blockId) ?? null;
+}
+
+export function getAllowedBlockTypes(manifest: ThemeManifest, pageId: string): string[] {
+  return manifest.pages[pageId]?.allowedBlocks ?? [];
+}
+
+export function canAddBlock(settings: BuilderSettings, manifest: ThemeManifest, pageId: string, blockType: string): boolean {
+  const page = manifest.pages[pageId];
+  const blockDefinition = manifest.blocks[blockType];
+
+  if (!page || !blockDefinition || !page.allowedBlocks.includes(blockType)) {
+    return false;
+  }
+
+  if (!blockDefinition.maxInstances) {
+    return true;
+  }
+
+  const currentCount = getPageBlocks(settings, pageId).filter((block) => block.type === blockType).length;
+  return currentCount < blockDefinition.maxInstances;
+}
+
+export function resolveBlockSettings(block: BlockInstance, manifest: ThemeManifest): Record<string, unknown> {
+  const blockDefinition = manifest.blocks[block.type];
+  if (!blockDefinition) {
+    return block.settings;
+  }
+
+  const defaults = Object.fromEntries(
+    Object.entries(blockDefinition.settings)
+      .filter(([, field]) => Object.prototype.hasOwnProperty.call(field, 'defaultValue'))
+      .map(([key, field]) => [key, field.defaultValue]),
+  );
+
+  return {
+    ...defaults,
+    ...block.settings,
+  };
+}