@builder.io/sdk-svelte 0.0.4 → 0.0.6

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.5",
   "type": "module",
   "files": [
-    "package"
+    "package",
+    "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
   "repository": {

package/package/components/render-content/render-content.svelte

@@ -11,7 +11,7 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
-import { track } from "../../functions/track.js";
+import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
@@ -77,11 +77,14 @@ function evaluateJsCode() {
 }
 function onClick(_event) {
     if (useContent()) {
-        track({
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
             type: "click",
             canTrack: canTrackToUse(),
-            contentId: useContent?.()?.id,
-            orgId: apiKey,
+            contentId,
+            apiKey: apiKey,
+            variationId: variationId !== contentId ? variationId : undefined,
         });
     }
 }
@@ -204,11 +207,14 @@ onMount(() => {
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
         if (useContent()) {
-            track({
+            const variationId = useContent?.()?.testVariationId;
+            const contentId = useContent?.()?.id;
+            _track({
                 type: "impression",
                 canTrack: canTrackToUse(),
-                contentId: useContent?.()?.id,
-                orgId: apiKey,
+                contentId,
+                apiKey: apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
             });
         }
         // override normal content in preview mode

package/package/functions/track.d.ts

@@ -2,20 +2,50 @@ import type { CanTrack } from '../types/can-track.js';
 interface Event {
     type: 'click' | 'impression';
     data: {
+        /**
+         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+         */
         contentId?: string;
+        /**
+         * This is the ID of the space that the content belongs to.
+         */
         ownerId: string;
+        /**
+         * Stringified JSON object containing any additional metadata you want to track.
+         */
         metadata?: string;
+        /**
+         * Session ID of the user. This is provided by the SDK by checking session storage.
+         */
         sessionId: string | undefined;
+        /**
+         * Visitor ID of the user. This is provided by the SDK by checking cookies.
+         */
         visitorId: string | undefined;
+        /**
+         * (Optional) If running an A/B test, the ID of the variation that the user is in.
+         */
+        variationId?: string;
         [index: string]: any;
     };
 }
-declare type EventProperties = {
-    type: Event['type'];
-    orgId: Event['data']['ownerId'];
-    contentId: Event['data']['contentId'];
+declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) metadata that you want to provide with your event.
+     */
+    metadata?: {
+        [index: string]: any;
+    };
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
     [index: string]: any;
 };
 export declare type EventProps = EventProperties & CanTrack;
-export declare function track(eventProps: EventProps): Promise<void | Response>;
+export declare function _track(eventProps: EventProps): Promise<void | Response>;
+export declare const track: (args: EventProperties) => Promise<void | Response>;
 export {};

package/package/functions/track.js

@@ -14,16 +14,16 @@ const getTrackingEventData = async ({ canTrack, }) => {
         visitorId,
     };
 };
-const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
     type: eventType,
     data: {
         ...properties,
+        metadata: JSON.stringify(metadata),
         ...(await getTrackingEventData({ canTrack })),
-        ownerId: orgId,
-        contentId,
+        ownerId: apiKey,
     },
 });
-export async function track(eventProps) {
+export async function _track(eventProps) {
     if (!eventProps.canTrack) {
         return;
     }
@@ -46,3 +46,4 @@ export async function track(eventProps) {
         console.error('Failed to track: ', err);
     });
 }
+export const track = (args) => _track({ ...args, canTrack: true });

package/package/index.d.ts

@@ -8,3 +8,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track';

package/package/index.js

@@ -8,3 +8,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track';

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.6",
   "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,
+    },
+  ],
+};