@builder.io/sdk-vue 0.0.1-9 → 0.0.2-0

package/README.md

@@ -0,0 +1,44 @@
+# Builder.io Vue 2.0 SDK (BETA)
+
+This is the 2.0 Vue SDK. It is currently in beta.
+
+NOTE: If you are looking for the stable 1.0 Vue SDK, you can find it [here](/packages/vue)
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Version Support
+
+Legend:
+
+- ✅: implemented
+- 🏗: currently in progress
+- ⚠️: not-yet implemented
+- N/A : does not apply
+
+| Platform | Support |
+| -------- | ------- |
+| Vue 2    | 🏗       |
+| Nuxt 2   | 🏗       |
+| Vue 3    | 🏗       |
+| Nuxt 3   | ✅      |
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-vue@dev
+```
+
+## Usage
+
+You can see examples of using Builder.io:
+
+- with Vue 2 [here](/examples/vue/vue-2/)
+- with Nuxt 2 [here](/examples/vue/nuxt-2/)
+- with Vue Storefront 2 [here](/examples/vue/vue-storefront-2)
+- with Vue 3 [here](/examples/vue/vue-3/)

package/package.json

@@ -1,16 +1,53 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-9",
-  "dependencies": {},
-  "main": "src/index.js",
+  "workspaces": [
+    "packages/*"
+  ],
+  "version": "0.0.2-0",
+  "dependencies": {
+    "node-fetch": "^2.6.1"
+  },
+  "main": "./packages/_vue2/dist/sdk.js",
+  "module": "./packages/_vue2/dist/sdk.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./packages/_vue2/dist/sdk.js",
+      "require": "./packages/_vue2/dist/sdk.cjs"
+    },
+    "./vue2": {
+      "import": "./packages/_vue2/dist/sdk.js",
+      "require": "./packages/_vue2/dist/sdk.cjs"
+    },
+    "./vue3": {
+      "import": "./packages/_vue3/dist/sdk.js",
+      "require": "./packages/_vue3/dist/sdk.cjs"
+    },
+    "./nuxt": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    },
+    "./nuxt2": {
+      "import": "./nuxt.js",
+      "require": "./nuxt.js"
+    }
+  },
   "scripts": {
-    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+    "clear-dist": "rm -rf dist && mkdir dist",
+    "add-debug": "bash ./scripts/add-debug.sh",
+    "remove-debug": "bash ./scripts/remove-debug.sh",
+    "build": "yarn run clear-dist && yarn workspaces foreach run build",
+    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
+    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "peerDependencies": {
     "vue": ">= 2"
   },
   "devDependencies": {
-    "vue": "^2.6.12"
+    "vue": "^2.7"
   }
 }

package/src/blocks/button.js

@@ -1,31 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_button_script = __toModule(require("./button_script"));
-var import_button_styles = __toModule(require("./button_styles"));
-var import_register_component = __toModule(require("../functions/register-component"));
-(0, import_register_component.registerComponent)(import_button_script.default, { name: "Core:Button", image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13", defaultStyles: { appearance: "none", paddingTop: "15px", paddingBottom: "15px", paddingLeft: "25px", paddingRight: "25px", backgroundColor: "#3898EC", color: "white", borderRadius: "4px", textAlign: "center", cursor: "pointer" }, inputs: [{ name: "text", type: "text", defaultValue: "Click me!", bubble: true }, { name: "link", type: "url", bubble: true }, { name: "openLinkInNewTab", type: "boolean", defaultValue: false, friendlyName: "Open link in new tab" }], static: true, noWrap: true });
-var stdin_default = import_button_script.default;

package/src/blocks/button.original.vue

@@ -1,48 +0,0 @@
-<template>
-  
-  
-<template v-if="link">
-  
-    
-<a v-bind="attributes" :href="link"  :target="openLinkInNewTab ? '_blank' : undefined" >
-      {{text}}
-    </a>
-
-  
-</template>
-
-  
-<template v-if="!link">
-  
-    
-<button v-bind="attributes" type="button" >
-      {{text}}
-    </button>
-
-  
-</template>
-
-
-</template>
-<script>
-  
-
-
-
-
-  export default {
-    name: 'Button',
-    
-    props: ["link","attributes","openLinkInNewTab","text"],
-    
-
-    
-    
-
-    
-    
-
-    
-    
-  }
-</script>

package/src/blocks/button_script.js

@@ -1,21 +0,0 @@
-var __defProp = Object.defineProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var stdin_default = {
-  render: function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _vm.link ? [_c("a", _vm._b({ attrs: { "href": _vm.link, "target": _vm.openLinkInNewTab ? "_blank" : void 0 } }, "a", _vm.attributes, false), [_vm._v("\n      " + _vm._s(_vm.text) + "\n    ")])] : _vm._e();
-  },
-  staticRenderFns: [],
-  name: "Button",
-  props: ["link", "attributes", "openLinkInNewTab", "text"]
-};

package/src/blocks/columns.js

@@ -1,31 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_columns_script = __toModule(require("./columns_script"));
-var import_columns_styles = __toModule(require("./columns_styles"));
-var import_register_component = __toModule(require("../functions/register-component"));
-(0, import_register_component.registerComponent)(import_columns_script.default, { name: "Columns", inputs: [{ name: "columns", type: "array", broadcast: true, subFields: [{ name: "blocks", type: "array", hideFromUI: true, defaultValue: [{ "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto", minHeight: "20px", minWidth: "20px", overflow: "hidden" } }, component: { name: "Image", options: { image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d", backgroundPosition: "center", backgroundSize: "cover", aspectRatio: 0.7004048582995948 } } }, { "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto" } }, component: { name: "Text", options: { text: "<p>Enter some text...</p>" } } }] }, { name: "width", type: "number", hideFromUI: true, helperText: "Width %, e.g. set to 50 to fill half of the space" }, { name: "link", type: "url", helperText: "Optionally set a url that clicking this column will link to" }], defaultValue: [{ blocks: [{ "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto", minHeight: "20px", minWidth: "20px", overflow: "hidden" } }, component: { name: "Image", options: { image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d", backgroundPosition: "center", backgroundSize: "cover", aspectRatio: 0.7004048582995948 } } }, { "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto" } }, component: { name: "Text", options: { text: "<p>Enter some text...</p>" } } }] }, { blocks: [{ "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto", minHeight: "20px", minWidth: "20px", overflow: "hidden" } }, component: { name: "Image", options: { image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d", backgroundPosition: "center", backgroundSize: "cover", aspectRatio: 0.7004048582995948 } } }, { "@type": "@builder.io/sdk:Element", responsiveStyles: { large: { display: "flex", flexDirection: "column", alignItems: "stretch", flexShrink: "0", position: "relative", marginTop: "30px", textAlign: "center", lineHeight: "normal", height: "auto" } }, component: { name: "Text", options: { text: "<p>Enter some text...</p>" } } }] }], onChange: "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      " }, { name: "space", type: "number", defaultValue: 20, helperText: "Size of gap between columns", advanced: true }, { name: "stackColumnsAt", type: "string", defaultValue: "tablet", helperText: "Convert horizontal columns to vertical at what device size", enum: ["tablet", "mobile", "never"], advanced: true }, { name: "reverseColumnsWhenStacked", type: "boolean", defaultValue: false, helperText: "When stacking columns for mobile devices, reverse the ordering", advanced: true }] });
-var stdin_default = import_columns_script.default;

package/src/blocks/columns.original.vue

@@ -1,59 +0,0 @@
-<template>
-    <div  class="builder-columns div" >
-    <template :key="index" v-for="(column, index) in columns">
-    <div  class="builder-column div-2"  :style="{
-width: getColumnCssWidth(index),
-marginLeft: index === 0 ? 0 : getGutterSize()
-}" >
-          <RenderBlocks  :blocks="column.blocks" ></RenderBlocks>
-        </div>
-  </template>
-  </div>
-  </template>
-  <script>
-    
-  import  RenderBlocks,  {  }  from '../components/render-blocks.lite';
-
-  
-
-
-    export default {
-      name: 'Columns',
-      components: { RenderBlocks },
-      props: ["space","columns"],
-      
-      data: () => ({RenderBlocks}),
-      
-
-      
-      
-
-      
-      
-
-      
-      
-        methods: { getGutterSize() {
-return typeof this.space === 'number' ? this.space || 0 : 20;
-} , getColumns() {
-return this.columns || [];
-} , getWidth(index) {
-const columns = this.getColumns();
-return columns[index] && columns[index].width || 100 / columns.length;
-} , getColumnCssWidth(index) {
-const columns = this.getColumns();
-const gutterSize = this.getGutterSize();
-const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-} ,},
-      
-    }
-  </script>
-  <style>
-    .div { 
-display: flex;
-flex-direction: column;
-align-items: stretch;
-line-height: normal; }.div-2 { 
-flex-grow: 1; }
-  </style>

package/src/blocks/columns_script.js

@@ -1,58 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_render_blocks = __toModule(require("../components/render-blocks"));
-var stdin_default = {
-  render: function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", { staticClass: "builder-columns div" }, [_vm._l(_vm.columns, function(column, index) {
-      return [_c("div", { staticClass: "builder-column div-2", style: {
-        width: _vm.getColumnCssWidth(index),
-        marginLeft: index === 0 ? 0 : _vm.getGutterSize()
-      } }, [_c("renderblocks", { attrs: { "blocks": column.blocks } })], 1)];
-    })], 2);
-  },
-  staticRenderFns: [],
-  name: "Columns",
-  components: { RenderBlocks: import_render_blocks.default },
-  props: ["space", "columns"],
-  data: () => ({ RenderBlocks: import_render_blocks.default }),
-  methods: { getGutterSize() {
-    return typeof this.space === "number" ? this.space || 0 : 20;
-  }, getColumns() {
-    return this.columns || [];
-  }, getWidth(index) {
-    const columns = this.getColumns();
-    return columns[index] && columns[index].width || 100 / columns.length;
-  }, getColumnCssWidth(index) {
-    const columns = this.getColumns();
-    const gutterSize = this.getGutterSize();
-    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-  } }
-};

package/src/blocks/columns_styles.js

@@ -1,14 +0,0 @@
-const id = "98o8q0q8zt";
-if (typeof document !== "undefined") {
-  if (!document.getElementById(id)) {
-    const style = document.createElement("style");
-    style.id = id;
-    style.innerHTML = `.div { 
-display: flex;
-flex-direction: column;
-align-items: stretch;
-line-height: normal; }.div-2 { 
-flex-grow: 1; }`;
-    document.head.appendChild(style);
-  }
-}

package/src/blocks/custom-code.js

@@ -1,31 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_custom_code_script = __toModule(require("./custom-code_script"));
-var import_custom_code_styles = __toModule(require("./custom-code_styles"));
-var import_register_component = __toModule(require("../functions/register-component"));
-(0, import_register_component.registerComponent)(import_custom_code_script.default, { name: "Custom Code", static: 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 }] });
-var stdin_default = import_custom_code_script.default;

package/src/blocks/custom-code.original.vue

@@ -1,72 +0,0 @@
-<template>
-    <div  ref="elem"  :class="_classStringToObject('builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''))"  v-html="code" ></div>
-  </template>
-  <script>
-    
-  
-  
-
-
-    export default {
-      name: 'CustomCode',
-      
-      props: ["replaceNodes","code"],
-      
-      data: () => ({  scriptsInserted: [],   scriptsRun: [], }),
-      
-
-      
-      
-
-      mounted() {
-              this.findAndRunScripts()
-            },
-      
-
-      
-      
-        methods: { findAndRunScripts() {
-// TODO: Move this function to standalone one in '@builder.io/utils'
-if (this.$refs.elem && typeof window !== 'undefined') {
-  /** @type {HTMLScriptElement[]} */
-  const scripts = this.$refs.elem.getElementsByTagName('script');
-
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-
-    if (script.src) {
-      if (this.scriptsInserted.includes(script.src)) {
-        continue;
-      }
-
-      this.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 (this.scriptsRun.includes(script.innerText)) {
-        continue;
-      }
-
-      try {
-        this.scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn('`CustomCode`: Error running script:', error);
-      }
-    }
-  }
-}
-} ,_classStringToObject(str) {
-      const obj = {};
-      if (typeof str !== 'string') { return obj }
-      const classNames = str.trim().split(/\s+/); 
-      for (const name of classNames) {
-        obj[name] = true;
-      } 
-      return obj;
-    }  },
-      
-    }
-  </script>

package/src/blocks/custom-code_script.js

@@ -1,63 +0,0 @@
-var __defProp = Object.defineProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var stdin_default = {
-  render: function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", { ref: "elem", class: _vm._classStringToObject("builder-custom-code" + (_vm.props.replaceNodes ? " replace-nodes" : "")), domProps: { "innerHTML": _vm._s(_vm.code) } });
-  },
-  staticRenderFns: [],
-  name: "CustomCode",
-  props: ["replaceNodes", "code"],
-  data: () => ({ scriptsInserted: [], scriptsRun: [] }),
-  mounted() {
-    this.findAndRunScripts();
-  },
-  methods: { findAndRunScripts() {
-    if (this.$refs.elem && typeof window !== "undefined") {
-      const scripts = this.$refs.elem.getElementsByTagName("script");
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (this.scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          this.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 (this.scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            this.scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
-          }
-        }
-      }
-    }
-  }, _classStringToObject(str) {
-    const obj = {};
-    if (typeof str !== "string") {
-      return obj;
-    }
-    const classNames = str.trim().split(/\s+/);
-    for (const name of classNames) {
-      obj[name] = true;
-    }
-    return obj;
-  } }
-};

package/src/blocks/embed.js

@@ -1,31 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_embed_script = __toModule(require("./embed_script"));
-var import_embed_styles = __toModule(require("./embed_styles"));
-var import_register_component = __toModule(require("../functions/register-component"));
-(0, import_register_component.registerComponent)(import_embed_script.default, { name: "Embed", static: 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 }] });
-var stdin_default = import_embed_script.default;

package/src/blocks/embed.original.vue

@@ -1,64 +0,0 @@
-<template>
-    <div  class="builder-embed"  ref="elem"  v-html="content" ></div>
-  </template>
-  <script>
-    
-  
-  
-
-
-    export default {
-      name: 'Embed',
-      
-      props: ["content"],
-      
-      data: () => ({  scriptsInserted: [],   scriptsRun: [], }),
-      
-
-      
-      
-
-      mounted() {
-              this.findAndRunScripts()
-            },
-      
-
-      
-      
-        methods: { findAndRunScripts() {
-// TODO: Move this function to standalone one in '@builder.io/utils'
-if (this.$refs.elem && typeof window !== 'undefined') {
-  /** @type {HTMLScriptElement[]} */
-  const scripts = this.$refs.elem.getElementsByTagName('script');
-
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-
-    if (script.src) {
-      if (this.scriptsInserted.includes(script.src)) {
-        continue;
-      }
-
-      this.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 (this.scriptsRun.includes(script.innerText)) {
-        continue;
-      }
-
-      try {
-        this.scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn('`Embed`: Error running script:', error);
-      }
-    }
-  }
-}
-} ,},
-      
-    }
-  </script>