@shop-on/theme-react 0.1.0 → 0.2.0

package/dist/template-renderer.d.ts

@@ -15,6 +15,11 @@ export interface AppSectionProps {
 }
 export type AppSectionComponent = ComponentType<AppSectionProps>;
 export declare function loadAppScript(src: string): Promise<void>;
+/** The current shop's handle, read from the root route's loader data: every
+ * theme's root loader returns `fetchShopInfo()` as `shop`. An app's element
+ * can't derive it from `location.hostname`, since a custom domain doesn't carry
+ * it. Exported for a theme that overrides `AppSection`. */
+export declare function useShopHandle(): string | undefined;
 export interface TemplateRendererLoaders {
   /** type-name → dynamic-import factory. Each theme registers its own file
    * tree (typically `import.meta.glob("./sections/*.tsx", { import: "default" })`

package/dist/template-renderer.js

@@ -2,6 +2,7 @@ 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 { rootRouteId, useMatch } from "@tanstack/react-router";
 //#region src/template-renderer.tsx
 const EMPTY_BLOCK_PATH = [];
 const SectionIdContext = createContext(void 0);
@@ -30,22 +31,35 @@ function loadAppScript(src) {
 	appScriptPromises.set(src, p);
 	return p;
 }
+function shopHandleOf(loaderData) {
+	const shop = loaderData?.shop;
+	return typeof shop?.handle === "string" && shop.handle ? shop.handle : void 0;
+}
+/** The current shop's handle, read from the root route's loader data: every
+* theme's root loader returns `fetchShopInfo()` as `shop`. An app's element
+* can't derive it from `location.hostname`, since a custom domain doesn't carry
+* it. Exported for a theme that overrides `AppSection`. */
+function useShopHandle() {
+	return useMatch({
+		from: rootRouteId,
+		shouldThrow: false,
+		select: (match) => shopHandleOf(match.loaderData)
+	});
+}
 function DefaultAppSection({ section, sectionId }) {
 	const { tag, scriptUrl } = section;
 	const settings = section.settings ?? {};
+	const shopHandle = useShopHandle();
 	useEffect(() => {
 		if (scriptUrl) loadAppScript(scriptUrl).catch(() => {});
 	}, [scriptUrl]);
 	if (!tag) return null;
-	const heading = typeof settings.heading === "string" ? settings.heading.trim() : "";
 	return createElement(tag, {
 		"data-settings": JSON.stringify(settings),
 		"data-app-section-id": sectionId,
+		"data-shop-handle": shopHandle,
 		suppressHydrationWarning: true
-	}, heading ? /* @__PURE__ */ jsx("p", {
-		"data-app-fallback": "",
-		children: heading
-	}) : null);
+	});
 }
 /** `collectTypes` over every template, merged. */
 function collectTemplateTypes(templates) {
@@ -204,4 +218,4 @@ function createTemplateRenderer(loaders, opts) {
 	};
 }
 //#endregion
-export { collectTemplateTypes, createTemplateRenderer, loadAppScript };
+export { collectTemplateTypes, createTemplateRenderer, loadAppScript, useShopHandle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shop-on/theme-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "SEE LICENSE IN dist/LICENSE.md",
   "files": [
     "dist"
@@ -29,27 +29,27 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@shop-on/theme-contract": "0.1.0",
-    "@shop-on/theme-runtime": "0.1.0"
+    "@shop-on/theme-contract": "0.2.0",
+    "@shop-on/theme-runtime": "0.2.0"
   },
   "devDependencies": {
-    "@tanstack/react-router": "1.170.41",
+    "@tanstack/react-router": "1.170.45",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "happy-dom": "20.10.6",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
+    "happy-dom": "21.0.4",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
     "typescript": "7.0.2",
-    "vitest": "5.0.3"
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
-    "@tanstack/react-router": "~1.170.41",
+    "@tanstack/react-router": "~1.170.45",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
   "scripts": {
     "check-types": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run --maxWorkers=2"
   }
 }