@pack/react 0.1.4-ab-test.0 → 1.0.0

package/dist/index.d.ts

@@ -1,9 +1,8 @@
-import { RenderSections, useSections } from "./render-sections";
-import { PackProvider, PreviewProvider } from "./pack/pack-provider";
-import { usePackContext, usePreviewContext } from "./pack/pack-context";
+import { RenderSections, useSections } from "./preview/render-sections";
+import { PreviewProvider, RenderContent, 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, usePackContext, usePreviewContext, useSiteSettings, useOverlayScript, PackProvider, PreviewProvider, RenderSections, useSections, };
+export { PreviewProvider, registerSection, registerStorefrontSettingsSchema, RenderContent, RenderSections, useOverlayScript, usePreviewContext, useSiteSettings, useSections, };
 //# 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,mBAAmB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxE,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,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,WAAW,GACZ,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,EACL,eAAe,EACf,aAAa,EACb,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,eAAe,EACf,gCAAgC,EAChC,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,WAAW,GACZ,CAAC"}

package/dist/index.js

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

package/dist/preview/pack-analytics.d.ts

@@ -0,0 +1,16 @@
+export type BrowserData = {
+    userAgent: string;
+    pathname: string;
+    query: string;
+    screen: string;
+    referrer: string;
+    hostname: string;
+    language: string;
+    locale: string;
+    userTimeZone: string;
+    connection: string;
+    deviceCategory: string;
+    href: string;
+};
+export declare function usePackTrack(): void;
+//# sourceMappingURL=pack-analytics.d.ts.map

package/dist/preview/pack-analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pack-analytics.d.ts","sourceRoot":"","sources":["../../src/preview/pack-analytics.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAiDF,wBAAgB,YAAY,SA0B3B"}

package/dist/preview/pack-analytics.js

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+function getBrowserData() {
+    let userTimeZone;
+    let userLocale;
+    try {
+        userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        userLocale =
+            navigator.languages && navigator.languages.length
+                ? navigator.languages[0]
+                : navigator.userLanguage ||
+                    navigator.language ||
+                    navigator.browserLanguage ||
+                    "unknown";
+    }
+    catch (error) { }
+    const connection = navigator.connection ||
+        navigator.mozConnection ||
+        navigator.webkitConnection;
+    const minWidth = 768;
+    // prettier-ignore
+    const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    let deviceCategory = "desktop";
+    if (hasTouchSupport) {
+        const hasSmallScreen = window.screen.width < minWidth;
+        deviceCategory = hasSmallScreen ? "mobile" : "tablet";
+    }
+    return {
+        userAgent: window.navigator.userAgent,
+        pathname: window.location.pathname,
+        query: window.location.search,
+        screen: `${window.screen.width}x${window.screen.height}`,
+        referrer: document.referrer,
+        hostname: window.location.hostname,
+        language: navigator.language,
+        locale: userLocale,
+        userTimeZone: userTimeZone || "unknown",
+        connection: connection?.effectiveType || "unknown",
+        deviceCategory,
+        href: window.location.href,
+    };
+}
+export function usePackTrack() {
+    const [pathname, setPathname] = useState();
+    const analytics = async () => {
+        const browserData = getBrowserData();
+        if (pathname === browserData.pathname)
+            return;
+        setPathname(browserData.pathname);
+        try {
+            await fetch("/pack/track", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(getBrowserData()),
+            });
+        }
+        catch (error) {
+            console.error("Error hit /pack/track: ", error.message);
+        }
+    };
+    useEffect(() => {
+        analytics();
+    }, [analytics]);
+}

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

