@pack/react 2.1.0 → 2.1.2

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { RenderSections, useSections } from "./preview/render-sections";
-import { PreviewProvider, RenderContent, usePackContent, usePreviewContext } from "./preview/preview-content";
+import { PreviewProvider, 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 { PreviewProvider, RenderContent, RenderSections, registerSection, registerStorefrontSettingsSchema, useOverlayScript, usePackContent, usePreviewContext, useSections, useSiteSettings, };
+export { PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useOverlayScript, usePreviewContext, 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,2BAA2B,CAAC;AACxE,OAAO,EACL,eAAe,EACf,aAAa,EACb,cAAc,EACd,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AACnC,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,aAAa,EACb,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,eAAe,GAChB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,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,cAAc,EACd,eAAe,EACf,gCAAgC,EAChC,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,eAAe,GAChB,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { RenderSections, useSections } from "./preview/render-sections";
-import { PreviewProvider, RenderContent, usePackContent, usePreviewContext, } from "./preview/preview-content";
+import { PreviewProvider, 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 { PreviewProvider, RenderContent, RenderSections, registerSection, registerStorefrontSettingsSchema, useOverlayScript, usePackContent, usePreviewContext, useSections, useSiteSettings, };
+export { PreviewProvider, RenderSections, registerSection, registerStorefrontSettingsSchema, useOverlayScript, usePreviewContext, useSections, useSiteSettings, };

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

@@ -10,9 +10,8 @@ type PreviewContextValue = {
     };
     siteSettings: any;
     setSiteSettings: (siteSettings: any) => void;
-    previewContent: any;
-    setPreviewContent: (content: any) => void;
-    pathname: string;
+    liveContent: any;
+    setLiveContent: (content: any) => void;
     contentEnvironment: string;
 };
 export declare const PreviewContext: React.Context<PreviewContextValue>;
@@ -20,7 +19,6 @@ export declare const usePreviewContext: () => PreviewContextValue;
 interface PreviewProviderProps {
     children: ReactNode;
     siteSettings: any;
-    pathname: string;
     isPreviewModeEnabled?: boolean;
     contentEnvironment?: string;
     customizerMeta?: {
@@ -31,10 +29,6 @@ interface PreviewProviderProps {
         [key: string]: any;
     };
 }
-export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, pathname, contentEnvironment, }: PreviewProviderProps): React.JSX.Element;
-export declare function RenderContent({ content }: {
-    content: any;
-}): React.JSX.Element;
-export declare function usePackContent(content: any): void;
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment, }: PreviewProviderProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=preview-content.d.ts.map

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":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,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,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,GAAG,CAAC;IACpB,iBAAiB,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,oCASzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,QAAQ,EACR,kBAAuB,GACxB,EAAE,oBAAoB,qBAoCtB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,qBAe1D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,QAS1C"}
+{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,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,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,oCAQzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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;AAUD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,kBAAuB,GACxB,EAAE,oBAAoB,qBAmCtB"}

package/dist/preview/preview-content.js

@@ -1,62 +1,47 @@
 import React, { createContext, useContext, useState, useMemo, } from "react";
-import { RenderSections } from "./render-sections";
 import { usePackTrack } from "./pack-analytics";
 import { PreviewToast } from "./preview-toast";
+import { useCustomizerShell } from "../use-customizer-shell";
+import { useOverlayScript } from "../use-overlay-script";
 export const PreviewContext = createContext({
     isPreview: false,
     setSiteSettings: () => { },
     siteSettings: undefined,
     customizerMeta: undefined,
-    previewContent: null,
-    setPreviewContent: () => { },
-    pathname: "",
+    liveContent: null,
+    setLiveContent: () => { },
     contentEnvironment: "",
 });
 export const usePreviewContext = () => useContext(PreviewContext);
-export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, pathname, contentEnvironment = "", }) {
-    const [previewContent, setPreviewContent] = useState(null);
+const CustomizerShell = () => {
+    // Render inside the PreviewProvider so useCustomizerShell
+    // and useOverlayScript can access the context
+    useCustomizerShell();
+    useOverlayScript();
+    return null;
+};
+export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, contentEnvironment = "", }) {
+    const [liveContent, setLiveContent] = useState(null);
     const [siteSettings, setSiteSettings] = useState(previewStorefrontSettings);
-    usePackTrack();
     const value = useMemo(() => ({
         isPreview: !!isPreviewModeEnabled,
         customizerMeta,
         siteSettings,
         setSiteSettings,
-        previewContent,
-        setPreviewContent,
-        pathname,
+        liveContent,
+        setLiveContent,
         contentEnvironment,
     }), [
         isPreviewModeEnabled,
         siteSettings,
         customizerMeta,
         setSiteSettings,
-        previewContent,
-        pathname,
+        liveContent,
         contentEnvironment,
     ]);
+    usePackTrack();
     return (React.createElement(PreviewContext.Provider, { value: value },
+        React.createElement(CustomizerShell, null),
         children,
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
 }
-export function RenderContent({ content }) {
-    const { isPreview, setPreviewContent } = usePreviewContext();
-    // Update content in context for preview mode
-    useMemo(() => {
-        setPreviewContent(content);
-    }, [content, setPreviewContent]);
-    // If in preview mode, RenderSections will handle rendering with live content
-    if (isPreview) {
-        return React.createElement(RenderSections, null);
-    }
-    // For SSR, pass the content directly
-    return React.createElement(RenderSections, { content: content });
-}
-export function usePackContent(content) {
-    const { setPreviewContent } = usePreviewContext();
-    // Update preview content
-    useMemo(() => {
-        setPreviewContent(content);
-    }, [content, setPreviewContent]);
-    return;
-}

package/dist/preview/preview-toast.js

@@ -14,7 +14,7 @@ export const PreviewToast = ({ isPreviewModeEnabled }) => {
                 },
             });
             if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
