@builder.io/sdk-vue 0.0.1-53 → 0.0.1-56

package/CHANGELOG.md

@@ -1,6 +1,16 @@
+### 0.0.1-54
+
+🐛 Fix: custom components were not rendering correctly
+🐛 Fix: Image component's `srcSet` was not being set correctly
+
+### 0.0.1-52
+
+🧨 Breaking change: the format of the `customComponents` prop has changed from `[{ component, info }]` to `[{ component, ...info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
 ### 0.0.1-51
 
-⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated. 
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
 To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
 See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
 
@@ -11,6 +21,7 @@ See [builder-registered-components.ts](/packages/sdks/src/constants/builder-regi
 - feat: 🎸 Add support for Data Bindings https://github.com/BuilderIO/builder/pull/970
 
 - BREAKING CHANGE: 🧨 RenderContent must now be provided the `apiKey` as a prop (https://github.com/BuilderIO/builder/pull/951)
+
 ### 0.0.1-49
 
 - Fix: show the "+ add block" button on empty pages https://github.com/BuilderIO/builder/pull/934

package/README.md

@@ -4,6 +4,10 @@ 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).

package/nuxt.js

@@ -18,7 +18,7 @@ export default function () {
     dirs.push({
       path: join(__dirname, 'nuxt2/src/blocks'),
       prefix: 'builder',
-      pattern: "**/index.*",
+      pattern: '**/index.*',
     });
   });
 }

package/package.json

@@ -1,17 +1,34 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-53",
+  "version": "0.0.1-56",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },
-  "main": "./nuxt2/src/index.js",
+  "main": "./vue2/src/index.js",
+  "module": "./vue2/src/index.js",
   "type": "module",
   "exports": {
-    "./nuxt": "./nuxt.js",
-    "./vue2": "./vue2/src/index.js",
-    "./nuxt2": "./nuxt2/src/index.js",
-    "./vue3": "./vue3/src/index.js"
+    ".": {
+      "import": "./vue2/src/index.js",
+      "require": "./vue2/src/index.js"
+    },
+    "./vue2": {
+      "import": "./vue2/src/index.js",
+      "require": "./vue2/src/index.js"
+    },
+    "./vue3": {
+      "import": "./vue3/src/index.js",
+      "require": "./vue3/src/index.js"
+    },
+    "./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"

package/vue2/src/blocks/button/button.vue

@@ -0,0 +1,19 @@
+<template>
+  <a
+    v-bind="attributes"
+    role="button"
+    v-if="link"
+    :href="link"
+    :target="openLinkInNewTab ? '_blank' : undefined"
+  >
+    {{ text }}
+  </a>
+  <span v-bind="attributes" v-else="">{{ text }}</span>
+</template>
+<script>
+export default {
+  name: "builder-button",
+
+  props: ["attributes", "text", "link", "openLinkInNewTab"],
+};
+</script>

package/vue2/src/blocks/button/component-info.js

@@ -1,13 +1,3 @@
-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, {
-  componentInfo: () => componentInfo
-});
 const componentInfo = {
   name: "Core:Button",
   builtIn: true,
@@ -46,3 +36,6 @@ const componentInfo = {
   static: true,
   noWrap: true
 };
+export {
+  componentInfo
+};

package/vue2/src/blocks/columns/columns.lite.tsx

@@ -0,0 +1,107 @@
+<template>
+  <div class="builder-columns div-t9spj7joih" :style="columnsCssVars">
+    <div
+      class="builder-column div-t9spj7joih-2"
+      v-for="(column, index) in columns"
+      :style="{
+        width: getColumnCssWidth(index),
+        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...columnCssVars,
+      }"
+      :key="index"
+    >
+      <render-blocks :blocks="column.blocks"></render-blocks>
+    </div>
+  </div>
+</template>
+<script>
+const RenderBlocks = () => import("../../components/render-blocks.vue");
+
+export default {
+  name: "builder-columns",
+  components: { "render-blocks": RenderBlocks },
+  props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
+
+  computed: {
+    columnsCssVars() {
+      const flexDir =
+        this.stackColumnsAt === "never"
+          ? "inherit"
+          : this.reverseColumnsWhenStacked
+          ? "column-reverse"
+          : "column";
+      return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
+      };
+    },
+    columnCssVars() {
+      const width = "100%";
+      const marginLeft = "0";
+      return {
+        "--column-width": width,
+        "--column-margin-left": marginLeft,
+        "--column-width-tablet": this.maybeApplyForTablet(width),
+        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
+      };
+    },
+  },
+
+  methods: {
+    getGutterSize() {
+      return typeof this.space === "number" ? this.space || 0 : 20;
+    },
+    getColumns() {
+      return this.columns || [];
+    },
+    getWidth(index) {
+      const columns = this.getColumns();
+      return 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)`;
+    },
+    maybeApplyForTablet(prop) {
+      const _stackColumnsAt = this.stackColumnsAt || "tablet";
+
+      return _stackColumnsAt === "tablet" ? prop : "inherit";
+    },
+  },
+};
+</script>
+<style scoped>
+.div-t9spj7joih {
+  display: flex;
+  align-items: stretch;
+  line-height: normal;
+}
+@media (max-width: 999px) {
+  .div-t9spj7joih {
+    flex-direction: var(--flex-dir-tablet);
+  }
+}
+@media (max-width: 639px) {
+  .div-t9spj7joih {
+    flex-direction: var(--flex-dir);
+  }
+}
+.div-t9spj7joih-2 {
+  flex-grow: 1;
+}
+@media (max-width: 999px) {
+  .div-t9spj7joih-2 {
+    width: var(--column-width-tablet) !important;
+    margin-left: var(--column-margin-left-tablet) !important;
+  }
+}
+@media (max-width: 639px) {
+  .div-t9spj7joih-2 {
+    width: var(--column-width) !important;
+    margin-left: var(--column-margin-left) !important;
+  }
+}
+</style>

