@builder.io/sdk-svelte 0.0.4 → 0.0.5

package/package/--package.json

@@ -1,10 +1,11 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "files": [
-    "package"
+    "package",
+    "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
   "repository": {

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "files": [
-    "package"
+    "package",
+    "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
   "repository": {

package/src/blocks/BaseText.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+  export interface BaseTextProps {
+    text: string;
+  }
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../context/builder.context.js";
+
+  export let text: BaseTextProps["text"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+
+  let builderContext = getContext(BuilderContext.key);
+</script>
+
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

package/src/blocks/button/button.svelte

@@ -0,0 +1,36 @@
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
+  export let link: ButtonProps["link"];
+  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+</script>
+
+{#if link}
+  <a
+    {...attributes}
+    role="button"
+    href={link}
+    target={openLinkInNewTab ? "_blank" : undefined}
+  >
+    {text}
+  </a>
+{:else}
+  <button {...attributes} class="button">
+    {text}
+  </button>
+{/if}
+
+<style>
+  .button {
+    all: unset;
+  }
+</style>

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

@@ -0,0 +1,42 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Core:Button',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#000000',
+    color: 'white',
+    borderRadius: '4px',
+    textAlign: 'center',
+    cursor: 'pointer',
+  },
+  inputs: [
+    {
+      name: 'text',
+      type: 'text',
+      defaultValue: 'Click me!',
+      bubble: true,
+    },
+    {
+      name: 'link',
+      type: 'url',
+      bubble: true,
+    },
+    {
+      name: 'openLinkInNewTab',
+      type: 'boolean',
+      defaultValue: false,
+      friendlyName: 'Open link in new tab',
+    },
+  ],
+  static: true,
+  noWrap: true,
+};

package/src/blocks/columns/columns.svelte

@@ -0,0 +1,148 @@
+<script context="module" lang="ts">
+  import type { BuilderBlock } from "../../types/builder-block";
+
+  type CSS = {
+    [key: string]: string;
+  };
+
+  type Column = {
+    blocks: any;
+    // TODO: Implement this when support for dynamic CSS lands
+    width?: number;
+  };
+
+  type StackColumnsAt = "tablet" | "mobile" | "never";
+
+  export interface ColumnProps {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+
+    // TODO: Implement this when support for dynamic CSS lands
+    space?: number;
+    // TODO: Implement this when support for dynamic CSS lands
+    stackColumnsAt?: StackColumnsAt;
+    // TODO: Implement this when support for dynamic CSS lands
+    reverseColumnsWhenStacked?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import RenderBlocks from "../../components/render-blocks.svelte";
+  import { markMutable } from "../../functions/mark-mutable";
+
+  export let space: ColumnProps["space"];
+  export let columns: ColumnProps["columns"];
+  export let stackColumnsAt: ColumnProps["stackColumnsAt"];
+  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+  export let builderBlock: ColumnProps["builderBlock"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+
+  function getGutterSize() {
+    return typeof space === "number" ? space || 0 : 20;
+  }
+  function getColumns() {
+    return columns || [];
+  }
+  function getWidth(index) {
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
+  }
+  function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+  function maybeApplyForTablet(prop) {
+    const _stackColumnsAt = stackColumnsAt || "tablet";
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  }
+  $: columnsCssVars = () => {
+    const flexDir =
+      stackColumnsAt === "never"
+        ? "inherit"
+        : reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+    };
+  };
+  $: columnCssVars = () => {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+    };
+  };
+</script>
+
+<div use:mitosis_styling={columnsCssVars()} class="builder-columns div">
+  {#each columns as column, index (index)}
+    <div
+      use:mitosis_styling={{
+        width: getColumnCssWidth(index),
+        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...columnCssVars(),
+      }}
+      class="builder-column div-2"
+    >
+      <RenderBlocks
+        blocks={markMutable(column.blocks)}
+        path={`component.options.columns.${index}.blocks`}
+        parent={builderBlock.id}
+        styleProp={{
+          flexGrow: "1",
+        }}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    align-items: stretch;
+    line-height: normal;
+  }
+  @media (max-width: 991px) {
+    .div {
+      flex-direction: var(--flex-dir-tablet);
+    }
+  }
+  @media (max-width: 639px) {
+    .div {
+      flex-direction: var(--flex-dir);
+    }
+  }
+  .div-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  @media (max-width: 991px) {
+    .div-2 {
+      width: var(--column-width-tablet) !important;
+      margin-left: var(--column-margin-left-tablet) !important;
+    }
+  }
+  @media (max-width: 639px) {
+    .div-2 {
+      width: var(--column-width) !important;
+      margin-left: var(--column-margin-left) !important;
+    }
+  }
+</style>

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

@@ -0,0 +1,254 @@
+import type { ComponentInfo } from '../../types/components';
+import { markSerializable } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  name: 'Columns',
+  builtIn: true,
+  inputs: [
+    {
+      name: 'columns',
+      type: 'array',
+      broadcast: true,
+      subFields: [
+        {
+          name: 'blocks',
+          type: 'array',
+          hideFromUI: true,
+          defaultValue: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: 'width',
+          type: 'number',
+          hideFromUI: true,
+          helperText: 'Width %, e.g. set to 50 to fill half of the space',
+        },
+        {
+          name: 'link',
+          type: 'url',
+          helperText:
+            'Optionally set a url that clicking this column will link to',
+        },
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+        {
+          blocks: [
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                  minHeight: '20px',
+                  minWidth: '20px',
+                  overflow: 'hidden',
+                },
+              },
+              component: {
+                name: 'Image',
+                options: {
+                  image:
+                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                  backgroundPosition: 'center',
+                  backgroundSize: 'cover',
+                  aspectRatio: 0.7004048582995948,
+                },
+              },
+            },
+            {
+              '@type': '@builder.io/sdk:Element',
+              responsiveStyles: {
+                large: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'stretch',
+                  flexShrink: '0',
+                  position: 'relative',
+                  marginTop: '30px',
+                  textAlign: 'center',
+                  lineHeight: 'normal',
+                  height: 'auto',
+                },
+              },
+              component: {
+                name: 'Text',
+                options: {
+                  text: '<p>Enter some text...</p>',
+                },
+              },
+            },
+          ],
+        },
+      ],
+      onChange: markSerializable((options: Map<string, any>) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete('width');
+          });
+        }
+
+        const columns: Array<Map<string, any>> = options.get('columns');
+
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) =>
+            col.get('width')
+          );
+
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find(
+              (col) => !col.get('width')
+            );
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get('width');
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      }),
+    },
+    {
+      name: 'space',
+      type: 'number',
+      defaultValue: 20,
+      helperText: 'Size of gap between columns',
+      advanced: true,
+    },
+    {
+      name: 'stackColumnsAt',
+      type: 'string',
+      defaultValue: 'tablet',
+      helperText: 'Convert horizontal columns to vertical at what device size',
+      enum: ['tablet', 'mobile', 'never'],
+      advanced: true,
+    },
+    {
+      name: 'reverseColumnsWhenStacked',
+      type: 'boolean',
+      defaultValue: false,
+      helperText:
+        'When stacking columns for mobile devices, reverse the ordering',
+      advanced: true,
+    },
+  ],
+};

package/src/blocks/custom-code/component-info.ts

@@ -0,0 +1,31 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Custom Code',
+  static: true,
+  builtIn: true,
+  requiredPermissions: ['editCode'],
+  inputs: [
+    {
+      name: 'code',
+      type: 'html',
+      required: true,
+      defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+      code: true,
+    },
+    {
+      name: 'replaceNodes',
+      type: 'boolean',
+      helperText: 'Preserve server rendered dom nodes',
+      advanced: true,
+    },
+    {
+      name: 'scriptsClientOnly',
+      type: 'boolean',
+      defaultValue: false,
+      helperText:
+        'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+      advanced: true,
+    },
+  ],
+};

package/src/blocks/custom-code/custom-code.svelte

@@ -0,0 +1,66 @@
+<script context="module" lang="ts">
+  export interface CustomCodeProps {
+    code: string;
+    replaceNodes?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let replaceNodes: CustomCodeProps["replaceNodes"];
+  export let code: CustomCodeProps["code"];
+
+  function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+      const scripts = elem.getElementsByTagName("script");
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`CustomCode`: Error running script:", error);
+          }
+        }
+      }
+    }
+  }
+
+  let elem;
+
+  let scriptsInserted = [];
+  let scriptsRun = [];
+
+  onMount(() => {
+    findAndRunScripts();
+  });
+</script>
+
+<div
+  bind:this={elem}
+  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
+>
+  {@html code}
+</div>

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

@@ -0,0 +1,53 @@
+import type { ComponentInfo } from '../../types/components';
+import { markSerializable } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Embed',
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: 'url',
+      type: 'url',
+      required: true,
+      defaultValue: '',
+      helperText: 'e.g. enter a youtube url, google map, etc',
+      onChange: markSerializable((options: Map<string, any>) => {
+        const url = options.get('url');
+        if (url) {
+          options.set('content', 'Loading...');
+          // TODO: get this out of here!
+          const apiKey = 'ae0e60e78201a3f2b0de4b';
+          return fetch(
+            `https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`
+          )
+            .then((res) => res.json())
+            .then((data) => {
+              if (options.get('url') === url) {
+                if (data.html) {
+                  options.set('content', data.html);
+                } else {
+                  options.set('content', 'Invalid url, please try another');
+                }
+              }
+            })
+            .catch((_err) => {
+              options.set(
+                'content',
+                'There was an error embedding this URL, please try again or another URL'
+              );
+            });
+        } else {
+          options.delete('content');
+        }
+      }),
+    },
+    {
+      name: 'content',
+      type: 'html',
+      defaultValue:
+        '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      hideFromUI: true,
+    },
+  ],
+};