@cmssy/react 16.9.1 → 16.10.0

package/dist/spa.js

@@ -0,0 +1,636 @@
+"use client";
+import { useMemo, useState, useRef, useEffect, useCallback, createElement } from 'react';
+import { layoutRegionIds, fetchPage, buildBlockContext, fetchLayouts, normalizeBlockContent, asBucket, getBlockContentForLanguage, resolveRelationContent } from '@cmssy/core/internal';
+import { resolveEditorOrigin, blocksToSchemas } from '@cmssy/core';
+import { resolveSiteLocales, splitLocaleFromPath } from '@cmssy/core/internal/locale';
+import { BlockErrorBoundary } from '@cmssy/react/block-error-boundary';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function buildBlockMap(blocks) {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const block of blocks) map[block.type] = block.component;
+  return map;
+}
+function buildLoaderMap(blocks) {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const block of blocks) {
+    if (block.loader) map[block.type] = block.loader;
+  }
+  return map;
+}
+
+// src/components/block-error.ts
+var BLOCK_ERROR_KEY = "__cmssyBlockError";
+var SOURCES = [
+  "loader",
+  "render",
+  "unregistered"
+];
+function blockErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function unregisteredBlockError(type) {
+  return {
+    source: "unregistered",
+    message: `Block type "${type}" is not registered in this site's blocks array.`
+  };
+}
+function markBlockError(error) {
+  return { [BLOCK_ERROR_KEY]: error };
+}
+function readBlockError(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const marked = value[BLOCK_ERROR_KEY];
+  if (typeof marked !== "object" || marked === null) return void 0;
+  const { message, source } = marked;
+  if (typeof message !== "string") return void 0;
+  if (!SOURCES.includes(source)) return void 0;
+  return { message, source };
+}
+async function resolveFoldedBlocks(blocks, contents, loaderMap, locale, context, options) {
+  const schemas = options?.schemas;
+  if (schemas) {
+    if (options?.config) {
+      await resolveRelationContent(
+        options.config,
+        blocks.map((block, i) => ({ type: block.type, content: contents[i] })),
+        schemas,
+        locale,
+        options.workspaceId ? { workspaceId: options.workspaceId } : {}
+      );
+    }
+    blocks.forEach((block, i) => {
+      const schema = schemas[block.type];
+      if (schema) normalizeBlockContent(contents[i], schema);
+    });
+  }
+  return Promise.all(
+    blocks.map(async (block, i) => {
+      const content = contents[i];
+      const loader = loaderMap[block.type];
+      let data;
+      let error;
+      if (loader) {
+        try {
+          data = await loader({ content, context });
+        } catch (err) {
+          if (typeof console !== "undefined") {
+            console.error(
+              `[cmssy] loader for block "${block.type}" (${block.id}) failed`,
+              err
+            );
+          }
+          error = { message: blockErrorMessage(err), source: "loader" };
+        }
+      }
+      return { content, data, error };
+    })
+  );
+}
+async function resolveBlocks(blocks, loaderMap, locale, defaultLocale, context, enabledLocales, options) {
+  const contents = blocks.map(
+    (block) => getBlockContentForLanguage(
+      block.content,
+      locale,
+      defaultLocale,
+      enabledLocales?.length ? enabledLocales : void 0
+    )
+  );
+  return resolveFoldedBlocks(
+    blocks,
+    contents,
+    loaderMap,
+    locale,
+    context,
+    options
+  );
+}
+
+// src/components/resolve-block-data.ts
+function collectBlockData(blocks, resolved, isPreview) {
+  const data = {};
+  const content = {};
+  blocks.forEach((block, index) => {
+    const entry = resolved[index];
+    if (!entry) return;
+    content[block.id] = entry.content;
+    if (entry.error && isPreview) {
+      data[block.id] = markBlockError(entry.error);
+    } else if (entry.data !== void 0) {
+      data[block.id] = entry.data;
+    }
+  });
+  return { data, content };
+}
+async function resolveEditorBlockData({
+  page,
+  blocks,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  forms,
+  isPreview = false,
+  config,
+  appContext
+}) {
+  if (!page) return { data: {}, content: {} };
+  const loaderMap = buildLoaderMap(blocks);
+  const context = buildBlockContext(
+    locale,
+    defaultLocale,
+    enabledLocales,
+    isPreview,
+    forms,
+    { page, app: appContext }
+  );
+  const resolved = await resolveBlocks(
+    page.blocks,
+    loaderMap,
+    locale,
+    defaultLocale,
+    context,
+    enabledLocales,
+    { schemas: blocksToSchemas(blocks), config }
+  );
+  return collectBlockData(page.blocks, resolved, isPreview);
+}
+async function resolveEditorLayoutBlockData({
+  groups,
+  blocks,
+  region,
+  page,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  forms,
+  isPreview = false,
+  config,
+  appContext
+}) {
+  const group = groups.find((g) => g.region === region);
+  const layoutBlocks = group ? group.blocks.filter((b) => b.isActive !== false).slice().sort((a, b) => a.order - b.order) : [];
+  if (layoutBlocks.length === 0) return { data: {}, content: {} };
+  const loaderMap = buildLoaderMap(blocks);
+  const context = buildBlockContext(
+    locale,
+    defaultLocale,
+    enabledLocales,
+    isPreview,
+    forms,
+    { page, app: appContext }
+  );
+  const resolved = await resolveBlocks(
+    layoutBlocks,
+    loaderMap,
+    locale,
+    defaultLocale,
+    context,
+    enabledLocales,
+    { schemas: blocksToSchemas(blocks), config }
+  );
+  return collectBlockData(layoutBlocks, resolved, isPreview);
+}
+function layoutSlotPage(slug) {
+  return { slug, path: slug.split("/").filter(Boolean) };
+}
+async function resolveCmssyLayoutSlot(config, options) {
+  const {
+    region,
+    blocks,
+    editMode,
+    preview = false,
+    page: explicitPage,
+    forms,
+    appContext,
+    path,
+    locale: explicitLocale,
+    retry,
+    fetch: fetchImpl
+  } = options;
+  const requestOptions = {
+    retry: retry ?? "build",
+    ...fetchImpl ? { fetch: fetchImpl } : {}
+  };
+  const siteLocales = await resolveSiteLocales(config, requestOptions);
+  const fromPath = path ? splitLocaleFromPath(path, siteLocales) : { locale: siteLocales.defaultLocale, path: [] };
+  const locale = explicitLocale ?? fromPath.locale;
+  const slugSegments = fromPath.path ?? [];
+  const page = layoutSlotPage(explicitPage ?? "/" + slugSegments.join("/"));
+  const groups = await fetchLayouts(config, page.slug, {
+    previewSecret: editMode || preview ? config.draftSecret : void 0,
+    ...requestOptions
+  });
+  const base = {
+    groups,
+    settings: groups.find((g) => g.region === region)?.settings ?? null,
+    page,
+    locale,
+    defaultLocale: siteLocales.defaultLocale,
+    enabledLocales: siteLocales.locales,
+    path: slugSegments
+  };
+  if (!editMode) return base;
+  const editorData = await resolveEditorLayoutBlockData({
+    groups,
+    blocks,
+    region,
+    page,
+    locale,
+    defaultLocale: siteLocales.defaultLocale,
+    enabledLocales: siteLocales.locales,
+    forms,
+    isPreview: true,
+    config,
+    appContext
+  });
+  return {
+    ...base,
+    data: editorData.data,
+    resolvedContent: editorData.content,
+    editorOrigin: resolveEditorOrigin(config.editorOrigin)
+  };
+}
+
+// src/components/load-cmssy-route.ts
+async function loadCmssyRoute(config, options) {
+  const {
+    blocks,
+    path,
+    locale,
+    forms,
+    appContext,
+    previewSecret,
+    isPreview = false,
+    retry,
+    fetch: fetchImpl
+  } = options;
+  const regions = options.regions ?? layoutRegionIds(config.layout);
+  const firstRegion = regions[0] ?? "header";
+  const slot = await resolveCmssyLayoutSlot(config, {
+    region: firstRegion,
+    blocks,
+    editMode: false,
+    preview: isPreview,
+    forms,
+    appContext,
+    retry,
+    ...fetchImpl ? { fetch: fetchImpl } : {},
+    path: path ?? [],
+    ...locale === void 0 ? {} : { locale }
+  });
+  const secret = previewSecret ?? (isPreview ? config.draftSecret : void 0);
+  const page = await fetchPage(config, slot.path, {
+    ...secret ? { previewSecret: secret } : {},
+    ...retry === void 0 ? {} : { retry },
+    ...fetchImpl ? { fetch: fetchImpl } : {}
+  });
+  const shared = {
+    blocks,
+    locale: slot.locale,
+    defaultLocale: slot.defaultLocale,
+    enabledLocales: slot.enabledLocales,
+    forms,
+    isPreview,
+    config,
+    appContext
+  };
+  const [pageBlocks, ...layoutBlocks] = await Promise.all([
+    resolveEditorBlockData({ ...shared, page }),
+    ...regions.map(
+      (region) => resolveEditorLayoutBlockData({
+        ...shared,
+        groups: slot.groups,
+        page: slot.page,
+        region
+      })
+    )
+  ]);
+  return {
+    page,
+    layouts: slot.groups,
+    pageContext: slot.page,
+    locale: slot.locale,
+    defaultLocale: slot.defaultLocale,
+    enabledLocales: slot.enabledLocales,
+    path: slot.path,
+    blockData: pageBlocks.data,
+    blockContent: pageBlocks.content,
+    layoutData: Object.fromEntries(
+      regions.map((region, index) => [region, layoutBlocks[index]])
+    ),
+    regions
+  };
+}
+var SOURCE_LABELS = {
+  loader: "loader failed",
+  render: "render failed",
+  unregistered: "type not registered"
+};
+var cardStyle = {
+  boxSizing: "border-box",
+  margin: "8px 0",
+  padding: "12px 16px",
+  border: "1px dashed #ef4444",
+  borderRadius: "8px",
+  background: "rgba(239, 68, 68, 0.08)",
+  color: "#ef4444",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: "13px",
+  lineHeight: 1.5,
+  textAlign: "left"
+};
+var headingStyle = {
+  fontWeight: 700,
+  marginBottom: "4px"
+};
+var metaStyle = {
+  opacity: 0.8,
+  marginBottom: "4px"
+};
+var messageStyle = {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere"
+};
+function BlockErrorCard({
+  blockType,
+  blockId,
+  error
+}) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", "data-cmssy-block-error": error.source, style: cardStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: headingStyle, children: [
+      'Block "',
+      blockType,
+      '" - ',
+      SOURCE_LABELS[error.source]
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: metaStyle, children: [
+      "id: ",
+      blockId
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: messageStyle, children: error.message })
+  ] });
+}
+function foldBlockContent(block, locale, defaultLocale, patchedContent, resolvedContent) {
+  const base = resolvedContent ? { ...resolvedContent } : getBlockContentForLanguage(block.content, locale, defaultLocale);
+  return patchedContent ? { ...base, ...patchedContent } : base;
+}
+var WARN_CAP = 256;
+var warned = /* @__PURE__ */ new Set();
+function UnknownBlock({ type }) {
+  if (typeof window !== "undefined" && !warned.has(type)) {
+    if (warned.size >= WARN_CAP) warned.clear();
+    warned.add(type);
+    console.error(`[cmssy] no component registered for block type "${type}"`);
+  }
+  return /* @__PURE__ */ jsx("div", { "data-cmssy-unknown-block": type });
+}
+function CmssyBlock({
+  block,
+  locale,
+  defaultLocale,
+  blockMap,
+  patchedContent,
+  patchedStyle,
+  patchedAdvanced,
+  resolvedContent,
+  schema,
+  editable,
+  editMode,
+  layoutRegion,
+  context,
+  data
+}) {
+  const inEditMode = editMode ?? editable ?? false;
+  const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
+  const blockError = readBlockError(data);
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-block-id": block.id,
+      "data-block-type": block.type,
+      "data-layout-region": layoutRegion,
+      draggable: editable || void 0,
+      style: hidden ? { display: "none" } : void 0,
+      children
+    }
+  );
+  if (!Component) {
+    return inEditMode ? wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (blockError) {
+    if (!inEditMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: blockError
+        }
+      )
+    );
+  }
+  const content = foldBlockContent(
+    block,
+    locale,
+    defaultLocale,
+    patchedContent,
+    resolvedContent
+  );
+  if (schema) normalizeBlockContent(content, schema, resolvedContent);
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
+  return wrap(
+    /* @__PURE__ */ jsx(
+      BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode: inEditMode,
+        children: createElement(Component, {
+          content,
+          style,
+          advanced,
+          context,
+          data
+        })
+      }
+    )
+  );
+}
+function CmssyBlocks({
+  page,
+  blocks,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  blockData,
+  blockContent,
+  pageContext,
+  forms,
+  auth,
+  workspace,
+  appContext,
+  isPreview = false,
+  editMode = false
+}) {
+  if (!page) return null;
+  const blockMap = buildBlockMap(blocks);
+  const context = buildBlockContext(
+    locale,
+    defaultLocale,
+    enabledLocales,
+    isPreview,
+    forms,
+    { page: pageContext, auth, workspace, app: appContext }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: (page.blocks ?? []).map((block) => /* @__PURE__ */ jsx(
+    CmssyBlock,
+    {
+      block,
+      blockMap,
+      locale,
+      defaultLocale,
+      context,
+      editMode,
+      resolvedContent: blockContent?.[block.id],
+      data: blockData?.[block.id]
+    },
+    block.id
+  )) });
+}
+function CmssyLayoutRegion({
+  groups,
+  region,
+  blocks,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  page,
+  blockData,
+  blockContent,
+  forms,
+  appContext,
+  isPreview = false,
+  editMode = false
+}) {
+  const group = groups.find((candidate) => candidate.region === region);
+  const regionBlocks = group ? group.blocks.filter((block) => block.isActive !== false).slice().sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) : [];
+  if (regionBlocks.length === 0) return null;
+  const blockMap = buildBlockMap(blocks);
+  const context = buildBlockContext(
+    locale,
+    defaultLocale,
+    enabledLocales,
+    isPreview,
+    forms,
+    { page, app: appContext }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: regionBlocks.map((block) => /* @__PURE__ */ jsx(
+    CmssyBlock,
+    {
+      block,
+      blockMap,
+      locale,
+      defaultLocale,
+      context,
+      layoutRegion: region,
+      editMode,
+      resolvedContent: blockContent?.[block.id],
+      data: blockData?.[block.id]
+    },
+    block.id
+  )) });
+}
+function toSegments(path) {
+  if (Array.isArray(path)) return path;
+  const value = path ?? (typeof window === "undefined" ? "/" : window.location.pathname);
+  return value.split("/").filter(Boolean);
+}
+function useCmssyRoute(config, options) {
+  const segments = useMemo(() => toSegments(options.path), [options.path]);
+  const [state, setState] = useState({ data: null, error: null, loading: true });
+  const [attempt, setAttempt] = useState(0);
+  const latest = useRef(0);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  useEffect(() => {
+    const request = ++latest.current;
+    setState((current) => ({ ...current, error: null, loading: true }));
+    loadCmssyRoute(config, { ...optionsRef.current, path: segments }).then((data) => {
+      if (request !== latest.current) return;
+      setState({ data, error: null, loading: false });
+    }).catch((cause) => {
+      if (request !== latest.current) return;
+      setState({
+        data: null,
+        error: cause instanceof Error ? cause : new Error(String(cause)),
+        loading: false
+      });
+    });
+  }, [
+    config,
+    segments.join("/"),
+    options.locale,
+    options.previewSecret,
+    options.isPreview,
+    options.regions?.join(","),
+    attempt
+  ]);
+  const reload = useCallback(() => setAttempt((value) => value + 1), []);
+  return { ...state, reload };
+}
+function CmssyRoute({
+  config,
+  children,
+  fallback = null,
+  notFound = null,
+  renderError,
+  ...options
+}) {
+  const { data, error, loading } = useCmssyRoute(config, options);
+  if (error) return /* @__PURE__ */ jsx(Fragment, { children: renderError ? renderError(error) : null });
+  if (!data) return /* @__PURE__ */ jsx(Fragment, { children: loading ? fallback : null });
+  const shared = {
+    blocks: options.blocks,
+    locale: data.locale,
+    defaultLocale: data.defaultLocale,
+    enabledLocales: data.enabledLocales,
+    forms: options.forms,
+    appContext: options.appContext,
+    isPreview: options.isPreview ?? false
+  };
+  const Blocks = () => data.page ? /* @__PURE__ */ jsx(
+    CmssyBlocks,
+    {
+      ...shared,
+      page: data.page,
+      pageContext: data.pageContext,
+      blockData: data.blockData,
+      blockContent: data.blockContent
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, { children: notFound });
+  const Region = ({ id }) => /* @__PURE__ */ jsx(
+    CmssyLayoutRegion,
+    {
+      ...shared,
+      groups: data.layouts,
+      region: id,
+      page: data.pageContext,
+      blockData: data.layoutData[id]?.data,
+      blockContent: data.layoutData[id]?.content
+    }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: children({ data, Blocks, Region }) });
+}
+
+export { CmssyRoute, useCmssyRoute };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "16.9.1",
+  "version": "16.10.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",
@@ -72,6 +72,16 @@
         "types": "./dist/block-error-boundary.d.cts",
         "default": "./dist/block-error-boundary.cjs"
       }
+    },
+    "./spa": {
+      "import": {
+        "types": "./dist/spa.d.ts",
+        "default": "./dist/spa.js"
+      },
+      "require": {
+        "types": "./dist/spa.d.cts",
+        "default": "./dist/spa.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -97,7 +107,7 @@
   },
   "dependencies": {
     "@cmssy/types": "0.49.0",
-    "@cmssy/core": "16.9.1"
+    "@cmssy/core": "16.10.0"
   },
   "scripts": {
     "build": "tsup",