@builder.io/sdk-svelte 0.0.1-9 → 0.0.1

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

@@ -1,42 +0,0 @@
-const componentInfo = {
-  name: "Symbol",
-  noWrap: true,
-  static: true,
-  inputs: [
-    {
-      name: "symbol",
-      type: "uiSymbol"
-    },
-    {
-      name: "dataOnly",
-      helperText: "Make this a data symbol that doesn't display any UI",
-      type: "boolean",
-      defaultValue: false,
-      advanced: true,
-      hideFromUI: true
-    },
-    {
-      name: "inheritState",
-      helperText: "Inherit the parent component state and data",
-      type: "boolean",
-      defaultValue: false,
-      advanced: true
-    },
-    {
-      name: "renderToLiquid",
-      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
-      type: "boolean",
-      defaultValue: false,
-      advanced: true,
-      hideFromUI: true
-    },
-    {
-      name: "useChildren",
-      hideFromUI: true,
-      type: "boolean"
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/src/blocks/symbol/symbol.svelte

@@ -1,54 +0,0 @@
-<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
-  }
-}).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>

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

@@ -1,24 +0,0 @@
-const componentInfo = {
-  name: "Text",
-  static: true,
-  builtIn: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-  inputs: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
-  ],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
-};
-export {
-  componentInfo
-};

package/src/blocks/text/text.svelte

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

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

@@ -1,47 +0,0 @@
-const componentInfo = {
-  name: "Form:TextArea",
-  builtIn: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
-  inputs: [
-    {
-      advanced: true,
-      name: "value",
-      type: "string"
-    },
-    {
-      name: "name",
-      type: "string",
-      required: true,
-      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
-    },
-    {
-      name: "defaultValue",
-      type: "string"
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      defaultValue: "Hello there"
-    },
-    {
-      name: "required",
-      type: "boolean",
-      defaultValue: false
-    }
-  ],
-  defaultStyles: {
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    borderRadius: "3px",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "#ccc"
-  },
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

package/src/blocks/textarea/textarea.svelte

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

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

@@ -1,106 +0,0 @@
-const componentInfo = {
-  name: "Video",
-  canHaveChildren: true,
-  builtIn: true,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [
-    {
-      name: "video",
-      type: "file",
-      allowedFileTypes: ["mp4"],
-      bubble: true,
-      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-      required: true
-    },
-    {
-      name: "posterImage",
-      type: "file",
-      allowedFileTypes: ["jpeg", "png"],
-      helperText: "Image to show before the video plays"
-    },
-    {
-      name: "autoPlay",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "controls",
-      type: "boolean",
-      defaultValue: false
-    },
-    {
-      name: "muted",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "loop",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "playsInline",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "fit",
-      type: "text",
-      defaultValue: "cover",
-      enum: ["contain", "cover", "fill", "auto"]
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "position",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "height",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "width",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      advanced: true,
-      defaultValue: 0.7004048582995948
-    },
-    {
-      name: "lazyLoad",
-      type: "boolean",
-      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/src/blocks/video/video.svelte

@@ -1,45 +0,0 @@
-<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>

package/src/components/error-boundary.svelte

@@ -1,26 +0,0 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
-</script>

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

@@ -1,51 +0,0 @@
-<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>

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

@@ -1,23 +0,0 @@
-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
-};

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

@@ -1,174 +0,0 @@
-<script>
-    
-    
-    
-    
-  import  {  TARGET  }  from '../../constants/target.js';
-import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  getBlockActions  }  from '../../functions/get-block-actions.js';
-import  {  getBlockComponentOptions  }  from '../../functions/get-block-component-options.js';
-import  {  getBlockProperties  }  from '../../functions/get-block-properties.js';
-import  {  getBlockStyles  }  from '../../functions/get-block-styles.js';
-import  {  getBlockTag  }  from '../../functions/get-block-tag.js';
-import  {  getProcessedBlock  }  from '../../functions/get-processed-block.js';
-import  BlockStyles,  {  }  from './block-styles.svelte';
-import  {  isEmptyHtmlElement  }  from './render-block.helpers.js';
-
-  
-
-    import { getContext, setContext } from "svelte";
-
-    
-    export let block;
-    
-    
-    $: component = () => {
-const componentName = useBlock().component?.name;
-
-if (!componentName) {
-  return null;
-}
-
-const ref = builderContext.registeredComponents[componentName];
-
-if (!ref) {
-  // TODO: Public doc page with more info about this message
-  console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-  return undefined;
-} else {
-  return ref;
-}
-};
-
-$: componentInfo = () => {
-return component?.()?.info;
-};
-
-$: componentRef = () => {
-return component?.()?.component;
-};
-
-$: tagName = () => {
-return getBlockTag(useBlock());
-};
-
-$: useBlock = () => {
-return getProcessedBlock({
-  block: block,
-  state: builderContext.state,
-  context: builderContext.context
-});
-};
-
-$: propertiesAndActions = () => {
-return { ...getBlockProperties(useBlock()),
-  ...getBlockActions({
-    block: useBlock(),
-    state: builderContext.state,
-    context: builderContext.context
-  })
-};
-};
-
-$: css = () => {
-return getBlockStyles(useBlock());
-};
-
-$: componentOptions = () => {
-return getBlockComponentOptions(useBlock());
-};
-
-$: children = () => {
-// TO-DO: When should `canHaveChildren` dictate rendering?
-// This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-// but still receive and need to render children.
-// return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-return useBlock().children ?? [];
-};
-
-$: noCompRefChildren = () => {
-return componentRef() ? [] : children();
-};
-
-    let builderContext = getContext(BuilderContext.key);
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if !componentInfo?.()?.noWrap }
-
-    
-
-{#if !isEmptyHtmlElement(tagName()) }
-
-      
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
-        
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-          
-<BlockStyles  block={useBlock()} ></BlockStyles>
-
-        
-
-
-{/if}
-
-        
-
-{#if componentRef() }
-<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
-            
-
-{#each children() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
-{/each}
-
-
-          </svelte:component>
-
-
-{/if}
-
-        
-
-{#each noCompRefChildren() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
-{/each}
-
-
-      </svelte:element>
-
-    
-
-
-{:else}
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} ></svelte:element>
-
-{/if}
-
-  
-
-
-{:else}
-<svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
-        
-
-{#each children() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
-{/each}
-
-
-      </svelte:component>
-
-{/if}