@alpaca-headless/dynamic-renderings 1.0.4694

package/dist/server/page.d.ts

@@ -0,0 +1,92 @@
+import "server-only";
+import { type BackendIdentity } from "./backend.js";
+import { type DynamicRenderingsConfig } from "./config.js";
+import type { ComponentDto, PreparedComponent } from "../protocol/types.js";
+export type LayoutComponent = {
+    id: string;
+    templateId?: string;
+    language?: string;
+    visible?: boolean;
+    rendering?: {
+        id?: string;
+        revision?: string;
+    } | null;
+    fields?: Record<string, {
+        name?: string;
+        value?: unknown;
+    } | undefined>;
+    placeholders?: {
+        name: string;
+        components?: LayoutComponent[];
+    }[];
+};
+export type LayoutPage = {
+    id: string;
+    templateId?: string;
+    database?: string;
+    language?: string;
+    fields?: LayoutComponent["fields"];
+    placeholders?: {
+        name: string;
+        components?: LayoutComponent[];
+    }[];
+};
+/** The page tenant's theme rendering, checked with the stylesheet value rules. */
+export type PreparedTheme = {
+    id: string;
+    css: string | null;
+    hash?: string;
+    rejected?: string;
+};
+/**
+ * Which client code loads in the browser: none in edit mode (first paints only), all of it in a
+ * sealed request, and otherwise only that of approved renderings.
+ */
+export type ClientMode = "edit" | "sealed" | "approved";
+export type DynamicPageState = {
+    nonce: string;
+    mode: string;
+    editing: boolean;
+    preview: boolean;
+    /** The request came through an editor's isolated preview (the config's requestAuth recognised it). */
+    sealed: boolean;
+    clientMode: ClientMode;
+    /** Keyed by component id. */
+    components: Map<string, PreparedComponent>;
+    /** Proxy prefix this request arrived under. */
+    prefix: string;
+    pageId: string;
+    database?: string;
+    /** Some compile did not finish within the page budget: this response must not be cached. */
+    preparing: boolean;
+    /** The renderings on this page that have client code. */
+    clientCodeRenderings: string[];
+    /** The page tenant's theme tokens, when it has a theme rendering. */
+    theme?: PreparedTheme;
+    /** Set when the head's own theme could not be read: nothing is built or rendered against a missing theme. */
+    themeError?: string;
+};
+export declare function emptyDynamicPage(mode: string, prefix?: string, { sealed, pageId, database }?: {
+    sealed?: boolean;
+    pageId?: string;
+    database?: string;
+}): DynamicPageState;
+export declare function normalizeId(id: string): string;
+/**
+ * What rendering code may see of a component: field values, placeholder names, language and the
+ * editing flag. No descriptors, no _editor data, no GraphQL, no URLs of the CM. Reference
+ * targets outside the rendering's tenant are dropped for sandbox tenants.
+ */
+export declare function toDto(config: Pick<DynamicRenderingsConfig, "sandboxRoot">, component: LayoutComponent, tenant: string, editing: boolean): ComponentDto;
+export declare function prepareDynamicPage(config: DynamicRenderingsConfig, { page, mode, identity, prefix, sealed, }: {
+    page: LayoutPage;
+    mode: string;
+    identity: BackendIdentity;
+    prefix: string;
+    sealed?: boolean;
+}): Promise<DynamicPageState>;
+/** Theme tokens become a :root rule only after passing the same checks the build applies. */
+export declare function prepareTheme(theme: {
+    id: string;
+    tokens: string;
+}): PreparedTheme;

package/dist/server/page.js

