@builder.io/sdk-svelte 0.2.1 → 0.2.3

package/package/types/components.d.ts

@@ -1,76 +1,5 @@
 import type { BuilderElement } from './element';
-export interface Input {
-    name: string;
-    friendlyName?: string;
-    description?: string;
-    defaultValue?: any;
-    type: string;
-    valueType?: {
-        type?: string;
-    };
-    required?: boolean;
-    autoFocus?: boolean;
-    subFields?: Input[];
-    helperText?: string;
-    allowedFileTypes?: string[];
-    imageHeight?: number;
-    imageWidth?: number;
-    mediaHeight?: number;
-    mediaWidth?: number;
-    hideFromUI?: boolean;
-    modelId?: string;
-    /**
-     * Number field type validation maximum accepted input
-     */
-    max?: number;
-    /**
-     * Number field type validation minimum accepted input
-     */
-    min?: number;
-    /**
-     * Number field type step size when using arrows
-     */
-    step?: number;
-    /**
-     * Set this to `true` to show the editor for this input when
-     * children of this component are selected. This is useful for things
-     * like Tabs, such that users may not always select the Tabs component
-     * directly but will still be looking for how to add additional tabs
-     */
-    broadcast?: boolean;
-    /**
-     * Set this to `true` to show the editor for this input when
-     * group locked parents of this component are selected. This is useful
-     * to bubble up important inputs for locked groups, like text and images
-     */
-    bubble?: boolean;
-    options?: {
-        [key: string]: any;
-    };
-    enum?: string[] | {
-        label: string;
-        value: any;
-        helperText?: string;
-    }[];
-    /** Regex field validation for all string types (text, longText, html, url, etc) */
-    regex?: {
-        /** pattern to test, like "^\/[a-z]$" */
-        pattern: string;
-        /** flags for the RegExp constructor, e.g. "gi"  */
-        options?: string;
-        /**
-         * Friendly message to display to end-users if the regex fails, e.g.
-         * "You must use a relative url starting with '/...' "
-         */
-        message: string;
-    };
-    advanced?: boolean;
-    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
-    code?: boolean;
-    richText?: boolean;
-    showIf?: ((options: Map<string, any>) => boolean) | string;
-    copyOnAdd?: boolean;
-}
+import type { Input } from './input';
 export interface ComponentInfo {
     /**
      * Name your component something unique, e.g. 'MyButton'. You can override built-in components

package/package/types/input.d.ts

@@ -114,4 +114,8 @@ export interface Input {
      * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
      */
     model?: string;
+    valueType?: {
+        type?: string;
+    };
+    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "files": [
     "package",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/kit": "^1.15.2",
     "@sveltejs/package": "1.0.0-next.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",

package/src/blocks/columns/columns.svelte

@@ -25,13 +25,13 @@
   import { getContext } from "svelte";
 
   import RenderBlocks from "../../components/render-blocks.svelte";
-  import { BuilderBlock } from "../../types/builder-block";
+  import type { BuilderBlock } from "../../types/builder-block";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
-  import { SizeName } from "../../constants/device-sizes";
+  import type { SizeName } from "../../constants/device-sizes";
   import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
   import BuilderContext from "../../context/builder.context.js";
-  import { Dictionary } from "../../types/typescript";
+  import type { Dictionary } from "../../types/typescript";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
@@ -130,30 +130,30 @@
   };
   $: columnsStyles = () => {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
 
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
-        }
-      }
-
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
-
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
   };
 
   let gutterSize = typeof space === "number" ? space || 0 : 20;

package/src/blocks/image/image.svelte

@@ -7,7 +7,7 @@
     height?: number;
     width?: number;
     altText?: string;
-    backgroundSize?: string;
+    backgroundSize?: "cover" | "contain";
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import { getSrcSet } from "./image.helpers.js";
 
   export let image: ImageProps["image"];
@@ -81,7 +81,7 @@
       width: "100%",
       left: "0px",
       top: "0px",
-    };
+    } as const;
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
   };

package/src/blocks/symbol/symbol.svelte

@@ -24,9 +24,10 @@
   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 { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderContent } from "../../types/builder-content.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import { TARGET } from "../../constants/target";
+  import { logger } from "../../helpers/logger";
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -93,7 +94,7 @@
           }
         })
         .catch((err) => {
-          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+          logger.error("Could not fetch symbol content: ", err);
         });
     }
   }

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

@@ -11,11 +11,11 @@
     getSizesForBreakpoints,
   } from "../../constants/device-sizes.js";
   import { TARGET } from "../../constants/target.js";
-  import { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
   import { createCssClass } from "../../helpers/css.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import RenderInlinedStyles from "../render-inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];

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

@@ -6,12 +6,12 @@
 </script>
 
 <script lang="ts">
