@builder.io/sdk-svelte 1.0.19 → 1.0.21

package/lib/browser/blocks/BaseText.svelte

@@ -1,19 +1,19 @@
 <script context="module"></script>
 
 <script>import { getContext } from "svelte";
-import BuilderContext from "../context/builder.context.js";
+import BuilderContext from "../context/builder.context";
 export let text;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={$builderContext.inheritedStyles}>{text}</span>
+<span style={stringifyStyles($builderContext.inheritedStyles)}>{text}</span>

package/lib/browser/blocks/button/button.svelte

@@ -1,6 +1,6 @@
 <script>import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
-import { getClassPropName } from "../../functions/get-class-prop-name.js";
-import { filterAttrs } from "../helpers.js";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { filterAttrs } from "../helpers";
 export let attributes = undefined;
 export let link = undefined;
 export let openLinkInNewTab = undefined;

package/lib/browser/blocks/button/button.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ButtonProps } from "./button.types.js";
+import type { ButtonProps } from "./button.types";
 declare const __propDef: {
     props: {
         attributes?: ButtonProps["attributes"];

package/lib/browser/blocks/button/button.types.d.ts

@@ -1,4 +1,4 @@
-import type { BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderLinkComponentProp } from '../../types/builder-props';
 export interface ButtonProps extends BuilderLinkComponentProp {
     attributes?: any;
     text?: string;

package/lib/browser/blocks/button/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/columns/columns.svelte

@@ -3,11 +3,11 @@
 <script>import Blocks from "../../components/blocks/blocks.svelte";
 import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
 import InlinedStyles from "../../components/inlined-styles.svelte";
-import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-import { TARGET } from "../../constants/target.js";
-import "../../functions/deopt.js";
-import { getClassPropName } from "../../functions/get-class-prop-name.js";
-import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import { TARGET } from "../../constants/target";
+import "../../functions/deopt";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
 export let space = undefined;
 export let columns = undefined;
 export let stackColumnsAt = undefined;
@@ -16,15 +16,15 @@ export let builderContext;
 export let builderBlock;
 export let builderLinkComponent = undefined;
 export let builderComponents;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 function getWidth(index) {
     return cols[index]?.width || 100 / cols.length;
@@ -124,7 +124,7 @@ let flexDir = stackColumnsAt === "never"
 </script>
 
 <div
-  use:mitosis_styling={columnsCssVars()}
+  style={stringifyStyles(columnsCssVars())}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
   {...{}}
 >

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ColumnProps } from "./columns.types.js";
+import type { ColumnProps } from "./columns.types";
 declare const __propDef: {
     props: {
         space?: ColumnProps["space"];

package/lib/browser/blocks/columns/columns.types.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderBlock } from '../../types/builder-block.js';
-import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
 type Column = {
     blocks: BuilderBlock[];
     width?: number;

package/lib/browser/blocks/columns/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/custom-code/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/embed/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/embed/embed.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { isJsScript } from "./helpers.js";
+<script>import { isJsScript } from "./helpers";
 export let content;
 function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)

package/lib/browser/blocks/form/form/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/form/form/form.svelte

@@ -5,13 +5,12 @@
 
 <script>import Block from "../../../components/block/block.svelte";
 import Blocks from "../../../components/blocks/blocks.svelte";
-import { getEnv } from "../../../functions/get-env.js";
-import { get } from "../../../functions/get.js";
-import { isEditing } from "../../../functions/is-editing.js";
-import { set } from "../../../functions/set.js";
-import { filterAttrs } from "../../helpers.js";
-import { setAttrs } from "../../helpers.js";
-export let js;
+import { getEnv } from "../../../functions/get-env";
+import { get } from "../../../functions/get";
+import { isEditing } from "../../../functions/is-editing";
+import { set } from "../../../functions/set";
+import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let builderContext;
 export let previewState = undefined;
 export let sendWithJs = undefined;

package/lib/browser/blocks/form/input/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/form/input/input.svelte

@@ -3,9 +3,9 @@
  */
 </script>
 
-<script>import { isEditing } from "../../../functions/is-editing.js";
-import { filterAttrs } from "../../helpers.js";
-import { setAttrs } from "../../helpers.js";
+<script>import { isEditing } from "../../../functions/is-editing";
+import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let defaultValue = undefined;
 export let placeholder = undefined;

package/lib/browser/blocks/form/select/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/form/select/select.svelte

@@ -3,9 +3,9 @@
  */
 </script>
 
-<script>import { isEditing } from "../../../functions/is-editing.js";
-import { filterAttrs } from "../../helpers.js";
-import { setAttrs } from "../../helpers.js";
+<script>import { isEditing } from "../../../functions/is-editing";
+import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
@@ -21,7 +21,7 @@ export let options = undefined;
   {name}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#each options as option}
+  {#each options as option, index (`${option.name}-${index}`)}
     <option value={option.value}>{option.name || option.value}</option>
   {/each}
 </select>

package/lib/browser/blocks/form/submit-button/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/form/submit-button/submit-button.svelte

@@ -3,8 +3,8 @@
  */
 </script>
 
-<script>import { filterAttrs } from "../../helpers.js";
-import { setAttrs } from "../../helpers.js";
+<script>import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let text = undefined;
 </script>

package/lib/browser/blocks/fragment/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/fragment/fragment.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { FragmentProps } from "./fragment.types.js";
+import type { FragmentProps } from "./fragment.types";
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/lib/browser/blocks/image/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/image/image.svelte

@@ -1,4 +1,4 @@
-<script>import { getSrcSet } from "./image.helpers.js";
+<script>import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -11,15 +11,15 @@ export let className = undefined;
 export let sizes = undefined;
 export let builderBlock = undefined;
 export let fitContent = undefined;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 $: srcSetToUse = () => {
     const imageToUse = image || src;
@@ -66,11 +66,11 @@ $: aspectRatioCss = () => {
   {#if webpSrcSet()}
     <source type="image/webp" srcset={webpSrcSet()} />
   {/if}<img
-    use:mitosis_styling={{
+    style={stringifyStyles({
       objectPosition: backgroundPosition || "center",
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
-    }}
+    })}
     loading="lazy"
     alt={altText}
     role={altText ? undefined : "presentation"}
@@ -83,9 +83,9 @@ $: aspectRatioCss = () => {
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
-    use:mitosis_styling={{
+    style={stringifyStyles({
       paddingTop: aspectRatio * 100 + "%",
-    }}
+    })}
     class="builder-image-sizer div"
   />
 {/if}

package/lib/browser/blocks/image/image.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ImageProps } from "./image.types.js";
+import type { ImageProps } from "./image.types";
 declare const __propDef: {
     props: {
         image: ImageProps["image"];

package/lib/browser/blocks/image/image.types.d.ts

@@ -1,4 +1,4 @@
-import type { BuilderBlock } from '../../types/builder-block.js';
+import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
     className?: string;
     image: string;

package/lib/browser/blocks/img/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/img/img.svelte

@@ -3,32 +3,32 @@
  */
 </script>
 
-<script>import { isEditing } from "../../functions/is-editing.js";
-import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
+<script>import { isEditing } from "../../functions/is-editing";
+import { filterAttrs } from "../helpers";
+import { setAttrs } from "../helpers";
 export let backgroundSize = undefined;
 export let backgroundPosition = undefined;
 export let imgSrc = undefined;
 export let altText = undefined;
 export let image = undefined;
 export let attributes = undefined;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 </script>
 
 <img
-  use:mitosis_styling={{
+  style={stringifyStyles({
     objectFit: backgroundSize || "cover",
     objectPosition: backgroundPosition || "center",
-  }}
+  })}
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}

package/lib/browser/blocks/raw-text/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/section/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/section/section.svelte

@@ -1,21 +1,21 @@
-<script>import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
+<script>import { filterAttrs } from "../helpers";
+import { setAttrs } from "../helpers";
 export let attributes = undefined;
 export let maxWidth = undefined;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 </script>
 
 <section
-  use:mitosis_styling={{
+  style={stringifyStyles({
     width: "100%",
     alignSelf: "stretch",
     flexGrow: 1,
@@ -26,7 +26,7 @@ function mitosis_styling(node, vars) {
     alignItems: "stretch",
     marginLeft: "auto",
     marginRight: "auto",
-  }}
+  })}
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >

package/lib/browser/blocks/section/section.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SectionProps } from "./section.types.js";
+import type { SectionProps } from "./section.types";
 declare const __propDef: {
     props: {
         attributes?: SectionProps["attributes"];

package/lib/browser/blocks/slot/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/slot/slot.svelte

@@ -1,26 +1,25 @@
 <script context="module"></script>
 
 <script>import Blocks from "../../components/blocks/blocks.svelte";
-import "../../functions/deopt.js";
-export let js;
+import "../../functions/deopt";
 export let builderContext;
 export let name;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 </script>
 
 <div
-  use:mitosis_styling={{
+  style={stringifyStyles({
     pointerEvents: "auto",
-  }}
+  })}
   {...!$builderContext.context?.symbolId && {
     "builder-slot": name,
   }}

package/lib/browser/blocks/slot/slot.svelte.d.ts

@@ -3,10 +3,9 @@ export type DropzoneProps = BuilderDataProps & {
     name: string;
     attributes: any;
 };
-import type { BuilderDataProps } from "../../types/builder-props.js";
+import type { BuilderDataProps } from "../../types/builder-props";
 declare const __propDef: {
     props: {
-        js: any;
         builderContext: DropzoneProps["builderContext"];
         name: DropzoneProps["name"];
     };

package/lib/browser/blocks/symbol/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/symbol/symbol.helpers.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderContextInterface } from '../../context/types.js';
-import type { BuilderContent } from '../../types/builder-content.js';
+import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
 export interface SymbolInfo {
     model?: string;
     entry?: string;

package/lib/browser/blocks/symbol/symbol.helpers.js

@@ -1,5 +1,5 @@
-import { logger } from '../../helpers/logger.js';
-import { fetchOneEntry } from '../../index.js';
+import { logger } from '../../helpers/logger';
+import { fetchOneEntry } from '../../index';
 export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     /**
      * If:

package/lib/browser/blocks/symbol/symbol.svelte

@@ -1,11 +1,11 @@
 <script>import { onMount } from "svelte";
-import ContentVariants from "../../components/content-variants/index.js";
-import { filterAttrs } from "../helpers.js";
-import { getClassPropName } from "../../functions/get-class-prop-name.js";
-import { setAttrs } from "../helpers.js";
-import { fetchSymbolContent } from "./symbol.helpers.js";
-export let attributes = undefined;
+import ContentVariants from "../../components/content-variants/index";
+import { filterAttrs } from "../helpers";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { setAttrs } from "../helpers";
+import { fetchSymbolContent } from "./symbol.helpers";
 export let symbol = undefined;
+export let attributes = undefined;
 export let dynamic = undefined;
 export let builderContext;
 export let builderBlock;

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { SymbolProps } from "./symbol.types.js";
+import type { SymbolProps } from "./symbol.types";
 declare const __propDef: {
     props: {
-        attributes?: SymbolProps["attributes"];
         symbol?: SymbolProps["symbol"];
+        attributes?: SymbolProps["attributes"];
         dynamic?: SymbolProps["dynamic"];
         builderContext: SymbolProps["builderContext"];
         builderBlock: SymbolProps["builderBlock"];

package/lib/browser/blocks/symbol/symbol.types.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderContent } from '../../types/builder-content.js';
-import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderContent } from '../../types/builder-content';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
 interface SymbolInfo {
     model?: string;
     entry?: string;

package/lib/browser/blocks/text/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/text/text.svelte

@@ -1,20 +1,20 @@
 <script>export let text = undefined;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
 }
 </script>
 
 <div
-  use:mitosis_styling={{
+  style={stringifyStyles({
     outline: "none",
-  }}
+  })}
   class="builder-text"
 >
   {@html text?.toString() || ""}

package/lib/browser/blocks/text/text.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { TextProps } from "./text.types.js";
+import type { TextProps } from "./text.types";
 declare const __propDef: {
     props: {
         text?: TextProps["text"];