@builder.io/sdk-vue 0.0.1-54 → 0.0.1-55

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+### 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 }]`.

package/nuxt2/src/blocks/columns/columns.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-16nol0lwi20" :style="columnsCssVars">
+  <div class="builder-columns div-1be3j8m9ewb" :style="columnsCssVars">
     <div
-      class="builder-column div-16nol0lwi20-2"
+      class="builder-column div-1be3j8m9ewb-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -74,32 +74,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-16nol0lwi20 {
+.div-1be3j8m9ewb {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 999px) {
-  .div-16nol0lwi20 {
+  .div-1be3j8m9ewb {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-16nol0lwi20 {
+  .div-1be3j8m9ewb {
     flex-direction: var(--flex-dir);
   }
 }
-.div-16nol0lwi20-2 {
+.div-1be3j8m9ewb-2 {
   flex-grow: 1;
 }
 @media (max-width: 999px) {
-  .div-16nol0lwi20-2 {
+  .div-1be3j8m9ewb-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-16nol0lwi20-2 {
+  .div-1be3j8m9ewb-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/nuxt2/src/blocks/form/form.vue

@@ -27,7 +27,7 @@
     ></builder-blocks>
 
     <pre
-      class="builder-form-error-text pre-4wbls88y960"
+      class="builder-form-error-text pre-29wpyomtntv"
       v-if="submissionState === 'error' && responseData"
     >
         {{ JSON.stringify(responseData, null, 2) }}
@@ -302,7 +302,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-4wbls88y960 {
+.pre-29wpyomtntv {
   padding: 10px;
   color: red;
   text-align: center;

package/nuxt2/src/blocks/image/image.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="div-20351ewpue7">
+  <div class="div-1ifnufbde19">
     <picture>
       <img
         loading="lazy"
-        class="img-20351ewpue7"
+        class="img-1ifnufbde19"
         :alt="altText"
         :role="altText ? 'presentation' : undefined"
         :style="{
@@ -23,7 +23,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-20351ewpue7-2"
+      class="builder-image-sizer div-1ifnufbde19-2"
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
       :style="{
         paddingTop: aspectRatio * 100 + '%',
@@ -34,7 +34,7 @@
 
     <slot></slot>
 
-    <div class="div-20351ewpue7-3" v-if="!fitContent">
+    <div class="div-1ifnufbde19-3" v-if="!fitContent">
       <slot></slot>
     </div>
   </div>
@@ -71,10 +71,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-20351ewpue7 {
+.div-1ifnufbde19 {
   position: relative;
 }
-.img-20351ewpue7 {
+.img-1ifnufbde19 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -83,12 +83,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-20351ewpue7-2 {
+.div-1ifnufbde19-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-20351ewpue7-3 {
+.div-1ifnufbde19-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/nuxt2/src/components/render-block/block-styles.vue

@@ -1,7 +1,13 @@
 <template>
-  <render-inlined-styles :styles="css"></render-inlined-styles>
+  <render-inlined-styles
+    v-if="TARGET === 'vue' || TARGET === 'svelte'"
+    :styles="css"
+  ></render-inlined-styles>
 </template>
 <script>
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
 export default {
@@ -9,16 +15,29 @@ export default {
   components: { "render-inlined-styles": async () => RenderInlinedStyles },
   props: ["block"],
 
+  data: () => ({ TARGET }),
+
+  inject: {
+    builderContext: "BuilderContext",
+  },
+
   computed: {
+    useBlock() {
+      return getProcessedBlock({
+        block: this.block,
+        state: this.builderContext.state,
+        context: this.builderContext.context,
+      });
+    },
     css() {
       // TODO: media queries
-      const styleObject = this.block.responsiveStyles?.large;
+      const styleObject = this.useBlock.responsiveStyles?.large;
 
       if (!styleObject) {
         return "";
       }
 
-      let str = `.${this.block.id} {`;
+      let str = `.${this.useBlock.id} {`;
 
       for (const key in styleObject) {
         const value = styleObject[key];

package/nuxt2/src/components/render-block/render-block.vue

@@ -1,58 +1,36 @@
 <template>
   <component
-    v-bind="propertiesAndActions"
+    v-bind="attributes"
     v-if="!isEmptyHtmlElement(tagName)"
-    :style="css"
     :is="tagName"
   >
-    <block-styles
-      v-if="TARGET === 'vue' || TARGET === 'svelte'"
-      :block="useBlock"
-    ></block-styles>
-
-    <component
-      v-bind="componentOptions"
-      v-if="componentRef"
-      :builderBlock="useBlock"
-      :is="componentRef"
-    >
-      <render-block
-        v-for="(child, index) in children"
-        :block="child"
-        :key="child.id"
-      ></render-block>
-    </component>
+    <render-component
+      :blockChildren="children"
+      :componentRef="componentRef"
+      :componentOptions="componentOptions"
+    ></render-component>
 
     <render-block
       v-for="(child, index) in noCompRefChildren"
       :block="child"
-      :key="child.id"
+      :key="'render-block-' + child.id"
     ></render-block>
+    <block-styles
+      v-for="(child, index) in noCompRefChildren"
+      :block="child"
+      :key="'block-style-' + child.id"
+    ></block-styles>
   </component>
-  <component
-    v-bind="propertiesAndActions"
-    v-else=""
-    :style="css"
-    :is="tagName"
-  ></component>
+  <component v-bind="attributes" v-else="" :is="tagName"></component>
 
-  <component
-    v-bind="componentOptions"
+  <render-component
     v-else=""
-    :attributes="propertiesAndActions"
-    :builderBlock="useBlock"
-    :style="css"
-    :is="componentRef"
-  >
-    <render-block
-      v-for="(child, index) in children"
-      :block="child"
-      :key="child.id"
-    ></render-block>
-  </component>
+    :blockChildren="children"
+    :componentRef="componentRef"
+    :componentOptions="componentOptions"
+  ></render-component>
 </template>
 <script>
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -62,13 +40,17 @@ import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component";
 
 export default {
   name: "render-block",
-  components: { "block-styles": async () => BlockStyles },
+  components: {
+    "render-component": async () => RenderComponent,
+    "block-styles": async () => BlockStyles,
+  },
   props: ["block"],
 
-  data: () => ({ TARGET, isEmptyHtmlElement }),
+  data: () => ({ isEmptyHtmlElement }),
 
   inject: {
     builderContext: "BuilderContext",
@@ -115,7 +97,7 @@ export default {
         context: this.builderContext.context,
       });
     },
-    propertiesAndActions() {
+    attributes() {
       return {
         ...getBlockProperties(this.useBlock),
         ...getBlockActions({
@@ -123,13 +105,26 @@ export default {
           state: this.builderContext.state,
           context: this.builderContext.context,
         }),
+        style: getBlockStyles(this.useBlock),
       };
     },
-    css() {
-      return getBlockStyles(this.useBlock);
+    shouldWrap() {
+      return !this.componentInfo?.noWrap;
     },
     componentOptions() {
-      return getBlockComponentOptions(this.useBlock);
+      return {
+        ...getBlockComponentOptions(this.useBlock),
+
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(this.shouldWrap
+          ? {}
+          : {
+              attributes: this.attributes,
+            }),
+      };
     },
     children() {
       // TO-DO: When should `canHaveChildren` dictate rendering?
@@ -139,6 +134,10 @@ export default {
       return this.useBlock.children ?? [];
     },
     noCompRefChildren() {
+      /**
+       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+       * we render them outside of `componentRef`
+       */
       return this.componentRef ? [] : this.children;
     },
   },

package/nuxt2/src/components/render-block/render-component.vue

@@ -0,0 +1,27 @@
+<template>
+  <component v-bind="componentOptions" v-if="componentRef" :is="componentRef">
+    <render-block
+      v-for="(child, index) in blockChildren"
+      :block="child"
+      :key="'render-block-' + child.id"
+    ></render-block>
+    <block-styles
+      v-for="(child, index) in blockChildren"
+      :block="child"
+      :key="'block-style-' + child.id"
+    ></block-styles>
+  </component>
+</template>
+<script>
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
+
+export default {
+  name: "render-component",
+  components: {
+    "render-block": async () => RenderBlock,
+    "block-styles": async () => BlockStyles,
+  },
+  props: ["componentRef", "componentOptions", "blockChildren"],
+};
+</script>

package/nuxt2/src/components/render-blocks.vue

@@ -13,17 +13,27 @@
     <render-block
       v-for="(block, index) in blocks"
       :block="block"
-      :key="block.id"
+      :key="'render-block-' + block.id"
     ></render-block>
+
+    <block-styles
+      v-for="(block, index) in blocks"
+      :block="block"
+      :key="'block-style-' + block.id"
+    ></block-styles>
   </div>
 </template>
 <script>
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
 export default {
   name: "render-blocks",
-  components: { "render-block": async () => RenderBlock },
+  components: {
+    "render-block": async () => RenderBlock,
+    "block-styles": async () => BlockStyles,
+  },
   props: ["blocks", "parent", "path"],
 
   computed: {

package/nuxt2/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   __markAsModule(target);
@@ -25,5 +28,7 @@ __export(exports, {
 });
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-54",
+  "version": "0.0.1-55",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },

package/vue2/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   __markAsModule(target);
@@ -25,5 +28,7 @@ __export(exports, {
 });
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }

package/vue3/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   __markAsModule(target);
@@ -25,5 +28,7 @@ __export(exports, {
 });
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }