@betterstore/react 0.3.67 → 0.3.69

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.69
+
+### Patch Changes
+
+- bug fix
+
+## 0.3.68
+
+### Patch Changes
+
+- bug fix
+
 ## 0.3.67
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -521,6 +521,7 @@ var css_248z = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com *
 const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
     const [iframeBody, setIframeBody] = React.useState(null);
     const styleRef = React.useRef(null);
+    React.useRef(null);
     const resizeObserver = React.useRef();
     const injectStyles = React.useCallback((doc) => {
         var _a;
@@ -528,17 +529,30 @@ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
         if ((_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
             styleRef.current.parentNode.removeChild(styleRef.current);
         }
-        // Inject global CSS
         const styleEl = doc.createElement("style");
         styleEl.textContent = css_248z;
         doc.head.appendChild(styleEl);
         styleRef.current = styleEl;
-        // Clone Framer Motion styles into iframe
-        Array.from(document.querySelectorAll("style[data-motion]")).forEach((styleTag) => {
-            const clone = styleTag.cloneNode(true);
-            doc.head.appendChild(clone);
-        });
     }, []);
+    const cloneGlobals = (iframeWin) => {
+        const parentWin = window;
+        // Grab all own props of the parent window...
+        Object.getOwnPropertyNames(parentWin).forEach((key) => {
+            // Skip non–configurable or already-present props
+            if (key in iframeWin)
+                return;
+            const desc = Object.getOwnPropertyDescriptor(parentWin, key);
+            // Only clone functions or configurable props
+            if (typeof desc.value === "function" ||
+                (desc.configurable && (desc.writable || desc.get))) {
+                Object.defineProperty(iframeWin, key, Object.assign(Object.assign({}, desc), { 
+                    // if it's a function, bind it back to parent window
+                    value: typeof desc.value === "function"
+                        ? desc.value.bind(parentWin)
+                        : desc.value }));
+            }
+        });
+    };
     const updateHeight = React.useCallback(() => {
         const iframe = iframeRef.current;
         const doc = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument;
@@ -552,10 +566,11 @@ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
         if (!iframe)
             return;
         const doc = iframe.contentDocument;
+        cloneGlobals(iframe.contentWindow);
         injectStyles(doc);
         setIframeBody(doc.body);
         updateHeight();
-        // Observe body size changes
+        // Observe body mutations & size
         if ("ResizeObserver" in window) {
             resizeObserver.current = new ResizeObserver(updateHeight);
             resizeObserver.current.observe(doc.body);
@@ -566,7 +581,9 @@ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
         const iframe = iframeRef.current;
         if (!iframe)
             return;
+        // Attach onLoad
         iframe.addEventListener("load", handleLoad);
+        // If already loaded
         if (((_a = iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
             handleLoad();
         }
@@ -579,6 +596,7 @@ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
             }
         };
     }, [iframeRef, handleLoad]);
+    // Update on window resize
     React.useEffect(() => {
         window.addEventListener("resize", updateHeight);
         return () => {

package/dist/index.mjs

@@ -498,6 +498,7 @@ var css_248z = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com *
 const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef }) => {
     const [iframeBody, setIframeBody] = useState(null);
     const styleRef = useRef(null);
+    useRef(null);
     const resizeObserver = useRef();
     const injectStyles = useCallback((doc) => {
         var _a;
@@ -505,17 +506,30 @@ const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef })
         if ((_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
             styleRef.current.parentNode.removeChild(styleRef.current);
         }
-        // Inject global CSS
         const styleEl = doc.createElement("style");
         styleEl.textContent = css_248z;
         doc.head.appendChild(styleEl);
         styleRef.current = styleEl;
-        // Clone Framer Motion styles into iframe
-        Array.from(document.querySelectorAll("style[data-motion]")).forEach((styleTag) => {
-            const clone = styleTag.cloneNode(true);
-            doc.head.appendChild(clone);
-        });
     }, []);
+    const cloneGlobals = (iframeWin) => {
+        const parentWin = window;
+        // Grab all own props of the parent window...
+        Object.getOwnPropertyNames(parentWin).forEach((key) => {
+            // Skip non–configurable or already-present props
+            if (key in iframeWin)
+                return;
+            const desc = Object.getOwnPropertyDescriptor(parentWin, key);
+            // Only clone functions or configurable props
+            if (typeof desc.value === "function" ||
+                (desc.configurable && (desc.writable || desc.get))) {
+                Object.defineProperty(iframeWin, key, Object.assign(Object.assign({}, desc), { 
+                    // if it's a function, bind it back to parent window
+                    value: typeof desc.value === "function"
+                        ? desc.value.bind(parentWin)
+                        : desc.value }));
+            }
+        });
+    };
     const updateHeight = useCallback(() => {
         const iframe = iframeRef.current;
         const doc = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument;
@@ -529,10 +543,11 @@ const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef })
         if (!iframe)
             return;
         const doc = iframe.contentDocument;
+        cloneGlobals(iframe.contentWindow);
         injectStyles(doc);
         setIframeBody(doc.body);
         updateHeight();
-        // Observe body size changes
+        // Observe body mutations & size
         if ("ResizeObserver" in window) {
             resizeObserver.current = new ResizeObserver(updateHeight);
             resizeObserver.current.observe(doc.body);
@@ -543,7 +558,9 @@ const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef })
         const iframe = iframeRef.current;
         if (!iframe)
             return;
+        // Attach onLoad
         iframe.addEventListener("load", handleLoad);
+        // If already loaded
         if (((_a = iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
             handleLoad();
         }
@@ -556,6 +573,7 @@ const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef })
             }
         };
     }, [iframeRef, handleLoad]);
+    // Update on window resize
     useEffect(() => {
         window.addEventListener("resize", updateHeight);
         return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.3.67",
+  "version": "0.3.69",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {