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

package/README.md

@@ -2,6 +2,10 @@
 
 This is the Svelte SDK. It is currently in beta.
 
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
 ## Feature Support
 
 To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).

package/package/CHANGELOG.md

@@ -0,0 +1,19 @@
+### 0.0.1-9
+
+🐛 Fix: custom components were not rendering correctly
+🐛 Fix: Image component's `srcSet` was not being set correctly
+
+### 0.0.1-8
+
+🧨 Breaking change: the format of the `customComponents` prop has changed from `[{ component, info }]` to `[{ component, ...info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-7
+
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
+To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-5
+
+First working release

package/package/README.md

@@ -0,0 +1,19 @@
+# Builder.io Svelte SDK (BETA)
+
+This is the Svelte SDK. It is currently in beta.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-svelte@dev
+```
+
+Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.

package/package/blocks/button/button.lite.tsx

@@ -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/package/blocks/button/button.svelte

@@ -0,0 +1,28 @@
+<script context="module"></script>
+
+<script>export let attributes;
+export let text;
+export let link;
+export let 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/package/blocks/button/button.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+}
+declare const __propDef: {
+    props: {
+        attributes: ButtonProps["attributes"];
+        text: ButtonProps["text"];
+        link: ButtonProps["link"];
+        openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/package/blocks/button/component-info.js

@@ -0,0 +1,39 @@
+export const 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/package/blocks/columns/columns.lite.tsx

@@ -0,0 +1,139 @@
+<script context="module" lang="ts">
+  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 { BuilderBlock } from "../../types/builder-block";
+  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]) => {
+      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}
+      />
+    </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 {
+    flex-grow: 1;
+  }
+  @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/package/blocks/columns/columns.svelte

@@ -0,0 +1,109 @@
+<script context="module"></script>
+
+<script>import RenderBlocks from "../../components/render-blocks.svelte";
+import "../../types/builder-block";
+import { markMutable } from "../../functions/mark-mutable";
+export let space;
+export let columns;
+export let stackColumnsAt;
+export let reverseColumnsWhenStacked;
+export let builderBlock;
+function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+        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}
+      />
+    </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 {
+    flex-grow: 1;
+  }
+  @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/package/blocks/columns/columns.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare type Column = {
+    blocks: any;
+    width?: number;
+};
+declare type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+import { BuilderBlock } from "../../types/builder-block";
+declare const __propDef: {
+    props: {
+        space: ColumnProps["space"];
+        columns: ColumnProps["columns"];
+        stackColumnsAt: ColumnProps["stackColumnsAt"];
+        reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+        builderBlock: ColumnProps["builderBlock"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ColumnsProps = typeof __propDef.props;
+export declare type ColumnsEvents = typeof __propDef.events;
+export declare type ColumnsSlots = typeof __propDef.slots;
+export default class Columns extends SvelteComponentTyped<ColumnsProps, ColumnsEvents, ColumnsSlots> {
+}
+export {};

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

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;