-  import { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
   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 { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import {
     getComponent,
@@ -19,13 +19,12 @@
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.js";
-  import { RenderComponentProps } from "./render-component.svelte";
+  import type { RenderComponentProps } from "./render-component.svelte";
   import RenderRepeatedBlock from "./render-repeated-block.svelte";
   import { TARGET } from "../../constants/target.js";
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-  import { checkIsDefined } from "../../helpers/nullable.js";
 
   const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
@@ -59,10 +58,10 @@
         });
   };
   $: canShowBlock = () => {
-    if (checkIsDefined(useBlock().hide)) {
+    if ("hide" in useBlock()) {
       return !useBlock().hide;
     }
-    if (checkIsDefined(useBlock().show)) {
+    if ("show" in useBlock()) {
       return useBlock().show;
     }
     return true;

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

@@ -15,10 +15,10 @@
 </script>
 
 <script lang="ts">
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
-  import { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
 
   export let componentRef: RenderComponentProps["componentRef"];
   export let componentOptions: RenderComponentProps["componentOptions"];

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

@@ -19,8 +19,8 @@
   import { setContext } from "svelte";
 
   import BuilderContext from "../../context/builder.context.js";
-  import { BuilderContextInterface } from "../../context/types.js";
-  import { BuilderBlock } from "../../types/builder-block";
+  import type { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderBlock } from "../../types/builder-block";
   import RenderBlock from "./render-block.svelte";
 
   export let block: Props["block"];
@@ -34,6 +34,7 @@
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,
     inheritedStyles: repeatContext.inheritedStyles,
+    apiVersion: repeatContext.apiVersion,
   });
 </script>
 

package/src/components/render-blocks.svelte

@@ -12,7 +12,7 @@
 
   import BuilderContext from "../context/builder.context.js";
   import { isEditing } from "../functions/is-editing.js";
-  import { BuilderBlock } from "../types/builder-block.js";
+  import type { BuilderBlock } from "../types/builder-block.js";
   import BlockStyles from "./render-block/block-styles.svelte";
   import RenderBlock from "./render-block/render-block.svelte";
 

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

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-  import { CustomFont } from "./render-styles.helpers";
+  import type { CustomFont } from "./render-styles.helpers";
   import { getCss } from "./render-styles.helpers";
   import { getFontCss } from "./render-styles.helpers";
 
@@ -26,16 +26,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `;
 </script>

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

@@ -2,7 +2,7 @@
   import { onDestroy, onMount, setContext } from "svelte";
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-  import {
+  import type {
     BuilderRenderState,
     RegisteredComponent,
     RegisteredComponents,
@@ -18,8 +18,11 @@
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
   import { _track } from "../../functions/track/index.js";
-  import { Breakpoints, BuilderContent } from "../../types/builder-content.js";
-  import { Nullable } from "../../types/typescript.js";
+  import type {
+    Breakpoints,
+    BuilderContent,
+  } from "../../types/builder-content.js";
+  import type { Nullable } from "../../types/typescript.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
   import builderContext from "../../context/builder.context.js";
@@ -29,7 +32,7 @@
   } from "../../scripts/init-editing.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
   import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-  import {
+  import type {
     RenderContentProps,
     BuilderComponentStateChange,
   } from "./render-content.types.js";
@@ -38,6 +41,7 @@
     getContextStateInitialValue,
   } from "./render-content.helpers.js";
   import { TARGET } from "../../constants/target.js";
+  import { logger } from "../../helpers/logger.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -236,8 +240,8 @@
 
   onMount(() => {
     if (!apiKey) {
-      console.error(
-        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      logger.error(
+        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
       );
     }
     if (isBrowser()) {
@@ -283,7 +287,10 @@
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        const searchParamPreview = searchParams.get("builder.preview");
+        const searchParamPreviewModel = searchParams.get("builder.preview");
+        const searchParamPreviewId = searchParams.get(
+          `builder.preview.${searchParamPreviewModel}`
+        );
         const previewApiKey =
           searchParams.get("apiKey") || searchParams.get("builder.space");
 
@@ -292,13 +299,15 @@
          * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
          *  at the same time, e.g. header/page/footer.
          * - the API key is the same, since we don't want to preview content from other organizations.
-         *
-         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
-         * this break scenarios where the item is not published yet?
+         * - if there is content, that the preview ID is the same as that of the one we receive.
          *
          * TO-DO: should we only update the state when there is a change?
          **/
-        if (searchParamPreview === model && previewApiKey === apiKey) {
+        if (
+          searchParamPreviewModel === model &&
+          previewApiKey === apiKey &&
+          (!content || searchParamPreviewId === content.id)
+        ) {
           getContent({
             model: model,
             apiKey: apiKey,
@@ -357,6 +366,9 @@
     get registeredComponents() {
       return allRegisteredComponents;
     },
+    get inheritedStyles() {
+      return {};
+    },
   });
 
   onDestroy(() => {

package/src/functions/get-block-properties.ts

@@ -3,8 +3,42 @@ import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 
+const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
+  // currently we are only spreading the `href` property
+  // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+
+  // const {
+  //   '@type': _type,
+  //   '@version': _version,
+  //   id: _id,
+  //   tagName: _tagName,
+  //   layerName: _layerName,
+  //   groupLocked: _groupLocked,
+  //   layerLocked: _layerLocked,
+  //   class: _class,
+  //   children: _children,
+  //   responsiveStyles: _responsiveStyles,
+  //   component: _component,
+  //   bindings: _bindings,
+  //   meta: _meta,
+  //   actions: _actions,
+  //   properties: _properties,
+  //   code: _code,
+  //   repeat: _repeat,
+  //   animations: _animations,
+  //   style: _style,
+  //   hide: _hide,
+  //   show: _show,
+  //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+  //   ...remainingBlockProperties
+  // } = block;
+
+  return { href: (block as any).href };
+};
+
 export function getBlockProperties(block: BuilderBlock) {
   const properties = {
+    ...extractRelevantRootBlockProperties(block),
     ...block.properties,
     'builder-id': block.id,
     style: getStyleAttribute(block.style),

package/src/functions/get-content/index.ts

@@ -1,3 +1,4 @@
+import { logger } from '../../helpers/logger.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
@@ -8,7 +9,7 @@ export async function getContent(
   options: GetContentOptions
 ): Promise<BuilderContent | null> {
   const allContent = await getAllContent({ ...options, limit: 1 });
-  if ('results' in allContent) {
+  if (allContent && 'results' in allContent) {
     return allContent?.results[0] || null;
   }
 
@@ -26,31 +27,36 @@ type ContentResponse =
 
 export async function getAllContent(
   options: GetContentOptions
-): Promise<ContentResponse> {
-  const url = generateContentUrl(options);
+): Promise<ContentResponse | null> {
+  try {
+    const url = generateContentUrl(options);
 
-  const res = await fetch(url.href);
-  const content = await (res.json() as Promise<ContentResponse>);
+    const res = await fetch(url.href);
+    const content = await (res.json() as Promise<ContentResponse>);
 
-  if ('status' in content && !('results' in content)) {
-    console.error('[Builder.io]: Error fetching data. ', content, options);
-    return content;
-  }
+    if ('status' in content && !('results' in content)) {
+      logger.error('Error fetching data. ', { url, content, options });
+      return content;
+    }
 
-  const canTrack = options.canTrack !== false;
-  try {
-    if (
-      canTrack &&
-      // This makes sure we have a non-error response with the results array.
-      Array.isArray(content.results)
-    ) {
-      for (const item of content.results) {
-        await handleABTesting({ item, canTrack });
+    const canTrack = options.canTrack !== false;
+    try {
+      if (
+        canTrack &&
+        // This makes sure we have a non-error response with the results array.
+        Array.isArray(content.results)
+      ) {
+        for (const item of content.results) {
+          await handleABTesting({ item, canTrack });
+        }
       }
+    } catch (e) {
+      logger.error('Could not setup A/B testing. ', e);
     }
-  } catch (e) {
-    console.error('[Builder.io]: Could not setup A/B testing. ', e);
-  }
 
-  return content;
+    return content;
+  } catch (error) {
+    logger.error('Error fetching data. ', error);
+    return null;
+  }
 }

package/src/functions/register-component.ts

@@ -1,6 +1,7 @@
 import { serializeFn } from '../blocks/util.js';
 import type { RegisteredComponent } from '../context/types.js';
-import type { ComponentInfo, Input } from '../types/components.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Input } from '../types/input.js';
 import { fastClone } from './fast-clone.js';
 
 /**
@@ -37,14 +38,13 @@ const prepareComponentInfoToSend = ({
   ...info
 }: ComponentInfo): ComponentInfo => ({
   ...fastClone(info),
-  inputs: inputs?.map(
-    (input): Input =>
-      Object.entries(input).reduce(
-        (acc, [key, value]) => ({
-          ...acc,
-          [key]: serializeValue(value),
-        }),
-        {} as Input
-      )
+  inputs: inputs?.map((input) =>
+    Object.entries(input).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value),
+      }),
+      {} as Input
+    )
   ),
 });

package/src/functions/track/index.ts

@@ -1,4 +1,5 @@
 import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
 import { getSessionId } from '../../helpers/sessionId.js';
 import { getVisitorId } from '../../helpers/visitorId.js';
 import type { CanTrack } from '../../types/can-track.js';
@@ -100,8 +101,8 @@ const createEvent = async ({
 
 export async function _track(eventProps: EventProps) {
   if (!eventProps.apiKey) {
-    console.error(
-      '[Builder.io]: Missing API key for track call. Please provide your API key.'
+    logger.error(
+      'Missing API key for track call. Please provide your API key.'
     );
     return;
   }

package/src/helpers/logger.ts

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+  log: (...message: any[]) => console.log(MSG_PREFIX, ...message),
+  error: (...message: any[]) => console.error(MSG_PREFIX, ...message),
+  warn: (...message: any[]) => console.warn(MSG_PREFIX, ...message),
+};

package/src/index.ts

@@ -12,3 +12,4 @@ export * from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';
+export type { RenderContentProps } from './components/render-content/render-content.types.js';

package/src/types/builder-content.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './components.js';
+import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 
 export interface Breakpoints {