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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/pack/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/pack/pack-analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pack-analytics.d.ts","sourceRoot":"","sources":["../../src/pack/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/pack/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/pack/pack-context.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+type PackCustomizerMeta = {
+    environment?: string;
+    overlay?: {
+        src?: string;
+        version?: string;
+    };
+    [key: string]: any;
+};
+export type PackContextValue = {
+    isPreview: boolean;
+    siteSettings: any;
+    customizerMeta?: PackCustomizerMeta | null;
+    previewStorefrontSettings?: any;
+    setPreviewStorefrontSettings: (siteSettings: any) => void;
+};
+export declare const PackContext: import("react").Context<PackContextValue>;
+export declare const usePackContext: () => PackContextValue;
+export declare const PreviewContext: import("react").Context<PackContextValue>;
+export declare const usePreviewContext: () => PackContextValue;
+export {};
+//# sourceMappingURL=pack-context.d.ts.map

package/dist/pack/pack-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":";AAEA,KAAK,kBAAkB,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,WAAW,2CAKtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,eAAO,MAAM,cAAc,2CAAc,CAAC;AAE1C,eAAO,MAAM,iBAAiB,wBAAiB,CAAC"}

package/dist/pack/pack-context.js

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

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { PackContextValue } from "./pack-context";
+interface PackContentProps {
+    children: ReactNode;
+    siteSettings: any;
+    isPreviewModeEnabled?: boolean;
+    customizerMeta?: PackContextValue["customizerMeta"];
+}
+export declare function PackProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }: PackContentProps): React.JSX.Element;
+export declare const PreviewProvider: typeof PackProvider;
+export {};
+//# sourceMappingURL=pack-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pack-provider.d.ts","sourceRoot":"","sources":["../../src/pack/pack-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AACnD,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAAoB,EACpB,YAAY,EACZ,cAAc,GACf,EAAE,gBAAgB,qBAqBlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}

package/dist/{preview/preview-provider.js → pack/pack-provider.js}

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
-import { PreviewContext } from "./preview-content";
+import { PackContext } from "./pack-context";
+import { usePackTrack } from "./pack-analytics";
 import { PreviewToast } from "./preview-toast";
-export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
+export function PackProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
     const [previewStorefrontSettings, setPreviewStorefrontSettings] = useState();
-    return (React.createElement(PreviewContext.Provider, { value: {
+    usePackTrack();
+    return (React.createElement(PackContext.Provider, { value: {
             isPreview: !!isPreviewModeEnabled,
             previewStorefrontSettings,
             setPreviewStorefrontSettings,
@@ -13,3 +15,4 @@ export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings,
         children,
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
 }
+export const PreviewProvider = PackProvider;

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/pack/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/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;AAuElD,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;AA8ElD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,OAM3C;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAI9C"}

package/dist/render-sections.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from "react";
+import { useMatches } from "@remix-run/react";
 import { useCustomizerShell } from "./use-customizer-shell";
-import { usePreviewContext } from "./preview/preview-content";
+import { usePackContext } from "./pack/pack-context";
 import { sectionMap } from "./register-section";
 import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
 import { useOverlayScript } from "./use-overlay-script";
@@ -26,18 +27,20 @@ function Sections({ sections }) {
     return React.createElement(React.Fragment, null, renderedSections);
 }
 function useRenderSections({ content }) {
-    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
+    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePackContext();
+    const [root] = useMatches();
+    const { ENV } = root?.data;
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
-        environment: "production",
+        environment: ENV?.PUBLIC_PACK_CONTENT_ENVIRONMENT,
         isPreview,
         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,
     });

package/dist/use-customizer-shell.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { connectToParent, ErrorCode } from "penpal";
-export const useCustomizerShell = ({ environment = "production", isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
+export const useCustomizerShell = ({ environment, isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
     const windowLocationRef = useRef();
     const [content, setContent] = useState(data.content);
     const [storefrontSettings, setStorefrontSettings] = useState(null);

package/dist/use-site-settings.js

@@ -1,4 +1,4 @@
-import { usePreviewContext } from "./preview/preview-content";
+import { usePreviewContext } from "./pack/pack-context";
 export const useSiteSettings = () => {
     const { isPreview, previewStorefrontSettings, siteSettings } = usePreviewContext();
     let isIframe = false;

package/package.json

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

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type PreviewContextValue = {
-    isPreview: boolean;
-    siteSettings: any;
-    customizerMeta?: {
-        overlay?: {
-            src?: string;
-            version?: string;
-        };
-        [key: string]: any;
-    };
-    previewStorefrontSettings?: any;
-    setPreviewStorefrontSettings: (siteSettings: any) => void;
-};
-export declare const PreviewContext: import("react").Context<PreviewContextValue>;
-export declare const usePreviewContext: () => PreviewContextValue;
-export {};
-//# sourceMappingURL=preview-content.d.ts.map

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

@@ -1 +0,0 @@
-{"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,8 +0,0 @@
-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

@@ -1,16 +0,0 @@
-import React, { ReactNode } from "react";
-interface PreviewContentProps {
-    children: ReactNode;
-    siteSettings: any;
-    isPreviewModeEnabled?: boolean;
-    customizerMeta?: {
-        overlay?: {
-            src?: string;
-            version?: string;
-        };
-        [key: string]: any;
-    };
-}
-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 +0,0 @@
-{"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-toast.d.ts.map

@@ -1 +0,0 @@
-{"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"}