@builder.io/sdk-svelte 1.0.19 → 1.0.21

package/lib/node/server-index.d.ts

@@ -1,39 +1,39 @@
-export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file';
 /**
  * Component Prop types
  */
-export type { ButtonProps } from './blocks/button/button.types.js';
-export type { ColumnProps } from './blocks/columns/columns.types.js';
-export type { FragmentProps } from './blocks/fragment/fragment.types.js';
-export type { ImageProps } from './blocks/image/image.types.js';
-export type { SectionProps } from './blocks/section/section.types.js';
-export type { SymbolProps } from './blocks/symbol/symbol.types.js';
-export type { TextProps } from './blocks/text/text.types.js';
-export type { VideoProps } from './blocks/video/video.types.js';
-export type { BlocksProps } from './components/blocks/blocks.types.js';
-export type { ContentVariantsPrps as ContentProps } from './components/content-variants/content-variants.types.js';
+export type { ButtonProps } from './blocks/button/button.types';
+export type { ColumnProps } from './blocks/columns/columns.types';
+export type { FragmentProps } from './blocks/fragment/fragment.types';
+export type { ImageProps } from './blocks/image/image.types';
+export type { SectionProps } from './blocks/section/section.types';
+export type { SymbolProps } from './blocks/symbol/symbol.types';
+export type { TextProps } from './blocks/text/text.types';
+export type { VideoProps } from './blocks/video/video.types';
+export type { BlocksProps } from './components/blocks/blocks.types';
+export type { ContentVariantsPrps as ContentProps } from './components/content-variants/content-variants.types';
 /**
  * General Builder types
  */
-export type { RegisteredComponent } from './context/types.js';
-export type { BuilderBlock } from './types/builder-block.js';
-export type { BuilderContent } from './types/builder-content.js';
-export type { ComponentInfo } from './types/components.js';
+export type { RegisteredComponent } from './context/types';
+export type { BuilderBlock } from './types/builder-block';
+export type { BuilderContent } from './types/builder-content';
+export type { ComponentInfo } from './types/components';
 /**
  * Helper functions
  */
-export { isEditing } from './functions/is-editing.js';
-export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
-export { register } from './functions/register.js';
-export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
-export { setEditorSettings } from './functions/set-editor-settings.js';
-export type { Settings } from './functions/set-editor-settings.js';
-export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+export { isEditing } from './functions/is-editing';
+export { isPreviewing } from './functions/is-previewing';
+export { createRegisterComponentMessage } from './functions/register-component';
+export { register } from './functions/register';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
+export { setEditorSettings } from './functions/set-editor-settings';
+export type { Settings } from './functions/set-editor-settings';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
+export { track } from './functions/track/index';
+export { subscribeToEditor } from './helpers/subscribe-to-editor';
 /**
  * Content fetching
  */
-export { fetchBuilderProps } from './functions/fetch-builder-props.js';
-export { _processContentResult, fetchEntries, fetchOneEntry } from './functions/get-content/index.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props';
+export { _processContentResult, fetchEntries, fetchOneEntry } from './functions/get-content/index';

package/lib/node/server-index.js

@@ -1,17 +1,17 @@
-export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/top-of-file';
 /**
  * Helper functions
  */
-export { isEditing } from './functions/is-editing.js';
-export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
-export { register } from './functions/register.js';
-export { setEditorSettings } from './functions/set-editor-settings.js';
-export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+export { isEditing } from './functions/is-editing';
+export { isPreviewing } from './functions/is-previewing';
+export { createRegisterComponentMessage } from './functions/register-component';
+export { register } from './functions/register';
+export { setEditorSettings } from './functions/set-editor-settings';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
+export { track } from './functions/track/index';
+export { subscribeToEditor } from './helpers/subscribe-to-editor';
 /**
  * Content fetching
  */
-export { fetchBuilderProps } from './functions/fetch-builder-props.js';
-export { _processContentResult, fetchEntries, fetchOneEntry } from './functions/get-content/index.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props';
+export { _processContentResult, fetchEntries, fetchOneEntry } from './functions/get-content/index';

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

@@ -1,6 +1,6 @@
-import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './input.js';
-import type { Nullable } from './typescript.js';
+import type { BuilderBlock } from './builder-block';
+import type { Input } from './input';
+import type { Nullable } from './typescript';
 export interface Breakpoints {
     small: number;
     medium: number;

package/lib/node/types/builder-props.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
 import type { Writable } from "svelte/store";
-import type { BuilderContextInterface, RegisteredComponents } from '../context/types.js';
-import type { BuilderBlock } from './builder-block.js';
+import type { BuilderContextInterface, RegisteredComponents } from '../context/types';
+import type { BuilderBlock } from './builder-block';
 export type BuilderDataProps = {
     builderBlock: BuilderBlock;
     builderContext: Writable<BuilderContextInterface>;

package/lib/node/types/components.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderElement } from './element.js';
-import type { Input } from './input.js';
+import type { BuilderElement } from './element';
+import type { Input } from './input';
 export interface ComponentInfo {
     /**
      * Name your component something unique, e.g. 'MyButton'. You can override built-in components

package/lib/node/types/enforced-partials.d.ts

@@ -1,4 +1,4 @@
-import type { Prettify } from './typescript.js';
+import type { Prettify } from './typescript';
 /**
  * Lol Typescript
  * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360

package/package.json

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

package/src/blocks/BaseText.svelte

@@ -7,21 +7,20 @@
 <script lang="ts">
   import { getContext } from "svelte";
 
-  import BuilderContext from "../context/builder.context.js";
+  import BuilderContext from "../context/builder.context";
 
   export let text: BaseTextProps["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/src/blocks/button/button.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
-  import { getClassPropName } from "../../functions/get-class-prop-name.js";
-  import { filterAttrs } from "../helpers.js";
-  import type { ButtonProps } from "./button.types.js";
+  import { getClassPropName } from "../../functions/get-class-prop-name";
+  import { filterAttrs } from "../helpers";
+  import type { ButtonProps } from "./button.types";
 
   export let attributes: ButtonProps["attributes"] = undefined;
   export let link: ButtonProps["link"] = undefined;

package/src/blocks/button/button.types.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/src/blocks/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: 'Core:Button',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',

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)}
 >