@builder.io/sdk-svelte 0.1.16 → 0.2.1

package/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",
@@ -93,7 +93,6 @@
     "./functions/get-block-actions": "./functions/get-block-actions.js",
     "./functions/get-block-component-options": "./functions/get-block-component-options.js",
     "./functions/get-block-properties": "./functions/get-block-properties.js",
-    "./functions/get-block-tag": "./functions/get-block-tag.js",
     "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
     "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
     "./functions/get-content/ab-testing": "./functions/get-content/ab-testing.js",

package/package/CHANGELOG.md

@@ -1,3 +1,27 @@
+### 0.2.1
+
+- No Changes.
+
+### 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.

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

@@ -36,6 +36,9 @@ $: css = () => {
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
     const className = useBlock().id;
+    if (!className) {
+        return "";
+    }
     const largeStylesClass = largeStyles
         ? createCssClass({
             className,

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

@@ -10,3 +10,4 @@ export declare const getRepeatItemData: ({ block, context, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
+export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

package/package/components/render-block/render-block.helpers.js

@@ -80,3 +80,19 @@ export const getRepeatItemData = ({ block, context, }) => {
     }));
     return repeatArray;
 };
+export const getProxyState = (context) => {
+    if (typeof Proxy === 'undefined') {
+        console.error('no Proxy available in this environment, cannot proxy state.');
+        return context.state;
+    }
+    const useState = new Proxy(context.state, {
+        set: (obj, prop, value) => {
+            // set the value on the state object, so that the event handler instantly gets the update.
+            obj[prop] = value;
+            // set the value in the context, so that the rest of the app gets the update.
+            context.setState?.(obj);
+            return true;
+        },
+    });
+    return useState;
+};

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

@@ -4,11 +4,10 @@
 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 { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import "./render-component.svelte";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
@@ -34,9 +33,6 @@ const setAttrs = (node, attrs = {}) => {
 };
 export let block;
 export let context;
-$: tag = () => {
-    return getBlockTag(useBlock());
-};
 $: useBlock = () => {
     return repeatItemData
         ? block
@@ -56,26 +52,10 @@ $: canShowBlock = () => {
     }
     return true;
 };
-$: proxyState = () => {
-    if (typeof Proxy === "undefined") {
-        console.error("no Proxy available in this environment, cannot proxy state.");
-        return context.state;
-    }
-    const useState = new Proxy(context.state, {
-        set: (obj, prop, value) => {
-            // set the value on the state object, so that the event handler instantly gets the update.
-            obj[prop] = value;
-            // set the value in the context, so that the rest of the app gets the update.
-            context.setState?.(obj);
-            return true;
-        },
-    });
-    return useState;
-};
 $: actions = () => {
     return getBlockActions({
         block: useBlock(),
-        state: proxyState(),
+        state: TARGET === "qwik" ? context.state : proxyState,
         context: context.context,
     });
 };
@@ -94,28 +74,6 @@ $: attributes = () => {
             : {}),
     };
 };
-$: renderComponentProps = () => {
-    return {
-        blockChildren: useBlock().children ?? [],
-        componentRef: component?.component,
-        componentOptions: {
-            ...getBlockComponentOptions(useBlock()),
-            /**
-             * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-             * they are provided to the component itself directly.
-             */
-            ...(!component?.noWrap
-                ? {}
-                : {
-                    attributes: {
-                        ...attributes(),
-                        ...actions(),
-                    },
-                }),
-        },
-        context: childrenContext(),
-    };
-};
 $: childrenWithoutParentComponent = () => {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -148,6 +106,28 @@ $: childrenContext = () => {
         inheritedStyles: getInheritedTextStyles(),
     };
 };
+$: renderComponentProps = () => {
+    return {
+        blockChildren: useBlock().children ?? [],
+        componentRef: component?.component,
+        componentOptions: {
+            ...getBlockComponentOptions(useBlock()),
+            /**
+             * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+             * they are provided to the component itself directly.
+             */
+            ...(!component?.noWrap
+                ? {}
+                : {
+                    attributes: {
+                        ...attributes(),
+                        ...actions(),
+                    },
+                }),
+        },
+        context: childrenContext(),
+    };
+};
 let component = getComponent({
     block: block,
     context: context,
@@ -156,22 +136,24 @@ let repeatItemData = getRepeatItemData({
     block: block,
     context: context,
 });
+let tag = block.tagName || "div";
+let proxyState = getProxyState(context);
 </script>
 
 {#if canShowBlock()}
   {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(tag())}
-      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
+    {#if isEmptyHtmlElement(tag)}
+      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
     {/if}
 
-    {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+    {#if !isEmptyHtmlElement(tag) && repeatItemData}
       {#each repeatItemData as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
-      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
+    {#if !isEmptyHtmlElement(tag) && !repeatItemData}
+      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 
         {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}

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

@@ -2,14 +2,14 @@
 
 <script>import { TARGET } from "../constants/target.js";
 export let styles;
-$: injectedStyleScript = () => {
-    return `<${tag()}>${styles}</${tag()}>`;
-};
 $: tag = () => {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
 };
+$: injectedStyleScript = () => {
+    return `<${tag()}>${styles}</${tag()}>`;
+};
 </script>
 
 {#if TARGET === "svelte" || TARGET === "qwik"}

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/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/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.16",
+  "version": "0.2.1",
   "type": "module",
   "files": [
     "package",

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

@@ -48,7 +48,10 @@
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    const className = useBlock().id!;
+    const className = useBlock().id;
+    if (!className) {
+      return "";
+    }
     const largeStylesClass = largeStyles
       ? createCssClass({
           className,

package/src/components/render-block/render-block.helpers.ts

@@ -1,4 +1,7 @@
-import type { BuilderContextInterface } from '../../context/types';
+import type {
+  BuilderContextInterface,
+  BuilderRenderState,
+} from '../../context/types';
 import { evaluate } from '../../functions/evaluate';
 import { getProcessedBlock } from '../../functions/get-processed-block';
 import type { BuilderBlock } from '../../types/builder-block';
@@ -110,3 +113,26 @@ export const getRepeatItemData = ({
 
   return repeatArray;
 };
+
+export const getProxyState = (
+  context: BuilderContextInterface
+): BuilderContextInterface['state'] => {
+  if (typeof Proxy === 'undefined') {
+    console.error(
+      'no Proxy available in this environment, cannot proxy state.'
+    );
+    return context.state;
+  }
+
+  const useState = new Proxy(context.state, {
+    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;
+
+      // set the value in the context, so that the rest of the app gets the update.
+      context.setState?.(obj);
+      return true;
+    },
+  });
+  return useState;
+};

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

@@ -6,19 +6,16 @@
 </script>
 
 <script lang="ts">
-  import {
-    BuilderContextInterface,
-    BuilderRenderState,
-  } from "../../context/types.js";
+  import { 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 { 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,
+    getProxyState,
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.js";
@@ -51,9 +48,6 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
-  $: tag = () => {
-    return getBlockTag(useBlock());
-  };
   $: useBlock = () => {
     return repeatItemData
       ? block
@@ -73,29 +67,10 @@
     }
     return true;
   };
-  $: proxyState = () => {
-    if (typeof Proxy === "undefined") {
-      console.error(
-        "no Proxy available in this environment, cannot proxy state."
-      );
-      return context.state;
-    }
-    const useState = new Proxy(context.state, {
-      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;
-
-        // set the value in the context, so that the rest of the app gets the update.
-        context.setState?.(obj);
-        return true;
-      },
-    });
-    return useState;
-  };
   $: actions = () => {
     return getBlockActions({
       block: useBlock(),
-      state: proxyState(),
+      state: TARGET === "qwik" ? context.state : proxyState,
       context: context.context,
     });
   };
@@ -114,28 +89,6 @@
         : {}),
     };
   };
-  $: renderComponentProps = () => {
-    return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-      },
-      context: childrenContext(),
-    };
-  };
   $: childrenWithoutParentComponent = () => {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -171,6 +124,28 @@
       inheritedStyles: getInheritedTextStyles(),
     };
   };
+  $: renderComponentProps = () => {
+    return {
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock()),
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(!component?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+      },
+      context: childrenContext(),
+    };
+  };
 
   let component = getComponent({
     block: block,
@@ -180,22 +155,24 @@
     block: block,
     context: context,
   });
+  let tag = block.tagName || "div";
+  let proxyState = getProxyState(context);
 </script>
 
 {#if canShowBlock()}
   {#if !component?.noWrap}
-    {#if isEmptyHtmlElement(tag())}
-      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
+    {#if isEmptyHtmlElement(tag)}
+      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
     {/if}
 
-    {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+    {#if !isEmptyHtmlElement(tag) && repeatItemData}
       {#each repeatItemData as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
-      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
+    {#if !isEmptyHtmlElement(tag) && !repeatItemData}
+      <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 
         {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}

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

@@ -9,14 +9,14 @@
 
   export let styles: Props["styles"];
 
-  $: injectedStyleScript = () => {
-    return `<${tag()}>${styles}</${tag()}>`;
-  };
   $: tag = () => {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
   };
+  $: injectedStyleScript = () => {
+    return `<${tag()}>${styles}</${tag()}>`;
+  };
 </script>
 
 {#if TARGET === "svelte" || TARGET === "qwik"}

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/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/types/api-version.ts

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

package/package/functions/get-block-tag.d.ts

@@ -1,3 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-export type TagName = string;
-export declare function getBlockTag(block: BuilderBlock): TagName;

package/package/functions/get-block-tag.js

@@ -1,3 +0,0 @@
-export function getBlockTag(block) {
-    return block.tagName || 'div';
-}

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

@@ -1,7 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-
-export type TagName = string;
-
-export function getBlockTag(block: BuilderBlock): TagName {
-  return block.tagName || 'div';
-}