payaza-storefront-layouts 1.0.12 → 1.0.13

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

@@ -1 +1 @@
-{"version":3,"file":"ShadowDOMWrapper.d.ts","sourceRoot":"","sources":["../../src/preview/ShadowDOMWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CA2M/G"}
+{"version":3,"file":"ShadowDOMWrapper.d.ts","sourceRoot":"","sources":["../../src/preview/ShadowDOMWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAgO/G"}

package/dist/preview/ShadowDOMWrapper.js

@@ -24,6 +24,7 @@ export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, st
     useEffect(() => {
         childrenRef.current = children;
     }, [children]);
+    // Main effect: Create shadow root and React root on mount
     useEffect(() => {
         if (!shadowHostRef.current)
             return;
@@ -34,9 +35,16 @@ export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, st
         const existingShadowRoot = shadowHostRef.current.shadowRoot;
         if (existingShadowRoot) {
             shadowRootRef.current = existingShadowRoot;
-            // Update content if shadow root already exists
             const container = existingShadowRoot.getElementById('shadow-preview-container');
-            if (container && reactRootRef.current && !isUnmountingRef.current) {
+            containerRef.current = container;
+            // If React root doesn't exist, create it
+            if (!reactRootRef.current && container) {
+                const root = createRoot(container);
+                reactRootRef.current = root;
+                root.render(childrenRef.current);
+            }
+            else if (reactRootRef.current && container && !isUnmountingRef.current) {
+                // Update content if root exists
                 reactRootRef.current.render(childrenRef.current);
             }
             onReady?.();
@@ -73,10 +81,8 @@ export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, st
             // Create React root and render children
             const root = createRoot(container);
             reactRootRef.current = root;
-            // Only render if not unmounting
-            if (!isUnmountingRef.current) {
-                root.render(childrenRef.current);
-            }
+            // Always render on initial mount
+            root.render(childrenRef.current);
             onReady?.();
         }
         catch (err) {
@@ -102,13 +108,15 @@ export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, st
                 }, 0);
             }
         };
-    }, [onReady]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Run only on mount - shadow root should persist across re-renders
     // Update content when children change
     useEffect(() => {
-        // Guard: Don't render if unmounting or not mounted
-        if (isUnmountingRef.current || !isMountedRef.current) {
+        // Guard: Don't render if unmounting
+        if (isUnmountingRef.current) {
             return;
         }
+        // Only render if React root and container exist
         if (reactRootRef.current && containerRef.current) {
             try {
                 reactRootRef.current.render(childrenRef.current);
@@ -120,6 +128,21 @@ export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, st
                 }
             }
         }
+        else if (shadowRootRef.current && !reactRootRef.current) {
+            // If shadow root exists but React root doesn't, try to recreate it
+            const container = shadowRootRef.current.getElementById('shadow-preview-container');
+            if (container) {
+                try {
+                    const root = createRoot(container);
+                    reactRootRef.current = root;
+                    containerRef.current = container;
+                    root.render(childrenRef.current);
+                }
+                catch (e) {
+                    console.warn('[ShadowDOMWrapper] Failed to recreate React root:', e);
+                }
+            }
+        }
     }, [children]);
     // Set up link click handler when shadow root and props are ready
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Shared layout components for StoreFront applications",
   "main": "dist/index.js",
   "module": "dist/index.js",