@pack/react 2.1.5 → 2.2.0

package/dist/lib/style-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Convert a style object to CSS string format
+ */
+export declare function objectToCssString(styles: Record<string, string | number>): string;
+/**
+ * Generate a CSS stylesheet for a section including element-specific styles
+ */
+export declare function generateSectionStylesheet(sectionId: string, elementStyles?: Array<{
+    selector: string;
+    styles: Record<string, string | number>;
+}>): string;
+//# sourceMappingURL=style-utils.d.ts.map

package/dist/lib/style-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../src/lib/style-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,MAAM,CAOR;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,MAAM,EACjB,aAAa,GAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACzC,CAAM,GACN,MAAM,CAWR"}

package/dist/lib/style-utils.js

@@ -0,0 +1,23 @@
+/**
+ * Convert a style object to CSS string format
+ */
+export function objectToCssString(styles) {
+    return Object.entries(styles)
+        .map(([prop, value]) => {
+        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        return `${cssProperty}: ${value};`;
+    })
+        .join(" ");
+}
+/**
+ * Generate a CSS stylesheet for a section including element-specific styles
+ */
+export function generateSectionStylesheet(sectionId, elementStyles = []) {
+    let stylesheet = "";
+    // Generate element-level styles
+    elementStyles.forEach((element) => {
+        const fullSelector = `section[data-comp-id="${sectionId}"] ${element.selector}:not([data-pack-style-disabled]):not([data-pack-style-disabled] *)`;
+        stylesheet += `${fullSelector} { ${objectToCssString(element.styles)} }\n`;
+    });
+    return stylesheet;
+}

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

@@ -3,6 +3,6 @@ interface RenderSectionsProps {
     content?: any;
 }
 export declare function RenderSections(props: RenderSectionsProps): React.JSX.Element | null;
-export declare function useSections(props: RenderSectionsProps): any;
+export declare function useSections(props: RenderSectionsProps): (React.JSX.Element | null)[] | null;
 export {};
 //# sourceMappingURL=render-sections.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/preview/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAiCvC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAiBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,OAMrD"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/preview/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAiDvC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAoBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,uCAOrD"}

package/dist/preview/render-sections.js

@@ -1,32 +1,41 @@
 import React, { useMemo } from "react";
 import { usePreviewContext } from "./preview-content";
 import { sectionMap } from "../register-section";
+import { generateSectionStylesheet } from "../lib/style-utils";
+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 }))));
+    })
+        .filter(Boolean);
+}
 function Sections({ sections }) {
-    const renderedSections = useMemo(() => {
-        return sections
-            .map((section) => {
-            // TODO: Return a consistent data structure from the API and the customizer
-            // Normalize section data
-            const key = section.id || section.clientId;
-            const data = section.data || section;
-            // Attach dataSource to the provided cms data
-            data.dataSource = section.dataSource;
-            const schemaKey = data._template;
-            const Component = sectionMap.get(schemaKey);
-            if (!Component)
-                return null;
-            return data?.sectionVisibility === "hidden" ? null : (React.createElement("section", { key: key, "data-comp": schemaKey, "data-comp-id": key },
-                React.createElement(Component, { "comp-name": schemaKey, cms: data })));
-        })
-            .filter(Boolean);
-    }, [sections]);
+    const renderedSections = useMemo(() => renderSectionContent(sections), [sections]);
     return React.createElement(React.Fragment, null, renderedSections);
 }
 function useRenderSections({ content }) {
     const { isPreview, liveContent, setLiveContent } = usePreviewContext();
     // Update content in context for preview mode
     useMemo(() => {
-        isPreview && setLiveContent(content);
+        if (isPreview) {
+            setLiveContent(content);
+        }
     }, [content, isPreview, setLiveContent]);
     // For SSR, use the passed in content
     const contentToRender = liveContent || content;
@@ -42,8 +51,6 @@ export function RenderSections(props) {
 }
 export function useSections(props) {
     const sections = useRenderSections(props);
-    if (!sections)
-        return null;
-    const visibleSections = Sections({ sections });
-    return visibleSections?.props?.children || null;
+    const renderedSections = useMemo(() => renderSectionContent(sections), [sections]);
+    return renderedSections;
 }

package/dist/use-customizer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,kBAAkB,YAgQ9B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,kBAAkB,YAkQ9B,CAAC"}

package/dist/use-customizer-shell.js

@@ -3,7 +3,10 @@ import { VERSION } from "./version";
 import { PreviewContext } from "./preview/preview-content";
 import { sectionMap as sectionComponents } from "./register-section";
 import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+import debug from "debug";
+const debugCustomizer = debug("customizer:shell");
 export const useCustomizerShell = () => {
+    debugCustomizer("useCustomizerShell running");
     const { contentEnvironment: environment, isPreview, liveContent, setLiveContent, setSiteSettings, } = useContext(PreviewContext);
     const data = {
         template: liveContent?.template?.type,

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "2.1.5";
+export const VERSION = "2.2.0";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {