@builder.io/sdk-svelte 0.0.3 → 0.0.5

package/src/blocks/submit-button/component-info.ts

@@ -0,0 +1,32 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:SubmitButton',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
+  defaultStyles: {
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#3898EC',
+    color: 'white',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  inputs: [
+    {
+      name: 'text',
+      type: 'text',
+      defaultValue: 'Click me',
+    },
+  ],
+  static: true,
+  noWrap: true,
+  // TODO: optional children? maybe as optional form input
+  // that only shows if advanced setting is flipped
+  // TODO: defaultChildren
+  // canHaveChildren: true,
+};

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

@@ -0,0 +1,43 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Symbol',
+  noWrap: true,
+  static: true,
+  builtIn: 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',
+    },
+  ],
+};

package/{package/blocks/symbol/symbol.lite.tsx → src/blocks/symbol/symbol.svelte}

@@ -1,4 +1,10 @@
 <script context="module" lang="ts">
+  import type { BuilderContent } from "../../types/builder-content.js";
+
+  import type { Nullable } from "../../types/typescript.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
   export interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -19,30 +25,28 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate, getContext, onMount, setContext } from "svelte";
+  import { afterUpdate, getContext, setContext } from "svelte";
 
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
   import { getContent } from "../../functions/get-content/index.js";
-  import { BuilderContent } from "../../types/builder-content.js";
-  import { Nullable } from "../../types/typescript.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
   import { markMutable } from "../../functions/mark-mutable";
 
-  export let attributes: SymbolProps["attributes"];
   export let symbol: SymbolProps["symbol"];
+  export let attributes: SymbolProps["attributes"];
 
   let builderContext = getContext(BuilderContext.key);
 
-  let className = "builder-symbol";
-  let content = null;
+  $: contentToUse = () => {
+    return symbol?.content || fetchedContent;
+  };
 
-  onMount(() => {
-    content = symbol?.content;
-  });
+  let className = "builder-symbol";
+  let fetchedContent = null;
 
   function onUpdateFn_0() {
     const symbolToUse = symbol;
+
     /**
      * If:
      * - we have a symbol prop
@@ -52,8 +56,12 @@
      *
      * then we want to re-fetch the symbol content.
      */
-
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !fetchedContent &&
+      symbolToUse.model
+    ) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -61,11 +69,11 @@
           id: symbolToUse.entry,
         },
       }).then((response) => {
-        content = response;
+        fetchedContent = response;
       });
     }
   }
-  $: onUpdateFn_0(...[symbol, content]);
+  $: onUpdateFn_0(...[symbol, fetchedContent]);
 </script>
 
 <div
@@ -87,6 +95,6 @@
       ...symbol?.content?.data?.state,
     })}
     model={symbol?.model}
-    content={markMutable(content)}
+    content={markMutable(contentToUse())}
   />
 </div>

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

@@ -0,0 +1,24 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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',
+  },
+};

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

@@ -0,0 +1,48 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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,
+};

package/src/blocks/util.ts

@@ -0,0 +1,6 @@
+export function markSerializable<FN extends (...args: any[]) => any>(
+  fn: FN
+): FN {
+  (fn as any).__qwik_serializable__ = true;
+  return fn;
+}

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

@@ -0,0 +1,109 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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,
+    },
+  ],
+};

package/{package/blocks/video/video.lite.tsx → src/blocks/video/video.svelte}

@@ -39,8 +39,12 @@
   export let posterImage: VideoProps["posterImage"];
 
   function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 
@@ -73,10 +77,16 @@
         : {}),
     };
   };
+  $: spreadProps = () => {
+    return {
+      ...attributes,
+      ...videoProps(),
+    };
+  };
 </script>
 
 <video
-  {...videoProps()}
+  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",

package/{package/components/render-block/block-styles.lite.tsx → src/components/render-block/block-styles.svelte}

@@ -1,4 +1,8 @@
 <script context="module" lang="ts">
+  import type { BuilderContextInterface } from "../../context/types.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
   export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
@@ -8,10 +12,8 @@
 <script lang="ts">
   import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
   import { TARGET } from "../../constants/target.js";
-  import { BuilderContextInterface } from "../../context/types.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { convertStyleMaptoCSS } from "../../helpers/css.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import { createCssClass } from "../../helpers/css.js";
   import RenderInlinedStyles from "../render-inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];
@@ -25,36 +27,36 @@
       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)}}
-          }`
-          : ""
-      }
-    }`;
+    const className = useBlock().id;
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize("medium"),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize("small"),
+        })
+      : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   };
 </script>
 
-{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+{#if TARGET !== "reactNative" && css()}
   <RenderInlinedStyles styles={css()} />
 {/if}

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

@@ -0,0 +1,27 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+export const isEmptyHtmlElement = (tagName: unknown) => {
+  return (
+    typeof tagName === 'string' &&
+    EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
+  );
+};