@builder.io/sdk-svelte 0.1.15 → 0.2.0

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "files": [
     "package",

package/package/CHANGELOG.md

@@ -1,3 +1,25 @@
+### 0.2.0
+- Sets the default `apiVersion` to `v3`.
+
+In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
+
+```jsx
+<RenderContent apiVersion="v2" />
+```
+
+```js
+getContent({ apiVersion: "v2" })
+```
+More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).
+
+### 0.1.16
+
+- No changes.
+
+### 0.1.15
+
+- No changes.
+
 ### 0.1.14
 
 - No changes.

package/package/blocks/button/button.svelte

@@ -45,7 +45,8 @@ export let openLinkInNewTab;
   </a>
 {:else}
   <button
-    class="button"
+    class={/** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+    attributes.class + " button"}
     {...filterAttrs(attributes, isNonEvent)}
     use:setAttrs={filterAttrs(attributes, isEvent)}
   >

package/package/blocks/columns/columns.svelte

@@ -2,10 +2,13 @@
 
 <script>import { getContext } from "svelte";
 import RenderBlocks from "../../components/render-blocks.svelte";
+import "../../types/builder-block";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import "../../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 "../../types/typescript";
 export let space;
 export let columns;
 export let stackColumnsAt;
@@ -29,10 +32,10 @@ function getColumnCssWidth(index) {
     const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
 }
-function getTabletStyle({ stackedStyle, desktopStyle }) {
+function getTabletStyle({ stackedStyle, desktopStyle, }) {
     return stackAt === "tablet" ? stackedStyle : desktopStyle;
 }
-function getMobileStyle({ stackedStyle, desktopStyle }) {
+function getMobileStyle({ stackedStyle, desktopStyle, }) {
     return stackAt === "never" ? desktopStyle : stackedStyle;
 }
 function columnCssVars(index) {

package/package/blocks/columns/columns.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderBlock } from "../../types/builder-block";
 type Column = {
     blocks: BuilderBlock[];
     width?: number;
@@ -12,6 +11,7 @@ export interface ColumnProps {
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
+import { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         space: ColumnProps["space"];

package/package/blocks/image/image.svelte

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import { getSrcSet } from "./image.helpers.js";
+<script>import "../../types/builder-block.js";
+import { getSrcSet } from "./image.helpers.js";
 export let image;
 export let src;
 export let srcset;
@@ -87,9 +88,7 @@ $: aspectRatioCss = () => {
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
     use:mitosis_styling={{
-      paddingTop:
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        aspectRatio * 100 + "%",
+      paddingTop: aspectRatio * 100 + "%",
     }}
     class="builder-image-sizer div"
   />

package/package/blocks/image/image.svelte.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderBlock } from "../../types/builder-block.js";
 export interface ImageProps {
     className?: string;
     image: string;
@@ -19,6 +18,7 @@ export interface ImageProps {
     noWebp?: boolean;
     src?: string;
 }
+import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         image: ImageProps["image"];

package/package/blocks/symbol/symbol.svelte

@@ -4,6 +4,8 @@
 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 "../../types/builder-content.js";
+import "../../types/builder-block.js";
 import { TARGET } from "../../constants/target";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");

package/package/blocks/symbol/symbol.svelte.d.ts

@@ -1,6 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
 export interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -17,6 +15,8 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
+import { BuilderContent } from "../../types/builder-content.js";
+import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         attributes: SymbolProps["attributes"];

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

@@ -2,9 +2,11 @@
 
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
+import "../../context/types.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
+import "../../types/builder-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.svelte";
 export let block;
 export let context;

package/package/components/render-block/block-styles.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
 export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
+import { BuilderContextInterface } from "../../context/types.js";
+import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: BlockStylesProps["block"];

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

@@ -1,12 +1,15 @@
 <script context="module"></script>
 
-<script>import { getBlockActions } from "../../functions/get-block-actions.js";
+<script>import "../../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 { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import "../../types/builder-block.js";
 import BlockStyles from "./block-styles.svelte";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import "./render-component.svelte";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -136,6 +139,7 @@ $: childrenContext = () => {
     };
     return {
         apiKey: context.apiKey,
+        apiVersion: context.apiVersion,
         state: context.state,
         content: context.content,
         context: context.context,

package/package/components/render-block/render-block.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
 export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
+import { BuilderContextInterface } from "../../context/types.js";
+import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: RenderBlockProps["block"];

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

@@ -1,7 +1,9 @@
 <script context="module"></script>
 
-<script>import BlockStyles from "./block-styles.svelte";
+<script>import "../../types/builder-block.js";
+import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
+import "../../context/types.js";
 export let componentRef;
 export let componentOptions;
 export let blockChildren;

package/package/components/render-block/render-component.svelte.d.ts

@@ -1,6 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { BuilderContextInterface } from "../../context/types.js";
 type ComponentOptions = {
     [index: string]: any;
     attributes?: {
@@ -13,6 +11,8 @@ export interface RenderComponentProps {
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
 }
+import { BuilderBlock } from "../../types/builder-block.js";
+import { BuilderContextInterface } from "../../context/types.js";
 declare const __propDef: {
     props: {
         componentRef: RenderComponentProps["componentRef"];

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

@@ -11,6 +11,8 @@
 
 <script>import { setContext } from "svelte";
 import BuilderContext from "../../context/builder.context.js";
+import "../../context/types.js";
+import "../../types/builder-block";
 import RenderBlock from "./render-block.svelte";
 export let block;
 export let repeatContext;

package/package/components/render-block/render-repeated-block.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block";
 type Props = {
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
 };
+import { BuilderContextInterface } from "../../context/types.js";
+import { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         block: Props["block"];

package/package/components/render-blocks.svelte

@@ -3,6 +3,7 @@
 <script>import { getContext } from "svelte";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
+import "../types/builder-block.js";
 import BlockStyles from "./render-block/block-styles.svelte";
 import RenderBlock from "./render-block/render-block.svelte";
 export let blocks;

package/package/components/render-blocks.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderBlock } from "../types/builder-block.js";
 export type RenderBlockProps = {
     blocks?: BuilderBlock[];
     parent?: string;
     path?: string;
     styleProp?: Record<string, any>;
 };
+import { BuilderBlock } from "../types/builder-block.js";
 declare const __propDef: {
     props: {
         blocks: RenderBlockProps["blocks"];

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

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
 <script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+import "./render-styles.helpers";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 export let cssCode;

package/package/components/render-content/components/render-styles.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CustomFont } from "./render-styles.helpers";
 interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
 }
+import { CustomFont } from "./render-styles.helpers";
 declare const __propDef: {
     props: {
         cssCode: Props["cssCode"];

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

@@ -1,7 +1,6 @@
-<script context="module"></script>
-
 <script>import { onDestroy, onMount, setContext } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import "../../context/types.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { fetch } from "../../functions/get-fetch.js";
@@ -10,12 +9,15 @@ 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/index.js";
+import "../../types/builder-content.js";
+import "../../types/typescript.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import "./render-content.types.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 export let content;
@@ -138,7 +140,7 @@ function handleRequest({ url, key }) {
         setContextState(newState);
     })
         .catch((err) => {
-        console.log("error fetching dynamic data", url, err);
+        console.error("error fetching dynamic data", url, err);
     });
 }
 function runHttpRequests() {

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { RenderContentProps } from "./render-content.types.js";
+import { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];

package/package/context/types.d.ts

@@ -14,7 +14,7 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
-    apiVersion?: ApiVersion;
+    apiVersion: ApiVersion | undefined;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;
 }

package/package/functions/get-content/generate-content-url.js

@@ -1,7 +1,8 @@
 import { flatten } from '../../helpers/flatten.js';
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
+import { DEFAULT_API_VERSION } from '../../types/api-version';
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = 'v2', } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION, } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }

package/package/functions/get-content/generate-content-url.test.js

@@ -28,6 +28,15 @@ describe('Generate Content URL', () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test('generate content url with apiVersion as default', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+        });
+        expect(output).toMatchSnapshot();
+    });
     test('generate content url with apiVersion as v2', () => {
         const output = generateContentUrl({
             apiKey: testKey,

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

@@ -1,11 +1,11 @@
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { GetContentOptions } from './types.js';
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
-/**
- * TO-DO: Handle error responses.
- */
-interface ContentResponse {
+type ContentResponse = {
     results: BuilderContent[];
-}
+} | {
+    status: number;
+    message: string;
+};
 export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse>;
 export {};

package/package/functions/get-content/index.js

@@ -2,19 +2,32 @@ import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
 import { generateContentUrl } from './generate-content-url.js';
 export async function getContent(options) {
-    return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
+    const allContent = await getAllContent({ ...options, limit: 1 });
+    if ('results' in allContent) {
+        return allContent?.results[0] || null;
+    }
+    return null;
 }
 export async function getAllContent(options) {
     const url = generateContentUrl(options);
     const res = await fetch(url.href);
     const content = await res.json();
+    if ('status' in content && !('results' in content)) {
+        console.error('[Builder.io]: Error fetching data. ', content, options);
+        return content;
+    }
     const canTrack = options.canTrack !== false;
-    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 });
+    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) {
+        console.error('[Builder.io]: Could not setup A/B testing. ', e);
+    }
     return content;
 }

