@builder.io/sdk-svelte 0.1.11 → 0.1.12

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "files": [
     "package",
@@ -139,6 +139,7 @@
     "./index-helpers/blocks-exports": "./index-helpers/blocks-exports.js",
     "./index-helpers/top-of-file": "./index-helpers/top-of-file.js",
     "./scripts/init-editing": "./scripts/init-editing.js",
+    "./types/api-version": "./types/api-version.js",
     "./types/builder-block": "./types/builder-block.js",
     "./types/builder-content": "./types/builder-content.js",
     "./types/can-track": "./types/can-track.js",

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.1.11
+
+- No changes.
+
 ### 0.1.10
 
 - Fix: Text blocks styles (remove initial top padding)

package/package/blocks/symbol/symbol.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { getContext } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
@@ -36,24 +36,7 @@ export let attributes;
 export let symbol;
 export let dynamic;
 let builderContext = getContext(BuilderContext.key);
-$: className = () => {
-    return [
-        ...(TARGET === "vue2" || TARGET === "vue3"
-            ? Object.keys(attributes.class)
-            : [attributes.class]),
-        "builder-symbol",
-        symbol?.inline ? "builder-inline-symbol" : undefined,
-        symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
-    ]
-        .filter(Boolean)
-        .join(" ");
-};
-$: contentToUse = () => {
-    return symbol?.content || fetchedContent;
-};
-let fetchedContent = null;
-function onUpdateFn_0() {
-    const symbolToUse = symbol;
+function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -63,44 +46,67 @@ function onUpdateFn_0() {
      *
      * then we want to re-fetch the symbol content.
      */
-    if (symbolToUse &&
-        !symbolToUse.content &&
-        !fetchedContent &&
-        symbolToUse.model &&
+    if (!contentToUse &&
+        symbol?.model &&
         // This is a hack, we should not need to check for this, but it is needed for Svelte.
         builderContext?.apiKey) {
         getContent({
-            model: symbolToUse.model,
+            model: symbol.model,
             apiKey: builderContext.apiKey,
+            apiVersion: builderContext.apiVersion,
             query: {
-                id: symbolToUse.entry,
+                id: symbol.entry,
             },
-        }).then((response) => {
-            fetchedContent = response;
+        })
+            .then((response) => {
+            if (response) {
+                contentToUse = response;
+            }
+        })
+            .catch((err) => {
+            console.error("[Builder.io]: Could not fetch symbol content: ", err);
         });
     }
 }
-$: onUpdateFn_0(...[symbol, fetchedContent]);
+let className = [
+    ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(attributes.class)
+        : [attributes.class]),
+    "builder-symbol",
+    symbol?.inline ? "builder-inline-symbol" : undefined,
+    symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+]
+    .filter(Boolean)
+    .join(" ");
+let contentToUse = symbol?.content;
+onMount(() => {
+    fetchContent();
+});
+function onUpdateFn_0() {
+    fetchContent();
+}
+$: onUpdateFn_0(...[symbol]);
 </script>
 
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className(),
+    class: className,
   }}
-  class={className()}
+  class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
+    apiVersion={builderContext.apiVersion}
     apiKey={builderContext.apiKey}
     context={builderContext.context}
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
       ...builderContext.state,
-      ...symbol?.content?.data?.state,
+      ...contentToUse?.data?.state,
     }}
     model={symbol?.model}
-    content={contentToUse()}
+    content={contentToUse}
   />
 </div>

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

@@ -27,6 +27,7 @@ export let model;
 export let context;
 export let apiKey;
 export let includeRefs;
