@builder.io/sdk-svelte 0.2.2 → 0.3.1

package/package/context/types.d.ts

@@ -11,8 +11,23 @@ export type BuilderRenderContext = Record<string, unknown>;
 export interface BuilderContextInterface {
     content: Nullable<BuilderContent>;
     context: BuilderRenderContext;
-    state: BuilderRenderState;
-    setState?: (state: BuilderRenderState) => void;
+    /**
+     * The state of the application.
+     *
+     * NOTE: see `localState` below to understand how it is different from `rootState`.
+     */
+    rootState: BuilderRenderState;
+    /**
+     * Some frameworks have a `setState` function which needs to be invoked to notify
+     * the framework of state change. (other frameworks don't in which case it is `undefined')
+     */
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+    /**
+     * The local state of the current component. This is different from `rootState` in that
+     * it can be a child state created by a repeater containing local state.
+     * The `rootState` is where all of the state mutations are actually stored.
+     */
+    localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
     registeredComponents: RegisteredComponents;

package/package/functions/evaluate.d.ts

@@ -1,6 +1,7 @@
-import type { BuilderContextInterface } from '../context/types.js';
-export declare function evaluate({ code, context, state, event, isExpression, }: {
+import type { BuilderContextInterface, BuilderRenderState } from '../context/types.js';
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, }: {
     code: string;
     event?: Event;
     isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): any;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

package/package/functions/evaluate.js

@@ -1,6 +1,6 @@
 import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
-export function evaluate({ code, context, state, event, isExpression = true, }) {
+export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -20,9 +20,30 @@ export function evaluate({ code, context, state, event, isExpression = true, })
             code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
-        return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
+        return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
     }
     catch (e) {
         console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }
+export function flattenState(rootState, localState, rootSetState) {
+    if (rootState === localState) {
+        throw new Error('rootState === localState');
+    }
+    return new Proxy(rootState, {
+        get: (_, prop) => {
+            if (localState && prop in localState) {
+                return localState[prop];
+            }
+            return rootState[prop];
+        },
+        set: (_, prop, value) => {
+            if (localState && prop in localState) {
+                throw new Error('Writing to local state is not allowed as it is read-only.');
+            }
+            rootState[prop] = value;
+            rootSetState?.(rootState);
+            return true;
+        },
+    });
+}

package/package/functions/evaluate.test.d.ts

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

package/package/functions/evaluate.test.js

@@ -0,0 +1,17 @@
+import { flattenState } from './evaluate';
+describe('flatten state', () => {
+    it('should behave normally when no PROTO_STATE', () => {
+        const localState = {};
+        const rootState = { foo: 'bar' };
+        const flattened = flattenState(rootState, localState, undefined);
+        expect(flattened.foo).toEqual('bar');
+        flattened.foo = 'baz';
+        expect(rootState.foo).toEqual('baz');
+    });
+    it('should shadow write ', () => {
+        const rootState = { foo: 'foo' };
+        const localState = { foo: 'baz' };
+        const flattened = flattenState(rootState, localState, undefined);
+        expect(() => (flattened.foo = 'bar')).toThrow('Writing to local state is not allowed as it is read-only.');
+    });
+});

package/package/functions/get-block-actions-handler.d.ts

@@ -2,7 +2,7 @@ import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 type Options = {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>;
 type EventHandler = (event: Event) => any;
 export declare const createEventHandler: (value: string, options: Options) => EventHandler;
 export {};

package/package/functions/get-block-actions-handler.js

@@ -2,7 +2,9 @@ import { evaluate } from './evaluate.js';
 export const createEventHandler = (value, options) => (event) => evaluate({
     code: value,
     context: options.context,
-    state: options.state,
+    localState: options.localState,
+    rootState: options.rootState,
+    rootSetState: options.rootSetState,
     event,
     isExpression: false,
 });

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

@@ -5,5 +5,5 @@ type Actions = {
 };
 export declare function getBlockActions(options: {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): Actions;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): Actions;
 export {};

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

@@ -15,7 +15,7 @@ export async function getAllContent(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);
+            logger.error('Error fetching data. ', { url, content, options });
             return content;
         }
         const canTrack = options.canTrack !== false;

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

@@ -1,10 +1,10 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }: {
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }: {
     block: BuilderBlock;
     /**
      * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
      * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
      */
     shouldEvaluateBindings: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock;

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

@@ -2,7 +2,7 @@ import { evaluate } from './evaluate.js';
 import { fastClone } from './fast-clone.js';
 import { set } from './set.js';
 import { transformBlock } from './transform-block.js';
-const evaluateBindings = ({ block, context, state, }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState, }) => {
     if (!block.bindings) {
         return block;
     }
@@ -14,15 +14,27 @@ const evaluateBindings = ({ block, context, state, }) => {
     };
     for (const binding in block.bindings) {
         const expression = block.bindings[binding];
-        const value = evaluate({ code: expression, state, context });
+        const value = evaluate({
+            code: expression,
+            localState,
+            rootState,
+            rootSetState,
+            context,
+        });
         set(copied, binding, value);
     }
     return copied;
 };
-export function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }) {
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }) {
     const transformedBlock = transformBlock(block);
     if (shouldEvaluateBindings) {
-        return evaluateBindings({ block: transformedBlock, state, context });
+        return evaluateBindings({
+            block: transformedBlock,
+            localState,
+            rootState,
+            rootSetState,
+            context,
+        });
     }
     else {
         return transformedBlock;

package/package/functions/get-processed-block.test.js

@@ -19,7 +19,9 @@ test('Can process bindings', () => {
     const processed = getProcessedBlock({
         block,
         context: {},
-        state: { test: 'hello' },
+        rootState: { test: 'hello' },
+        rootSetState: undefined,
+        localState: undefined,
         shouldEvaluateBindings: true,
     });
     expect(processed).not.toEqual(block);

package/package/index.d.ts

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

package/package/scripts/init-editing.js

@@ -1,3 +1,4 @@
+import { SDK_VERSION } from '../constants/sdk-version.js';
 import { TARGET } from '../constants/target.js';
 import { isBrowser } from '../functions/is-browser.js';
 import { register } from '../functions/register.js';
@@ -32,6 +33,7 @@ export const setupBrowserForEditing = (options = {}) => {
             type: 'builder.sdkInfo',
             data: {
                 target: TARGET,
+                version: SDK_VERSION,
                 // TODO: compile these in
                 // type: process.env.SDK_TYPE,
                 // version: process.env.SDK_VERSION,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "files": [
     "package",
@@ -28,9 +28,6 @@
   },
   "types": "./package/index.d.ts",
   "scripts": {
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev",
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",

package/src/blocks/columns/columns.svelte

@@ -11,12 +11,8 @@
   export interface ColumnProps {
     columns?: Column[];
     builderBlock: BuilderBlock;
-
-    // TODO: Implement this when support for dynamic CSS lands
     space?: number;
-    // TODO: Implement this when support for dynamic CSS lands
     stackColumnsAt?: StackColumnsAt;
-    // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
   }
 </script>
@@ -25,13 +21,13 @@
   import { getContext } from "svelte";
 
   import RenderBlocks from "../../components/render-blocks.svelte";
-  import { BuilderBlock } from "../../types/builder-block";
+  import type { BuilderBlock } from "../../types/builder-block";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
-  import { SizeName } from "../../constants/device-sizes";
+  import type { SizeName } from "../../constants/device-sizes";
   import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
   import BuilderContext from "../../context/builder.context.js";
-  import { Dictionary } from "../../types/typescript";
+  import type { Dictionary } from "../../types/typescript";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
@@ -84,7 +80,7 @@
       } as any as Dictionary<string>;
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {
@@ -130,30 +126,30 @@
   };
   $: columnsStyles = () => {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
-        }
-
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
-      }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
-
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
   };
 
   let gutterSize = typeof space === "number" ? space || 0 : 20;

package/src/blocks/image/image.svelte

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

package/src/blocks/symbol/symbol.svelte

@@ -24,8 +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 type { BuilderContent } from "../../types/builder-content.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import { TARGET } from "../../constants/target";
   import { logger } from "../../helpers/logger";
 
@@ -136,7 +136,7 @@
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.state,
+      ...builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

@@ -11,11 +11,11 @@
     getSizesForBreakpoints,
   } from "../../constants/device-sizes.js";
   import { TARGET } from "../../constants/target.js";
-  import { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
   import { createCssClass } from "../../helpers/css.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import RenderInlinedStyles from "../render-inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];
@@ -24,7 +24,9 @@
   $: useBlock = () => {
     return getProcessedBlock({
       block: block,
-      state: context.state,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
       context: context.context,
       shouldEvaluateBindings: true,
     });

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

@@ -1,7 +1,4 @@
-import type {
-  BuilderContextInterface,
-  BuilderRenderState,
-} from '../../context/types';
+import type { BuilderContextInterface } from '../../context/types';
 import { evaluate } from '../../functions/evaluate';
 import { getProcessedBlock } from '../../functions/get-processed-block';
 import type { BuilderBlock } from '../../types/builder-block';
@@ -44,7 +41,9 @@ export const getComponent = ({
 }) => {
   const componentName = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false,
   }).component?.name;
@@ -85,7 +84,9 @@ export const getRepeatItemData = ({
 
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
   });
 
@@ -100,8 +101,8 @@ export const getRepeatItemData = ({
   const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
     context: {
       ...context,
-      state: {
-        ...context.state,
+      localState: {
+        ...context.localState,
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -113,26 +114,3 @@ 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,20 +6,19 @@
 </script>
 
 <script lang="ts">
-  import { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
   import { getBlockActions } from "../../functions/get-block-actions.js";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
   import { getBlockProperties } from "../../functions/get-block-properties.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
   import BlockStyles from "./block-styles.svelte";
   import {
     getComponent,
-    getProxyState,
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.js";
-  import { RenderComponentProps } from "./render-component.svelte";
+  import type { RenderComponentProps } from "./render-component.svelte";
   import RenderRepeatedBlock from "./render-repeated-block.svelte";
   import { TARGET } from "../../constants/target.js";
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -47,12 +46,20 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
+  $: repeatItem = () => {
+    return getRepeatItemData({
+      block: block,
+      context: context,
+    });
+  };
   $: useBlock = () => {
-    return repeatItemData
+    return repeatItem()
       ? block
       : getProcessedBlock({
           block: block,
-          state: context.state,
+          localState: context.localState,
+          rootState: context.rootState,
+          rootSetState: context.rootSetState,
           context: context.context,
           shouldEvaluateBindings: true,
         });
@@ -69,7 +76,9 @@
   $: actions = () => {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? context.state : proxyState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
+      localState: context.localState,
       context: context.context,
     });
   };
@@ -96,7 +105,7 @@
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItemData;
+      !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   };
   $: childrenContext = () => {
@@ -115,10 +124,11 @@
     return {
       apiKey: context.apiKey,
       apiVersion: context.apiVersion,
-      state: context.state,
+      localState: context.localState,
+      rootState: context.rootState,
+      rootSetState: context.rootSetState,
       content: context.content,
       context: context.context,
-      setState: context.setState,
       registeredComponents: context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -150,12 +160,7 @@
     block: block,
     context: context,
   });
-  let repeatItemData = getRepeatItemData({
-    block: block,
-    context: context,
-  });
   let tag = block.tagName || "div";
-  let proxyState = getProxyState(context);
 </script>
 
 {#if canShowBlock()}
@@ -164,13 +169,13 @@
       <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && repeatItemData}
-      {#each repeatItemData as data, index (index)}
+    {#if !isEmptyHtmlElement(tag) && repeatItem()}
+      {#each repeatItem() as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && !repeatItemData}
+    {#if !isEmptyHtmlElement(tag) && !repeatItem()}
       <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 

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

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

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

@@ -19,8 +19,8 @@
   import { setContext } from "svelte";
 
   import BuilderContext from "../../context/builder.context.js";
-  import { BuilderContextInterface } from "../../context/types.js";
-  import { BuilderBlock } from "../../types/builder-block";
+  import type { BuilderContextInterface } from "../../context/types.js";
+  import type { BuilderBlock } from "../../types/builder-block";
   import RenderBlock from "./render-block.svelte";
 
   export let block: Props["block"];
@@ -28,12 +28,14 @@
 
   setContext(BuilderContext.key, {
     content: repeatContext.content,
-    state: repeatContext.state,
-    setState: repeatContext.setState,
+    localState: repeatContext.localState,
+    rootState: repeatContext.rootState,
+    rootSetState: repeatContext.rootSetState,
     context: repeatContext.context,
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,
     inheritedStyles: repeatContext.inheritedStyles,
+    apiVersion: repeatContext.apiVersion,
   });
 </script>
 

package/src/components/render-blocks.svelte

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