@builder.io/sdk-svelte 0.1.11 → 0.1.13

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "files": [
     "package",
@@ -139,6 +139,7 @@
     "./index-helpers/blocks-exports": "./index-helpers/blocks-exports.js",
     "./index-helpers/top-of-file": "./index-helpers/top-of-file.js",
     "./scripts/init-editing": "./scripts/init-editing.js",
+    "./types/api-version": "./types/api-version.js",
     "./types/builder-block": "./types/builder-block.js",
     "./types/builder-content": "./types/builder-content.js",
     "./types/can-track": "./types/can-track.js",

package/package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.1.12
+
+- Fix: `RenderContent` not re-rendering when its `content` updates. This fixes Symbol rendering in the visual editor.
+- Feature: `RenderContent` and `getContent` now have an `apiVersion` field that can be set to `v2` or `v3` to target specific Builder API versions. Current default is `v2`
+
+### 0.1.11
+
+- No changes.
+
 ### 0.1.10
 
 - Fix: Text blocks styles (remove initial top padding)

package/package/blocks/columns/columns.svelte

@@ -5,7 +5,6 @@ import RenderBlocks from "../../components/render-blocks.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
-import { convertStyleMapToCSS } from "../../helpers/css";
 import BuilderContext from "../../context/builder.context.js";
 export let space;
 export let columns;
@@ -23,112 +22,112 @@ function mitosis_styling(node, vars) {
     });
 }
 let builderContext = getContext(BuilderContext.key);
-function getGutterSize() {
-    return typeof space === "number" ? space || 0 : 20;
-}
-function getColumns() {
-    return columns || [];
-}
 function getWidth(index) {
-    const columns = getColumns();
-    return columns[index]?.width || 100 / columns.length;
+    return cols[index]?.width || 100 / cols.length;
 }
 function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
 }
-function maybeApplyForTablet(prop) {
-    const _stackColumnsAt = stackColumnsAt || "tablet";
-    return _stackColumnsAt === "tablet" ? prop : "inherit";
+function getTabletStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+}
+function getMobileStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+}
+function columnCssVars(index) {
+    const width = getColumnCssWidth(index);
+    const gutter = `${index === 0 ? 0 : gutterSize}px`;
+    if (TARGET === "reactNative") {
+        return {
+            width,
+            marginLeft: stackColumnsAt === "never" ? gutter : "0",
+        };
+    }
+    const mobileWidth = "100%";
+    const mobileMarginLeft = "0";
+    return {
+        width,
+        "margin-left": gutter,
+        "--column-width-mobile": getMobileStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-mobile": getMobileStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutter,
+        }),
+        "--column-width-tablet": getTabletStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-tablet": getTabletStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutter,
+        }),
+    };
 }
 function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
 }
 $: columnsCssVars = () => {
-    const flexDir = stackColumnsAt === "never"
-        ? "inherit"
-        : reverseColumnsWhenStacked
-            ? "column-reverse"
-            : "column";
+    if (TARGET === "reactNative") {
+        return {
+            flexDirection: flexDir,
+        };
+    }
     return {
         "--flex-dir": flexDir,
-        "--flex-dir-tablet": maybeApplyForTablet(flexDir),
-    };
-};
-$: columnCssVars = () => {
-    const width = "100%";
-    const marginLeft = "0";
-    return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": maybeApplyForTablet(width),
-        "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
-    };
-};
-$: columnStyleObjects = () => {
-    return {
-        columns: {
-            small: {
-                flexDirection: "var(--flex-dir)",
-                alignItems: "stretch",
-            },
-            medium: {
-                flexDirection: "var(--flex-dir-tablet)",
-                alignItems: "stretch",
-            },
-        },
-        column: {
-            small: {
-                width: "var(--column-width) !important",
-                marginLeft: "var(--column-margin-left) !important",
-            },
-            medium: {
-                width: "var(--column-width-tablet) !important",
-                marginLeft: "var(--column-margin-left-tablet) !important",
-            },
-        },
+        "--flex-dir-tablet": getTabletStyle({
+            stackedStyle: flexDir,
+            desktopStyle: "row",
+        }),
     };
 };
 $: columnsStyles = () => {
     return `
       @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
         .${builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+          flex-direction: var(--flex-dir-tablet);
+          align-items: stretch;
         }
 
         .${builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+          width: var(--column-width-tablet) !important;
+          margin-left: var(--column-margin-left-tablet) !important;
         }
       }
 
       @media (max-width: ${getWidthForBreakpointSize("small")}px) {
         .${builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+          flex-direction: var(--flex-dir);
+          align-items: stretch;
         }
 
         .${builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+          width: var(--column-width-mobile) !important;
+          margin-left: var(--column-margin-left-mobile) !important;
         }
       },
     `;
 };