package/package/functions/get-content/types.d.ts

@@ -39,7 +39,7 @@ export interface GetContentOptions {
     /**
      * If provided, sets the Builder API version used to fetch content.
      *
-     * Defaults to `v2`.
+     * Defaults to `v3`.
      */
     apiVersion?: 'v2' | 'v3';
 }

package/package/functions/get-global-this.d.ts

@@ -1,2 +1,4 @@
-/// <reference types="@types/node" />
-export declare function getGlobalThis(): typeof global;
+/// <reference types="node" />
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+export declare function getGlobalThis(): Global;
+export {};

package/package/types/api-version.d.ts

@@ -1 +1,2 @@
 export type ApiVersion = 'v2' | 'v3';
+export declare const DEFAULT_API_VERSION: ApiVersion;

package/package/types/api-version.js

@@ -1 +1 @@
-export {};
+export const DEFAULT_API_VERSION = 'v3';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "package",

package/src/blocks/button/button.svelte

@@ -55,7 +55,8 @@
   </a>
 {:else}
   <button
-    class="button"
+    class={/** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
+    attributes.class + " button"}
     {...filterAttrs(attributes, isNonEvent)}
     use:setAttrs={filterAttrs(attributes, isEvent)}
   >

package/src/blocks/columns/columns.svelte

@@ -1,10 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderBlock } from "../../types/builder-block";
-
-  import type { SizeName } from "../../constants/device-sizes";
-
-  import type { Dictionary } from "../../types/typescript";
-
   type Column = {
     blocks: BuilderBlock[];
     width?: number;
@@ -31,10 +25,13 @@
   import { getContext } from "svelte";
 
   import RenderBlocks from "../../components/render-blocks.svelte";
+  import { BuilderBlock } from "../../types/builder-block";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
+  import { 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";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
@@ -54,25 +51,37 @@
 
   let builderContext = getContext(BuilderContext.key);
 
-  function getWidth(index) {
+  function getWidth(index: number) {
     return cols[index]?.width || 100 / cols.length;
   }
-  function getColumnCssWidth(index) {
+  function getColumnCssWidth(index: number) {
     const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
-  function getTabletStyle({ stackedStyle, desktopStyle }) {
+  function getTabletStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
     return stackAt === "tablet" ? stackedStyle : desktopStyle;
   }
-  function getMobileStyle({ stackedStyle, desktopStyle }) {
+  function getMobileStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
     return stackAt === "never" ? desktopStyle : stackedStyle;
   }
-  function columnCssVars(index) {
+  function columnCssVars(index: number) {
     const gutter = index === 0 ? 0 : gutterSize;
     if (TARGET === "reactNative") {
       return {
         marginLeft: stackColumnsAt === "never" ? gutter : 0,
-      };
+      } as any as Dictionary<string>;
     }
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutterSize}px`;
@@ -97,9 +106,9 @@
         stackedStyle: mobileMarginLeft,
         desktopStyle: gutterPixels,
       }),
-    };
+    } as any as Dictionary<string>;
   }
-  function getWidthForBreakpointSize(size) {
+  function getWidthForBreakpointSize(size: SizeName) {
     const breakpointSizes = getSizesForBreakpoints(
       builderContext.content?.meta?.breakpoints || {}
     );
@@ -109,7 +118,7 @@
     if (TARGET === "reactNative") {
       return {
         flexDirection: flexDir,
-      };
+      } as Dictionary<string>;
     }
     return {
       "--flex-dir": flexDir,
@@ -117,7 +126,7 @@
         stackedStyle: flexDir,
         desktopStyle: "row",
       }),
-    };
+    } as Dictionary<string>;
   };
   $: columnsStyles = () => {
     return `

package/src/blocks/form/form.svelte

@@ -114,7 +114,11 @@
 
   let builderContext = getContext(BuilderContext.key);
 
-  function onSubmit(event) {
+  function onSubmit(
+    event: Event & {
+      currentTarget: HTMLFormElement;
+    }
+  ) {
     const sendWithJs = sendWithJs || sendSubmissionsTo === "email";
     if (sendSubmissionsTo === "zapier") {
       event.preventDefault();
@@ -126,17 +130,20 @@
       event.preventDefault();
       const el = event.currentTarget;
       const headers = customHeaders || {};
-      let body;
+      let body: any;
       const formData = new FormData(el);
 
       // TODO: maybe support null
-      const formPairs = Array.from(
+      const formPairs: {
+        key: string;
+        value: File | boolean | number | string | FileList;
+      }[] = Array.from(
         event.currentTarget.querySelectorAll("input,select,textarea")
       )
-        .filter((el) => !!el.name)
+        .filter((el) => !!(el as HTMLInputElement).name)
         .map((el) => {
-          let value;
-          const key = el.name;
+          let value: any;
+          const key = (el as HTMLImageElement).name;
           if (el instanceof HTMLInputElement) {
             if (el.type === "radio") {
               if (el.checked) {
@@ -160,7 +167,7 @@
               value = el.value;
             }
           } else {
-            value = el.value;
+            value = (el as HTMLInputElement).value;
           }
           return {
             key,
@@ -222,7 +229,7 @@
       fetch(
         sendSubmissionsTo === "email"
           ? formUrl
-          : action /* TODO: throw error if no action URL */,
+          : action! /* TODO: throw error if no action URL */,
         {
           body,
           headers,

package/src/blocks/image/image.svelte

@@ -1,6 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderBlock } from "../../types/builder-block.js";
-
   export interface ImageProps {
     className?: string;
     image: string;
@@ -22,6 +20,7 @@
 </script>
 
 <script lang="ts">
+  import { BuilderBlock } from "../../types/builder-block.js";
   import { getSrcSet } from "./image.helpers.js";
 
   export let image: ImageProps["image"];
@@ -111,9 +110,7 @@
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
   <div
     use:mitosis_styling={{
-      paddingTop:
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        aspectRatio * 100 + "%",
+      paddingTop: aspectRatio * 100 + "%",
     }}
     class="builder-image-sizer div"
   />

package/src/blocks/symbol/symbol.svelte

@@ -1,8 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderContent } from "../../types/builder-content.js";
-
-  import type { BuilderBlock } from "../../types/builder-block.js";
-
   export interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -28,6 +24,8 @@
   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 { TARGET } from "../../constants/target";
 
   const isEvent = (attr) => attr.startsWith("on:");

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

@@ -1,8 +1,4 @@
 <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;
@@ -15,9 +11,11 @@
     getSizesForBreakpoints,
   } 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 { createCssClass } from "../../helpers/css.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
