@pack/react 0.0.14 → 0.1.1

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import { RenderSections } from "./render-sections";
 import { PreviewProvider } from "./preview/preview-provider";
 import { usePreviewContext } from "./preview/preview-content";
 import { useSiteSettings } from "./use-site-settings";
+import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };
 //# 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,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,GACf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ import { RenderSections } from "./render-sections";
 import { PreviewProvider } from "./preview/preview-provider";
 import { usePreviewContext } from "./preview/preview-content";
 import { useSiteSettings } from "./use-site-settings";
+import { useOverlayScript } from "./use-overlay-script";
 import { registerSection } from "./register-section";
 import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };

package/dist/preview/preview-content.d.ts

@@ -2,6 +2,13 @@
 type PreviewContextValue = {
     isPreview: boolean;
     siteSettings: any;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
     previewStorefrontSettings?: any;
     setPreviewStorefrontSettings: (siteSettings: any) => void;
 };

package/dist/preview/preview-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,8CAIzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}
+{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}

package/dist/preview/preview-content.js

@@ -1,7 +1,8 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 export const PreviewContext = createContext({
     isPreview: false,
     setPreviewStorefrontSettings: () => { },
     siteSettings: undefined,
+    customizerMeta: undefined,
 });
 export const usePreviewContext = () => useContext(PreviewContext);

package/dist/preview/preview-provider.d.ts

@@ -3,7 +3,14 @@ interface PreviewContentProps {
     children: ReactNode;
     siteSettings: any;
     isPreviewModeEnabled?: boolean;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
 }
-export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }: PreviewContentProps): React.JSX.Element;
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }: PreviewContentProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=preview-provider.d.ts.map

package/dist/preview/preview-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAAoB,EACpB,YAAY,GACb,EAAE,mBAAmB,qBAkBrB"}
+{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAAoB,EACpB,YAAY,EACZ,cAAc,GACf,EAAE,mBAAmB,qBAmBrB"}

package/dist/preview/preview-provider.js

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { PreviewContext } from "./preview-content";
 import { PreviewToast } from "./preview-toast";
-export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }) {
+export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
     const [previewStorefrontSettings, setPreviewStorefrontSettings] = useState();
     return (React.createElement(PreviewContext.Provider, { value: {
             isPreview: !!isPreviewModeEnabled,
             previewStorefrontSettings,
             setPreviewStorefrontSettings,
             siteSettings,
+            customizerMeta,
         } },
         children,
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));

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

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAwClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BA8B9C"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAoClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAiC9C"}

package/dist/render-sections.js

@@ -3,6 +3,7 @@ import { useCustomizerShell } from "./use-customizer-shell";
 import { usePreviewContext } from "./preview/preview-content";
 import { sectionMap } from "./register-section";
 import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+import { useOverlayScript } from "./use-overlay-script";
 function Sections({ sections }) {
     const renderedSections = useMemo(() => {
         return sections
@@ -17,7 +18,7 @@ function Sections({ sections }) {
             const Component = sectionMap.get(schemaKey);
             if (!Component)
                 return null;
-            return (React.createElement("section", { key: key, "data-comp": schemaKey, "data-comp-id": key, hidden: data?.sectionVisibility === "hidden" },
+            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);
@@ -25,7 +26,7 @@ function Sections({ sections }) {
     return React.createElement(React.Fragment, null, renderedSections);
 }
 export function RenderSections({ content }) {
-    const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
+    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
         environment: "production",
         isPreview,
@@ -40,6 +41,7 @@ export function RenderSections({ content }) {
         },
         storefrontSettingsSchema,
     });
+    useOverlayScript({ isPreview, overlay: customizerMeta?.overlay || {} });
     useEffect(() => {
         storefrontSettings &&
             setPreviewStorefrontSettings({ settings: storefrontSettings });

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":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAsIL,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAkJL,CAAC"}

package/dist/use-customizer-shell.js

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { connectToParent, ErrorCode } from "penpal";
 export const useCustomizerShell = ({ environment = "production", isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
-    const [location, setLocation] = useState();
+    const windowLocationRef = useRef();
     const [content, setContent] = useState(data.content);
     const [storefrontSettings, setStorefrontSettings] = useState(null);
     const [parentConnection, setParentConnection] = useState(null);
@@ -10,17 +10,17 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
         window.location.href = path;
     };
     useEffect(() => {
-        const isIframe = window.self !== window.top;
         /*
          * Should not try to connect to customizer
          * if not in an iframe or not in preview mode
          */
+        const isIframe = window.self !== window.top;
         if (!isIframe || !isPreview)
             return;
         setShouldConnectToParent(true);
     }, []);
     useEffect(() => {
-        setLocation(window.location);
+        windowLocationRef.current = window.location;
     }, [data.handle]);
     const refreshSections = useCallback(() => {
         if (!sectionComponents || !parentConnection)
@@ -58,7 +58,9 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data.handle, parentConnection, storefrontSettingsSchema]);
     useEffect(() => {
-        if (!isPreview || !location?.pathname || !shouldConnectToParent)
+        if (!isPreview ||
+            !windowLocationRef.current?.pathname ||
+            !shouldConnectToParent)
             return;
         const connection = connectToParent({
             methods: {
@@ -79,21 +81,28 @@ export const useCustomizerShell = ({ environment = "production", isPreview, sect
             },
         });
         connection.promise.then((parent) => {
-            const { template, templateType, content } = data;
+            const { template, templateType, handle, title, description } = data;
             parent.sendStorefrontSettings();
             parent.setCurrentRoute({
                 environment,
-                currentPath: location?.pathname,
+                currentPath: windowLocationRef.current?.pathname,
                 template,
                 templateType,
-                handle: content.handle,
-                title: content.title,
-                description: content.description,
+                handle,
+                title,
+                description,
             });
             setParentConnection(parent);
         });
         return () => connection.destroy();
-    }, [location?.pathname]);
+    }, [
+        shouldConnectToParent,
+        data.handle,
+        data.title,
+        data.description,
+        data.template,
+        data.templateType,
+    ]);
     useEffect(() => {
         if (!isPreview)
             return;

package/dist/use-overlay-script.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface Window {
+        pack?: {
+            isOverlayScriptInjected: boolean;
+        };
+    }
+}
+export declare const useOverlayScript: ({ isPreview, overlay, }: {
+    isPreview: boolean;
+    overlay: {
+        src?: string;
+        version?: string;
+    };
+}) => void;
+//# sourceMappingURL=use-overlay-script.d.ts.map

package/dist/use-overlay-script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-overlay-script.d.ts","sourceRoot":"","sources":["../src/use-overlay-script.ts"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,CAAC,EAAE;YACL,uBAAuB,EAAE,OAAO,CAAC;SAClC,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB,4BAG1B;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C,SAkBA,CAAC"}

package/dist/use-overlay-script.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+export const useOverlayScript = ({ isPreview, overlay, }) => {
+    useEffect(() => {
+        if (isPreview &&
+            (overlay?.src || overlay?.version) &&
+            !window.pack?.isOverlayScriptInjected) {
+            const script = document.createElement("script");
+            script.src =
+                overlay?.src ||
+                    `https://d3dizc9fcooe02.cloudfront.net/overlay@${overlay?.version}/dist/overlay.js`;
+            script.async = true;
+            document.body.appendChild(script);
+            window.pack = { ...window.pack, isOverlayScriptInjected: true };
+        }
+    }, [isPreview, overlay]);
+};

package/package.json

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