@builder.io/sdk-svelte 0.0.1-21 → 0.0.1-22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-21",
+  "version": "0.0.1-22",
   "type": "module",
   "files": [
     "src"

package/src/blocks/embed/component-info.js

@@ -9,7 +9,26 @@ const componentInfo = {
       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');        }      "
+      onChange: (options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          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",

package/src/blocks/embed/embed.svelte

@@ -1,45 +1,29 @@
 <script>
-  import { onMount } from "svelte";
+  import { afterUpdate } from "svelte";
+
+  import { isJsScript } from "./helpers";
 
   export let elem;
   export let content;
 
   const findAndRunScripts = function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem && typeof window !== "undefined") {
-      const scripts = elem.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 scripts = elem.getElementsByTagName("script");
+
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+
+      if (script.src && !scriptsInserted.includes(script.src)) {
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
         }
       }
     }
@@ -47,10 +31,15 @@
 
   let scriptsInserted = [];
   let scriptsRun = [];
+  let ranInitFn = false;
 
-  onMount(() => {
-    findAndRunScripts();
-  });
+  function onUpdateFn_0() {
+    if (elem && !ranInitFn) {
+      ranInitFn = true;
+      findAndRunScripts();
+    }
+  }
+  $: onUpdateFn_0(...[elem, ranInitFn]);
 </script>
 
 <div class="builder-embed" bind:this={elem}>{@html content}</div>

package/src/blocks/embed/helpers.js

@@ -0,0 +1,9 @@
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};

package/src/blocks/symbol/symbol.svelte

@@ -35,14 +35,7 @@
       });
     }
   }
-  $: onUpdateFn_0(
-    ...[
-      props.symbol?.content,
-      props.symbol?.model,
-      props.symbol?.entry,
-      state.content,
-    ]
-  );
+  $: onUpdateFn_0(...[symbol?.content, symbol?.model, symbol?.entry, content]);
 </script>
 
 <div

package/src/blocks/video/video.svelte

@@ -29,7 +29,7 @@
     borderRadius: 1,
   }}
   preload="none"
-  key={video || "no-src"}
+  src={video || "no-src"}
   poster={posterImage}
   {autoPlay}
   {muted}

package/src/constants/builder-registered-components.js

@@ -30,6 +30,8 @@ import { componentInfo as textComponentInfo } from "../blocks/text/component-inf
 import { default as Text } from "../blocks/text/text.svelte";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
 import { default as Video } from "../blocks/video/video.svelte";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
+import { default as embed } from "../blocks/embed/embed.svelte";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
@@ -38,7 +40,8 @@ const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Symbol }, symbolComponentInfo),
   __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
+  __spreadValues({ component: embed }, embedComponentInfo)
 ];
 export {
   getDefaultRegisteredComponents

package/src/functions/register-component.js

@@ -29,7 +29,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
   components.push(__spreadValues({ component }, info));
@@ -38,31 +37,24 @@ function registerComponent(component, info) {
 }
 const createRegisterComponentMessage = (_a) => {
   var _b = _a, {
-    component
+    component: _
   } = _b, info = __objRest(_b, [
     "component"
   ]);
   return {
     type: "builder.registerComponent",
-    data: prepareComponentInfoToSend(fastClone(info))
+    data: prepareComponentInfoToSend(info)
   };
 };
-function prepareComponentInfoToSend(info) {
-  return __spreadValues(__spreadValues({}, info), info.inputs && {
-    inputs: info.inputs.map((input) => {
-      const keysToConvertFnToString = ["onChange", "showIf"];
-      for (const key of keysToConvertFnToString) {
-        const fn = input[key];
-        if (fn && typeof fn === "function") {
-          input = __spreadProps(__spreadValues({}, input), {
-            [key]: `return (${fn.toString()}).apply(this, arguments)`
-          });
-        }
-      }
-      return input;
-    })
+const serializeFn = (fn) => `return (${fn.toString()}).apply(this, arguments)`;
+const prepareComponentInfoToSend = (info) => {
+  var _a;
+  return __spreadProps(__spreadValues({}, info), {
+    inputs: (_a = info.inputs) == null ? void 0 : _a.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: typeof value === "function" ? serializeFn(value) : value
+    }), {}))
   });
-}
+};
 export {
   components,
   createRegisterComponentMessage,

package/src/functions/fast-clone.js

@@ -1,4 +0,0 @@
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-export {
-  fastClone
-};