@builder.io/sdk-svelte 0.0.9 → 0.0.10

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.9-3",
+  "version": "0.0.10-0",
   "type": "module",
   "files": [
     "package",
@@ -117,6 +117,7 @@
     "./functions/set.test": "./functions/set.test.js",
     "./functions/set": "./functions/set.js",
     "./functions/track": "./functions/track.js",
+    "./functions/transform-block-properties": "./functions/transform-block-properties.js",
     "./functions/transform-block": "./functions/transform-block.js",
     "./helpers/ab-tests": "./helpers/ab-tests.js",
     "./helpers/cookie": "./helpers/cookie.js",

package/package/blocks/columns/columns.svelte

@@ -1,10 +1,15 @@
 <script context="module"></script>
 
 <script>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";
 export let space;
 export let columns;
 export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
+export let customBreakpoints;
 export let builderBlock;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -36,6 +41,10 @@ function maybeApplyForTablet(prop) {
     const _stackColumnsAt = stackColumnsAt || "tablet";
     return _stackColumnsAt === "tablet" ? prop : "inherit";
 }
+function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    return breakpointSizes[size].max;
+}
 $: columnsCssVars = () => {
     const flexDir = stackColumnsAt === "never"
         ? "inherit"
@@ -57,14 +66,78 @@ $: columnCssVars = () => {
         "--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",
+            },
+        },
+    };
+};
+$: columnsStyles = () => {
+    return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+        }
+
+        .${builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        }
+
+        .${builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+};
+$: reactNativeColumnsStyles = () => {
+    return columnStyleObjects.columns.small;
+};
+$: reactNativeColumnStyles = () => {
+    return columnStyleObjects.column.small;
+};
 </script>
 
