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

package/src/blocks/select/select.svelte

@@ -1,41 +1,34 @@
-<script>
-  
-  
-  
-  
-import  {  isEditing  }  from '../../functions/is-editing.js';
-
-
-
-  
-
-  
-  export let attributes;
-export let value;
-export let defaultValue;
-export let name;
-export let options;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+<script context="module" lang="ts">
+  export interface FormSelectProps {
+    options?: {
+      name?: string;
+      value: string;
+    }[];
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+  }
 </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}
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
 
+  export let attributes: FormSelectProps["attributes"];
+  export let value: FormSelectProps["value"];
+  export let defaultValue: FormSelectProps["defaultValue"];
+  export let name: FormSelectProps["name"];
+  export let options: FormSelectProps["options"];
+</script>
 
-</select>
+<select
+  {...attributes}
+  {value}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {defaultValue}
+  {name}
+>
+  {#each options as option}
+    <option value={option.value}>{option.name || option.value}</option>
+  {/each}
+</select>

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

@@ -1,33 +1,15 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+  }
 </script>
 
-<button {...attributes} type="submit" >
-  
-{text}
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
+</script>
 
-</button>
+<button {...attributes} type="submit">
+  {text}
+</button>

package/src/blocks/symbol/component-info.js

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.svelte

@@ -1,54 +1,89 @@
-<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
+<script context="module" lang="ts">
+  export interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
   }
-}).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>
+
+  export interface SymbolProps {
+    symbol?: SymbolInfo;
+    dataOnly?: boolean;
+    dynamic?: boolean;
+    builderBlock?: BuilderBlock;
+    attributes?: any;
+    inheritState?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  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: SymbolProps["attributes"];
+  export let symbol: SymbolProps["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;
+      });
+    }
+  }
+  $: 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,11 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
+<script context="module" lang="ts">
+  export interface TextProps {
+    text: string;
+  }
+</script>
 
-  
+<script lang="ts">
+  export let text: TextProps["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,19 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  export let attributes;
-export let placeholder;
-export let name;
-export let value;
-export let defaultValue;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
+<script context="module" lang="ts">
+  export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+  }
+</script>
 
-  
+<script lang="ts">
+  export let attributes: TextareaProps["attributes"];
+  export let placeholder: TextareaProps["placeholder"];
+  export let name: TextareaProps["name"];
+  export let value: TextareaProps["value"];
+  export let defaultValue: TextareaProps["defaultValue"];
 </script>
 
-<textarea {...attributes} placeholder={placeholder}  name={name}  value={value}  defaultValue={defaultValue} ></textarea>
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

package/src/blocks/video/video.svelte

@@ -1,45 +1,92 @@
-<script>
-    
-    
-    
-    
-  
-  
+<script context="module" lang="ts">
+  export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    position?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+  }
+</script>
 
-    
+<script lang="ts">
+  export let autoPlay: VideoProps["autoPlay"];
+  export let muted: VideoProps["muted"];
+  export let controls: VideoProps["controls"];
+  export let loop: VideoProps["loop"];
+  export let playsInline: VideoProps["playsInline"];
+  export let attributes: VideoProps["attributes"];
+  export let fit: VideoProps["fit"];
+  export let position: VideoProps["position"];
+  export let video: VideoProps["video"];
+  export let posterImage: VideoProps["posterImage"];
 
-    
-    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;
+    });
+  }
 
-    
-    
-    
+  $: 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,58 @@
-<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>
+<script context="module" lang="ts">
+  export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+  import { TARGET } from "../../constants/target.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { convertStyleMaptoCSS } from "../../helpers/css.js";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+
+  export let block: BlockStylesProps["block"];
+  export let context: BlockStylesProps["context"];
+
+  $: useBlock = () => {
+    return getProcessedBlock({
+      block: block,
+      state: context.state,
+      context: context.context,
+      shouldEvaluateBindings: 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)}}
+          }`
+          : ""
+      }
+    }`;
+  };
+</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
+};