@pack/react 0.0.5 → 0.0.6

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,KAAoB,MAAM,OAAO,CAAC;AAmCzC,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BA4B9C"}
+{"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,9 +1,9 @@
-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";
+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) => {
@@ -14,7 +14,7 @@ function Sections({ content, sections }) {
         const Component = sectionMap.get(schemaKey);
         if (!Component)
             return null;
-        return (React.createElement("section", { key: uuidv4(), "data-comp": schemaKey, "data-comp-id": section?.id, hidden: data?.sectionVisibility === "hidden" },
+        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);
@@ -23,16 +23,16 @@ function Sections({ content, sections }) {
 export function RenderSections({ content }) {
     const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
     const { content: liveContent, storefrontSettings } = useCustomizerShell({
-        environment: "production",
+        environment: 'production',
         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.d.ts.map

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

package/dist/use-customizer-shell.js

@@ -1,18 +1,22 @@
-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();
+import { useCallback, useEffect, useState } from "react";
+import { connectToParent } from "penpal";
+export const useCustomizerShell = ({ environment = "production", isPreview, sectionComponents, data = {}, storefrontSettingsSchema, }) => {
+    const [location, setLocation] = useState();
     const [content, setContent] = useState(data.content);
     const [storefrontSettings, setStorefrontSettings] = useState(null);
     const [parentConnection, setParentConnection] = useState(null);
+    const navigate = (path) => {
+        window.location.href = path;
+    };
+    useEffect(() => {
+        setLocation(window.location);
+    }, []);
     const refreshSections = useCallback(() => {
         if (!sectionComponents || !parentConnection)
             return [];
         const sectionSchemas = Array.from(sectionComponents)
             .map(([, section]) => {
-            return typeof section.Schema === 'function'
+            return typeof section.Schema === "function"
                 ? section.Schema(data)
                 : section.Schema;
         })
@@ -21,7 +25,7 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
             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]);
@@ -34,7 +38,7 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data, parentConnection, storefrontSettingsSchema]);
     useEffect(() => {
-        if (!isPreview)
+        if (!isPreview || !location)
             return;
         const connection = connectToParent({
             methods: {
@@ -44,7 +48,7 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
                 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,7 +63,7 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
             parent.sendStorefrontSettings();
             parent.setCurrentRoute({
                 environment,
-                currentPath: location.pathname,
+                currentPath: location?.pathname,
                 template,
                 templateType,
                 handle: content.handle,
@@ -71,7 +75,7 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
         return () => {
             connection.destroy();
         };
-    }, []);
+    }, [location]);
     useEffect(() => {
         if (!isPreview)
             return;
@@ -85,7 +89,10 @@ export const useCustomizerShell = ({ environment = 'production', isPreview, sect
         sectionComponents,
     ]);
     if (!isPreview) {
-        return { content: data.content, storefrontSettings: data.settings?.settings };
+        return {
+            content: data.content,
+            storefrontSettings: data.settings?.settings,
+        };
     }
     return { content, storefrontSettings };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {
@@ -23,7 +23,6 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "@remix-run/react": "^1.19.3",
     "@shopify/remix-oxygen": "^1.1.3",
     "@types/react": "^18.2.20",
     "@types/uuid": "^9.0.2",