@builder.io/sdk-svelte 1.0.17 → 1.0.20

package/src/blocks/columns/columns.svelte

@@ -6,14 +6,14 @@
   import Blocks from "../../components/blocks/blocks.svelte";
   import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
   import InlinedStyles from "../../components/inlined-styles.svelte";
-  import type { SizeName } from "../../constants/device-sizes.js";
-  import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-  import { TARGET } from "../../constants/target.js";
-  import { deoptSignal } from "../../functions/deopt.js";
-  import { getClassPropName } from "../../functions/get-class-prop-name.js";
-  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
-  import type { Dictionary } from "../../types/typescript.js";
-  import type { ColumnProps } from "./columns.types.js";
+  import type { SizeName } from "../../constants/device-sizes";
+  import { getSizesForBreakpoints } from "../../constants/device-sizes";
+  import { TARGET } from "../../constants/target";
+  import { deoptSignal } from "../../functions/deopt";
+  import { getClassPropName } from "../../functions/get-class-prop-name";
+  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
+  import type { Dictionary } from "../../types/typescript";
+  import type { ColumnProps } from "./columns.types";
 
   export let space: ColumnProps["space"] = undefined;
   export let columns: ColumnProps["columns"] = undefined;
@@ -25,15 +25,15 @@
   export let builderLinkComponent: ColumnProps["builderLinkComponent"] =
     undefined;
   export let builderComponents: ColumnProps["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: number) {
@@ -150,7 +150,7 @@
 </script>
 
 <div
-  use:mitosis_styling={columnsCssVars()}
+  style={stringifyStyles(columnsCssVars())}
   class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
   {...{}}
 >

package/src/blocks/columns/columns.types.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/src/blocks/columns/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: 'Columns',

package/src/blocks/custom-code/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Custom Code',
   static: true,

package/src/blocks/embed/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Embed',
   static: true,

package/src/blocks/embed/embed.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import { isJsScript } from "./helpers.js";
+  import { isJsScript } from "./helpers";
 
   export let content: EmbedProps["content"];
 

package/src/blocks/form/form/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Form',
   // editableTags: ['builder-form-error']

package/src/blocks/form/form/form.svelte

@@ -37,21 +37,20 @@
 <script lang="ts">
   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 type { BuilderBlock } from "../../../types/builder-block.js";
+  import { getEnv } from "../../../functions/get-env";
+  import { get } from "../../../functions/get";
+  import { isEditing } from "../../../functions/is-editing";
+  import { set } from "../../../functions/set";
+  import type { BuilderBlock } from "../../../types/builder-block";
   import type {
     BuilderComponentsProp,
     BuilderDataProps,
     BuilderLinkComponentProp,
-  } from "../../../types/builder-props.js";
-  import type { Dictionary } from "../../../types/typescript.js";
-  import { filterAttrs } from "../../helpers.js";
-  import { setAttrs } from "../../helpers.js";
+  } from "../../../types/builder-props";
+  import type { Dictionary } from "../../../types/typescript";
+  import { filterAttrs } from "../../helpers";
+  import { setAttrs } from "../../helpers";
 
-  export let js: FormProps["js"];
   export let builderContext: FormProps["builderContext"];
   export let previewState: FormProps["previewState"] = undefined;
   export let sendWithJs: FormProps["sendWithJs"] = undefined;

package/src/blocks/form/input/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Input',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',

package/src/blocks/form/input/input.svelte

@@ -15,9 +15,9 @@
 </script>
 
 <script lang="ts">
-  import { isEditing } from "../../../functions/is-editing.js";
-  import { filterAttrs } from "../../helpers.js";
-  import { setAttrs } from "../../helpers.js";
+  import { isEditing } from "../../../functions/is-editing";
+  import { filterAttrs } from "../../helpers";
+  import { setAttrs } from "../../helpers";
 
   export let attributes: FormInputProps["attributes"] = undefined;
   export let defaultValue: FormInputProps["defaultValue"] = undefined;

package/src/blocks/form/select/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Select',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',

package/src/blocks/form/select/select.svelte

@@ -16,9 +16,9 @@
 </script>
 
 <script lang="ts">
-  import { isEditing } from "../../../functions/is-editing.js";
-  import { filterAttrs } from "../../helpers.js";
-  import { setAttrs } from "../../helpers.js";
+  import { isEditing } from "../../../functions/is-editing";
+  import { filterAttrs } from "../../helpers";
+  import { setAttrs } from "../../helpers";
 
   export let attributes: FormSelectProps["attributes"] = undefined;
   export let value: FormSelectProps["value"] = undefined;
@@ -35,7 +35,7 @@
   {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/src/blocks/form/submit-button/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../../types/components.js';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:SubmitButton',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',

package/src/blocks/form/submit-button/submit-button.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
-  import { filterAttrs } from "../../helpers.js";
-  import { setAttrs } from "../../helpers.js";
+  import { filterAttrs } from "../../helpers";
+  import { setAttrs } from "../../helpers";
 
   export let attributes: ButtonProps["attributes"] = undefined;
   export let text: ButtonProps["text"] = undefined;

package/src/blocks/fragment/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Fragment',
   static: true,

package/src/blocks/fragment/fragment.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FragmentProps } from "./fragment.types.js";
+  import type { FragmentProps } from "./fragment.types";
 </script>
 
 <span><slot /></span>