package/{nuxt2 → vue2}/src/blocks/columns/columns.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-4wbls88y960" :style="columnsCssVars">
+  <div class="builder-columns div-t9spj7joih" :style="columnsCssVars">
     <div
-      class="builder-column div-4wbls88y960-2"
+      class="builder-column div-t9spj7joih-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -15,11 +15,11 @@
   </div>
 </template>
 <script>
-import RenderBlocks from "../../components/render-blocks";
+const RenderBlocks = () => import("../../components/render-blocks.vue");
 
 export default {
   name: "builder-columns",
-  components: { "render-blocks": async () => RenderBlocks },
+  components: { "render-blocks": RenderBlocks },
   props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
 
   computed: {
@@ -74,32 +74,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-4wbls88y960 {
+.div-t9spj7joih {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-4wbls88y960 {
+  .div-t9spj7joih {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-4wbls88y960 {
+  .div-t9spj7joih {
     flex-direction: var(--flex-dir);
   }
 }
-.div-4wbls88y960-2 {
+.div-t9spj7joih-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-4wbls88y960-2 {
+  .div-t9spj7joih-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-4wbls88y960-2 {
+  .div-t9spj7joih-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue2/src/blocks/columns/component-info.js

@@ -1,13 +1,3 @@
-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, {
-  componentInfo: () => componentInfo
-});
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -222,3 +212,6 @@ const componentInfo = {
     }
   ]
 };
+export {
+  componentInfo
+};

package/vue2/src/blocks/custom-code/component-info.js

@@ -1,13 +1,3 @@
-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, {
-  componentInfo: () => componentInfo
-});
 const componentInfo = {
   name: "Custom Code",
   static: true,
@@ -36,3 +26,6 @@ const componentInfo = {
     }
   ]
 };
+export {
+  componentInfo
+};

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

@@ -0,0 +1,78 @@
+<template>
+  <div
+    ref="elem"
+    :class="
+      _classStringToObject(
+        'builder-custom-code' + (this.replaceNodes ? ' replace-nodes' : '')
+      )
+    "
+    v-html="code"
+  ></div>
+</template>
+<script>
+export default {
+  name: "builder-custom-code",
+
+  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") {
+        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/{nuxt2 → vue2}/src/blocks/custom-code/custom-code.vue

@@ -25,7 +25,6 @@ export default {
     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++) {

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

@@ -1,13 +1,3 @@
-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, {
-  componentInfo: () => componentInfo
-});
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -29,3 +19,6 @@ const componentInfo = {
     }
   ]
 };
+export {
+  componentInfo
+};

package/vue2/src/blocks/embed/embed.lite.tsx

@@ -0,0 +1,59 @@
+<template>
+  <div class="builder-embed" ref="elem" v-html="content"></div>
+</template>
+<script>
+export default {
+  name: "builder-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") {
+        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>

package/{nuxt2 → vue2}/src/blocks/embed/embed.vue

@@ -17,7 +17,6 @@ export default {
     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++) {

package/vue2/src/blocks/form/component-info.js

@@ -1,13 +1,3 @@
-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, {
-  componentInfo: () => componentInfo
-});
 const componentInfo = {
   name: "Form:Form",
   builtIn: true,
@@ -267,3 +257,6 @@ const componentInfo = {
     }
   ]
 };
+export {
+  componentInfo
+};