+                throw new Error(`ERR_RE_API_ERROR: HTTP error! Status: ${response.status} Doc: https://docs.packdigital.com/err/ERR_RE_API_ERROR`);
             }
             window.location.reload();
         }

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;AAoCvC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAuBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAOxD;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;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"}

package/dist/preview/render-sections.js

@@ -1,9 +1,6 @@
 import React, { useMemo } from "react";
 import { usePreviewContext } from "./preview-content";
 import { sectionMap } from "../register-section";
-import { storefrontSettingsSchema } from "../register-storefront-settings-schema";
-import { useCustomizerShell } from "../use-customizer-shell";
-import { useOverlayScript } from "../use-overlay-script";
 function Sections({ sections }) {
     const renderedSections = useMemo(() => {
         return sections
@@ -25,25 +22,19 @@ function Sections({ sections }) {
     }, [sections]);
     return React.createElement(React.Fragment, null, renderedSections);
 }
-function useRenderSections({ content: ssrContent }) {
-    const { previewContent, isPreview, contentEnvironment } = usePreviewContext();
-    // In preview mode, use the customizer shell to get live content
-    if (isPreview) {
-        const { content: liveContent } = useCustomizerShell({
-            environment: contentEnvironment,
-            sectionComponents: sectionMap,
-            storefrontSettingsSchema,
-        });
-        return liveContent?.sections?.nodes || liveContent?.sections;
-    }
-    // For SSR and non-preview mode, use the passed in content
-    const contentToRender = ssrContent || previewContent;
+function useRenderSections({ content }) {
+    const { isPreview, liveContent, setLiveContent } = usePreviewContext();
+    // Update content in context for preview mode
+    useMemo(() => {
+        isPreview && setLiveContent(content);
+    }, [content, isPreview, setLiveContent]);
+    // For SSR, use the passed in content
+    const contentToRender = liveContent || content;
     if (!contentToRender)
         return null;
     return contentToRender?.sections?.nodes || contentToRender?.sections;
 }
 export function RenderSections(props) {
-    useOverlayScript();
     const sections = useRenderSections(props);
     if (!sections)
         return null;

package/dist/register-section.js

@@ -2,7 +2,7 @@ import { SectionObjectSchema } from "@pack/types";
 export const sectionMap = new Map();
 export function registerSection(section, config) {
     if (typeof section !== "function") {
-        throw new Error(`The section "${config.name}" is not a valid React component.`);
+        throw new Error(`ERR_RE_RENDER_SECTION: The section "${config.name}" is not a valid React component. Doc: https://docs.packdigital.com/err/ERR_RE_RENDER_SECTION`);
     }
     if (!section.Schema) {
         throw new Error(`The section "${config.name}" does not have a valid schema.`);

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

@@ -1,8 +1,2 @@
-export declare const useCustomizerShell: ({ environment, sectionComponents, storefrontSettingsSchema, }: {
-    environment: string;
-    sectionComponents: any;
-    storefrontSettingsSchema?: any;
-}) => {
-    content: any;
-};
+export declare const useCustomizerShell: () => void;
 //# sourceMappingURL=use-customizer-shell.d.ts.map

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":"AAkBA,eAAO,MAAM,kBAAkB;iBAKhB,MAAM;uBACA,GAAG;+BACK,GAAG;;;CAsQ/B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,kBAAkB,YAgQ9B,CAAC"}

package/dist/use-customizer-shell.js

@@ -1,15 +1,16 @@
-import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { useCallback, useContext, useEffect, useRef, useState, } from "react";
 import { VERSION } from "./version";
 import { PreviewContext } from "./preview/preview-content";
-export const useCustomizerShell = ({ environment, sectionComponents, storefrontSettingsSchema, }) => {
-    const { previewContent, isPreview, pathname, setPreviewContent, setSiteSettings, } = useContext(PreviewContext);
+import { sectionMap as sectionComponents } from "./register-section";
+import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
+export const useCustomizerShell = () => {
+    const { contentEnvironment: environment, isPreview, liveContent, setLiveContent, setSiteSettings, } = useContext(PreviewContext);
     const data = {
-        content: previewContent,
-        template: previewContent?.template?.type,
-        templateType: previewContent?.template?.type,
-        handle: previewContent?.handle,
-        title: previewContent?.title,
-        description: previewContent?.description,
+        template: liveContent?.template?.type,
+        templateType: liveContent?.template?.type,
+        handle: liveContent?.handle,
+        title: liveContent?.title,
+        description: liveContent?.description,
     };
     const [hasInit, setHasInit] = useState(false);
     const pendingMessagesRef = useRef(new Map());
@@ -95,7 +96,7 @@ export const useCustomizerShell = ({ environment, sectionComponents, storefrontS
                     }
                     break;
                 case "SET_PAGE_DATA":
-                    setPreviewContent(message.pack.data?.content);
+                    setLiveContent(message.pack.data?.content);
                     break;
                 case "SET_STOREFRONT_SETTINGS":
                     setSiteSettings({
@@ -167,13 +168,15 @@ export const useCustomizerShell = ({ environment, sectionComponents, storefrontS
     }, [data.handle, sendToParent, storefrontSettingsSchema]);
     // Update the ref whenever pathname changes
     useEffect(() => {
-        currentPathRef.current = pathname;
-    }, [pathname]);
+        currentPathRef.current = window.location.pathname;
+    }, [data.handle]);
     // Tell the parent window about the current route
     useEffect(() => {
-        if (!hasInit || !currentPathRef.current)
-            return;
         const { template, templateType, handle, title, description } = data;
+        if (!hasInit ||
+            !currentPathRef.current ||
+            (!template && !templateType && !handle && !title && !description))
+            return;
         sendToParent("SET_CURRENT_ROUTE", {
             environment,
             currentPath: currentPathRef.current,
@@ -198,14 +201,6 @@ export const useCustomizerShell = ({ environment, sectionComponents, storefrontS
         sectionComponents,
         hasInit,
     ]);
-    if (!isPreview) {
-        return {
-            content: previewContent,
-        };
-    }
-    return useMemo(() => {
-        return { content: previewContent };
-    }, [previewContent]);
 };
 const useCanConnectCheck = ({ isPreview }) => {
     const [canConnect, setCanConnect] = useState(false);

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "2.1.0";
+export const VERSION = "2.1.2";

package/package.json

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