@@ -0,0 +1,235 @@
+import "server-only";
+import { createHash, randomBytes } from "node:crypto";
+import { fetchSources } from "./backend.js";
+import { compileRendering, moduleOf, rememberClientBundle, renderTenant } from "./engine.js";
+import { parseThemeTokens } from "../css-policy/css-policy.mjs";
+import { isSandboxTenant, ThemeUnavailableError } from "./config.js";
+import { combineThemeHash, loadTheme } from "./theme.js";
+/** Time kept back from the page budget for rendering once the compiles are done. */
+const RENDER_RESERVE_MS = 1500;
+const PREPARING = "This rendering is being prepared. Reload in a moment.";
+export function emptyDynamicPage(mode, prefix = "", { sealed = false, pageId = "", database } = {}) {
+    const editing = mode === "edit";
+    return {
+        nonce: randomBytes(12).toString("base64url"),
+        mode,
+        editing,
+        preview: mode === "preview",
+        sealed,
+        clientMode: editing ? "edit" : sealed ? "sealed" : "approved",
+        components: new Map(),
+        prefix,
+        pageId,
+        database,
+        preparing: false,
+        clientCodeRenderings: [],
+    };
+}
+function collect(placeholders, out) {
+    for (const placeholder of placeholders ?? []) {
+        for (const component of placeholder.components ?? []) {
+            if (component.visible === false)
+                continue;
+            if (component.rendering?.id)
+                out.push(component);
+            collect(component.placeholders, out);
+        }
+    }
+}
+export function normalizeId(id) {
+    return id.replace(/[{}]/g, "").toLowerCase();
+}
+function pathOf(value) {
+    return value && typeof value === "object" && typeof value.path === "string"
+        ? value.path
+        : undefined;
+}
+function insideTenant(path, tenant) {
+    if (!path)
+        return true;
+    const p = path.toLowerCase().replace(/\/+$/, "");
+    const t = tenant.toLowerCase().replace(/\/+$/, "");
+    return p === t || p.startsWith(`${t}/`);
+}
+/**
+ * What rendering code may see of a component: field values, placeholder names, language and the
+ * editing flag. No descriptors, no _editor data, no GraphQL, no URLs of the CM. Reference
+ * targets outside the rendering's tenant are dropped for sandbox tenants.
+ */
+export function toDto(config, component, tenant, editing) {
+    const sandbox = isSandboxTenant(config, tenant);
+    const fields = {};
+    for (const [key, field] of Object.entries(component.fields ?? {})) {
+        if (!field)
+            continue;
+        // Keyed by the Sitecore field name, the name rendering code and the authoring tools use; the
+        // layout JSON may camel-case its keys (targetDate for TargetDate).
+        const name = typeof field.name === "string" && field.name ? field.name : key;
+        if (name === "Rendering" || name.startsWith("_"))
+            continue;
+        let value = field.value;
+        if (sandbox) {
+            if (Array.isArray(value))
+                value = value.filter((entry) => insideTenant(pathOf(entry), tenant));
+            else if (pathOf(value) !== undefined && !insideTenant(pathOf(value), tenant))
+                value = null;
+        }
+        fields[name] = { name, value: stripDescriptors(value) };
+    }
+    return {
+        id: normalizeId(component.id),
+        templateId: component.templateId,
+        language: component.language,
+        editing,
+        fields,
+        placeholders: (component.placeholders ?? []).map((p) => p.name),
+    };
+}
+function stripDescriptors(value, depth = 0) {
+    if (depth > 12 || value === null || typeof value !== "object")
+        return value;
+    if (Array.isArray(value))
+        return value.map((v) => stripDescriptors(v, depth + 1));
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+        if (k === "descriptor" || k === "_editor")
+            continue;
+        out[k] = stripDescriptors(v, depth + 1);
+    }
+    return out;
+}
+function firstError(compiled) {
+    if (compiled.ok)
+        return undefined;
+    const error = compiled.diagnostics.find((d) => d.severity === "error") ?? compiled.diagnostics[0];
+    if (!error)
+        return "The build failed.";
+    const where = error.line ? ` (${error.file ?? "rendering.tsx"}:${error.line}${error.column ? `:${error.column}` : ""})` : "";
+    return `Build failed${where}: ${error.message}`;
+}
+/** Waits for a compile until `deadline`; "preparing" when it is still running then. */
+function within(compile, deadline) {
+    const remaining = deadline - Date.now();
+    if (remaining <= 0)
+        return Promise.race([compile, Promise.resolve("preparing")]);
+    let timer;
+    const timeout = new Promise((resolve) => {
+        timer = setTimeout(() => resolve("preparing"), remaining);
+    });
+    return Promise.race([compile, timeout]).finally(() => clearTimeout(timer));
+}
+export async function prepareDynamicPage(config, { page, mode, identity, prefix, sealed = false, }) {
+    const started = Date.now();
+    const state = emptyDynamicPage(mode, prefix, { sealed, pageId: page.id, database: page.database });
+    const found = [];
+    collect(page.placeholders, found);
+    // A theme that cannot be read is an error, never empty CSS: nothing compiles against a missing
+    // theme, and every dynamic component explains why it is missing.
+    let theme;
+    try {
+        theme = await loadTheme(config);
+    }
+    catch (err) {
+        const message = err instanceof ThemeUnavailableError ? err.message : `The site theme could not be loaded: ${String(err)}`;
+        console.error(`[dynamic-renderings] ${message}`);
+        state.themeError = message;
+        for (const component of found) {
+            state.components.set(normalizeId(component.id), { renderingId: normalizeId(component.rendering.id), error: message });
+        }
+        return state;
+    }
+    // Asked on every page, also without dynamic components: the tenant may have a theme.
+    const renderingIds = [...new Set(found.map((c) => normalizeId(c.rendering.id)))];
+    let response = { renderings: [] };
+    try {
+        response = await fetchSources(config, identity, { pageId: page.id, ids: renderingIds, database: page.database, mode });
+    }
+    catch (err) {
+        console.warn("[dynamic-renderings] sources call failed", err);
+    }
+    if (response.theme)
+        state.theme = prepareTheme(response.theme);
+    const tokens = response.theme?.tokens ?? "";
+    const themeHash = combineThemeHash(theme.hash, tokens);
+    // Compile what this process has not compiled yet. A page waits for that only within its
+    // budget, keeping time back for rendering; compiles still running then continue in the
+    // background and their components show as being prepared.
+    const sources = new Map();
+    for (const source of response.renderings)
+        sources.set(normalizeId(source.id), source);
+    const compileDeadline = started + config.limits.pageMs - RENDER_RESERVE_MS;
+    const compiled = new Map();
+    await Promise.all([...sources.entries()].map(async ([id, source]) => {
+        const compile = compileRendering(config, {
+            renderingId: id,
+            kind: source.kind,
+            name: source.name,
+            code: source.code,
+            clientCode: source.clientCode,
+            themeCss: theme.css,
+            themeTokens: tokens,
+            themeHash,
+        });
+        compiled.set(id, await within(compile, compileDeadline));
+    }));
+    const byTenant = new Map();
+    const modules = {};
+    const prepare = (renderingId) => {
+        const result = compiled.get(renderingId);
+        if (result === undefined)
+            return { renderingId, error: "This rendering is not available on this page." };
+        if (result === "preparing") {
+            state.preparing = true;
+            return { renderingId, preparing: true, error: PREPARING };
+        }
+        if (!result.ok) {
+            if (result.transient)
+                state.preparing = true;
+            return { renderingId, error: result.transient ? `${PREPARING} (${result.diagnostics[0]?.message ?? "busy"})` : firstError(result) };
+        }
+        modules[result.buildId] = moduleOf(result);
+        const approved = sources.get(renderingId)?.approved === true;
+        // The bundle route serves the browser module from here, with the CM's current verdict.
+        if (result.client)
+            rememberClientBundle(renderingId, result.client, approved);
+        return { renderingId, buildId: result.buildId, css: result.css, cssRejected: result.cssRejected, clientHash: result.client?.hash, approved };
+    };
+    for (const component of found) {
+        const renderingId = normalizeId(component.rendering.id);
+        const componentId = normalizeId(component.id);
+        const prepared = prepare(renderingId);
+        state.components.set(componentId, prepared);
+        const source = sources.get(renderingId);
+        if (source?.clientCode?.trim() && !state.clientCodeRenderings.includes(renderingId))
+            state.clientCodeRenderings.push(renderingId);
+        if (!prepared.buildId || !source)
+            continue;
+        const list = byTenant.get(source.tenant) ?? [];
+        list.push({ key: componentId, buildId: prepared.buildId, dto: toDto(config, component, source.tenant, state.editing) });
+        byTenant.set(source.tenant, list);
+    }
+    const renderBudget = Math.max(RENDER_RESERVE_MS, config.limits.pageMs - (Date.now() - started));
+    await Promise.all([...byTenant.entries()].map(async ([tenant, list]) => {
+        const results = await renderTenant(config, tenant, list, modules, { deadlineMs: renderBudget });
+        for (const result of results) {
+            const prepared = state.components.get(result.key);
+            if (prepared)
+                prepared.result = result;
+        }
+    }));
+    return state;
+}
+/** Theme tokens become a :root rule only after passing the same checks the build applies. */
+export function prepareTheme(theme) {
+    const parsed = parseThemeTokens(theme.tokens);
+    if (!parsed.ok) {
+        return { id: theme.id, css: null, rejected: parsed.errors.map((e) => e.message).join("; ") };
+    }
+    if (!parsed.css)
+        return { id: theme.id, css: null };
+    return {
+        id: theme.id,
+        css: `:root {\n${parsed.css}\n}`,
+        hash: createHash("sha256").update(parsed.css).digest("hex").slice(0, 16),
+    };
+}

