@pack/react 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export * from "./types";
-export { registerSection } from "./register-section";
-export { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { RenderSections } from "./render-sections";
-export { PreviewProvider, PreviewContext, usePreviewContext } from "./preview";
+import { RenderSections } from "./render-sections";
+import { PreviewProvider } from "./preview/preview-provider";
+import { usePreviewContext } from "./preview/preview-content";
+import { useSiteSettings } from "./use-site-settings";
+import { registerSection } from "./register-section";
+import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, 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,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,WAAW,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,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"}

package/dist/index.js

@@ -1,5 +1,7 @@
-export * from "./types";
-export { registerSection } from "./register-section";
-export { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
-export { RenderSections } from "./render-sections";
-export { PreviewProvider, PreviewContext, usePreviewContext } from "./preview";
+import { RenderSections } from "./render-sections";
+import { PreviewProvider } from "./preview/preview-provider";
+import { usePreviewContext } from "./preview/preview-content";
+import { useSiteSettings } from "./use-site-settings";
+import { registerSection } from "./register-section";
+import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
+export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type PreviewContextValue = {
+    isPreview: boolean;
+    siteSettings: 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

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

package/dist/preview/preview-content.js

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

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+interface PreviewContentProps {
+    children: ReactNode;
+    siteSettings: any;
+    isPreviewModeEnabled?: boolean;
+}
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }: PreviewContentProps): React.JSX.Element;
+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,OAAO,KAAK,EAAE,EAAC,SAAS,EAAW,MAAM,OAAO,CAAC;AAGjD,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,qBAgBrB"}

package/dist/preview/preview-provider.js

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

package/dist/render-sections.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
+import React from 'react';
 export declare function RenderSections({ content }: any): React.JSX.Element | null;
 //# 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,KAAK,MAAM,OAAO,CAAC;AAqC1B,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAqB9C"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAmCvC,wBAAgB,cAAc,CAAC,EAAC,OAAO,EAAC,EAAE,GAAG,4BA4B5C"}

package/dist/render-sections.js

@@ -1,31 +1,31 @@
-import React from "react";
-import { generateUUID } from "./utils/uuid";
-import { sectionMap } from "./register-section";
-import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
-import { useCustomizerShell } from "./useCustomizerShell";
-import { usePreviewContext } from "./preview";
-function Sections({ sections }) {
+import React, { useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useCustomizerShell } from './use-customizer-shell';
+import { usePreviewContext } from './preview/preview-content';
+import { sectionMap } from './register-section';
+import { storefrontSettingsSchema } from './register-storefront-settings-schema';
+function Sections({ content, sections }) {
     const renderedSections = sections
         .map((section) => {
+        // TODO: Return a consistent data structure from the API and the customizer
         // Normalize section data
         const data = section.data || section;
-        const sectionName = data._template;
-        const Section = sectionMap.get(sectionName);
-        if (!Section) {
-            console.warn(`No registered section for name: ${sectionName}`);
+        const schemaKey = data._template;
+        const Component = sectionMap.get(schemaKey);
+        if (!Component)
             return null;
-        }
-        return (React.createElement("section", { key: generateUUID(), "data-comp": sectionName, "data-comp-id": section?.id, hidden: data?.sectionVisibility === "hidden" },
-            React.createElement(Section, { "comp-name": sectionName, cms: data })));
+        return (React.createElement("section", { key: uuidv4(), "data-comp": schemaKey, "data-comp-id": section?.id, hidden: data?.sectionVisibility === 'hidden' },
+            React.createElement(Component, { "comp-name": schemaKey, cms: data })));
     })
         .filter(Boolean);
     return React.createElement(React.Fragment, null, renderedSections);
 }
 export function RenderSections({ content }) {
-    const preview = usePreviewContext();
-    const { content: liveContent } = useCustomizerShell({
-        isPreview: preview,
-        sectionComponents: sectionMap,
+    const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
+    const { content: liveContent, storefrontSettings } = useCustomizerShell({
+        environment: 'production',
+        isPreview,
+        sectionMap,
         data: {
             content,
             template: content.template?.type,
@@ -36,8 +36,12 @@ export function RenderSections({ content }) {
         },
         storefrontSettingsSchema,
     });
+    useEffect(() => {
+        storefrontSettings &&
+            setPreviewStorefrontSettings({ settings: storefrontSettings });
+    }, [setPreviewStorefrontSettings, storefrontSettings]);
     const sections = liveContent?.sections?.nodes || liveContent?.sections;
     if (!sections)
         return null;
-    return React.createElement(Sections, { sections: sections });
+    return React.createElement(Sections, { content: liveContent, sections: sections });
 }

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

@@ -0,0 +1,5 @@
+export declare const useCustomizerShell: ({ environment, isPreview, sectionComponents, data, storefrontSettingsSchema, }: any) => {
+    content: any;
+    storefrontSettings: any;
+};
+//# sourceMappingURL=use-customizer-shell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,mFAM5B,GAAG;;;CAyGL,CAAC"}

package/dist/{useCustomizerShell.js → use-customizer-shell.js}

@@ -1,30 +1,27 @@
-import { useCallback, useEffect, useState } from "react";
-import { connectToParent } from "penpal";
-export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
-    let location;
-    if (typeof window !== "undefined") {
-        location = window.location;
-    }
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation, useNavigate } from '@remix-run/react';
+import { connectToParent } from 'penpal';
+export const useCustomizerShell = ({ environment = 'production', isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
     const [content, setContent] = useState(data.content);
     const [storefrontSettings, setStorefrontSettings] = useState(null);
     const [parentConnection, setParentConnection] = useState(null);
     const refreshSections = useCallback(() => {
         if (!sectionComponents || !parentConnection)
             return [];
-        const sectionSchemas = [];
-        sectionComponents.forEach((component) => {
-            if (component.Schema) {
-                const evaluatedSchema = typeof component.Schema === "function"
-                    ? component.Schema(data)
-                    : component.Schema;
-                sectionSchemas.push(evaluatedSchema);
-            }
-        });
+        const sectionSchemas = sectionComponents
+            .map((section) => {
+            return typeof section.Schema === 'function'
+                ? section.Schema(data)
+                : section.Schema;
+        })
+            .filter(Boolean);
         try {
             parentConnection.setSectionsSchemas(JSON.stringify(sectionSchemas));
         }
         catch (error) {
-            parentConnection.displayError("Something went wrong parsing sections");
+            parentConnection.displayError('Something went wrong parsing sections');
         }
         return;
     }, [data, parentConnection, sectionComponents]);
@@ -42,12 +39,12 @@ export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, st
         const connection = connectToParent({
             methods: {
                 routeToPage(path) {
-                    location?.assign(path);
+                    navigate(path);
                 },
                 scrollToSection(sectionId) {
                     const sectionEl = document.querySelector(`[data-comp-id="${sectionId}"]`);
                     if (sectionEl)
-                        sectionEl.scrollIntoView({ behavior: "smooth" });
+                        sectionEl.scrollIntoView({ behavior: 'smooth' });
                 },
                 setPageData(content) {
                     setContent(content);
@@ -59,8 +56,10 @@ export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, st
         });
         connection.promise.then((parent) => {
             const { template, templateType, content } = data;
+            parent.sendStorefrontSettings();
             parent.setCurrentRoute({
-                currentPath: location?.pathname || "",
+                environment,
+                currentPath: location.pathname,
                 template,
                 templateType,
                 handle: content.handle,
@@ -69,6 +68,9 @@ export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, st
             });
             setParentConnection(parent);
         });
+        return () => {
+            connection.destroy();
+        };
     }, []);
     useEffect(() => {
         if (!isPreview)
@@ -83,10 +85,7 @@ export const useCustomizerShell = ({ isPreview, sectionComponents, data = {}, st
         sectionComponents,
     ]);
     if (!isPreview) {
-        return {
-            content: data.content,
-            storefrontSettings: data.settings?.settings,
-        };
+        return { content: data.content, storefrontSettings: data.settings?.settings };
     }
     return { content, storefrontSettings };
 };

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

@@ -0,0 +1,2 @@
+export declare const useSiteSettings: () => Record<string, any>;
+//# sourceMappingURL=use-site-settings.d.ts.map

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

@@ -0,0 +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,CAOpD,CAAC"}

package/dist/use-site-settings.js

@@ -0,0 +1,7 @@
+import { usePreviewContext } from './preview/preview-content';
+export const useSiteSettings = () => {
+    const { isPreview, previewStorefrontSettings, siteSettings } = usePreviewContext();
+    return isPreview
+        ? previewStorefrontSettings
+        : siteSettings?.data?.siteSettings;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -21,13 +21,16 @@
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "penpal": "^6.2.2"
-  },
+  "dependencies": {},
   "devDependencies": {
+    "@remix-run/react": "^1.19.3",
+    "@shopify/remix-oxygen": "^1.1.3",
     "@types/react": "^18.2.20",
+    "@types/uuid": "^9.0.2",
+    "penpal": "^6.2.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/dist/preview/PreviewContent.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const PreviewContext: import("react").Context<boolean>;
-export declare const usePreviewContext: () => boolean;
-//# sourceMappingURL=PreviewContent.d.ts.map

package/dist/preview/PreviewContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PreviewContent.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewContent.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc,kCAAgC,CAAC;AAE5D,eAAO,MAAM,iBAAiB,eAAmC,CAAC"}

package/dist/preview/PreviewContent.js

@@ -1,3 +0,0 @@
-import { createContext, useContext } from 'react';
-export const PreviewContext = createContext(false);
-export const usePreviewContext = () => useContext(PreviewContext);

package/dist/preview/PreviewProvider.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface PreviewContentProps {
-    children: React.ReactNode;
-    preview?: boolean;
-}
-export declare function PreviewProvider({ preview, children }: PreviewContentProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=PreviewProvider.d.ts.map

package/dist/preview/PreviewProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PreviewProvider.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAMzE"}

package/dist/preview/PreviewProvider.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { PreviewContext } from "./PreviewContent";
-export function PreviewProvider({ preview, children }) {
-    return (React.createElement(PreviewContext.Provider, { value: !!preview }, children));
-}

package/dist/preview/index.d.ts

@@ -1,3 +0,0 @@
-export { PreviewProvider } from "./PreviewProvider";
-export { PreviewContext, usePreviewContext } from "./PreviewContent";
-//# sourceMappingURL=index.d.ts.map

package/dist/preview/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/preview/index.js

@@ -1,2 +0,0 @@
-export { PreviewProvider } from "./PreviewProvider";
-export { PreviewContext, usePreviewContext } from "./PreviewContent";

package/dist/useCustomizerShell.d.ts

@@ -1,13 +0,0 @@
-import { SectionMap } from "./types";
-interface useCustomizerShellProps {
-    isPreview?: boolean;
-    sectionComponents?: SectionMap;
-    data?: any;
-    storefrontSettingsSchema?: any;
-}
-export declare const useCustomizerShell: ({ isPreview, sectionComponents, data, storefrontSettingsSchema, }: useCustomizerShellProps) => {
-    content: any;
-    storefrontSettings: any;
-};
-export {};
-//# sourceMappingURL=useCustomizerShell.d.ts.map

package/dist/useCustomizerShell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCustomizerShell.d.ts","sourceRoot":"","sources":["../src/useCustomizerShell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,UAAU,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,wBAAwB,CAAC,EAAE,GAAG,CAAC;CAChC;AAED,eAAO,MAAM,kBAAkB,sEAK5B,uBAAuB;;;CA4GzB,CAAC"}

package/dist/utils/uuid.d.ts

@@ -1,2 +0,0 @@
-export declare function generateUUID(): string;
-//# sourceMappingURL=uuid.d.ts.map

package/dist/utils/uuid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"uuid.d.ts","sourceRoot":"","sources":["../../src/utils/uuid.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,WAM3B"}

package/dist/utils/uuid.js

@@ -1,11 +0,0 @@
-/*
- * Generate a UUID using crypto and fallback to Math.random if crypto is not available.
- */
-export function generateUUID() {
-    if (typeof crypto !== "undefined" && !!crypto.randomUUID) {
-        return crypto.randomUUID();
-    }
-    else {
-        return Math.random().toString(16).substring(2);
-    }
-}