+  import { BuilderBlock } from "../../types/builder-block.js";
   import RenderInlinedStyles from "../render-inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];
@@ -50,7 +48,7 @@
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    const className = useBlock().id;
+    const className = useBlock().id!;
     const largeStylesClass = largeStyles
       ? createCssClass({
           className,

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

@@ -1,13 +1,4 @@
 <script context="module" lang="ts">
-  import type {
-    BuilderContextInterface,
-    BuilderRenderState,
-  } from "../../context/types.js";
-
-  import type { BuilderBlock } from "../../types/builder-block.js";
-
-  import type { RenderComponentProps } from "./render-component";
-
   export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
@@ -15,17 +6,23 @@
 </script>
 
 <script lang="ts">
+  import {
+    BuilderContextInterface,
+    BuilderRenderState,
+  } 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 { getBlockTag } from "../../functions/get-block-tag.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import {
     getComponent,
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.js";
+  import { 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";
@@ -84,7 +81,7 @@
       return context.state;
     }
     const useState = new Proxy(context.state, {
-      set: (obj, prop, value) => {
+      set: (obj, prop: keyof BuilderRenderState, value) => {
         // set the value on the state object, so that the event handler instantly gets the update.
         obj[prop] = value;
 
@@ -165,6 +162,7 @@
     };
     return {
       apiKey: context.apiKey,
+      apiVersion: context.apiVersion,
       state: context.state,
       content: context.content,
       context: context.context,

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

@@ -1,8 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderBlock } from "../../types/builder-block.js";
-
-  import type { BuilderContextInterface } from "../../context/types.js";
-
   type ComponentOptions = {
     [index: string]: any;
     attributes?: {
@@ -19,8 +15,10 @@
 </script>
 
 <script lang="ts">
+  import { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
+  import { BuilderContextInterface } from "../../context/types.js";
 
   export let componentRef: RenderComponentProps["componentRef"];
   export let componentOptions: RenderComponentProps["componentOptions"];

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

@@ -1,8 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderContextInterface } from "../../context/types.js";
-
-  import type { BuilderBlock } from "../../types/builder-block";
-
   type Props = {
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
@@ -23,6 +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 RenderBlock from "./render-block.svelte";
 
   export let block: Props["block"];

package/src/components/render-blocks.svelte

@@ -1,6 +1,4 @@
 <script context="module" lang="ts">
-  import type { BuilderBlock } from "../types/builder-block.js";
-
   export type RenderBlockProps = {
     blocks?: BuilderBlock[];
     parent?: string;
@@ -14,6 +12,7 @@
 
   import BuilderContext from "../context/builder.context.js";
   import { isEditing } from "../functions/is-editing.js";
+  import { 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

@@ -1,6 +1,4 @@
 <script context="module" lang="ts">
-  import type { CustomFont } from "./render-styles.helpers";
-
   interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
@@ -10,6 +8,7 @@
 
 <script lang="ts">
   import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+  import { CustomFont } from "./render-styles.helpers";
   import { getCss } from "./render-styles.helpers";
   import { getFontCss } from "./render-styles.helpers";
 

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

@@ -1,27 +1,12 @@
-<script context="module" lang="ts">
-  import type {
-    BuilderRenderState,
-    RegisteredComponent,
-    RegisteredComponents,
-  } from "../../context/types.js";
-
-  import type {
-    Breakpoints,
-    BuilderContent,
-  } from "../../types/builder-content.js";
-
-  import type { Nullable } from "../../types/typescript.js";
-
-  import type {
-    RenderContentProps,
-    BuilderComponentStateChange,
-  } from "./render-content.types.js";
-</script>
-
 <script lang="ts">
   import { onDestroy, onMount, setContext } from "svelte";
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+  import {
+    BuilderRenderState,
+    RegisteredComponent,
+    RegisteredComponents,
+  } from "../../context/types.js";
   import { evaluate } from "../../functions/evaluate.js";
   import { getContent } from "../../functions/get-content/index.js";
   import { fetch } from "../../functions/get-fetch.js";
@@ -33,6 +18,8 @@
     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 RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
   import builderContext from "../../context/builder.context.js";
@@ -42,6 +29,10 @@
   } from "../../scripts/init-editing.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
   import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+  import {
+    RenderContentProps,
+    BuilderComponentStateChange,
+  } from "./render-content.types.js";
   import {
     getContentInitialValue,
     getContextStateInitialValue,
@@ -59,7 +50,7 @@
   export let includeRefs: RenderContentProps["includeRefs"];
   export let apiVersion: RenderContentProps["apiVersion"];
 
-  function mergeNewContent(newContent) {
+  function mergeNewContent(newContent: BuilderContent) {
     useContent = {
       ...useContent,
       ...newContent,
@@ -75,7 +66,7 @@
       },
     };
   }
-  function setBreakpoints(breakpoints) {
+  function setBreakpoints(breakpoints: Breakpoints) {
     useContent = {
       ...useContent,
       meta: {
@@ -84,10 +75,10 @@
       },
     };
   }
-  function setContextState(newState) {
+  function setContextState(newState: BuilderRenderState) {
     contentState = newState;
   }
-  function processMessage(event) {
+  function processMessage(event: MessageEvent) {
     const { data } = event;
     if (data) {
       switch (data.type) {
@@ -136,7 +127,7 @@
       });
     }
   }
-  function onClick(event) {
+  function onClick(event: any) {
     if (useContent) {
       const variationId = useContent?.testVariationId;
       const contentId = useContent?.id;
@@ -154,7 +145,7 @@
       clicked = true;
     }
   }
-  function evalExpression(expression) {
+  function evalExpression(expression: string) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
@@ -163,7 +154,7 @@
       })
     );
   }
-  function handleRequest({ url, key }) {
+  function handleRequest({ url, key }: { key: string; url: string }) {
     fetch(url)
       .then((response) => response.json())
       .then((json) => {
@@ -174,11 +165,13 @@
         setContextState(newState);
       })
       .catch((err) => {
-        console.log("error fetching dynamic data", url, err);
+        console.error("error fetching dynamic data", url, err);
       });
   }
   function runHttpRequests() {
-    const requests = useContent?.data?.httpRequests ?? {};
+    const requests: {
+      [key: string]: string;
+    } = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -192,14 +185,17 @@
   function emitStateUpdate() {
     if (isEditing()) {
       window.dispatchEvent(
-        new CustomEvent("builder:component:stateChange", {
-          detail: {
-            state: contentState,
-            ref: {
-              name: model,
+        new CustomEvent<BuilderComponentStateChange>(
+          "builder:component:stateChange",
+          {
+            detail: {
+              state: contentState,
+              ref: {
+                name: model,
+              },
             },
-          },
-        })
+          }
+        )
       );
     }
   }
@@ -233,7 +229,7 @@
       ...acc,
       [curr.name]: curr,
     }),
-    {}
+    {} as RegisteredComponents
   );
   let httpReqsData = {};
   let clicked = false;
@@ -260,7 +256,7 @@
               }
             : {}),
         });
-        Object.values(allRegisteredComponents).forEach(
+        Object.values<RegisteredComponent>(allRegisteredComponents).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");

package/src/context/types.ts

@@ -19,7 +19,7 @@ export interface BuilderContextInterface {
   state: BuilderRenderState;
   setState?: (state: BuilderRenderState) => void;
   apiKey: string | null;
-  apiVersion?: ApiVersion;
+  apiVersion: ApiVersion | undefined;
   registeredComponents: RegisteredComponents;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;

package/src/functions/get-content/generate-content-url.test.ts

@@ -35,6 +35,16 @@ describe('Generate Content URL', () => {
     expect(output).toMatchSnapshot();
   });
 
+  test('generate content url with apiVersion as default', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+    });
+    expect(output).toMatchSnapshot();
+  });
+
   test('generate content url with apiVersion as v2', () => {
     const output = generateContentUrl({
       apiKey: testKey,

package/src/functions/get-content/generate-content-url.ts

@@ -4,6 +4,7 @@ import {
   normalizeSearchParams,
 } from '../get-builder-search-params/index.js';
 import type { GetContentOptions } from './types.js';
+import { DEFAULT_API_VERSION } from '../../types/api-version';
 
 export const generateContentUrl = (options: GetContentOptions): URL => {
   const {
@@ -15,7 +16,7 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     apiKey,
     includeRefs = true,
     locale,
-    apiVersion = 'v2',
+    apiVersion = DEFAULT_API_VERSION,
   } = options;
 
   if (!apiKey) {

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

@@ -7,16 +7,23 @@ import type { GetContentOptions } from './types.js';
 export async function getContent(
   options: GetContentOptions
 ): Promise<BuilderContent | null> {
-  return (await getAllContent({ ...options, limit: 1 })).results[0] || null;
-}
+  const allContent = await getAllContent({ ...options, limit: 1 });
+  if ('results' in allContent) {
+    return allContent?.results[0] || null;
+  }
 
-/**
- * TO-DO: Handle error responses.
- */
-interface ContentResponse {
-  results: BuilderContent[];
+  return null;
 }
 
+type ContentResponse =
+  | {
+      results: BuilderContent[];
+    }
+  | {
+      status: number;
+      message: string;
+    };
+
 export async function getAllContent(
   options: GetContentOptions
 ): Promise<ContentResponse> {
@@ -25,15 +32,24 @@ export async function getAllContent(
   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;
+  }
+
   const canTrack = options.canTrack !== false;
-  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 });
+  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) {
+    console.error('[Builder.io]: Could not setup A/B testing. ', e);
   }
 
   return content;

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

@@ -47,7 +47,7 @@ export interface GetContentOptions {
   /**
    * If provided, sets the Builder API version used to fetch content.
    *
-   * Defaults to `v2`.
+   * Defaults to `v3`.
    */
   apiVersion?: 'v2' | 'v3';
 }

package/src/functions/get-global-this.ts

@@ -1,4 +1,6 @@
-export function getGlobalThis(): typeof global {
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+
+export function getGlobalThis(): Global {
   if (typeof globalThis !== 'undefined') {
     return globalThis;
   }

package/src/functions/on-change.ts

@@ -13,7 +13,7 @@ export function onChange<T extends object = any>(obj: T, cb: () => void): T {
       }
       const value = Reflect.get(target, key);
       if (value && typeof value === 'object') {
-        if (value[onChangeProxySymbol]) {
+        if ((value as any)[onChangeProxySymbol]) {
           return value;
         }
         return onChange(value, cb);

package/src/types/api-version.ts

@@ -1 +1,2 @@
 export type ApiVersion = 'v2' | 'v3';
+export const DEFAULT_API_VERSION: ApiVersion = 'v3';