@pack/react 2.1.6 → 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.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;AAmCvC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAiBD,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/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,6 +1,7 @@
 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;
@@ -8,13 +9,19 @@ function renderSectionContent(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;
-        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 })));
+        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);
 }
@@ -26,7 +33,9 @@ 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;

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.6";
+export const VERSION = "2.2.0";

package/package.json

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