@pack/react 4.2.1 → 4.3.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { RenderSections, useSections } from "./pack/render-sections";
+import { RenderSection, RenderSections, useSections } from "./pack/render-sections";
 import { PackProvider, PreviewProvider } from "./pack/pack-context";
 import { usePackContext } from "./pack/pack-context";
 import { PackErrorBoundary } from "@pack/errors-react";
@@ -8,5 +8,5 @@ import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
 export type { ErrorTrackingOptions, PackErrorBoundaryFallbackRenderArgs, } from "@pack/errors-react";
-export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,YAAY,EACV,oBAAoB,EACpB,mCAAmC,GACpC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,eAAe,GAChB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,YAAY,EACV,oBAAoB,EACpB,mCAAmC,GACpC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,eAAe,GAChB,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { RenderSections, useSections } from "./pack/render-sections";
+import { RenderSection, RenderSections, useSections } from "./pack/render-sections";
 import { PackProvider, PreviewProvider } from "./pack/pack-context";
 import { usePackContext } from "./pack/pack-context";
 import { PackErrorBoundary } from "@pack/errors-react";
@@ -7,4 +7,4 @@ import { useLocale } from "./use-locale";
 import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };
+export { PackErrorBoundary, PackProvider, PreviewProvider, RenderSection, RenderSections, registerSection, registerStorefrontSettingsSchema, useLocale, useOverlayScript, usePackContext, useSections, useSiteSettings, };

package/dist/pack/render-sections.d.ts

@@ -1,4 +1,14 @@
 import React from "react";
+interface RenderSectionProps {
+    /** Section node. Must carry an `id` or `clientId`. */
+    section: any;
+}
+/**
+ * Renders one section against the registry populated by `registerSection`.
+ * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
+ */
+export declare function RenderSection({ section }: RenderSectionProps): React.JSX.Element | null;
+export declare function renderSectionContent(sections: any[]): (React.JSX.Element | null)[] | null;
 interface RenderSectionsProps {
     content?: any;
 }

package/dist/pack/render-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/pack/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAiDlD,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AA8BD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,uCAOrD"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/pack/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAMrE,UAAU,kBAAkB;IAC1B,sDAAsD;IACtD,OAAO,EAAE,GAAG,CAAC;CACd;AAuCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,4BAG5D;AAGD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,GAAG,EAAE,uCAYnD;AAUD,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AA8BD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,uCAOrD"}

package/dist/pack/render-sections.js

@@ -2,26 +2,52 @@ import React, { useMemo, useEffect } from "react";
 import { usePackContext } from "./pack-context";
 import { sectionMap } from "../register-section";
 import { generateSectionStylesheet } from "../lib/style-utils";
-function renderSectionContent(sections) {
+// Builds the [<style>, <section>] element pair for one section, or null if the
+// section is unregistered/hidden. Hookless, so it can be called directly from
+// both RenderSection and renderSectionContent. Returning the pair (rather than a
+// wrapping element) keeps useSections' element tree flat — consumers that walk
+// fragment.props.children to find the `data-comp` <section> depend on that shape.
+// The explicit ReactElement[] return type makes any future wrapping element
+// (the regression this guards against) a compile error rather than only a test failure.
+function buildSectionElements(section) {
+    if (!section)
+        return null;
+    const key = section.id || section.clientId;
+    const data = section.data || section;
+    const elementStyles = section.styles?.elements || [];
+    data.dataSource = section.dataSource;
+    const schemaKey = data._template;
+    const Component = sectionMap.get(schemaKey);
+    if (!Component)
+        return null;
+    if (data?.sectionVisibility === "hidden")
+        return null;
+    const stylesheet = generateSectionStylesheet(key, elementStyles);
+    return [
+        React.createElement("style", { key: `section-styles-${key}`, id: `section-styles-${key}`, dangerouslySetInnerHTML: {
+                __html: stylesheet,
+            } }),
+        React.createElement("section", { key: `section-${key}`, "data-comp": schemaKey, "data-comp-id": key },
+            React.createElement(Component, { "comp-name": schemaKey, cms: data })),
+    ];
+}
+/**
+ * Renders one section against the registry populated by `registerSection`.
+ * Use for nested-section blocks; for full-page rendering, use `RenderSections`.
+ */
+export function RenderSection({ section }) {
+    const elements = buildSectionElements(section);
+    return elements ? React.createElement(React.Fragment, null, elements) : null;
+}
+// Exported for unit tests only — not re-exported from the package entry (index.ts).
+export function renderSectionContent(sections) {
     if (!sections)
         return null;
     return sections
         .map((section) => {
         const key = section.id || section.clientId;
-        const data = section.data || section;
-        const elementStyles = section.styles?.elements || [];
-        data.dataSource = section.dataSource;
-        const schemaKey = data._template;
-        const Component = sectionMap.get(schemaKey);
-        if (!Component)
-            return null;
-        const stylesheet = generateSectionStylesheet(key, elementStyles);
-        return data?.sectionVisibility === "hidden" ? null : (React.createElement(React.Fragment, { key: key },
-            React.createElement("style", { id: `section-styles-${key}`, dangerouslySetInnerHTML: {
-                    __html: stylesheet,
-                } }),
-            React.createElement("section", { "data-comp": schemaKey, "data-comp-id": key },
-                React.createElement(Component, { "comp-name": schemaKey, cms: data }))));
+        const elements = buildSectionElements(section);
+        return elements ? (React.createElement(React.Fragment, { key: key }, elements)) : null;
     })
         .filter(Boolean);
 }

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "4.2.1";
+export const VERSION = "4.3.1";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -23,7 +23,7 @@
   ],
   "dependencies": {
     "@pack/errors-react": "^0.1.1",
-    "@pack/types": "^0.1.4"
+    "@pack/types": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.20",