package/src/blocks/image/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Image',
   static: true,

package/src/blocks/image/image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getSrcSet } from "./image.helpers.js";
-  import type { ImageProps } from "./image.types.js";
+  import { getSrcSet } from "./image.helpers";
+  import type { ImageProps } from "./image.types";
 
   export let image: ImageProps["image"];
   export let src: ImageProps["src"] = undefined;
@@ -15,14 +15,15 @@
   export let builderBlock: ImageProps["builderBlock"] = undefined;
   export let fitContent: ImageProps["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 = () => {
@@ -70,11 +71,11 @@
   {#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"}
@@ -87,9 +88,9 @@
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
-    use:mitosis_styling={{
+    style={stringifyStyles({
       paddingTop: aspectRatio * 100 + "%",
-    }}
+    })}
     class="builder-image-sizer div"
   />
 {/if}

package/src/blocks/image/image.types.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/src/blocks/img/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   // friendlyName?
   name: 'Raw:Img',

package/src/blocks/img/img.svelte

@@ -23,9 +23,9 @@
 </script>
 
 <script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-  import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
+  import { isEditing } from "../../functions/is-editing";
+  import { filterAttrs } from "../helpers";
+  import { setAttrs } from "../helpers";
 
   export let backgroundSize: ImgProps["backgroundSize"] = undefined;
   export let backgroundPosition: ImgProps["backgroundPosition"] = undefined;
@@ -33,23 +33,23 @@
   export let altText: ImgProps["altText"] = undefined;
   export let image: ImgProps["image"] = undefined;
   export let attributes: ImgProps["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/src/blocks/raw-text/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Builder:RawText',
   hideFromInsertMenu: true,

package/src/blocks/section/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Core:Section',
   static: true,

package/src/blocks/section/section.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-  import { filterAttrs } from "../helpers.js";
-  import type { SectionProps } from "./section.types.js";
-  import { setAttrs } from "../helpers.js";
+  import { filterAttrs } from "../helpers";
+  import type { SectionProps } from "./section.types";
+  import { setAttrs } from "../helpers";
 
   export let attributes: SectionProps["attributes"] = undefined;
   export let maxWidth: SectionProps["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,
@@ -29,7 +30,7 @@
     alignItems: "stretch",
     marginLeft: "auto",
     marginRight: "auto",
-  }}
+  })}
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >

package/src/blocks/slot/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Slot',
   isRSC: true,

package/src/blocks/slot/slot.svelte

@@ -7,29 +7,28 @@
 
 <script lang="ts">
   import Blocks from "../../components/blocks/blocks.svelte";
-  import { deoptSignal } from "../../functions/deopt.js";
-  import type { BuilderBlock } from "../../types/builder-block.js";
-  import type { BuilderDataProps } from "../../types/builder-props.js";
+  import { deoptSignal } from "../../functions/deopt";
+  import type { BuilderBlock } from "../../types/builder-block";
+  import type { BuilderDataProps } from "../../types/builder-props";
 
-  export let js: DropzoneProps["js"];
   export let builderContext: DropzoneProps["builderContext"];
   export let name: DropzoneProps["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/src/blocks/symbol/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Symbol',
   noWrap: true,

package/src/blocks/symbol/symbol.helpers.ts

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

package/src/blocks/symbol/symbol.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  import ContentVariants from "../../components/content-variants/index.js";
-  import type { BuilderContent } from "../../types/builder-content.js";
-  import { filterAttrs } from "../helpers.js";
-  import { getClassPropName } from "../../functions/get-class-prop-name.js";
-  import type { Nullable } from "../../types/typescript.js";
-  import { setAttrs } from "../helpers.js";
-  import { fetchSymbolContent } from "./symbol.helpers.js";
-  import type { SymbolProps } from "./symbol.types.js";
+  import ContentVariants from "../../components/content-variants/index";
+  import type { BuilderContent } from "../../types/builder-content";
+  import { filterAttrs } from "../helpers";
+  import { getClassPropName } from "../../functions/get-class-prop-name";
+  import type { Nullable } from "../../types/typescript";
+  import { setAttrs } from "../helpers";
+  import { fetchSymbolContent } from "./symbol.helpers";
+  import type { SymbolProps } from "./symbol.types";
 
-  export let attributes: SymbolProps["attributes"] = undefined;
   export let symbol: SymbolProps["symbol"] = undefined;
+  export let attributes: SymbolProps["attributes"] = undefined;
   export let dynamic: SymbolProps["dynamic"] = undefined;
   export let builderContext: SymbolProps["builderContext"];
   export let builderBlock: SymbolProps["builderBlock"];

package/src/blocks/symbol/symbol.types.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/src/blocks/text/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Text',
   static: true,

package/src/blocks/text/text.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-  import type { TextProps } from "./text.types.js";
+  import type { TextProps } from "./text.types";
 
   export let text: TextProps["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/src/blocks/textarea/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:TextArea',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',

package/src/blocks/textarea/textarea.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <script lang="ts">
-  import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
+  import { filterAttrs } from "../helpers";
+  import { setAttrs } from "../helpers";
 
   export let attributes: TextareaProps["attributes"] = undefined;
   export let placeholder: TextareaProps["placeholder"] = undefined;

package/src/blocks/video/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Video',
   canHaveChildren: true,