@@ -0,0 +1,38 @@
+import React, { type ReactNode } from "react";
+type PreviewContextValue = {
+    isPreview: boolean;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
+    siteSettings: any;
+    setSiteSettings: (siteSettings: any) => void;
+    content: any;
+    setContent: (content: any) => void;
+    pathname: string;
+};
+export declare const PreviewContext: React.Context<PreviewContextValue>;
+export declare const usePreviewContext: () => PreviewContextValue;
+interface PreviewProviderProps {
+    children: (sections: ReactNode) => ReactNode;
+    siteSettings: any;
+    pathname: string;
+    isPreviewModeEnabled?: boolean;
+    customizerMeta?: {
+        overlay?: {
+            src?: string;
+            version?: string;
+        };
+        [key: string]: any;
+    };
+}
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, pathname, }: PreviewProviderProps): React.JSX.Element;
+export declare function RenderContent({ content }: {
+    content: any;
+}): null;
+export declare function usePackContent(content: any): void;
+export {};
+//# sourceMappingURL=preview-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,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,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,oCAQzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC7C,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,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,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,QAAQ,GACT,EAAE,oBAAoB,qBAyCtB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,QAQ1D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,QAQ1C"}

package/dist/preview/preview-content.js

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useState, useEffect, useMemo, } from "react";
+import { RenderSections } from "./render-sections";
+import { usePackTrack } from "./pack-analytics";
+import { PreviewToast } from "./preview-toast";
+export const PreviewContext = createContext({
+    isPreview: false,
+    setSiteSettings: () => { },
+    siteSettings: undefined,
+    customizerMeta: undefined,
+    content: null,
+    setContent: () => { },
+    pathname: "",
+});
+export const usePreviewContext = () => useContext(PreviewContext);
+export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, pathname, }) {
+    const [content, setContent] = useState(null);
+    const [siteSettings, setSiteSettings] = useState(previewStorefrontSettings);
+    usePackTrack();
+    const value = useMemo(() => ({
+        isPreview: !!isPreviewModeEnabled,
+        customizerMeta,
+        siteSettings,
+        setSiteSettings,
+        content,
+        setContent,
+        pathname,
+    }), [
+        isPreviewModeEnabled,
+        siteSettings,
+        customizerMeta,
+        setSiteSettings,
+        content,
+        pathname,
+    ]);
+    // Clear content when navigating to a new page
+    useEffect(() => {
+        content && setContent(null);
+    }, [pathname]);
+    const sections = content ? React.createElement(RenderSections, null) : null;
+    return (React.createElement(PreviewContext.Provider, { value: value },
+        children(sections),
+        React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
+}
+export function RenderContent({ content }) {
+    const { setContent } = usePreviewContext();
+    useEffect(() => {
+        setContent(content);
+    }, [content, setContent]);
+    return null;
+}
+export function usePackContent(content) {
+    const context = usePreviewContext();
+    useEffect(() => {
+        context.setContent(content);
+    }, [content, context]);
+    return;
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface PreviewProviderProps {
+    customizerMeta?: any;
+    isPreviewModeEnabled?: boolean;
+    siteSettings?: any;
+    location?: Location;
+    children: (sections: React.ReactNode) => React.ReactNode;
+}
+export declare function PreviewProvider({ customizerMeta, isPreviewModeEnabled, siteSettings, location, children, }: PreviewProviderProps): void;
+export {};
+//# sourceMappingURL=preview-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":";AAAA,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1D;AAED,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,QAWtB"}

package/dist/preview/preview-provider.js

@@ -0,0 +1,11 @@
+export function PreviewProvider({ customizerMeta, isPreviewModeEnabled, siteSettings, location, children, }) {
+    const { content, storefrontSettings } = useCustomizerShell({
+        environment: customizerMeta?.environment,
+        isPreview: isPreviewModeEnabled,
+        sectionComponents: customizerMeta?.sectionComponents,
+        data: customizerMeta,
+        storefrontSettingsSchema: siteSettings?.schema,
+        location,
+    });
+    // ... rest of the component remains the same ...
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface PreviewToastProps {
+    isPreviewModeEnabled: boolean;
+}
+export declare const PreviewToast: ({ isPreviewModeEnabled }: PreviewToastProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=preview-toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/preview/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,iBAAiB;IACzB,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAsBD,eAAO,MAAM,YAAY,6BAA8B,iBAAiB,6BA+GvE,CAAC"}

package/dist/preview/preview-toast.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+const Eye = (props) => {
+    return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 12c0-.338.136-.905.493-1.591a7.858 7.858 0 0 1 1.64-2.108C6.374 6.926 8.694 5.75 12 5.75c3.308 0 5.627 1.176 7.116 2.551a7.86 7.86 0 0 1 1.64 2.108c.358.686.494 1.253.494 1.591 0 .338-.136.905-.493 1.591a7.86 7.86 0 0 1-1.64 2.108c-1.49 1.375-3.81 2.551-7.117 2.551-3.308 0-5.627-1.176-7.116-2.551a7.858 7.858 0 0 1-1.64-2.108c-.358-.686-.494-1.253-.494-1.591ZM12 4.25c-3.692 0-6.373 1.324-8.134 2.949a9.356 9.356 0 0 0-1.953 2.517c-.424.814-.663 1.622-.663 2.284 0 .662.24 1.47.663 2.284a9.356 9.356 0 0 0 1.953 2.517C5.627 18.426 8.308 19.75 12 19.75s6.373-1.324 8.134-2.949a9.356 9.356 0 0 0 1.953-2.517c.424-.814.663-1.622.663-2.284 0-.662-.24-1.47-.663-2.284a9.355 9.355 0 0 0-1.953-2.517C18.373 5.574 15.692 4.25 12 4.25ZM9.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z", fill: "currentColor" })));
+};
+export const PreviewToast = ({ isPreviewModeEnabled }) => {
+    const [showToast, setShowToast] = useState(false);
+    const exitPreviewMode = async () => {
+        try {
+            const response = await fetch("/api/edit", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            window.location.reload();
+        }
+        catch (error) {
+            console.error("Error exiting preview:", error.message);
+        }
+    };
+    useEffect(() => {
+        const isIframe = window.self !== window.top;
+        if (isPreviewModeEnabled && !isIframe) {
+            setShowToast(true);
+        }
+    }, [isPreviewModeEnabled]);
+    if (showToast) {
+        return (React.createElement("div", { style: {
+                position: "fixed",
+                zIndex: "2147483647",
+                left: "50%",
+                transform: "translateX(-50%)",
+                padding: "0 16px",
+                bottom: "16px",
+                width: "100%",
+                pointerEvents: "none",
+            } },
+            React.createElement("div", { style: {
+                    margin: "0 auto",
+                    pointerEvents: "auto",
+                    maxWidth: "640px",
+                    boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
+                    width: "100%",
+                    padding: "8px 16px",
+                    backgroundColor: "#1f2937",
+                    color: "#f9fafb",
+                    borderRadius: "8px",
+                    display: "flex",
+                    alignItems: "center",
+                    fontFamily: '"Inter", sans-serif',
+                    justifyContent: "space-between",
+                    gap: "8px",
+                } },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        overflow: "hidden",
+                    } },
+                    React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
+                    React.createElement("p", { style: {
+                            flex: 1,
+                            fontSize: "14px",
+                            lineHeight: "20px",
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                            overflow: "hidden",
+                        } }, "You are currently previewing your storefront with draft content")),
+                React.createElement("span", { role: "button", tabIndex: 0, onClick: exitPreviewMode, onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            exitPreviewMode();
+                        }
+                    }, style: {
+                        cursor: "pointer",
+                        fontSize: 13,
+                        fontWeight: "500",
+                        flexShrink: "0",
+                    } }, "Exit preview mode"))));
+    }
+    return null;
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function useSections(): any;
+export declare function RenderSections(): React.JSX.Element | null;
+//# sourceMappingURL=render-sections.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/preview/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA6DlD,wBAAgB,WAAW,QAM1B;AAED,wBAAgB,cAAc,6BAM7B"}

package/dist/preview/render-sections.js

@@ -0,0 +1,60 @@
+import React, { useMemo } from "react";
+import { useMatches } from "@remix-run/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
+            .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]);
+    return React.createElement(React.Fragment, null, renderedSections);
+}
+function useRenderSections() {
+    const [root] = useMatches();
+    const { ENV } = root?.data;
+    const { content: liveContent } = useCustomizerShell({
+        environment: ENV?.PUBLIC_PACK_CONTENT_ENVIRONMENT,
+        sectionComponents: sectionMap,
+        storefrontSettingsSchema,
+    });
+    useOverlayScript();
+    const sections = useMemo(() => {
+        return liveContent?.sections?.nodes || liveContent?.sections;
+    }, [liveContent?.sections]);
+    return {
+        sections,
+    };
+}
+export function useSections() {
+    const { sections } = useRenderSections();
+    if (!sections)
+        return null;
+    const visibleSections = Sections({ sections });
+    return visibleSections?.props?.children || null;
+}
+export function RenderSections() {
+    const { content } = usePreviewContext();
+    if (!content)
+        return null;
+    const { sections } = useRenderSections();
+    if (!sections)
+        return null;
+    return React.createElement(Sections, { sections: sections });
+}

