@builder.io/sdk-react-native 0.0.1-44 → 0.0.1-50

package/src/blocks/custom-code.js

@@ -1,85 +1,55 @@
 import { registerComponent } from '../functions/register-component';
 
-import * as React from 'react';
-import { View } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
+        import * as React from "react";
+import { View } from "react-native";
+import { useState, useRef, useEffect } from "react";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-  function findAndRunScripts() {
-    if (elem.current && typeof window !== 'undefined') {
-      const scripts = elem.current.getElementsByTagName('script');
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn('`CustomCode`: Error running script:', error);
-          }
+const [scriptsInserted, setScriptsInserted] = useState(() => []);
+const [scriptsRun, setScriptsRun] = useState(() => []);
+function findAndRunScripts() {
+  if (elem.current && typeof window !== "undefined") {
+    const scripts = elem.current.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (scriptsInserted.includes(script.src)) {
+          continue;
+        }
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(script.type)) {
+        if (scriptsRun.includes(script.innerText)) {
+          continue;
+        }
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
         }
       }
     }
   }
-  const elem = useRef();
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-  return /* @__PURE__ */ React.createElement(View, {
-    ref: elem,
-    className:
-      'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''),
-    dangerouslySetInnerHTML: { __html: 'props.code' },
-  });
 }
-export { CustomCode as default };
-
-registerComponent(CustomCode, {
-  name: 'Custom Code',
-  static: true,
-  builtIn: true,
-  requiredPermissions: ['editCode'],
-  inputs: [
-    {
-      name: 'code',
-      type: 'html',
-      required: true,
-      defaultValue: '<p>Hello there, I am custom HTML code!</p>',
-      code: true,
-    },
-    {
-      name: 'replaceNodes',
-      type: 'boolean',
-      helperText: 'Preserve server rendered dom nodes',
-      advanced: true,
-    },
-    {
-      name: 'scriptsClientOnly',
-      type: 'boolean',
-      defaultValue: false,
-      helperText:
-        'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
-      advanced: true,
-    },
-  ],
+const elem = useRef();
+useEffect(() => {
+  findAndRunScripts();
+}, []);
+return /* @__PURE__ */ React.createElement(View, {
+  ref: elem,
+  dangerouslySetInnerHTML: { __html: "props.code" }
 });
+}
+export {
+CustomCode as default
+};
+
+
+        registerComponent(CustomCode, {name:'Custom Code',static:true,builtIn:true,requiredPermissions:['editCode'],inputs:[{name:'code',type:'html',required:true,defaultValue:'<p>Hello there, I am custom HTML code!</p>',code:true},{name:'replaceNodes',type:'boolean',helperText:'Preserve server rendered dom nodes',advanced:true},{name:'scriptsClientOnly',type:'boolean',defaultValue:false,helperText:'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',advanced:true}]});

package/src/blocks/custom-code.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useRef, useEffect } from "react";
 
 export default function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -9,9 +9,9 @@ export default function CustomCode(props) {
 
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== 'undefined') {
+    if (elem.current && typeof window !== "undefined") {
       /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName('script');
+      const scripts = elem.current.getElementsByTagName("script");
 
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -22,16 +22,16 @@ export default function CustomCode(props) {
           }
 
           scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
+          const newScript = document.createElement("script");
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
           [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
           ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
@@ -42,7 +42,7 @@ export default function CustomCode(props) {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
           } catch (error) {
-            console.warn('`CustomCode`: Error running script:', error);
+            console.warn("`CustomCode`: Error running script:", error);
           }
         }
       }
@@ -55,13 +55,5 @@ export default function CustomCode(props) {
     findAndRunScripts();
   }, []);
 
-  return (
-    <View
-      ref={elem}
-      className={
-        'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')
-      }
-      dangerouslySetInnerHTML={{ __html: 'props.code' }}
-    />
-  );
+  return <View ref={elem} dangerouslySetInnerHTML={{ __html: "props.code" }} />;
 }

package/src/blocks/embed.js

@@ -1,78 +1,55 @@
 import { registerComponent } from '../functions/register-component';
 
-import * as React from 'react';
-import { View } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
+        import * as React from "react";
+import { View } from "react-native";
+import { useState, useRef, useEffect } from "react";
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-  function findAndRunScripts() {
-    if (elem.current && typeof window !== 'undefined') {
-      const scripts = elem.current.getElementsByTagName('script');
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn('`Embed`: Error running script:', error);
-          }
+const [scriptsInserted, setScriptsInserted] = useState(() => []);
+const [scriptsRun, setScriptsRun] = useState(() => []);
+function findAndRunScripts() {
+  if (elem.current && typeof window !== "undefined") {
+    const scripts = elem.current.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (scriptsInserted.includes(script.src)) {
+          continue;
+        }
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(script.type)) {
+        if (scriptsRun.includes(script.innerText)) {
+          continue;
+        }
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
         }
       }
     }
   }
-  const elem = useRef();
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-  return /* @__PURE__ */ React.createElement(View, {
-    className: 'builder-embed',
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: 'props.content' },
-  });
 }
-export { Embed as default };
-
-registerComponent(Embed, {
-  name: 'Embed',
-  static: true,
-  builtIn: true,
-  inputs: [
-    {
-      name: 'url',
-      type: 'url',
-      required: true,
-      defaultValue: '',
-      helperText: 'e.g. enter a youtube url, google map, etc',
-      onChange:
-        "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      ",
-    },
-    {
-      name: 'content',
-      type: 'html',
-      defaultValue:
-        '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true,
-    },
-  ],
+const elem = useRef();
+useEffect(() => {
+  findAndRunScripts();
+}, []);
+return /* @__PURE__ */ React.createElement(View, {
+  ref: elem,
+  dangerouslySetInnerHTML: { __html: "props.content" }
 });
+}
+export {
+Embed as default
+};
+
+
+        registerComponent(Embed, {name:'Embed',static:true,builtIn:true,inputs:[{name:'url',type:'url',required:true,defaultValue:'',helperText:'e.g. enter a youtube url, google map, etc',onChange:"        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "},{name:'content',type:'html',defaultValue:'<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',hideFromUI:true}]});

package/src/blocks/embed.lite.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useRef, useEffect } from 'react';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useRef, useEffect } from "react";
 
 export default function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -9,9 +9,9 @@ export default function Embed(props) {
 
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== 'undefined') {
+    if (elem.current && typeof window !== "undefined") {
       /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName('script');
+      const scripts = elem.current.getElementsByTagName("script");
 
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -22,16 +22,16 @@ export default function Embed(props) {
           }
 
           scriptsInserted.push(script.src);
-          const newScript = document.createElement('script');
+          const newScript = document.createElement("script");
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
         } else if (
           !script.type ||
           [
-            'text/javascript',
-            'application/javascript',
-            'application/ecmascript',
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
           ].includes(script.type)
         ) {
           if (scriptsRun.includes(script.innerText)) {
@@ -42,7 +42,7 @@ export default function Embed(props) {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
           } catch (error) {
-            console.warn('`Embed`: Error running script:', error);
+            console.warn("`Embed`: Error running script:", error);
           }
         }
       }
@@ -56,10 +56,6 @@ export default function Embed(props) {
   }, []);
 
   return (
-    <View
-      className="builder-embed"
-      ref={elem}
-      dangerouslySetInnerHTML={{ __html: 'props.content' }}
-    />
+    <View ref={elem} dangerouslySetInnerHTML={{ __html: "props.content" }} />
   );
 }