@betterstore/react 0.3.67 → 0.3.68

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @betterstore/sdk
 
+## 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);
+    const motionRef = React.useRef(null);
     const resizeObserver = React.useRef();
     const injectStyles = React.useCallback((doc) => {
         var _a;
@@ -528,16 +529,25 @@ 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 injectMotion = React.useCallback((doc) => {
+        var _a;
+        // Clean up previous style
+        if ((_a = motionRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            motionRef.current.parentNode.removeChild(motionRef.current);
+        }
+        const script = doc.createElement("script");
+        script.type = "module";
+        script.textContent = `
+        import { motion } from 'https://esm.sh/motion';
+        window.Motion = motion;
+      `;
+        doc.head.appendChild(script);
+        motionRef.current = script;
     }, []);
     const updateHeight = React.useCallback(() => {
         const iframe = iframeRef.current;
@@ -552,10 +562,11 @@ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
         if (!iframe)
             return;
         const doc = iframe.contentDocument;
+        injectMotion(doc);
         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 +577,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 +592,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);
+    const motionRef = useRef(null);
     const resizeObserver = useRef();
     const injectStyles = useCallback((doc) => {
         var _a;
@@ -505,16 +506,25 @@ 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 injectMotion = useCallback((doc) => {
+        var _a;
+        // Clean up previous style
+        if ((_a = motionRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            motionRef.current.parentNode.removeChild(motionRef.current);
+        }
+        const script = doc.createElement("script");
+        script.type = "module";
+        script.textContent = `
+        import { motion } from 'https://esm.sh/motion';
+        window.Motion = motion;
+      `;
+        doc.head.appendChild(script);
+        motionRef.current = script;
     }, []);
     const updateHeight = useCallback(() => {
         const iframe = iframeRef.current;
@@ -529,10 +539,11 @@ const IframeWrapper = React__default.memo(({ children, iframeRef, wrapperRef })
         if (!iframe)
             return;
         const doc = iframe.contentDocument;
+        injectMotion(doc);
         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 +554,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 +569,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.68",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {