rampkit-expo-dev 0.0.28 → 0.0.30

package/build/RampkitOverlay.d.ts

@@ -2,7 +2,7 @@ import { RampKitContext } from "./types";
 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 declare const injectedTemplateResolver = "\n(function(){\n  try {\n    if (window.__rkTemplateResolverApplied) return true;\n    window.__rkTemplateResolverApplied = true;\n    \n    // Build variable map from context\n    function buildVarMap() {\n      var vars = {};\n      var ctx = window.rampkitContext || { device: {}, user: {} };\n      var state = window.__rampkitVariables || {};\n      \n      // Device vars (device.xxx)\n      if (ctx.device) {\n        Object.keys(ctx.device).forEach(function(key) {\n          vars['device.' + key] = ctx.device[key];\n        });\n      }\n      \n      // User vars (user.xxx)\n      if (ctx.user) {\n        Object.keys(ctx.user).forEach(function(key) {\n          vars['user.' + key] = ctx.user[key];\n        });\n      }\n      \n      // State vars (varName - no prefix)\n      Object.keys(state).forEach(function(key) {\n        vars[key] = state[key];\n      });\n      \n      return vars;\n    }\n    \n    // Format a value for display\n    function formatValue(value) {\n      if (value === undefined || value === null) return '';\n      if (typeof value === 'boolean') return value ? 'true' : 'false';\n      if (typeof value === 'object') return JSON.stringify(value);\n      return String(value);\n    }\n    \n    // Resolve templates in a single text node\n    function resolveTextNode(node, vars) {\n      var text = node.textContent;\n      if (!text || text.indexOf('${') === -1) return;\n      \n      var resolved = text.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {\n        if (vars.hasOwnProperty(varName)) {\n          return formatValue(vars[varName]);\n        }\n        return match; // Keep original if var not found\n      });\n      \n      if (resolved !== text) {\n        node.textContent = resolved;\n      }\n    }\n    \n    // Resolve templates in all text nodes\n    function resolveAllTemplates() {\n      var vars = buildVarMap();\n      var walker = document.createTreeWalker(\n        document.body,\n        NodeFilter.SHOW_TEXT,\n        null,\n        false\n      );\n      \n      var node;\n      while (node = walker.nextNode()) {\n        resolveTextNode(node, vars);\n      }\n      \n      // Also resolve in attribute values that might contain templates\n      var allElements = document.body.getElementsByTagName('*');\n      for (var i = 0; i < allElements.length; i++) {\n        var el = allElements[i];\n        for (var j = 0; j < el.attributes.length; j++) {\n          var attr = el.attributes[j];\n          if (attr.value && attr.value.indexOf('${') !== -1) {\n            var resolvedAttr = attr.value.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {\n              if (vars.hasOwnProperty(varName)) {\n                return formatValue(vars[varName]);\n              }\n              return match;\n            });\n            if (resolvedAttr !== attr.value) {\n              el.setAttribute(attr.name, resolvedAttr);\n            }\n          }\n        }\n      }\n    }\n    \n    // Run on DOMContentLoaded\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', resolveAllTemplates);\n    } else {\n      // DOM already ready, run immediately\n      resolveAllTemplates();\n    }\n    \n    // Also run after a short delay to catch dynamically added content\n    setTimeout(resolveAllTemplates, 100);\n    \n    // Expose for manual re-resolution\n    window.rampkitResolveTemplates = resolveAllTemplates;\n    \n    // Re-resolve when variables update\n    document.addEventListener('rampkit:vars-updated', function() {\n      setTimeout(resolveAllTemplates, 0);\n    });\n    \n  } catch(e) {\n    console.log('[Rampkit] Template resolver error:', e);\n  }\n  true;\n})();\n";
+export declare const injectedTemplateResolver: string;
 export type ScreenPayload = {
     id: string;
     html: string;

package/build/RampkitOverlay.js

@@ -174,127 +174,83 @@ exports.injectedVarsHandler = `
 })();
 `;
 // Template resolution script that replaces ${device.xxx} and ${user.xxx} with actual values
-// This runs on DOMContentLoaded and can be re-triggered via window.rampkitResolveTemplates()
-exports.injectedTemplateResolver = `
-(function(){
-  try {
-    if (window.__rkTemplateResolverApplied) return true;
-    window.__rkTemplateResolverApplied = true;
-    
-    // Build variable map from context
-    function buildVarMap() {
-      var vars = {};
-      var ctx = window.rampkitContext || { device: {}, user: {} };
-      var state = window.__rampkitVariables || {};
-      
-      // Device vars (device.xxx)
-      if (ctx.device) {
-        Object.keys(ctx.device).forEach(function(key) {
-          vars['device.' + key] = ctx.device[key];
-        });
-      }
-      
-      // User vars (user.xxx)
-      if (ctx.user) {
-        Object.keys(ctx.user).forEach(function(key) {
-          vars['user.' + key] = ctx.user[key];
-        });
-      }
-      
-      // State vars (varName - no prefix)
-      Object.keys(state).forEach(function(key) {
-        vars[key] = state[key];
-      });
-      
-      return vars;
-    }
-    
-    // Format a value for display
-    function formatValue(value) {
-      if (value === undefined || value === null) return '';
-      if (typeof value === 'boolean') return value ? 'true' : 'false';
-      if (typeof value === 'object') return JSON.stringify(value);
-      return String(value);
-    }
-    
-    // Resolve templates in a single text node
-    function resolveTextNode(node, vars) {
-      var text = node.textContent;
-      if (!text || text.indexOf('\${') === -1) return;
-      
-      var resolved = text.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {
-        if (vars.hasOwnProperty(varName)) {
-          return formatValue(vars[varName]);
-        }
-        return match; // Keep original if var not found
-      });
-      
-      if (resolved !== text) {
-        node.textContent = resolved;
-      }
-    }
-    
-    // Resolve templates in all text nodes
-    function resolveAllTemplates() {
-      var vars = buildVarMap();
-      var walker = document.createTreeWalker(
-        document.body,
-        NodeFilter.SHOW_TEXT,
-        null,
-        false
-      );
-      
-      var node;
-      while (node = walker.nextNode()) {
-        resolveTextNode(node, vars);
-      }
-      
-      // Also resolve in attribute values that might contain templates
-      var allElements = document.body.getElementsByTagName('*');
-      for (var i = 0; i < allElements.length; i++) {
-        var el = allElements[i];
-        for (var j = 0; j < el.attributes.length; j++) {
-          var attr = el.attributes[j];
-          if (attr.value && attr.value.indexOf('\${') !== -1) {
-            var resolvedAttr = attr.value.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {
-              if (vars.hasOwnProperty(varName)) {
-                return formatValue(vars[varName]);
-              }
-              return match;
-            });
-            if (resolvedAttr !== attr.value) {
-              el.setAttribute(attr.name, resolvedAttr);
-            }
-          }
-        }
-      }
-    }
-    
-    // Run on DOMContentLoaded
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', resolveAllTemplates);
-    } else {
-      // DOM already ready, run immediately
-      resolveAllTemplates();
-    }
-    
-    // Also run after a short delay to catch dynamically added content
-    setTimeout(resolveAllTemplates, 100);
-    
-    // Expose for manual re-resolution
-    window.rampkitResolveTemplates = resolveAllTemplates;
-    
-    // Re-resolve when variables update
-    document.addEventListener('rampkit:vars-updated', function() {
-      setTimeout(resolveAllTemplates, 0);
-    });
-    
-  } catch(e) {
-    console.log('[Rampkit] Template resolver error:', e);
-  }
-  true;
-})();
-`;
+// Built using string concatenation to avoid template literal escaping issues
+exports.injectedTemplateResolver = [
+    "(function(){",
+    "  try {",
+    "    if (window.__rkTemplateResolverApplied) return true;",
+    "    window.__rkTemplateResolverApplied = true;",
+    "    ",
+    "    console.log('[Rampkit] Template resolver starting...');",
+    "    console.log('[Rampkit] rampkitContext:', JSON.stringify(window.rampkitContext));",
+    "    ",
+    "    function buildVarMap() {",
+    "      var vars = {};",
+    "      var ctx = window.rampkitContext || { device: {}, user: {} };",
+    "      var state = window.__rampkitVariables || {};",
+    "      if (ctx.device) {",
+    "        Object.keys(ctx.device).forEach(function(key) {",
+    "          vars['device.' + key] = ctx.device[key];",
+    "        });",
+    "      }",
+    "      if (ctx.user) {",
+    "        Object.keys(ctx.user).forEach(function(key) {",
+    "          vars['user.' + key] = ctx.user[key];",
+    "        });",
+    "      }",
+    "      Object.keys(state).forEach(function(key) {",
+    "        vars[key] = state[key];",
+    "      });",
+    "      console.log('[Rampkit] Variable map:', JSON.stringify(vars));",
+    "      return vars;",
+    "    }",
+    "    ",
+    "    function formatValue(value) {",
+    "      if (value === undefined || value === null) return '';",
+    "      if (typeof value === 'boolean') return value ? 'true' : 'false';",
+    "      if (typeof value === 'object') return JSON.stringify(value);",
+    "      return String(value);",
+    "    }",
+    "    ",
+    "    function resolveAllTemplates() {",
+    "      console.log('[Rampkit] Resolving templates...');",
+    "      var vars = buildVarMap();",
+    "      var pattern = /\\$\\{([A-Za-z_][A-Za-z0-9_.]*)\\}/g;",
+    "      var bodyHtml = document.body.innerHTML;",
+    "      var marker = String.fromCharCode(36, 123);", // $ = 36, { = 123
+    "      var hasTemplates = bodyHtml.indexOf(marker) !== -1;",
+    "      console.log('[Rampkit] Body has templates:', hasTemplates);",
+    "      if (hasTemplates) {",
+    "        var newHtml = bodyHtml.replace(pattern, function(match, varName) {",
+    "          console.log('[Rampkit] Found template:', match, 'varName:', varName);",
+    "          if (vars.hasOwnProperty(varName)) {",
+    "            var value = formatValue(vars[varName]);",
+    "            console.log('[Rampkit] Replacing with:', value);",
+    "            return value;",
+    "          }",
+    "          console.log('[Rampkit] No value found for:', varName);",
+    "          return match;",
+    "        });",
+    "        if (newHtml !== bodyHtml) {",
+    "          document.body.innerHTML = newHtml;",
+    "          console.log('[Rampkit] Templates resolved!');",
+    "        }",
+    "      }",
+    "    }",
+    "    ",
+    "    setTimeout(resolveAllTemplates, 50);",
+    "    setTimeout(resolveAllTemplates, 200);",
+    "    window.rampkitResolveTemplates = resolveAllTemplates;",
+    "    document.addEventListener('rampkit:vars-updated', function() {",
+    "      setTimeout(resolveAllTemplates, 0);",
+    "    });",
+    "    console.log('[Rampkit] Template resolver initialized');",
+    "  } catch(e) {",
+    "    console.log('[Rampkit] Template resolver error:', e);",
+    "  }",
+    "  true;",
+    "})();",
+].join("\n");
 function performRampkitHaptic(event) {
     if (!event || event.action !== "haptic") {
         // Backwards compatible default

package/package.json

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