@builder.io/sdk-svelte 0.0.1-19 → 0.0.1-21

package/src/blocks/image/image.svelte

@@ -1,118 +1,86 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let altText;
-export let backgroundSize;
-export let className;
-export let image;
-export let srcset;
-export let sizes;
-export let aspectRatio;
-export let fitContent;
-export let builderBlock;
-
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <div  class="div" >
-    
-<picture >
-      
-<img  loading="lazy"  alt={altText}  role={altText ? 'presentation' : undefined}  style={{
-objectPosition: backgroundSize || 'center',
-objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (className ? ' ' + className : '') + 'img'}  src={image}  srcset={srcset}  sizes={sizes}  />
-
-      
-<source  srcset={srcset}  />
-
-    </picture>
-
-    
-
-{#if aspectRatio && !(fitContent && builderBlock?.children?.length) }
-
-      
-<div  class="builder-image-sizer div-2"  style={{
-paddingTop: aspectRatio * 100 + '%'
-}} ></div>
-
-    
-
-
-{/if}
-
-    
-
-{#if builderBlock?.children?.length && fitContent }
-
-      
-<slot></slot>
-
-    
-
-
-{/if}
-
-
-    
-
-{#if !fitContent }
-
-      
-<div  class="div-3" >
-        
-<slot></slot>
-
-      </div>
-
-    
-
-
-{/if}
-
-  </div>
-
-  <style>
-    .div { 
-position: relative; }.img { 
-opacity: 1;
-transition: opacity 0.2s ease-in-out;
-position: absolute;
-height: 100%;
-width: 100%;
-top: 0px;
-left: 0px; }.div-2 { 
-width: 100%;
-pointer-events: none;
-font-size: 0; }.div-3 { 
-display: flex;
-flex-direction: column;
-align-items: stretch;
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%; }
-  </style>
+  export let altText;
+  export let backgroundSize;
+  export let className;
+  export let image;
+  export let srcset;
+  export let sizes;
+  export let aspectRatio;
+  export let fitContent;
+  export let builderBlock;
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
+
+<div class="div">
+  <picture>
+    <img
+      use:mitosis_styling={{
+        objectPosition: backgroundSize || "center",
+        objectFit: backgroundSize || "cover",
+      }}
+      loading="lazy"
+      alt={altText}
+      role={altText ? "presentation" : undefined}
+      class={"builder-image" + (className ? " " + className : "") + "img"}
+      src={image}
+      {srcset}
+      {sizes}
+    />
+
+    <source {srcset} />
+  </picture>
+
+  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
+    <div
+      use:mitosis_styling={{
+        paddingTop: aspectRatio * 100 + "%",
+      }}
+      class="builder-image-sizer div-2"
+    />
+  {/if}
+
+  {#if builderBlock?.children?.length && fitContent}
+    <slot />
+  {/if}
+
+  {#if !fitContent}
+    <div class="div-3">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .div {
+    position: relative;
+  }
+  .img {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+  }
+  .div-2 {
+    width: 100%;
+    pointer-events: none;
+    font-size: 0;
+  }
+  .div-3 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/blocks/img/img.svelte

@@ -1,36 +1,26 @@
 <script>
-    
-    
-    
-    
-  import { isEditing } from '../../functions/is-editing.js';
-  
-  
+  import { isEditing } from "../../functions/is-editing.js";
 
-    
+  export let backgroundSize;
+  export let backgroundPosition;
+  export let attributes;
+  export let imgSrc;
+  export let altText;
 
-    
-    export let backgroundSize;
-export let backgroundPosition;
-export let attributes;
-export let imgSrc;
-export let altText;
-    
-    
-    
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
 
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <img {...attributes} style={{
-objectFit: backgroundSize || 'cover',
-objectPosition: backgroundPosition || 'center'
-}}  key={isEditing() && imgSrc || 'default-key'}  alt={altText}  src={imgSrc}  />
+<img
+  {...attributes}
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc}
+/>

package/src/blocks/input/input.svelte

@@ -1,35 +1,22 @@
 <script>
-  
-  
-  
-  
-import { isEditing } from '../../functions/is-editing.js';
+  import { isEditing } from "../../functions/is-editing.js";
 
-
-
-  
-
-  
   export let attributes;
-export let defaultValue;
-export let placeholder;
-export let type;
-export let name;
-export let value;
-export let required;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let defaultValue;
+  export let placeholder;
+  export let type;
+  export let name;
+  export let value;
+  export let required;
 </script>
 
-<input {...attributes} key={isEditing() && defaultValue ? defaultValue : 'default-key'}  placeholder={placeholder}  type={type}  name={name}  value={value}  defaultValue={defaultValue}  required={required}  />
+<input
+  {...attributes}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {placeholder}
+  {type}
+  {name}
+  {value}
+  {defaultValue}
+  {required}
+/>

package/src/blocks/raw-text/raw-text.svelte

@@ -1,30 +1,8 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let text;
 </script>
 
-<span  class={attributes?.class || attributes?.className} >{@html text || ''}</span>
+<span class={attributes?.class || attributes?.className}
+  >{@html text || ""}</span
+>

package/src/blocks/section/section.svelte

@@ -1,37 +1,21 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let attributes;
-export let maxWidth;
-
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <section {...attributes} style={maxWidth && typeof maxWidth === 'number' ? {
-maxWidth: maxWidth
-} : undefined} >
-    
-<slot></slot>
-
-  </section>
+  export let attributes;
+  export let maxWidth;
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
+
+<section
+  {...attributes}
+  use:mitosis_styling={maxWidth && typeof maxWidth === "number"
+    ? {
+        maxWidth: maxWidth,
+      }
+    : undefined}
+>
+  <slot />
+</section>

package/src/blocks/select/select.svelte

@@ -1,41 +1,21 @@
 <script>
-  
-  
-  
-  
-import { isEditing } from '../../functions/is-editing.js';
+  import { isEditing } from "../../functions/is-editing.js";
 
-
-
-  
-
-  
   export let attributes;
-export let value;
-export let defaultValue;
-export let name;
-export let options;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let value;
+  export let defaultValue;
+  export let name;
+  export let options;
 </script>
 
-<select {...attributes} value={value}  key={isEditing() && defaultValue ? defaultValue : 'default-key'}  defaultValue={defaultValue}  name={name} >
-  
-
-{#each options as option, index }
-<option  value={option.value} >{option.name || option.value}</option>
-{/each}
-
-
-</select>
+<select
+  {...attributes}
+  {value}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {defaultValue}
+  {name}
+>
+  {#each options as option, undefined}
+    <option value={option.value}>{option.name || option.value}</option>
+  {/each}
+</select>

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

@@ -1,34 +1,8 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let text;
 </script>
 
-<button {...attributes} type="submit" >
-  
-{text}
-
-</button>
+<button {...attributes} type="submit">
+  {text}
+</button>

package/src/blocks/symbol/symbol.svelte

@@ -1,54 +1,66 @@
 <script>
-    import { onMount } from 'svelte'
-    import { afterUpdate } from 'svelte'
-    
-    
-  import RenderContent from '../../components/render-content/render-content.svelte';
-import BuilderContext from '../../context/builder.context';
-import { getContent } from '../../functions/get-content/index.js';
-  
-  
-
-    import { getContext, setContext } from "svelte";
-
-    
-    export let attributes;
-export let symbol;
-    
-    
-    
-
-    let builderContext = getContext(BuilderContext.key);
-    
-    let className = 'builder-symbol';
-let content = null;
-
-    onMount(() => { content = symbol?.content; });
-
-    afterUpdate(() => { const symbolToUse = symbol;
-
-if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
-getContent({
-  model: symbolToUse.model,
-  apiKey: builderContext.apiKey,
-  options: {
-    entry: symbolToUse.entry
+  import { onMount } from "svelte";
+  import { afterUpdate } from "svelte";
+
+  import RenderContent from "../../components/render-content/render-content.svelte";
+  import BuilderContext from "../../context/builder.context";
+  import { getContent } from "../../functions/get-content/index.js";
+
+  import { getContext, setContext } from "svelte";
+
+  export let attributes;
+  export let symbol;
+
+  let builderContext = getContext(BuilderContext.key);
+
+  let className = "builder-symbol";
+  let content = null;
+
+  onMount(() => {
+    content = symbol?.content;
+  });
+
+  function onUpdateFn_0() {
+    const symbolToUse = symbol;
+
+    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        options: {
+          entry: symbolToUse.entry,
+        },
+      }).then((response) => {
+        content = response;
+      });
+    }
   }
-}).then(response => {
-  content = response;
-});
-} })
-
-    
-  </script>
-
-  <div {...attributes} dataSet={{
-class: className
-}}  class={className} >
-    
-<RenderContent  apiKey={builderContext.apiKey}  context={builderContext.context}  data={{ ...symbol?.data,
-...builderContext.state,
-...symbol?.content?.data?.state
-}}  model={symbol?.model}  content={content} ></RenderContent>
-
-  </div>
+  $: onUpdateFn_0(
+    ...[
+      props.symbol?.content,
+      props.symbol?.model,
+      props.symbol?.entry,
+      state.content,
+    ]
+  );
+</script>
+
+<div
+  {...attributes}
+  dataSet={{
+    class: className,
+  }}
+  class={className}
+>
+  <RenderContent
+    apiKey={builderContext.apiKey}
+    context={builderContext.context}
+    data={{
+      ...symbol?.data,
+      ...builderContext.state,
+      ...symbol?.content?.data?.state,
+    }}
+    model={symbol?.model}
+    {content}
+  />
+</div>

package/src/blocks/text/text.svelte

@@ -1,29 +1,5 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
 </script>
 
-<div  class="builder-text" >{@html text}</div>
+<div class="builder-text">{@html text}</div>