+export let apiVersion;
 function mergeNewContent(newContent) {
     useContent = {
         ...useContent,
@@ -251,6 +252,7 @@ onMount(() => {
                 getContent({
                     model: model,
                     apiKey: apiKey,
+                    apiVersion: apiVersion,
                 }).then((content) => {
                     if (content) {
                         mergeNewContent(content);
@@ -264,17 +266,23 @@ onMount(() => {
     }
 });
 function onUpdateFn_0() {
-    evaluateJsCode();
+    if (content) {
+        mergeNewContent(content);
+    }
 }
-$: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
+$: onUpdateFn_0(...[content]);
 function onUpdateFn_1() {
-    runHttpRequests();
+    evaluateJsCode();
 }
-$: onUpdateFn_1(...[useContent?.data?.httpRequests]);
+$: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
 function onUpdateFn_2() {
+    runHttpRequests();
+}
+$: onUpdateFn_2(...[useContent?.data?.httpRequests]);
+function onUpdateFn_3() {
     emitStateUpdate();
 }
-$: onUpdateFn_2(...[contentState]);
+$: onUpdateFn_3(...[contentState]);
 setContext(builderContext.key, {
     get content() {
         return useContent;
@@ -291,6 +299,9 @@ setContext(builderContext.key, {
     get apiKey() {
         return apiKey;
     },
+    get apiVersion() {
+        return apiVersion;
+    },
     get registeredComponents() {
         return allRegisteredComponents;
     },

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
         includeRefs: RenderContentProps["includeRefs"];
+        apiVersion: RenderContentProps["apiVersion"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,7 @@
 import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 export type RenderContentProps = {
     content?: Nullable<BuilderContent>;
     model?: string;
@@ -9,6 +10,7 @@ export type RenderContentProps = {
     };
     context?: BuilderRenderContext;
     apiKey: string;
+    apiVersion?: ApiVersion;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;

package/package/context/builder.context.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         state: {};
         setState(): void;
         apiKey: null;
+        apiVersion: undefined;
         registeredComponents: {};
         inheritedStyles: {};
     };

package/package/context/builder.context.js

@@ -6,6 +6,7 @@ export default {
         state: {},
         setState() { },
         apiKey: null,
+        apiVersion: undefined,
         registeredComponents: {},
         inheritedStyles: {},
     },

package/package/context/types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 export type RegisteredComponent = ComponentInfo & {
     component: any;
 };
@@ -13,6 +14,7 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
+    apiVersion?: ApiVersion;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;
 }

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

@@ -1,11 +1,14 @@
 import { flatten } from '../../helpers/flatten.js';
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
 export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, } = options;
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = 'v2', } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
+    if (!['v2', 'v3'].includes(apiVersion)) {
+        throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+    }
+    const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {}),

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

@@ -28,4 +28,46 @@ describe('Generate Content URL', () => {
         });
         expect(output).toMatchSnapshot();
     });
+    test('generate content url with apiVersion as v2', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v2',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('generate content url with apiVersion as v3', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v3',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('throw error when trying to generate content url with apiVersion as v1', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'v1',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+    });
+    test('throw error when trying to generate content url with an invalid apiVersion value', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'INVALID_API_VERSION',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
+    });
 });

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

@@ -36,4 +36,10 @@ export interface GetContentOptions {
      * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */
     locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v2`.
+     */
+    apiVersion?: 'v2' | 'v3';
 }

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

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';

package/package/types/api-version.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/src/blocks/symbol/symbol.svelte

@@ -1,8 +1,6 @@
 <script context="module" lang="ts">
   import type { BuilderContent } from "../../types/builder-content.js";
 
-  import type { Nullable } from "../../types/typescript.js";
-
   import type { BuilderBlock } from "../../types/builder-block.js";
 
   export interface SymbolInfo {
@@ -25,7 +23,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
@@ -67,27 +65,7 @@
 
   let builderContext = getContext(BuilderContext.key);
 
-  $: className = () => {
-    return [
-      ...(TARGET === "vue2" || TARGET === "vue3"
-        ? Object.keys(attributes.class)
-        : [attributes.class]),
-      "builder-symbol",
-      symbol?.inline ? "builder-inline-symbol" : undefined,
-      symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
-    ]
-      .filter(Boolean)
-      .join(" ");
-  };
-  $: contentToUse = () => {
-    return symbol?.content || fetchedContent;
-  };
-
-  let fetchedContent = null;
-
-  function onUpdateFn_0() {
-    const symbolToUse = symbol;
-
+  function fetchContent() {
     /**
      * If:
      * - we have a symbol prop
@@ -98,45 +76,71 @@
      * then we want to re-fetch the symbol content.
      */
     if (
-      symbolToUse &&
-      !symbolToUse.content &&
-      !fetchedContent &&
-      symbolToUse.model &&
+      !contentToUse &&
+      symbol?.model &&
       // This is a hack, we should not need to check for this, but it is needed for Svelte.
       builderContext?.apiKey
     ) {
       getContent({
-        model: symbolToUse.model,
+        model: symbol.model,
         apiKey: builderContext.apiKey,
+        apiVersion: builderContext.apiVersion,
         query: {
-          id: symbolToUse.entry,
+          id: symbol.entry,
         },
-      }).then((response) => {
-        fetchedContent = response;
-      });
+      })
+        .then((response) => {
+          if (response) {
+            contentToUse = response;
+          }
+        })
+        .catch((err) => {
+          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+        });
     }
   }
-  $: onUpdateFn_0(...[symbol, fetchedContent]);
+
+  let className = [
+    ...(TARGET === "vue2" || TARGET === "vue3"
+      ? Object.keys(attributes.class)
+      : [attributes.class]),
+    "builder-symbol",
+    symbol?.inline ? "builder-inline-symbol" : undefined,
+    symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  let contentToUse = symbol?.content;
+
+  onMount(() => {
+    fetchContent();
+  });
+
+  function onUpdateFn_0() {
+    fetchContent();
+  }
+  $: onUpdateFn_0(...[symbol]);
 </script>
 
 <div
   {...filterAttrs(attributes, isNonEvent)}
   dataSet={{
-    class: className(),
+    class: className,
   }}
-  class={className()}
+  class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
+    apiVersion={builderContext.apiVersion}
     apiKey={builderContext.apiKey}
     context={builderContext.context}
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
       ...builderContext.state,
-      ...symbol?.content?.data?.state,
+      ...contentToUse?.data?.state,
     }}
     model={symbol?.model}
-    content={contentToUse()}
+    content={contentToUse}
   />
 </div>

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

@@ -57,6 +57,7 @@
   export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
   export let includeRefs: RenderContentProps["includeRefs"];
+  export let apiVersion: RenderContentProps["apiVersion"];
 
   function mergeNewContent(newContent) {
     useContent = {
@@ -305,6 +306,7 @@
           getContent({
             model: model,
             apiKey: apiKey,
+            apiVersion: apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -319,17 +321,23 @@
   });
 
   function onUpdateFn_0() {
-    evaluateJsCode();
+    if (content) {
+      mergeNewContent(content);
+    }
   }
-  $: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
+  $: onUpdateFn_0(...[content]);
   function onUpdateFn_1() {
-    runHttpRequests();
+    evaluateJsCode();
   }
-  $: onUpdateFn_1(...[useContent?.data?.httpRequests]);
+  $: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
   function onUpdateFn_2() {
+    runHttpRequests();
+  }
+  $: onUpdateFn_2(...[useContent?.data?.httpRequests]);
+  function onUpdateFn_3() {
     emitStateUpdate();
   }
-  $: onUpdateFn_2(...[contentState]);
+  $: onUpdateFn_3(...[contentState]);
 
   setContext(builderContext.key, {
     get content() {
@@ -347,6 +355,9 @@
     get apiKey() {
       return apiKey;
     },
+    get apiVersion() {
+      return apiVersion;
+    },
     get registeredComponents() {
       return allRegisteredComponents;
     },

package/src/components/render-content/render-content.types.ts

@@ -5,6 +5,7 @@ import type {
 } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 
 export type RenderContentProps = {
   content?: Nullable<BuilderContent>;
@@ -12,6 +13,7 @@ export type RenderContentProps = {
   data?: { [key: string]: any };
   context?: BuilderRenderContext;
   apiKey: string;
+  apiVersion?: ApiVersion;
   customComponents?: RegisteredComponent[];
   canTrack?: boolean;
   locale?: string;

package/src/context/builder.context.ts

@@ -7,6 +7,7 @@ export default {
     state: {},
     setState() {},
     apiKey: null,
+    apiVersion: undefined,
     registeredComponents: {},
     inheritedStyles: {},
   },

package/src/context/types.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 
 export type RegisteredComponent = ComponentInfo & {
   component: any;
@@ -18,6 +19,7 @@ export interface BuilderContextInterface {
   state: BuilderRenderState;
   setState?: (state: BuilderRenderState) => void;
   apiKey: string | null;
+  apiVersion?: ApiVersion;
   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

@@ -1,4 +1,5 @@
 import { generateContentUrl } from './generate-content-url';
+import type { GetContentOptions } from './types';
 
 const testKey = 'YJIGb4i01jvw0SRdL5Bt';
 const testModel = 'page';
@@ -23,6 +24,7 @@ describe('Generate Content URL', () => {
     });
     expect(output).toMatchSnapshot();
   });
+
   test('Handles overrides correctly', () => {
     const output = generateContentUrl({
       apiKey: testKey,
@@ -32,4 +34,52 @@ describe('Generate Content URL', () => {
     });
     expect(output).toMatchSnapshot();
   });
+
+  test('generate content url with apiVersion as v2', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: 'v2',
+    });
+    expect(output).toMatchSnapshot();
+  });
+
+  test('generate content url with apiVersion as v3', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+      apiVersion: 'v3',
+    });
+    expect(output).toMatchSnapshot();
+  });
+
+  test('throw error when trying to generate content url with apiVersion as v1', () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: 'v1' as GetContentOptions['apiVersion'],
+      });
+    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+  });
+
+  test('throw error when trying to generate content url with an invalid apiVersion value', () => {
+    expect(() => {
+      generateContentUrl({
+        apiKey: testKey,
+        model: testModel,
+        query: { id: testId },
+        options,
+        apiVersion: 'INVALID_API_VERSION' as GetContentOptions['apiVersion'],
+      });
+    }).toThrow(
+      `Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`
+    );
+  });
 });

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

@@ -15,14 +15,21 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     apiKey,
     includeRefs = true,
     locale,
+    apiVersion = 'v2',
   } = options;
 
   if (!apiKey) {
     throw new Error('Missing API key');
   }
 
+  if (!['v2', 'v3'].includes(apiVersion)) {
+    throw new Error(
+      `Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`
+    );
+  }
+
   const url = new URL(
-    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
+    `https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
       locale ? `&locale=${locale}` : ''
     }`
   );

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

@@ -43,4 +43,11 @@ export interface GetContentOptions {
    * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
    */
   locale?: string;
+
+  /**
+   * If provided, sets the Builder API version used to fetch content.
+   *
+   * Defaults to `v2`.
+   */
+  apiVersion?: 'v2' | 'v3';
 }

package/src/types/api-version.ts

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';