-$: reactNativeColumnsStyles = () => {
-    return this.columnStyleObjects.columns.small;
-};
-$: reactNativeColumnStyles = () => {
-    return this.columnStyleObjects.column.small;
-};
+let gutterSize = typeof space === "number" ? space || 0 : 20;
+let cols = columns || [];
+let stackAt = stackColumnsAt || "tablet";
+let flexDir = stackColumnsAt === "never"
+    ? "row"
+    : reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
 </script>
 
 <div
-  use:mitosis_styling={{
-    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
-    ...columnsCssVars(),
-  }}
+  use:mitosis_styling={columnsCssVars()}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  dataSet={{
+    "builder-block-name": "builder-columns",
+  }}
 >
   {#if TARGET !== "reactNative"}
     <RenderInlinedStyles styles={columnsStyles()} />
@@ -136,13 +135,11 @@ $: reactNativeColumnStyles = () => {
 
   {#each columns as column, index (index)}
     <div
-      use:mitosis_styling={{
-        width: getColumnCssWidth(index),
-        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
-        ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
-        ...columnCssVars(),
-      }}
+      use:mitosis_styling={columnCssVars(index)}
       class="builder-column div-2"
+      dataSet={{
+        "builder-block-name": "builder-column",
+      }}
     >
       <RenderBlocks
         blocks={column.blocks}

package/package/blocks/columns/columns.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block";
 type Column = {
-    blocks: any;
+    blocks: BuilderBlock[];
     width?: number;
 };
 type StackColumnsAt = "tablet" | "mobile" | "never";

package/package/blocks/symbol/symbol.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { getContext } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
@@ -36,24 +36,7 @@ export let attributes;
 export let symbol;
 export let dynamic;
 let builderContext = getContext(BuilderContext.key);
-$: className = () => {
-    return [
-        ...(TARGET === "vue2" || TARGET === "vue3"
-            ? Object.keys(attributes.class)
-            : [attributes.class]),
-        "builder-symbol",
-        symbol?.inline ? "builder-inline-symbol" : undefined,
-        symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
-    ]
-        .filter(Boolean)
-        .join(" ");
-};
-$: contentToUse = () => {
-    return symbol?.content || fetchedContent;
-};
-let fetchedContent = null;
-function onUpdateFn_0() {
-    const symbolToUse = symbol;
+function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -63,44 +46,67 @@ function onUpdateFn_0() {
      *
      * then we want to re-fetch the symbol content.
      */
-    if (symbolToUse &&
-        !symbolToUse.content &&
-        !fetchedContent &&
-        symbolToUse.model &&
+    if (!contentToUse &&
+        symbol?.model &&
         // This is a hack, we should not need to check for this, but it is needed for Svelte.
         builderContext?.apiKey) {
         getContent({
-            model: symbolToUse.model,
+            model: symbol.model,
             apiKey: builderContext.apiKey,
+            apiVersion: builderContext.apiVersion,
             query: {
-                id: symbolToUse.entry,
+                id: symbol.entry,
             },
-        }).then((response) => {
-            fetchedContent = response;
+        })
+            .then((response) => {
+            if (response) {
+                contentToUse = response;
+            }
+        })
+            .catch((err) => {
+            console.error("[Builder.io]: Could not fetch symbol content: ", err);
         });
     }
 }
-$: onUpdateFn_0(...[symbol, fetchedContent]);
+let className = [
+    ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(attributes.class)
+        : [attributes.class]),
+    "builder-symbol",
+    symbol?.inline ? "builder-inline-symbol" : undefined,
+    symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+]
+    .filter(Boolean)
+    .join(" ");
+let contentToUse = symbol?.content;
+onMount(() => {
+    fetchContent();
+});
+function onUpdateFn_0() {
+    fetchContent();
+}
+$: onUpdateFn_0(...[symbol]);
 </script>
 
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className(),
+    class: className,
   }}
-  class={className()}
+  class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
+    apiVersion={builderContext.apiVersion}
     apiKey={builderContext.apiKey}
     context={builderContext.context}
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
       ...builderContext.state,
-      ...symbol?.content?.data?.state,
+      ...contentToUse?.data?.state,
     }}
     model={symbol?.model}
