@builder.io/sdk-svelte 0.0.1-20 → 0.0.1-23

package/src/blocks/symbol/symbol.svelte

@@ -1,59 +1,59 @@
 <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; });
-
-    
-                  function onUpdateFn_0() {
-                    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;
-});
-}
-                  }
-                  $: 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={content} ></RenderContent>
-
-  </div>
+  $: onUpdateFn_0(...[symbol?.content, symbol?.model, symbol?.entry, 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>

package/src/blocks/textarea/textarea.svelte

@@ -1,33 +1,9 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let placeholder;
-export let name;
-export let value;
-export let defaultValue;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let placeholder;
+  export let name;
+  export let value;
+  export let defaultValue;
 </script>
 
-<textarea {...attributes} placeholder={placeholder}  name={name}  value={value}  defaultValue={defaultValue} ></textarea>
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/src/blocks/video/video.svelte

@@ -1,46 +1,38 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
+  export let attributes;
+  export let fit;
+  export let position;
+  export let video;
+  export let posterImage;
+  export let autoPlay;
+  export let muted;
+  export let controls;
+  export let loop;
 
-    
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
 
-    
-    export let attributes;
-export let fit;
-export let position;
-export let video;
-export let posterImage;
-export let autoPlay;
-export let muted;
-export let controls;
-export let loop;
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <video {...attributes} preload="none"  style={{
-width: '100%',
-height: '100%',
-...attributes?.style,
-objectFit: fit,
-objectPosition: position,
-// Hack to get object fit to work as expected and
-// not have the video overflow
-borderRadius: 1
-}}  key={video || 'no-src'}  poster={posterImage}  autoPlay={autoPlay}  muted={muted}  controls={controls}  loop={loop} ></video>
+<video
+  {...attributes}
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  preload="none"
+  src={video || "no-src"}
+  poster={posterImage}
+  {autoPlay}
+  {muted}
+  {controls}
+  {loop}
+/>

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

@@ -1,65 +1,55 @@
 <script>
-    
-    
-    
-    
-  import { TARGET } from '../../constants/target.js';
-import BuilderContext from '../../context/builder.context';
-import { getProcessedBlock } from '../../functions/get-processed-block.js';
-import RenderInlinedStyles from '../render-inlined-styles.svelte';
-import { convertStyleMaptoCSS } from '../../helpers/css.js';
-import { getMaxWidthQueryForSize } from '../../constants/device-sizes.js';
-  
-  
-
-    import { getContext, setContext } from "svelte";
-
-    
-    export let block;
-    
-    
-    $: useBlock = () => {
-return getProcessedBlock({
-  block: block,
-  state: builderContext.state,
-  context: builderContext.context
-});
-};
-
-$: css = () => {
-const styles = useBlock().responsiveStyles;
-const largeStyles = styles?.large;
-const mediumStyles = styles?.medium;
-const smallStyles = styles?.small;
-return `
-      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ''}
-      ${mediumStyles ? `${getMaxWidthQueryForSize('medium')} {
+  import { TARGET } from "../../constants/target.js";
+  import BuilderContext from "../../context/builder.context";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+  import { convertStyleMaptoCSS } from "../../helpers/css.js";
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+
+  import { getContext, setContext } from "svelte";
+
+  export let block;
+
+  $: useBlock = () => {
+    return getProcessedBlock({
+      block: block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: true,
+    });
+  };
+
+  $: css = () => {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    return `
+      ${
+        largeStyles
+          ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
+          : ""
+      }
+      ${
+        mediumStyles
+          ? `${getMaxWidthQueryForSize("medium")} {
             .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
-          }` : ''}
-      ${smallStyles ? `${getMaxWidthQueryForSize('small')} {
+          }`
+          : ""
+      }
+      ${
+        smallStyles
+          ? `${getMaxWidthQueryForSize("small")} {
             .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
-          }` : ''}
+          }`
+          : ""
+      }
     }`;
-};
-
-    let builderContext = getContext(BuilderContext.key);
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte' }
-
-    
-<RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
-
-  
+  };
 
+  let builderContext = getContext(BuilderContext.key);
+</script>
 
-{/if}
+{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+  <RenderInlinedStyles styles={css()} />
+{/if}