rampkit-expo-dev 0.0.25 → 0.0.27

package/build/RampkitOverlay.d.ts

@@ -1,5 +1,6 @@
 export declare const injectedHardening = "\n(function(){\n  try {\n    var meta = document.querySelector('meta[name=\"viewport\"]');\n    if (!meta) { meta = document.createElement('meta'); meta.name = 'viewport'; document.head.appendChild(meta); }\n    meta.setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover');\n    var style = document.createElement('style');\n    style.textContent='html,body{overflow-x:hidden!important;} html,body,*{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-ms-user-select:none!important;touch-action: pan-y;} *{-webkit-tap-highlight-color: rgba(0,0,0,0)!important;} ::selection{background: transparent!important;} ::-moz-selection{background: transparent!important;} a,img{-webkit-user-drag:none!important;user-drag:none!important;-webkit-touch-callout:none!important} input,textarea{caret-color:transparent!important;-webkit-user-select:none!important;user-select:none!important}';\n    document.head.appendChild(style);\n    var prevent=function(e){e.preventDefault&&e.preventDefault();};\n    document.addEventListener('gesturestart',prevent,{passive:false});\n    document.addEventListener('gesturechange',prevent,{passive:false});\n    document.addEventListener('gestureend',prevent,{passive:false});\n    document.addEventListener('dblclick',prevent,{passive:false});\n    document.addEventListener('wheel',function(e){ if(e.ctrlKey) e.preventDefault(); },{passive:false});\n    document.addEventListener('touchmove',function(e){ if(e.scale && e.scale !== 1) e.preventDefault(); },{passive:false});\n    document.addEventListener('selectstart',prevent,{passive:false,capture:true});\n    document.addEventListener('contextmenu',prevent,{passive:false,capture:true});\n    document.addEventListener('copy',prevent,{passive:false,capture:true});\n    document.addEventListener('cut',prevent,{passive:false,capture:true});\n    document.addEventListener('paste',prevent,{passive:false,capture:true});\n    document.addEventListener('dragstart',prevent,{passive:false,capture:true});\n    // Belt-and-suspenders: aggressively clear any attempted selection\n    var clearSel=function(){\n      try{var sel=window.getSelection&&window.getSelection(); if(sel&&sel.removeAllRanges) sel.removeAllRanges();}catch(_){} }\n    document.addEventListener('selectionchange',clearSel,{passive:true,capture:true});\n    document.onselectstart=function(){ clearSel(); return false; };\n    try{ document.documentElement.style.webkitUserSelect='none'; document.documentElement.style.userSelect='none'; }catch(_){ }\n    try{ document.body.style.webkitUserSelect='none'; document.body.style.userSelect='none'; }catch(_){ }\n    var __selTimer = setInterval(clearSel, 160);\n    window.addEventListener('pagehide',function(){ try{ clearInterval(__selTimer); }catch(_){} });\n    // Continuously enforce no-select on all elements and new nodes\n    var enforceNoSelect = function(el){\n      try{\n        el.style && (el.style.webkitUserSelect='none', el.style.userSelect='none', el.style.webkitTouchCallout='none');\n        el.setAttribute && (el.setAttribute('unselectable','on'), el.setAttribute('contenteditable','false'));\n      }catch(_){}\n    }\n    try{\n      var all=document.getElementsByTagName('*');\n      for(var i=0;i<all.length;i++){ enforceNoSelect(all[i]); }\n      var obs = new MutationObserver(function(muts){\n        for(var j=0;j<muts.length;j++){\n          var m=muts[j];\n          if(m.type==='childList'){\n            m.addedNodes && m.addedNodes.forEach && m.addedNodes.forEach(function(n){ if(n && n.nodeType===1){ enforceNoSelect(n); var q=n.getElementsByTagName? n.getElementsByTagName('*'): []; for(var k=0;k<q.length;k++){ enforceNoSelect(q[k]); }}});\n          } else if(m.type==='attributes'){\n            enforceNoSelect(m.target);\n          }\n        }\n      });\n      obs.observe(document.documentElement,{ childList:true, subtree:true, attributes:true, attributeFilter:['contenteditable','style'] });\n    }catch(_){ }\n  } catch(_) {}\n})(); true;\n";
 export declare const injectedNoSelect = "\n(function(){\n  try {\n    if (window.__rkNoSelectApplied) return true;\n    window.__rkNoSelectApplied = true;\n    var style = document.getElementById('rk-no-select-style');\n    if (!style) {\n      style = document.createElement('style');\n      style.id = 'rk-no-select-style';\n      style.innerHTML = \"\n        * {\n          user-select: none !important;\n          -webkit-user-select: none !important;\n          -webkit-touch-callout: none !important;\n        }\n        ::selection {\n          background: transparent !important;\n        }\n      \";\n      document.head.appendChild(style);\n    }\n    var prevent = function(e){ if(e && e.preventDefault) e.preventDefault(); return false; };\n    document.addEventListener('contextmenu', prevent, { passive: false, capture: true });\n    document.addEventListener('selectstart', prevent, { passive: false, capture: true });\n  } catch (_) {}\n  true;\n})();\n";