-    content={contentToUse()}
+    content={contentToUse}
   />
 </div>

package/package/components/render-content/render-content.svelte

@@ -27,6 +27,7 @@ export let model;
 export let context;
 export let apiKey;
 export let includeRefs;
+export let apiVersion;
 function mergeNewContent(newContent) {
     useContent = {
         ...useContent,
@@ -251,6 +252,7 @@ onMount(() => {
                 getContent({
                     model: model,
                     apiKey: apiKey,
+                    apiVersion: apiVersion,
                 }).then((content) => {
                     if (content) {
                         mergeNewContent(content);
@@ -264,17 +266,23 @@ onMount(() => {
     }
 });
 function onUpdateFn_0() {
-    evaluateJsCode();
+    if (content) {
+        mergeNewContent(content);
+    }
 }
-$: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
+$: onUpdateFn_0(...[content]);
 function onUpdateFn_1() {
-    runHttpRequests();
+    evaluateJsCode();
 }
-$: onUpdateFn_1(...[useContent?.data?.httpRequests]);
+$: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
 function onUpdateFn_2() {
+    runHttpRequests();
+}
+$: onUpdateFn_2(...[useContent?.data?.httpRequests]);
+function onUpdateFn_3() {
     emitStateUpdate();
 }
-$: onUpdateFn_2(...[contentState]);
+$: onUpdateFn_3(...[contentState]);
 setContext(builderContext.key, {
     get content() {
         return useContent;
@@ -291,6 +299,9 @@ setContext(builderContext.key, {
     get apiKey() {
         return apiKey;
     },
+    get apiVersion() {
+        return apiVersion;
+    },
     get registeredComponents() {
         return allRegisteredComponents;
     },

package/package/components/render-content/render-content.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
         includeRefs: RenderContentProps["includeRefs"];
+        apiVersion: RenderContentProps["apiVersion"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-content/render-content.types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 export type RenderContentProps = {
     content?: Nullable<BuilderContent>;
     model?: string;
@@ -9,6 +10,7 @@ export type RenderContentProps = {
     };
     context?: BuilderRenderContext;
     apiKey: string;
+    apiVersion?: ApiVersion;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;

package/package/context/builder.context.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         state: {};
         setState(): void;
         apiKey: null;
+        apiVersion: undefined;
         registeredComponents: {};
         inheritedStyles: {};
     };

package/package/context/builder.context.js

@@ -6,6 +6,7 @@ export default {
         state: {},
         setState() { },
         apiKey: null,
+        apiVersion: undefined,
         registeredComponents: {},
         inheritedStyles: {},
     },

package/package/context/types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 export type RegisteredComponent = ComponentInfo & {
     component: any;
 };
@@ -13,6 +14,7 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
+    apiVersion?: ApiVersion;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;
 }

package/package/functions/get-content/generate-content-url.js

@@ -1,11 +1,14 @@
 import { flatten } from '../../helpers/flatten.js';
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = 'v2', } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
+    if (!['v2', 'v3'].includes(apiVersion)) {
+        throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+    }
+    const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {}),

package/package/functions/get-content/generate-content-url.test.js

@@ -28,4 +28,46 @@ describe('Generate Content URL', () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test('generate content url with apiVersion as v2', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v2',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('generate content url with apiVersion as v3', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v3',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('throw error when trying to generate content url with apiVersion as v1', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'v1',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+    });
+    test('throw error when trying to generate content url with an invalid apiVersion value', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'INVALID_API_VERSION',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
+    });
 });

package/package/functions/get-content/types.d.ts

@@ -36,4 +36,10 @@ export interface GetContentOptions {
      * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */
     locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v2`.
+     */
+    apiVersion?: 'v2' | 'v3';
 }

package/package/types/api-version.d.ts

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';

package/package/types/api-version.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "files": [
     "package",

package/src/blocks/columns/columns.svelte

@@ -4,8 +4,7 @@
   import type { SizeName } from "../../constants/device-sizes";
 
   type Column = {
-    blocks: any;
-    // TODO: Implement this when support for dynamic CSS lands
+    blocks: BuilderBlock[];
     width?: number;
   };
 
@@ -31,7 +30,6 @@
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
   import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
-  import { convertStyleMapToCSS } from "../../helpers/css";
   import BuilderContext from "../../context/builder.context.js";
 
   export let space: ColumnProps["space"];
@@ -52,25 +50,50 @@
 
   let builderContext = getContext(BuilderContext.key);
 
-  function getGutterSize() {
-    return typeof space === "number" ? space || 0 : 20;
-  }
-  function getColumns() {
-    return columns || [];
-  }
   function getWidth(index) {
-    const columns = getColumns();
-    return columns[index]?.width || 100 / columns.length;
+    return cols[index]?.width || 100 / cols.length;
   }
   function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
-  function maybeApplyForTablet(prop) {
-    const _stackColumnsAt = stackColumnsAt || "tablet";
-    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  function getTabletStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+  }
+  function getMobileStyle({ stackedStyle, desktopStyle }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+  }
+  function columnCssVars(index) {
+    const width = getColumnCssWidth(index);
+    const gutter = `${index === 0 ? 0 : gutterSize}px`;
+    if (TARGET === "reactNative") {
+      return {
+        width,
+        marginLeft: stackColumnsAt === "never" ? gutter : "0",
+      };
+    }
+    const mobileWidth = "100%";
+    const mobileMarginLeft = "0";
+    return {
+      width,
+      "margin-left": gutter,
+      "--column-width-mobile": getMobileStyle({
+        stackedStyle: mobileWidth,
+        desktopStyle: width,
+      }),
+      "--column-margin-left-mobile": getMobileStyle({
+        stackedStyle: mobileMarginLeft,
+        desktopStyle: gutter,
+      }),
+      "--column-width-tablet": getTabletStyle({
+        stackedStyle: mobileWidth,
+        desktopStyle: width,
+      }),
+      "--column-margin-left-tablet": getTabletStyle({
+        stackedStyle: mobileMarginLeft,
+        desktopStyle: gutter,
+      }),
+    };
   }
   function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(
@@ -79,88 +102,64 @@
     return breakpointSizes[size].max;
   }
   $: columnsCssVars = () => {
-    const flexDir =
-      stackColumnsAt === "never"
-        ? "inherit"
-        : reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
+    if (TARGET === "reactNative") {
+      return {
+        flexDirection: flexDir,
+      };
+    }
     return {
       "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
-    };
-  };
-  $: columnCssVars = () => {
-    const width = "100%";
-    const marginLeft = "0";
-    return {
-      "--column-width": width,
-      "--column-margin-left": marginLeft,
-      "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
-    };
-  };
-  $: columnStyleObjects = () => {
-    return {
-      columns: {
-        small: {
-          flexDirection: "var(--flex-dir)",
-          alignItems: "stretch",
-        },
-        medium: {
-          flexDirection: "var(--flex-dir-tablet)",
-          alignItems: "stretch",
-        },
-      },
-      column: {
-        small: {
-          width: "var(--column-width) !important",
-          marginLeft: "var(--column-margin-left) !important",
-        },
-        medium: {
-          width: "var(--column-width-tablet) !important",
-          marginLeft: "var(--column-margin-left-tablet) !important",
-        },
-      },
+      "--flex-dir-tablet": getTabletStyle({
+        stackedStyle: flexDir,
+        desktopStyle: "row",
+      }),
     };
   };
   $: columnsStyles = () => {
     return `
       @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
         .${builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+          flex-direction: var(--flex-dir-tablet);
+          align-items: stretch;
         }
 
         .${builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+          width: var(--column-width-tablet) !important;
+          margin-left: var(--column-margin-left-tablet) !important;
         }
       }
 
       @media (max-width: ${getWidthForBreakpointSize("small")}px) {
         .${builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+          flex-direction: var(--flex-dir);
+          align-items: stretch;
         }
 
         .${builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+          width: var(--column-width-mobile) !important;
+          margin-left: var(--column-margin-left-mobile) !important;
         }
       },
     `;
   };
-  $: reactNativeColumnsStyles = () => {
-    return this.columnStyleObjects.columns.small;
-  };
-  $: reactNativeColumnStyles = () => {
-    return this.columnStyleObjects.column.small;
-  };
+
+  let gutterSize = typeof space === "number" ? space || 0 : 20;
+  let cols = columns || [];
+  let stackAt = stackColumnsAt || "tablet";
+  let flexDir =
+    stackColumnsAt === "never"
+      ? "row"
+      : reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column";
 </script>
 
 <div
-  use:mitosis_styling={{
-    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
-    ...columnsCssVars(),
-  }}
+  use:mitosis_styling={columnsCssVars()}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  dataSet={{
+    "builder-block-name": "builder-columns",
+  }}
 >
   {#if TARGET !== "reactNative"}
     <RenderInlinedStyles styles={columnsStyles()} />
@@ -168,13 +167,11 @@
 
   {#each columns as column, index (index)}
     <div
-      use:mitosis_styling={{
-        width: getColumnCssWidth(index),
-        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
-        ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
-        ...columnCssVars(),
-      }}
+      use:mitosis_styling={columnCssVars(index)}
       class="builder-column div-2"
+      dataSet={{
+        "builder-block-name": "builder-column",
+      }}
     >
       <RenderBlocks
         blocks={column.blocks}

package/src/blocks/symbol/symbol.svelte

@@ -1,8 +1,6 @@
 <script context="module" lang="ts">
   import type { BuilderContent } from "../../types/builder-content.js";
 
-  import type { Nullable } from "../../types/typescript.js";
-
   import type { BuilderBlock } from "../../types/builder-block.js";
 
   export interface SymbolInfo {
@@ -25,7 +23,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
@@ -67,27 +65,7 @@
 
   let builderContext = getContext(BuilderContext.key);
 
-  $: className = () => {
-    return [
-      ...(TARGET === "vue2" || TARGET === "vue3"
-        ? Object.keys(attributes.class)
-        : [attributes.class]),
-      "builder-symbol",
-      symbol?.inline ? "builder-inline-symbol" : undefined,
-      symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
-    ]
-      .filter(Boolean)
-      .join(" ");
-  };
-  $: contentToUse = () => {
-    return symbol?.content || fetchedContent;
-  };
-
-  let fetchedContent = null;
-
-  function onUpdateFn_0() {
-    const symbolToUse = symbol;
-
+  function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -98,45 +76,71 @@
      * then we want to re-fetch the symbol content.
      */
     if (
-      symbolToUse &&
-      !symbolToUse.content &&
-      !fetchedContent &&
-      symbolToUse.model &&
+      !contentToUse &&
+      symbol?.model &&
       // This is a hack, we should not need to check for this, but it is needed for Svelte.
       builderContext?.apiKey
     ) {
       getContent({
-        model: symbolToUse.model,
+        model: symbol.model,
         apiKey: builderContext.apiKey,
+        apiVersion: builderContext.apiVersion,
         query: {
-          id: symbolToUse.entry,
+          id: symbol.entry,
         },
-      }).then((response) => {
-        fetchedContent = response;
-      });
+      })
+        .then((response) => {
+          if (response) {
+            contentToUse = response;
+          }
+        })
+        .catch((err) => {
+          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+        });
     }
   }
-  $: onUpdateFn_0(...[symbol, fetchedContent]);
+
+  let className = [
+    ...(TARGET === "vue2" || TARGET === "vue3"
+      ? Object.keys(attributes.class)
+      : [attributes.class]),
+    "builder-symbol",
+    symbol?.inline ? "builder-inline-symbol" : undefined,
+    symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  let contentToUse = symbol?.content;
+
+  onMount(() => {
+    fetchContent();
+  });
+
+  function onUpdateFn_0() {
+    fetchContent();
+  }
+  $: onUpdateFn_0(...[symbol]);
 </script>
 
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className(),
+    class: className,
   }}
-  class={className()}
+  class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
+    apiVersion={builderContext.apiVersion}
     apiKey={builderContext.apiKey}
     context={builderContext.context}
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
       ...builderContext.state,
-      ...symbol?.content?.data?.state,
+      ...contentToUse?.data?.state,
     }}
     model={symbol?.model}
-    content={contentToUse()}
+    content={contentToUse}
   />
 </div>

package/src/components/render-content/render-content.svelte

@@ -57,6 +57,7 @@
   export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
   export let includeRefs: RenderContentProps["includeRefs"];
+  export let apiVersion: RenderContentProps["apiVersion"];
 
   function mergeNewContent(newContent) {
     useContent = {
@@ -305,6 +306,7 @@
           getContent({
             model: model,
             apiKey: apiKey,
+            apiVersion: apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -319,17 +321,23 @@
   });
 
   function onUpdateFn_0() {
-    evaluateJsCode();
+    if (content) {
+      mergeNewContent(content);
+    }
   }
-  $: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
+  $: onUpdateFn_0(...[content]);
   function onUpdateFn_1() {
-    runHttpRequests();
+    evaluateJsCode();
   }
-  $: onUpdateFn_1(...[useContent?.data?.httpRequests]);
+  $: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
   function onUpdateFn_2() {
+    runHttpRequests();
+  }
+  $: onUpdateFn_2(...[useContent?.data?.httpRequests]);
+  function onUpdateFn_3() {
     emitStateUpdate();
   }
-  $: onUpdateFn_2(...[contentState]);
+  $: onUpdateFn_3(...[contentState]);
 
   setContext(builderContext.key, {
     get content() {
@@ -347,6 +355,9 @@
     get apiKey() {
       return apiKey;
     },
+    get apiVersion() {
+      return apiVersion;
+    },
     get registeredComponents() {
       return allRegisteredComponents;
     },

package/src/components/render-content/render-content.types.ts

@@ -5,6 +5,7 @@ import type {
 } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 
 export type RenderContentProps = {
   content?: Nullable<BuilderContent>;
@@ -12,6 +13,7 @@ export type RenderContentProps = {
   data?: { [key: string]: any };
   context?: BuilderRenderContext;
   apiKey: string;
+  apiVersion?: ApiVersion;
   customComponents?: RegisteredComponent[];
   canTrack?: boolean;
   locale?: string;

package/src/context/builder.context.ts

@@ -7,6 +7,7 @@ export default {
     state: {},
     setState() {},
     apiKey: null,
+    apiVersion: undefined,
     registeredComponents: {},
     inheritedStyles: {},
   },

package/src/context/types.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 
 export type RegisteredComponent = ComponentInfo & {
   component: any;
@@ -18,6 +19,7 @@ export interface BuilderContextInterface {
   state: BuilderRenderState;
   setState?: (state: BuilderRenderState) => void;
   apiKey: string | null;
+  apiVersion?: ApiVersion;
   registeredComponents: RegisteredComponents;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;

package/src/functions/get-content/generate-content-url.test.ts

@@ -1,4 +1,5 @@
 import { generateContentUrl } from './generate-content-url';
+import type { GetContentOptions } from './types';
 
 const testKey = 'YJIGb4i01jvw0SRdL5Bt';
 const testModel = 'page';
@@ -23,6 +24,7 @@ describe('Generate Content URL', () => {
     });
     expect(output).toMatchSnapshot();
   });
+
   test('Handles overrides correctly', () => {
     const output = generateContentUrl({
       apiKey: testKey,
@@ -32,4 +34,52 @@ describe('Generate Content URL', () => {
     });
     expect(output).toMatchSnapshot();
   });
+
+  test('generate content url with apiVersion as v2', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: 'v2',
+    });
+    expect(output).toMatchSnapshot();
+  });
+
+  test('generate content url with apiVersion as v3', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: 'v3',
+    });
+    expect(output).toMatchSnapshot();
+  });
+
+  test('throw error when trying to generate content url with apiVersion as v1', () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: 'v1' as GetContentOptions['apiVersion'],
+      });
+    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+  });
+
+  test('throw error when trying to generate content url with an invalid apiVersion value', () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: 'INVALID_API_VERSION' as GetContentOptions['apiVersion'],
+      });
+    }).toThrow(
+      `Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`
+    );
+  });
 });

package/src/functions/get-content/generate-content-url.ts

@@ -15,14 +15,21 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     apiKey,
     includeRefs = true,
     locale,
+    apiVersion = 'v2',
   } = options;
 
   if (!apiKey) {
     throw new Error('Missing API key');
   }
 
+  if (!['v2', 'v3'].includes(apiVersion)) {
+    throw new Error(
+      `Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`
+    );
+  }
+
   const url = new URL(
-    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
+    `https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
       locale ? `&locale=${locale}` : ''
     }`
   );

package/src/functions/get-content/types.ts

@@ -43,4 +43,11 @@ export interface GetContentOptions {
    * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
    */
   locale?: string;
+
+  /**
+   * If provided, sets the Builder API version used to fetch content.
+   *
+   * Defaults to `v2`.
+   */
+  apiVersion?: 'v2' | 'v3';
 }

package/src/types/api-version.ts

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';