package/dist/render-sections.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 export declare function useSections({ content }: any): any;
-export declare function RenderSections({ content }: any): React.JSX.Element | null;
+type RenderSectionProps = {
+    pathname?: string;
+};
+export declare function RenderSections({ pathname }: RenderSectionProps): React.JSX.Element | null;
+export {};
 //# sourceMappingURL=render-sections.d.ts.map

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;AA8ElD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,OAM3C;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAI9C"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAqFlD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,OAM3C;AAED,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,4BAM9D"}

package/dist/render-sections.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from "react";
 import { useMatches } from "@remix-run/react";
 import { useCustomizerShell } from "./use-customizer-shell";
-import { usePackContext } from "./pack/pack-context";
+import { usePreviewContext } from "./preview/preview-content";
 import { sectionMap } from "./register-section";
 import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
 import { useOverlayScript } from "./use-overlay-script";
@@ -26,8 +26,8 @@ function Sections({ sections }) {
     }, [sections]);
     return React.createElement(React.Fragment, null, renderedSections);
 }
-function useRenderSections({ content }) {
-    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePackContext();
+function useRenderSections({ content, pathname, }) {
+    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
     const [root] = useMatches();
     const { ENV } = root?.data;
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
@@ -36,13 +36,14 @@ function useRenderSections({ content }) {
         sectionComponents: sectionMap,
         data: {
             content,
-            template: content?.template?.type,
-            templateType: content?.template?.type,
-            handle: content?.handle,
-            title: content?.title,
-            description: content?.description,
+            template: content.template?.type,
+            templateType: content.template?.type,
+            handle: content.handle,
+            title: content.title,
+            description: content.description,
         },
         storefrontSettingsSchema,
+        pathname,
     });
     useOverlayScript({ isPreview, overlay: customizerMeta?.overlay || {} });
     useEffect(() => {
@@ -63,8 +64,11 @@ export function useSections({ content }) {
     const visibleSections = Sections({ sections });
     return visibleSections?.props?.children || null;
 }
-export function RenderSections({ content }) {
-    const { sections } = useRenderSections({ content });
+export function RenderSections({ pathname }) {
+    const { content } = usePreviewContext();
+    if (!content)
+        return null;
+    const { sections } = useRenderSections({ content, pathname });
     if (!sections)
         return null;
     return React.createElement(Sections, { sections: sections });

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

@@ -1,5 +1,4 @@
-export declare const useCustomizerShell: ({ environment, isPreview, sectionComponents, data, storefrontSettingsSchema, }: any) => {
+export declare const useCustomizerShell: ({ environment, sectionComponents, storefrontSettingsSchema, }: any) => {
     content: any;
-    storefrontSettings: any;
 };
 //# 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":"AAGA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAkJL,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,kBAAkB,kEAI5B,GAAG;;CA4JL,CAAC"}

package/dist/use-customizer-shell.js

@@ -1,9 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { connectToParent, ErrorCode } from "penpal";
-export const useCustomizerShell = ({ environment, isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
+import { PreviewContext } from "./preview/preview-content";
+export const useCustomizerShell = ({ environment, sectionComponents, storefrontSettingsSchema, }) => {
+    const { isPreview, content, setContent, setSiteSettings } = useContext(PreviewContext);
+    const data = {
+        content,
+        template: content.template?.type,
+        templateType: content.template?.type,
+        handle: content.handle,
+        title: content.title,
+        description: content.description,
+    };
     const windowLocationRef = useRef();
-    const [content, setContent] = useState(data.content);
-    const [storefrontSettings, setStorefrontSettings] = useState(null);
     const [parentConnection, setParentConnection] = useState(null);
     const [shouldConnectToParent, setShouldConnectToParent] = useState(false);
     const navigate = (path) => {
@@ -76,7 +84,7 @@ export const useCustomizerShell = ({ environment, isPreview, sectionComponents,
                     setContent(content);
                 },
                 setStorefrontSettings(settings) {
-                    setStorefrontSettings(settings);
+                    setSiteSettings({ data: { siteSettings: { settings } } });
                 },
             },
         });
@@ -117,11 +125,10 @@ export const useCustomizerShell = ({ environment, isPreview, sectionComponents,
     ]);
     if (!isPreview) {
         return {
-            content: data.content,
-            storefrontSettings: data.settings?.settings,
+            content,
         };
     }
     return useMemo(() => {
-        return { content, storefrontSettings };
-    }, [content, storefrontSettings]);
+        return { content };
+    }, [content]);
 };

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

@@ -5,11 +5,5 @@ declare global {
         };
     }
 }
-export declare const useOverlayScript: ({ isPreview, overlay, }: {
-    isPreview: boolean;
-    overlay: {
-        src?: string;
-        version?: string;
-    };
-}) => void;
+export declare const useOverlayScript: () => void;
 //# sourceMappingURL=use-overlay-script.d.ts.map

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

@@ -1 +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;eAIhB,OAAO;aACT;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE;UAmB5C,CAAC"}
+{"version":3,"file":"use-overlay-script.d.ts","sourceRoot":"","sources":["../src/use-overlay-script.ts"],"names":[],"mappings":"AAGA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,CAAC,EAAE;YACL,uBAAuB,EAAE,OAAO,CAAC;SAClC,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB,YAsB5B,CAAC"}

package/dist/use-overlay-script.js

@@ -1,5 +1,8 @@
 import { useEffect } from "react";
-export const useOverlayScript = ({ isPreview, overlay, }) => {
+import { usePreviewContext } from "./preview/preview-content";
+export const useOverlayScript = () => {
+    const { isPreview, customizerMeta } = usePreviewContext();
+    const overlay = customizerMeta?.overlay || {};
     useEffect(() => {
         if (isPreview &&
             (overlay?.src || overlay?.version) &&

package/dist/use-site-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-site-settings.d.ts","sourceRoot":"","sources":["../src/use-site-settings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAAO,OAAO,MAAM,EAAE,GAAG,CAkBpD,CAAC"}
+{"version":3,"file":"use-site-settings.d.ts","sourceRoot":"","sources":["../src/use-site-settings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAAO,OAAO,MAAM,EAAE,GAAG,CAepD,CAAC"}

package/dist/use-site-settings.js

@@ -1,6 +1,6 @@
-import { usePreviewContext } from "./pack/pack-context";
+import { usePreviewContext } from "./preview/preview-content";
 export const useSiteSettings = () => {
-    const { isPreview, previewStorefrontSettings, siteSettings } = usePreviewContext();
+    const { siteSettings } = usePreviewContext();
     let isIframe = false;
     if (!(typeof document === "undefined")) {
         isIframe = window.self !== window.top;
@@ -10,7 +10,5 @@ export const useSiteSettings = () => {
      * in an iFrame we want to show the live customizer
      * preview data. Else, we show the normal site settings data
      * */
-    return isPreview && isIframe
-        ? previewStorefrontSettings
-        : siteSettings?.data?.siteSettings;
+    return siteSettings?.data?.siteSettings;
 };

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION: string;
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,EAAE,MAAgB,CAAC"}

package/dist/version.js

@@ -0,0 +1 @@
+export const VERSION = "0.1.4";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.1.4-ab-test.0",
+  "version": "1.0.0",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {