@shop-on/theme-react 0.4.0 → 0.5.0

package/dist/template-renderer.js

@@ -1,19 +1,20 @@
 import { escapeAttrValue, scopeCustomCss } from "./custom-css.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, createElement, useContext, useEffect } from "react";
-import { collectTypes, selectRenderableChildren, selectRenderableSections } from "@shop-on/theme-contract";
+import { MAX_APP_BLOCK_CONTAINER_DEPTH, collectTypes, selectRenderableChildren, selectRenderableSections } from "@shop-on/theme-contract";
 import { rootRouteId, useMatch } from "@tanstack/react-router";
 //#region src/template-renderer.tsx
 const EMPTY_BLOCK_PATH = [];
 const SectionIdContext = createContext(void 0);
 const BlockPathContext = createContext(EMPTY_BLOCK_PATH);
+const BlockDepthContext = createContext(void 0);
 const appScriptPromises = /* @__PURE__ */ new Map();
 function loadAppScript(src) {
 	const cached = appScriptPromises.get(src);
 	if (cached) return cached;
 	const p = new Promise((resolve, reject) => {
 		if (typeof window === "undefined") return resolve();
-		const existing = document.querySelector(`script[data-app-bundle="${src}"]`);
+		const existing = document.querySelector(`script[data-app-bundle="${CSS.escape(src)}"]`);
 		if (existing) {
 			existing.addEventListener("load", () => resolve(), { once: true });
 			existing.addEventListener("error", () => reject(/* @__PURE__ */ new Error("app-script-load-failed")), { once: true });
@@ -46,21 +47,31 @@ function useShopHandle() {
 		select: (match) => shopHandleOf(match.loaderData)
 	});
 }
-function DefaultAppSection({ section, sectionId }) {
-	const { tag, scriptUrl } = section;
-	const settings = section.settings ?? {};
+function AppElement({ tag, scriptUrl, settings, kind, instanceId }) {
 	const shopHandle = useShopHandle();
 	useEffect(() => {
 		if (scriptUrl) loadAppScript(scriptUrl).catch(() => {});
 	}, [scriptUrl]);
-	if (!tag) return null;
 	return createElement(tag, {
-		"data-settings": JSON.stringify(settings),
-		"data-app-section-id": sectionId,
+		"data-settings": JSON.stringify(settings ?? {}),
+		[`data-app-${kind}-id`]: instanceId,
 		"data-shop-handle": shopHandle,
 		suppressHydrationWarning: true
 	});
 }
+function DefaultAppSection({ section, sectionId }) {
+	if (!section.tag) return null;
+	return /* @__PURE__ */ jsx(AppElement, {
+		tag: section.tag,
+		scriptUrl: section.scriptUrl,
+		settings: section.settings,
+		kind: "section",
+		instanceId: sectionId
+	});
+}
+function mountsAppBlock(block, depth) {
+	return !!block.id && depth !== void 0 && depth <= MAX_APP_BLOCK_CONTAINER_DEPTH && !block.static && !!block.tag && block.type.startsWith("app-");
+}
 /** `collectTypes` over every template, merged. */
 function collectTemplateTypes(templates) {
 	const sections = /* @__PURE__ */ new Set();
@@ -109,6 +120,7 @@ function createTemplateRenderer(loaders, opts) {
 	async function preloadBlocks(args) {
 		const types = /* @__PURE__ */ new Set();
 		const visit = (b) => {
+			if (b.source === "app") return;
 			types.add(b.type);
 			if (b.blocks) for (const child of Object.values(b.blocks)) visit(child);
 		};
@@ -143,9 +155,12 @@ function createTemplateRenderer(loaders, opts) {
 				style: { display: "contents" },
 				children: /* @__PURE__ */ jsx(SectionIdContext.Provider, {
 					value: instanceId,
-					children: /* @__PURE__ */ jsxs(BlockPathContext.Provider, {
+					children: /* @__PURE__ */ jsx(BlockPathContext.Provider, {
 						value: EMPTY_BLOCK_PATH,
-						children: [sectionCss ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: sectionCss } }) : null, renderSectionBody(section, instanceId, groupType, blocks, staticBlocks)]
+						children: /* @__PURE__ */ jsxs(BlockDepthContext.Provider, {
+							value: 0,
+							children: [sectionCss ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: sectionCss } }) : null, renderSectionBody(section, instanceId, groupType, blocks, staticBlocks)]
+						})
 					})
 				})
 			}, instanceId);
@@ -182,14 +197,23 @@ function createTemplateRenderer(loaders, opts) {
 			children: renderSections(template.sections, template.order)
 		});
 	}
+	function renderThemeBlock(block) {
+		const BlockComponent = resolveBlock(block.type);
+		return /* @__PURE__ */ jsx(BlockComponent, {
+			...block.settings,
+			blockId: block.id,
+			blocks: selectRenderableChildren(block)
+		});
+	}
 	function BlockRenderer({ blocks, parentBlockId }) {
 		const sectionId = useContext(SectionIdContext);
 		const inheritedPath = useContext(BlockPathContext);
 		const containerPath = inheritedPath.length > 0 ? inheritedPath : parentBlockId ? [parentBlockId] : EMPTY_BLOCK_PATH;
+		const depth = useContext(BlockDepthContext);
 		return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block, i) => {
 			if (block.disabled) return null;
-			const BlockComponent = resolveBlock(block.type);
-			const children = selectRenderableChildren(block);
+			const isApp = block.source === "app";
+			if (isApp && !mountsAppBlock(block, depth)) return null;
 			const key = block.id ?? `${block.type}-${i}`;
 			const ownPath = block.id ? [...containerPath, block.id] : containerPath;
 			const blockCss = block.id && sectionId ? scopeCustomCss(`[data-editor-section-id="${escapeAttrValue(sectionId)}"] ${containerPath.map((seg) => `[data-editor-block-id="${escapeAttrValue(seg)}"] `).join("")}[data-editor-block-id="${escapeAttrValue(block.id)}"]`, block.custom_css) : null;
@@ -197,12 +221,17 @@ function createTemplateRenderer(loaders, opts) {
 				"data-editor-block-id": block.id || void 0,
 				className: `block-${block.type.replace(/^_/, "")}`,
 				style: { display: "contents" },
-				children: [blockCss ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: blockCss } }) : null, /* @__PURE__ */ jsx(BlockPathContext.Provider, {
+				children: [blockCss ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: blockCss } }) : null, isApp ? /* @__PURE__ */ jsx(AppElement, {
+					tag: block.tag,
+					scriptUrl: block.scriptUrl,
+					settings: block.settings,
+					kind: "block",
+					instanceId: block.id
+				}) : /* @__PURE__ */ jsx(BlockPathContext.Provider, {
 					value: ownPath,
-					children: /* @__PURE__ */ jsx(BlockComponent, {
-						...block.settings,
-						blockId: block.id,
-						blocks: children
+					children: /* @__PURE__ */ jsx(BlockDepthContext.Provider, {
+						value: depth === void 0 ? void 0 : depth + 1,
+						children: renderThemeBlock(block)
 					})
 				})]
 			}, key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shop-on/theme-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "SEE LICENSE IN dist/LICENSE.md",
   "files": [
     "dist"
@@ -31,8 +31,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@shop-on/theme-contract": "0.4.0",
-    "@shop-on/theme-runtime": "0.4.0"
+    "@shop-on/theme-contract": "0.5.0",
+    "@shop-on/theme-runtime": "0.5.0"
   },
   "devDependencies": {
     "@tanstack/react-router": "1.170.45",