-<div use:mitosis_styling={columnsCssVars()} class="builder-columns div">
+<div
+  use:mitosis_styling={{
+    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+    ...columnsCssVars(),
+  }}
+  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+>
+  {#if TARGET !== "reactNative"}
+    <RenderInlinedStyles styles={columnsStyles()} />
+  {/if}
+
   {#each columns as column, index (index)}
     <div
       use:mitosis_styling={{
         width: getColumnCssWidth(index),
         marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
         ...columnCssVars(),
       }}
       class="builder-column div-2"
@@ -84,34 +157,11 @@ $: columnCssVars = () => {
 <style>
   .div {
     display: flex;
-    align-items: stretch;
     line-height: normal;
   }
-  @media (max-width: 991px) {
-    .div {
-      flex-direction: var(--flex-dir-tablet);
-    }
-  }
-  @media (max-width: 639px) {
-    .div {
-      flex-direction: var(--flex-dir);
-    }
-  }
   .div-2 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
-  @media (max-width: 991px) {
-    .div-2 {
-      width: var(--column-width-tablet) !important;
-      margin-left: var(--column-margin-left-tablet) !important;
-    }
-  }
-  @media (max-width: 639px) {
-    .div-2 {
-      width: var(--column-width) !important;
-      margin-left: var(--column-margin-left) !important;
-    }
-  }
 </style>

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block";
+import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -11,6 +12,7 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
+    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {
@@ -18,6 +20,7 @@ declare const __propDef: {
         columns: ColumnProps["columns"];
         stackColumnsAt: ColumnProps["stackColumnsAt"];
         reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+        customBreakpoints: ColumnProps["customBreakpoints"];
         builderBlock: ColumnProps["builderBlock"];
     };
     events: {

package/package/blocks/section/section.svelte

@@ -42,11 +42,18 @@ function mitosis_styling(node, vars) {
 </script>
 
 <section
-  use:mitosis_styling={maxWidth && typeof maxWidth === "number"
-    ? {
-        maxWidth: maxWidth,
-      }
-    : undefined}
+  use:mitosis_styling={{
+    width: "100%",
+    alignSelf: "stretch",
+    flexGrow: "1",
+    boxSizing: "border-box",
+    maxWidth: `${maxWidth && typeof maxWidth === "number" ? maxWidth : 1200}px`,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    marginLeft: "auto",
+    marginRight: "auto",
+  }}
   {...filterAttrs(attributes, isNonEvent)}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >

package/package/blocks/symbol/symbol.svelte

@@ -4,6 +4,7 @@
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
+import { TARGET } from "../../constants/target";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");
 const filterAttrs = (attrs, filter) => {
@@ -31,13 +32,25 @@ const setAttrs = (node, attrs) => {
         },
     };
 };
-export let symbol;
 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 className = "builder-symbol";
 let fetchedContent = null;
 function onUpdateFn_0() {
     const symbolToUse = symbol;
@@ -71,9 +84,9 @@ $: onUpdateFn_0(...[symbol, fetchedContent]);
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className,
+    class: className(),
   }}
-  class={className}
+  class={className()}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent

package/package/blocks/symbol/symbol.svelte.d.ts

@@ -19,8 +19,9 @@ export interface SymbolProps {
 }
 declare const __propDef: {
     props: {
-        symbol: SymbolProps["symbol"];
         attributes: SymbolProps["attributes"];
+        symbol: SymbolProps["symbol"];
+        dynamic: SymbolProps["dynamic"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-block/render-block.svelte

@@ -75,13 +75,15 @@ $: actions = () => {
     });
 };
 $: attributes = () => {
+    const blockProperties = getBlockProperties(useBlock());
     return {
-        ...getBlockProperties(useBlock()),
+        ...blockProperties,
         ...(TARGET === "reactNative"
             ? {
                 style: getReactNativeBlockStyles({
                     block: useBlock(),
                     context: context,
+                    blockStyles: blockProperties.style,
                 }),
             }
             : {}),
@@ -108,6 +110,7 @@ $: renderComponentProps = () => {
                         ...actions(),
                     },
                 }),
+            customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
         },
         context: childrenContext(),
     };
@@ -170,6 +173,7 @@ $: inheritedTextStyles = () => {
     const styles = getReactNativeBlockStyles({
         block: useBlock(),
         context: context,
+        blockStyles: attributes().style,
     });
     return extractTextStyles(styles);
 };

package/package/components/render-block/render-component.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
+import type { Breakpoints } from "../../types/builder-content.js";
 export interface RenderComponentProps {
     componentRef: any;
     componentOptions: any;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
+    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {

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

@@ -45,6 +45,16 @@ function processMessage(event) {
     const { data } = event;
     if (data) {
         switch (data.type) {
+            case "builder.configureSdk": {
+                const messageContent = data.data;
+                const { breakpoints, contentId } = messageContent;
+                if (!contentId || contentId !== useContent?.()?.id) {
+                    return;
+                }
+                useBreakpoints = breakpoints;
+                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                break;
+            }
             case "builder.contentUpdate": {
                 const messageContent = data.data;
                 const key = messageContent.key ||
@@ -147,6 +157,13 @@ $: useContent = () => {
             ...data,
             ...overrideContent?.data,
         },
+        meta: {
+            ...content?.meta,
+            ...overrideContent?.meta,
+            breakpoints: useBreakpoints ||
+                overrideContent?.meta?.breakpoints ||
+                content?.meta?.breakpoints,
+        },
     };
     return mergedContent;
 };
@@ -197,6 +214,7 @@ let elementRef;
 let forceReRenderCount = 0;
 let overrideContent = null;
 let update = 0;
+let useBreakpoints = null;
 let overrideState = {};
 onMount(() => {
     if (!apiKey) {

package/package/functions/get-block-properties.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../types/builder-block.js';
 export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
+    style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;
 };

package/package/functions/get-block-properties.js

@@ -1,9 +1,35 @@
+import { TARGET } from '../constants/target.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import { transformBlockProperties } from './transform-block-properties.js';
 export function getBlockProperties(block) {
-    return {
+    const properties = {
         ...block.properties,
         'builder-id': block.id,
+        style: getStyleAttribute(block.style),
         class: [block.id, 'builder-block', block.class, block.properties?.class]
             .filter(Boolean)
             .join(' '),
     };
+    return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+function getStyleAttribute(style) {
+    if (!style) {
+        return undefined;
+    }
+    switch (TARGET) {
+        case 'svelte':
+        case 'vue2':
+        case 'vue3':
+        case 'solid':
+            return convertStyleMapToCSSArray(style).join(' ');
+        case 'qwik':
+        case 'reactNative':
+        case 'react':
+            return style;
+    }
 }

package/package/functions/get-react-native-block-styles.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, }: {
+export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
+    blockStyles: any;
 }): CSSStyleDeclaration | Record<string, string | undefined>;

package/package/functions/get-react-native-block-styles.js

@@ -1,5 +1,5 @@
 import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, }) {
+export function getReactNativeBlockStyles({ block, context, blockStyles, }) {
     const responsiveStyles = block.responsiveStyles;
     if (!responsiveStyles) {
         return {};
@@ -10,6 +10,7 @@ export function getReactNativeBlockStyles({ block, context, }) {
         ...(responsiveStyles.large || {}),
         ...(responsiveStyles.medium || {}),
         ...(responsiveStyles.small || {}),
+        ...blockStyles,
     };
     const newStyles = sanitizeReactNativeBlockStyles(styles);
     return newStyles;

package/package/functions/transform-block-properties.d.ts

@@ -0,0 +1 @@
+export declare function transformBlockProperties<T>(properties: T): T;

package/package/functions/transform-block-properties.js

@@ -0,0 +1,3 @@
+export function transformBlockProperties(properties) {
+    return properties;
+}

package/package/helpers/css.d.ts

@@ -1,3 +1,5 @@
+export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
+export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles, }: {
     mediaQuery?: string | undefined;
     className: string;

package/package/helpers/css.js

@@ -1,15 +1,20 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
-const convertStyleMaptoCSS = (style) => {
+import { checkIsDefined } from './nullable.js';
+export const convertStyleMapToCSSArray = (style) => {
     const cssProps = Object.entries(style).map(([key, value]) => {
         if (typeof value === 'string') {
             return `${camelToKebabCase(key)}: ${value};`;
         }
+        else {
+            return undefined;
+        }
     });
-    return cssProps.join('\n');
+    return cssProps.filter(checkIsDefined);
 };
+export const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join('\n');
 export const createCssClass = ({ mediaQuery, className, styles, }) => {
     const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
     if (mediaQuery) {
         return `${mediaQuery} {

package/package/types/builder-block.d.ts

@@ -53,5 +53,6 @@ export interface BuilderBlock {
         itemName?: string;
     } | null;
     animations?: any[];
+    style?: Partial<CSSStyleDeclaration>;
 }
 export {};

package/package/types/builder-content.d.ts

@@ -1,5 +1,10 @@
 import type { BuilderBlock } from './builder-block.js';
+import type { Nullable } from './typescript.js';
 declare type Input = any;
+export interface Breakpoints {
+    small: number;
+    medium: number;
+}
 export interface BuilderContentVariation {
     data?: {
         title?: string;
@@ -19,10 +24,7 @@ export interface BuilderContentVariation {
     testRatio?: number;
     id?: string;
     meta?: {
-        breakpoints?: {
-            small: number;
-            medium: number;
-        };
+        breakpoints?: Nullable<Breakpoints>;
         [key: string]: any;
     };
 }

package/package/types/targets.d.ts

@@ -1,3 +1,3 @@
 declare type MitosisTargets = import('@builder.io/mitosis').Target;
-export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik'>;
+export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid'>;
 export {};

package/package.json

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

package/src/blocks/columns/columns.svelte

@@ -1,9 +1,9 @@
 <script context="module" lang="ts">
   import type { BuilderBlock } from "../../types/builder-block";
 
-  type CSS = {
-    [key: string]: string;
-  };
+  import type { SizeName } from "../../constants/device-sizes";
+
+  import type { Breakpoints } from "../../types/builder-content";
 
   type Column = {
     blocks: any;
@@ -23,16 +23,22 @@
     stackColumnsAt?: StackColumnsAt;
     // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
+    customBreakpoints?: Breakpoints;
   }
 </script>
 
 <script lang="ts">
   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";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
   export let stackColumnsAt: ColumnProps["stackColumnsAt"];
   export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+  export let customBreakpoints: ColumnProps["customBreakpoints"];
   export let builderBlock: ColumnProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
@@ -65,6 +71,10 @@
     const _stackColumnsAt = stackColumnsAt || "tablet";
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
+  function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    return breakpointSizes[size].max;
+  }
   $: columnsCssVars = () => {
     const flexDir =
       stackColumnsAt === "never"
@@ -87,14 +97,78 @@
       "--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",
+        },
+      },
+    };
+  };
+  $: columnsStyles = () => {
+    return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+        }
+
+        .${builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        }
+
+        .${builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+  };
+  $: reactNativeColumnsStyles = () => {
+    return columnStyleObjects.columns.small;
+  };
+  $: reactNativeColumnStyles = () => {
+    return columnStyleObjects.column.small;
+  };
 </script>
 
-<div use:mitosis_styling={columnsCssVars()} class="builder-columns div">
+<div
+  use:mitosis_styling={{
+    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+    ...columnsCssVars(),
+  }}
+  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+>
+  {#if TARGET !== "reactNative"}
+    <RenderInlinedStyles styles={columnsStyles()} />
+  {/if}
+
   {#each columns as column, index (index)}
     <div
       use:mitosis_styling={{
         width: getColumnCssWidth(index),
         marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
         ...columnCssVars(),
       }}
       class="builder-column div-2"
@@ -114,34 +188,11 @@
 <style>
   .div {
     display: flex;
-    align-items: stretch;
     line-height: normal;
   }
-  @media (max-width: 991px) {
-    .div {
-      flex-direction: var(--flex-dir-tablet);
-    }
-  }
-  @media (max-width: 639px) {
-    .div {
-      flex-direction: var(--flex-dir);
-    }
-  }
   .div-2 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
-  @media (max-width: 991px) {
-    .div-2 {
-      width: var(--column-width-tablet) !important;
-      margin-left: var(--column-margin-left-tablet) !important;
-    }
-  }
-  @media (max-width: 639px) {
-    .div-2 {
-      width: var(--column-width) !important;
-      margin-left: var(--column-margin-left) !important;
-    }
-  }
 </style>

package/src/blocks/section/section.svelte

@@ -57,11 +57,18 @@
 </script>
 
 <section
-  use:mitosis_styling={maxWidth && typeof maxWidth === "number"
-    ? {
-        maxWidth: maxWidth,
-      }
-    : undefined}
+  use:mitosis_styling={{
+    width: "100%",
+    alignSelf: "stretch",
+    flexGrow: "1",
+    boxSizing: "border-box",
+    maxWidth: `${maxWidth && typeof maxWidth === "number" ? maxWidth : 1200}px`,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    marginLeft: "auto",
+    marginRight: "auto",
+  }}
   {...filterAttrs(attributes, isNonEvent)}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >

package/src/blocks/symbol/symbol.svelte

@@ -30,6 +30,7 @@
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
   import { getContent } from "../../functions/get-content/index.js";
+  import { TARGET } from "../../constants/target";
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -65,16 +66,28 @@
     };
   };
 
-  export let symbol: SymbolProps["symbol"];
   export let attributes: SymbolProps["attributes"];
+  export let symbol: SymbolProps["symbol"];
+  export let dynamic: SymbolProps["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 className = "builder-symbol";
   let fetchedContent = null;
 
   function onUpdateFn_0() {
@@ -112,9 +125,9 @@
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className,
+    class: className(),
   }}
-  class={className}
+  class={className()}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent

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

@@ -100,13 +100,15 @@
     });
   };
   $: attributes = () => {
+    const blockProperties = getBlockProperties(useBlock());
     return {
-      ...getBlockProperties(useBlock()),
+      ...blockProperties,
       ...(TARGET === "reactNative"
         ? {
             style: getReactNativeBlockStyles({
               block: useBlock(),
               context: context,
+              blockStyles: blockProperties.style,
             }),
           }
         : {}),
@@ -133,6 +135,7 @@
                 ...actions(),
               },
             }),
+        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };
@@ -197,6 +200,7 @@
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: context,
+      blockStyles: attributes().style,
     });
     return extractTextStyles(styles);
   };

package/src/components/render-block/render-component.svelte

@@ -3,11 +3,14 @@
 
   import type { BuilderContextInterface } from "../../context/types.js";
 
+  import type { Breakpoints } from "../../types/builder-content.js";
+
   export interface RenderComponentProps {
     componentRef: any;
     componentOptions: any;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
+    customBreakpoints?: Breakpoints;
   }
 </script>
 

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

@@ -6,7 +6,10 @@
     RegisteredComponents,
   } from "../../context/types.js";
 
-  import type { BuilderContent } from "../../types/builder-content.js";
+  import type {
+    Breakpoints,
+    BuilderContent,
+  } from "../../types/builder-content.js";
 
   import type { Dictionary, Nullable } from "../../types/typescript.js";
 
@@ -99,6 +102,16 @@
     const { data } = event;
     if (data) {
       switch (data.type) {
+        case "builder.configureSdk": {
+          const messageContent = data.data;
+          const { breakpoints, contentId } = messageContent;
+          if (!contentId || contentId !== useContent?.()?.id) {
+            return;
+          }
+          useBreakpoints = breakpoints;
+          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key =
@@ -207,6 +220,14 @@
         ...data,
         ...overrideContent?.data,
       },
+      meta: {
+        ...content?.meta,
+        ...overrideContent?.meta,
+        breakpoints:
+          useBreakpoints ||
+          overrideContent?.meta?.breakpoints ||
+          content?.meta?.breakpoints,
+      },
     };
     return mergedContent;
   };
@@ -264,6 +285,7 @@
   let forceReRenderCount = 0;
   let overrideContent = null;
   let update = 0;
+  let useBreakpoints = null;
   let overrideState = {};
 
   onMount(() => {

package/src/functions/get-block-properties.ts

@@ -1,11 +1,41 @@
+import { TARGET } from '../constants/target.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.js';
+import { transformBlockProperties } from './transform-block-properties.js';
 
 export function getBlockProperties(block: BuilderBlock) {
-  return {
+  const properties = {
     ...block.properties,
     'builder-id': block.id,
+    style: getStyleAttribute(block.style),
     class: [block.id, 'builder-block', block.class, block.properties?.class]
       .filter(Boolean)
       .join(' '),
   };
+
+  return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+function getStyleAttribute(
+  style: Partial<CSSStyleDeclaration> | undefined
+): string | Partial<CSSStyleDeclaration> | undefined {
+  if (!style) {
+    return undefined;
+  }
+
+  switch (TARGET) {
+    case 'svelte':
+    case 'vue2':
+    case 'vue3':
+    case 'solid':
+      return convertStyleMapToCSSArray(style).join(' ');
+    case 'qwik':
+    case 'reactNative':
+    case 'react':
+      return style;
+  }
 }

package/src/functions/get-react-native-block-styles.ts

@@ -5,9 +5,11 @@ import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-st
 export function getReactNativeBlockStyles({
   block,
   context,
+  blockStyles,
 }: {
   block: BuilderBlock;
   context: BuilderContextInterface;
+  blockStyles: any;
 }): CSSStyleDeclaration | Record<string, string | undefined> {
   const responsiveStyles = block.responsiveStyles;
   if (!responsiveStyles) {
@@ -20,6 +22,7 @@ export function getReactNativeBlockStyles({
     ...(responsiveStyles.large || {}),
     ...(responsiveStyles.medium || {}),
     ...(responsiveStyles.small || {}),
+    ...blockStyles,
   } as Record<string, string | number>;
 
   const newStyles = sanitizeReactNativeBlockStyles(

package/src/functions/transform-block-properties.ts

@@ -0,0 +1,3 @@
+export function transformBlockProperties<T>(properties: T) {
+  return properties;
+}

package/src/helpers/css.ts

@@ -1,15 +1,24 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
+import { checkIsDefined } from './nullable.js';
 
-const convertStyleMaptoCSS = (style: Partial<CSSStyleDeclaration>): string => {
+export const convertStyleMapToCSSArray = (
+  style: Partial<CSSStyleDeclaration>
+): string[] => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === 'string') {
       return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return undefined;
     }
   });
 
-  return cssProps.join('\n');
+  return cssProps.filter(checkIsDefined);
 };
 
+export const convertStyleMapToCSS = (
+  style: Partial<CSSStyleDeclaration>
+): string => convertStyleMapToCSSArray(style).join('\n');
+
 export const createCssClass = ({
   mediaQuery,
   className,
@@ -20,7 +29,7 @@ export const createCssClass = ({
   styles: Partial<CSSStyleDeclaration>;
 }) => {
   const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
 
   if (mediaQuery) {

package/src/types/builder-block.ts

@@ -55,4 +55,5 @@ export interface BuilderBlock {
     itemName?: string;
   } | null;
   animations?: any[]; // TODO: type the animation spec
+  style?: Partial<CSSStyleDeclaration>;
 }

package/src/types/builder-content.ts

@@ -1,8 +1,13 @@
 import type { BuilderBlock } from './builder-block.js';
+import type { Nullable } from './typescript.js';
 
 // TODO
 type Input = any;
 
+export interface Breakpoints {
+  small: number;
+  medium: number;
+}
 export interface BuilderContentVariation {
   data?: {
     title?: string;
@@ -18,10 +23,7 @@ export interface BuilderContentVariation {
   testRatio?: number;
   id?: string;
   meta?: {
-    breakpoints?: {
-      small: number;
-      medium: number;
-    };
+    breakpoints?: Nullable<Breakpoints>;
     [key: string]: any;
   };
 }

package/src/types/targets.ts

@@ -2,5 +2,5 @@ type MitosisTargets = import('@builder.io/mitosis').Target;
 
 export type Target = Extract<
   MitosisTargets,
-  'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik'
+  'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid'
 >;