@builder.io/sdk-svelte 0.2.0 → 0.2.2

package/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",
@@ -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",
@@ -129,6 +128,7 @@
     "./helpers/css": "./helpers/css.js",
     "./helpers/flatten": "./helpers/flatten.js",
     "./helpers/localStorage": "./helpers/localStorage.js",
+    "./helpers/logger": "./helpers/logger.js",
     "./helpers/nullable": "./helpers/nullable.js",
     "./helpers/sessionId": "./helpers/sessionId.js",
     "./helpers/time": "./helpers/time.js",
@@ -153,7 +153,7 @@
   "types": "./package/index.d.ts",
   "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/package/CHANGELOG.md

@@ -1,4 +1,15 @@
+### 0.2.2
+
+- Fix: dynamic bindings for Link URLs.
+- Fix: previewing content that includes a symbol whose `model` property is a `page`.
+- Fix: "Show If"/"Hide If" bindings when the initial value is `undefined`.
+
+### 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:
@@ -8,8 +19,9 @@ In case you feel the need to use our older API Version `v2`, reach out to us at
 ```
 
 ```js
-getContent({ apiVersion: "v2" })
+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

package/package/blocks/symbol/symbol.svelte

@@ -7,6 +7,7 @@ import { getContent } from "../../functions/get-content/index.js";
 import "../../types/builder-content.js";
 import "../../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:");
 const filterAttrs = (attrs = {}, filter) => {
@@ -66,7 +67,7 @@ function fetchContent() {
             }
         })
             .catch((err) => {
-            console.error("[Builder.io]: Could not fetch symbol content: ", err);
+            logger.error("Could not fetch symbol content: ", err);
         });
     }
 }

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,18 +4,16 @@
 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";
 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);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
@@ -34,9 +32,6 @@ const setAttrs = (node, attrs = {}) => {
 };
 export let block;
 export let context;
-$: tag = () => {
-    return getBlockTag(useBlock());
-};
 $: useBlock = () => {
     return repeatItemData
         ? block
@@ -48,34 +43,18 @@ $: useBlock = () => {
         });
 };
 $: 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;
 };
-$: 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 +73,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 +105,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 +135,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-content/render-content.svelte

@@ -20,6 +20,7 @@ import { getInteractionPropertiesForEvent } from "../../functions/track/interact
 import "./render-content.types.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 export let content;
 export let data;
 export let canTrack;
@@ -198,7 +199,7 @@ let httpReqsData = {};
 let clicked = false;
 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()) {
         if (isEditing()) {
@@ -237,20 +238,21 @@ onMount(() => {
         // 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");
             /**
              * Make sure that:
              * - 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,

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-block-properties.d.ts

@@ -3,4 +3,5 @@ export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
     style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;
+    href: any;
 };

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

@@ -1,8 +1,39 @@
 import { TARGET } from '../constants/target.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block) => {
+    // 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.href };
+};
 export function getBlockProperties(block) {
     const properties = {
+        ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
         style: getStyleAttribute(block.style),

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

@@ -7,5 +7,5 @@ type ContentResponse = {
     status: number;
     message: string;
 };
-export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse>;
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
 export {};

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

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

package/package/functions/track/index.js

@@ -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 { isBrowser } from '../is-browser.js';
@@ -30,7 +31,7 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
 });
 export async function _track(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;
     }
     if (!eventProps.canTrack) {

package/package/helpers/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+};

package/package/helpers/logger.js

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

package/package/types/builder-content.d.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 {
     small: number;

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.0",
+  "version": "0.2.2",
   "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/symbol/symbol.svelte

@@ -27,6 +27,7 @@
   import { BuilderContent } from "../../types/builder-content.js";
   import { 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

@@ -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";
@@ -28,7 +25,6 @@
   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);
@@ -51,9 +47,6 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
-  $: tag = () => {
-    return getBlockTag(useBlock());
-  };
   $: useBlock = () => {
     return repeatItemData
       ? block
@@ -65,37 +58,18 @@
         });
   };
   $: 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;
   };
-  $: 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 +88,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 +123,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 +154,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-content/render-content.svelte

@@ -38,6 +38,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 +237,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 +284,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 +296,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,

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-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. ', 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/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 {

package/src/types/components.ts

@@ -1,72 +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 {
   /**

package/src/types/input.ts

@@ -117,4 +117,9 @@ 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/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';
-}