package/dist/server/sanitize-tree.d.ts

@@ -0,0 +1,28 @@
+import type { RenderNode } from "../protocol/types.js";
+export declare const ALLOWED_TAGS: Set<string>;
+export declare const TEXT_TAGS: Set<string>;
+export declare const RICH_TEXT_TAGS: Set<string>;
+/** data-* attributes the editor bridge (or the host itself) reads. */
+export declare const DENIED_DATA_ATTRIBUTE: RegExp;
+/** Class names the bridge or Sitecore chrome react to. */
+export declare function isDeniedClass(name: string): boolean;
+export type SanitizeOptions = {
+    /** Absolute media hosts allowed in `src` (https only). */
+    mediaHosts?: readonly string[];
+    limits?: {
+        treeNodes: number;
+        treeDepth: number;
+    };
+};
+export type SanitizeContext = {
+    renderingId: string;
+    idPrefix: string;
+    mediaHosts: readonly string[];
+    limits: {
+        treeNodes: number;
+        treeDepth: number;
+    };
+};
+export declare function sanitizeProps(tag: string, props: unknown, ctx: SanitizeContext): Record<string, unknown>;
+/** Sanitizes a whole component tree. Throws when it exceeds the node or depth limits. */
+export declare function sanitizeTree(tree: unknown, renderingId: string, options?: SanitizeOptions): RenderNode[];