+export declare const injectedVarsHandler = "\n(function(){\n  try {\n    if (window.__rkVarsHandlerApplied) return true;\n    window.__rkVarsHandlerApplied = true;\n    \n    // Handler function that updates variables and notifies the page\n    window.__rkHandleVarsUpdate = function(vars) {\n      if (!vars || typeof vars !== 'object') return;\n      // Update the global variables object\n      window.__rampkitVariables = vars;\n      // Dispatch a custom event that the page's JS can listen to for re-rendering\n      try {\n        document.dispatchEvent(new CustomEvent('rampkit:vars-updated', { detail: vars }));\n      } catch(e) {}\n      // Also try calling a global handler if the page defined one\n      try {\n        if (typeof window.onRampkitVarsUpdate === 'function') {\n          window.onRampkitVarsUpdate(vars);\n        }\n      } catch(e) {}\n    };\n    \n    // Listen for message events from React Native\n    document.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n    \n    // Also listen on window for compatibility\n    window.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n  } catch (_) {}\n  true;\n})();\n";
 export type ScreenPayload = {
     id: string;
     html: string;

package/build/RampkitOverlay.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectedNoSelect = exports.injectedHardening = void 0;
+exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
 exports.showRampkitOverlay = showRampkitOverlay;
 exports.hideRampkitOverlay = hideRampkitOverlay;
 exports.closeRampkitOverlay = closeRampkitOverlay;
@@ -125,6 +125,54 @@ exports.injectedNoSelect = `
   true;
 })();
 `;
+// Robust variable handler that ensures variables are always received and applied
+// This runs after content loads and sets up listeners for incoming variable updates
+exports.injectedVarsHandler = `
+(function(){
+  try {
+    if (window.__rkVarsHandlerApplied) return true;
+    window.__rkVarsHandlerApplied = true;
+    
+    // Handler function that updates variables and notifies the page
+    window.__rkHandleVarsUpdate = function(vars) {
+      if (!vars || typeof vars !== 'object') return;
+      // Update the global variables object
+      window.__rampkitVariables = vars;
+      // Dispatch a custom event that the page's JS can listen to for re-rendering
+      try {
+        document.dispatchEvent(new CustomEvent('rampkit:vars-updated', { detail: vars }));
+      } catch(e) {}
+      // Also try calling a global handler if the page defined one
+      try {
+        if (typeof window.onRampkitVarsUpdate === 'function') {
+          window.onRampkitVarsUpdate(vars);
+        }
+      } catch(e) {}
+    };
+    
+    // Listen for message events from React Native
+    document.addEventListener('message', function(event) {
+      try {
+        var data = event.data;
+        if (data && data.type === 'rampkit:variables' && data.vars) {
+          window.__rkHandleVarsUpdate(data.vars);
+        }
+      } catch(e) {}
+    }, false);
+    
+    // Also listen on window for compatibility
+    window.addEventListener('message', function(event) {
+      try {
+        var data = event.data;
+        if (data && data.type === 'rampkit:variables' && data.vars) {
+          window.__rkHandleVarsUpdate(data.vars);
+        }
+      } catch(e) {}
+    }, false);
+  } catch (_) {}
+  true;
+})();
+`;
 function performRampkitHaptic(event) {
     if (!event || event.action !== "haptic") {
         // Backwards compatible default
@@ -225,7 +273,7 @@ function preloadRampkitOverlay(opts) {
                 opacity: 0,
                 top: -1000,
                 left: -1000,
-            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
+            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
         preloadSibling = new react_native_root_siblings_1.default((0, jsx_runtime_1.jsx)(HiddenPreloader, {}));
     }
     catch (e) {
@@ -404,11 +452,38 @@ function Overlay(props) {
             .replace(/`/g, "\\`");
         return `(function(){try{document.dispatchEvent(new MessageEvent('message',{data:${json}}));}catch(e){}})();`;
     }
+    // Build a script that directly sets variables and triggers updates
+    // This is more reliable than dispatching events which may not be caught
+    function buildDirectVarsScript(vars) {
+        const json = JSON.stringify(vars)
+            .replace(/\\/g, "\\\\")
+            .replace(/`/g, "\\`");
+        return `(function(){
+      try {
+        var newVars = ${json};
+        // Directly update the global variables object
+        window.__rampkitVariables = newVars;
+        // Call the handler if available
+        if (typeof window.__rkHandleVarsUpdate === 'function') {
+          window.__rkHandleVarsUpdate(newVars);
+        }
+        // Dispatch custom event for any listeners
+        try {
+          document.dispatchEvent(new CustomEvent('rampkit:vars-updated', {detail: newVars}));
+        } catch(e) {}
+        // Call global callback if defined
+        if (typeof window.onRampkitVarsUpdate === 'function') {
+          window.onRampkitVarsUpdate(newVars);
+        }
+      } catch(e) {
+        console.log('[Rampkit] buildDirectVarsScript error:', e);
+      }
+    })();`;
+    }
     function sendVarsToWebView(i, isInitialLoad = false) {
         const wv = webviewsRef.current[i];
         if (!wv)
             return;
-        const payload = { type: "rampkit:variables", vars: varsRef.current };
         if (__DEV__)
             console.log("[Rampkit] sendVarsToWebView", i, varsRef.current, { isInitialLoad });
         // Only update the stale filter timestamp during initial page load,
@@ -418,8 +493,10 @@ function Overlay(props) {
         if (isInitialLoad) {
             lastInitSendRef.current[i] = Date.now();
         }
+        // Use direct variable setting instead of MessageEvent dispatch
+        // This is more reliable as it doesn't depend on event listeners being set up
         // @ts-ignore: injectJavaScript exists on WebView instance
-        wv.injectJavaScript(buildDispatchScript(payload));
+        wv.injectJavaScript(buildDirectVarsScript(varsRef.current));
     }
     function broadcastVars() {
         if (__DEV__)
@@ -427,14 +504,12 @@ function Overlay(props) {
                 recipients: webviewsRef.current.length,
                 vars: varsRef.current,
             });
+        const script = buildDirectVarsScript(varsRef.current);
         for (let i = 0; i < webviewsRef.current.length; i++) {
             const wv = webviewsRef.current[i];
             if (wv) {
                 // @ts-ignore: injectJavaScript exists on WebView instance
-                wv.injectJavaScript(buildDispatchScript({
-                    type: "rampkit:variables",
-                    vars: varsRef.current,
-                }));
+                wv.injectJavaScript(script);
             }
         }
     }
@@ -485,12 +560,20 @@ function Overlay(props) {
         // ensure current page is synced with latest vars when selected
         if (__DEV__)
             console.log("[Rampkit] onPageSelected", pos);
-        // Use requestAnimationFrame to ensure the webview is fully active and ready
-        // to receive injected JS. Without this delay, the first navigation back
-        // to a screen may not properly receive the updated variables.
+        // Send vars multiple times with increasing delays to ensure the webview
+        // receives them. The first send might fail if the webview isn't fully ready,
+        // so we retry a few times.
         requestAnimationFrame(() => {
             sendVarsToWebView(pos);
         });
+        // Retry after a short delay in case the first send didn't work
+        setTimeout(() => {
+            sendVarsToWebView(pos);
+        }, 50);
+        // Final retry to catch any edge cases
+        setTimeout(() => {
+            sendVarsToWebView(pos);
+        }, 150);
         // Track screen change event
         if (props.onScreenChange && props.screens[pos]) {
             props.onScreenChange(pos, props.screens[pos].id);
@@ -571,7 +654,7 @@ function Overlay(props) {
             styles.root,
             !visible && styles.invisible,
             visible && { opacity: overlayOpacity },
-        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
+        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
                             setLoadedCount((c) => c + 1);
                             if (i === 0) {
                                 setFirstPageLoaded(true);
@@ -599,28 +682,22 @@ function Overlay(props) {
                                     typeof data.vars === "object") {
                                     if (__DEV__)
                                         console.log("[Rampkit] received variables from page", i, data.vars);
-                                    const now = Date.now();
-                                    const lastInit = lastInitSendRef.current[i] || 0;
-                                    const filtered = {};
+                                    // Accept all variable updates from pages without filtering.
+                                    // The previous filter was too aggressive and blocked legitimate
+                                    // user interactions that happened within 600ms of page load.
+                                    // We now trust that pages send correct variable updates.
                                     let changed = false;
+                                    const newVars = {};
                                     for (const [key, value] of Object.entries(data.vars)) {
                                         const hasHostVal = Object.prototype.hasOwnProperty.call(varsRef.current, key);
                                         const hostVal = varsRef.current[key];
-                                        if (now - lastInit < 600 &&
-                                            hasHostVal &&
-                                            hostVal !== undefined &&
-                                            value !== hostVal) {
-                                            if (__DEV__)
-                                                console.log("[Rampkit] ignore stale var from page", i, key, value, "kept", hostVal);
-                                            continue;
-                                        }
                                         if (!hasHostVal || hostVal !== value) {
-                                            filtered[key] = value;
+                                            newVars[key] = value;
                                             changed = true;
                                         }
                                     }
                                     if (changed) {
-                                        varsRef.current = { ...varsRef.current, ...filtered };
+                                        varsRef.current = { ...varsRef.current, ...newVars };
                                         broadcastVars();
                                     }
                                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rampkit-expo-dev",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
   "main": "build/index.js",
   "types": "build/index.d.ts",