@builder.io/sdk-svelte 0.0.1-3 → 0.0.1-30

package/src/blocks/symbol/symbol.svelte

@@ -1,54 +1,69 @@
 <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:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+
+    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: 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(...[symbol?.content, symbol?.model, symbol?.entry, content]);
+</script>
+
+<div
+  {...attributes}
+  dataSet={{
+    class: className,
+  }}
+  class={className}
+>
+  <RenderContent
+    apiKey={builderContext.apiKey}
+    context={builderContext.context}
+    customComponents={Object.values(builderContext.registeredComponents)}
+    data={{
+      ...symbol?.data,
+      ...builderContext.state,
+      ...symbol?.content?.data?.state,
+    }}
+    model={symbol?.model}
+    {content}
+  />
+</div>

package/src/blocks/text/text.svelte

@@ -1,28 +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,32 +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,45 +1,64 @@
 <script>
-    
-    
-    
-    
-  
-  
+  export let autoPlay;
+  export let muted;
+  export let controls;
+  export let loop;
+  export let playsInline;
+  export let attributes;
+  export let fit;
+  export let position;
+  export let video;
+  export let posterImage;
 
-    
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
 
-    
-    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;
-    
-    
-    
+  $: videoProps = () => {
+    return {
+      ...(autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
+  };
+</script>
 
-    
-    
-    
-
-    
-
-    
-
-    
-  </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
+  {...videoProps()}
+  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,
+  }}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

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

@@ -1,51 +1,55 @@
 <script>
-    
-    
-    
-    
-  import  RenderInlinedStyles,  {  }  from '../render-inlined-styles.svelte';
-
-  
-
-    
-
-    
-    export let block;
-    
-    function camelToKebabCase(string) {
-return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-}
-    $: css = () => {
-// TODO: media queries
-const styleObject = block.responsiveStyles?.large;
-
-if (!styleObject) {
-  return '';
-}
-
-let str = `.${block.id} {`;
-
-for (const key in styleObject) {
-  const value = styleObject[key];
-
-  if (typeof value === 'string') {
-    str += `${camelToKebabCase(key)}: ${value};`;
-  }
-}
-
-str += '}';
-return str;
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
+  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")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }`
+          : ""
+      }
+    }`;
+  };
+
+  let builderContext = getContext(BuilderContext.key);
+</script>
+
+{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+  <RenderInlinedStyles styles={css()} />
+{/if}

package/src/components/render-block/render-block.helpers.js

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};