@builder.io/sdk-svelte 0.2.3 → 0.3.1

package/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",
@@ -81,10 +81,12 @@
     "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
+    "./constants/sdk-version": "./constants/sdk-version.js",
     "./constants/target": "./constants/target.js",
     "./context/builder.context": "./context/builder.context.js",
     "./context/types": "./context/types.js",
     "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
+    "./functions/evaluate.test": "./functions/evaluate.test.js",
     "./functions/evaluate": "./functions/evaluate.js",
     "./functions/event-handler-name": "./functions/event-handler-name.js",
     "./functions/extract-text-styles": "./functions/extract-text-styles.js",

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.2.3
+
+- No Changes.
+
 ### 0.2.2
 
 - Fix: dynamic bindings for Link URLs.

package/package/blocks/columns/columns.svelte

@@ -43,7 +43,7 @@ function columnCssVars(index) {
         };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {

package/package/blocks/symbol/symbol.svelte

@@ -104,7 +104,7 @@ $: onUpdateFn_0(...[symbol]);
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.state,
+      ...builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

@@ -11,7 +11,9 @@ export let context;
 $: useBlock = () => {
     return getProcessedBlock({
         block: block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: true,
     });

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

@@ -10,4 +10,3 @@ 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

@@ -27,7 +27,9 @@ export const isEmptyHtmlElement = (tagName) => {
 export const getComponent = ({ block, context, }) => {
     const componentName = getProcessedBlock({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false,
     }).component?.name;
@@ -57,7 +59,9 @@ export const getRepeatItemData = ({ block, context, }) => {
     }
     const itemsArray = evaluate({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
     });
     if (!Array.isArray(itemsArray)) {
@@ -68,8 +72,8 @@ export const getRepeatItemData = ({ block, context, }) => {
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
-            state: {
-                ...context.state,
+            localState: {
+                ...context.localState,
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -80,19 +84,3 @@ 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

@@ -5,7 +5,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.svelte";
-import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -29,12 +29,20 @@ const setAttrs = (node, attrs = {}) => {
 };
 export let block;
 export let 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,
         });
@@ -51,7 +59,9 @@ $: canShowBlock = () => {
 $: actions = () => {
     return getBlockActions({
         block: useBlock(),
-        state: TARGET === "qwik" ? context.state : proxyState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
         context: context.context,
     });
 };
@@ -77,7 +87,7 @@ $: childrenWithoutParentComponent = () => {
      * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
      * blocks, and the children will be repeated within those blocks.
      */
-    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
+    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
 };
 $: childrenContext = () => {
@@ -94,10 +104,11 @@ $: childrenContext = () => {
     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(),
     };
@@ -128,12 +139,7 @@ let component = getComponent({
     block: block,
     context: context,
 });
-let repeatItemData = getRepeatItemData({
-    block: block,
-    context: context,
-});
 let tag = block.tagName || "div";
-let proxyState = getProxyState(context);
 </script>
 
 {#if canShowBlock()}
@@ -142,13 +148,13 @@ let proxyState = getProxyState(context);
       <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/package/components/render-block/render-repeated-block.svelte

@@ -16,8 +16,9 @@ export let block;
 export let repeatContext;
 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,

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

@@ -51,8 +51,8 @@ function setBreakpoints(breakpoints) {
         },
     };
 }
-function setContextState(newState) {
-    contentState = newState;
+function contentSetState(newRootState) {
+    contentState = newRootState;
 }
 function processMessage(event) {
     const { data } = event;
@@ -97,7 +97,9 @@ function evaluateJsCode() {
         evaluate({
             code: jsCode,
             context: context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         });
     }
 }
@@ -123,7 +125,9 @@ function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
     }));
 }
 function handleRequest({ url, key }) {
@@ -134,7 +138,7 @@ function handleRequest({ url, key }) {
             ...contentState,
             [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
     })
         .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -287,11 +291,14 @@ setContext(builderContext.key, {
     get content() {
         return useContent;
     },
-    get state() {
+    get localState() {
+        return undefined;
+    },
+    get rootState() {
         return contentState;
     },
-    get setState() {
-        return setContextState;
+    get rootSetState() {
+        return TARGET === "qwik" ? undefined : contentSetState;
     },
     get context() {
         return context || {};

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

@@ -3,9 +3,9 @@
 <script>import { TARGET } from "../constants/target.js";
 export let styles;
 $: tag = () => {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // NOTE: we have to obfuscate 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";
+    return ("sty" + "le");
 };
 $: injectedStyleScript = () => {
     return `<${tag()}>${styles}</${tag()}>`;

package/package/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.3.1";

package/package/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.3.1";

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

@@ -2,8 +2,9 @@ declare const _default: {
     Builder: {
         content: null;
         context: {};
-        state: {};
-        setState(): void;
+        localState: undefined;
+        rootSetState(): void;
+        rootState: {};
         apiKey: null;
         apiVersion: undefined;
         registeredComponents: {};

package/package/context/builder.context.js

@@ -3,8 +3,9 @@ export default {
     Builder: {
         content: null,
         context: {},
-        state: {},
-        setState() { },
+        localState: undefined,
+        rootSetState() { },
+        rootState: {},
         apiKey: null,
         apiVersion: undefined,
         registeredComponents: {},

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-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/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.3",
+  "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>
@@ -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 {

package/src/blocks/symbol/symbol.svelte

@@ -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

@@ -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

@@ -15,7 +15,6 @@
   import BlockStyles from "./block-styles.svelte";
   import {
     getComponent,
-    getProxyState,
     getRepeatItemData,
     isEmptyHtmlElement,
   } from "./render-block.helpers.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-repeated-block.svelte

@@ -28,8 +28,9 @@
 
   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,

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

@@ -79,8 +79,8 @@
       },
     };
   }
-  function setContextState(newState: BuilderRenderState) {
-    contentState = newState;
+  function contentSetState(newRootState: BuilderRenderState) {
+    contentState = newRootState;
   }
   function processMessage(event: MessageEvent) {
     const { data } = event;
@@ -127,7 +127,9 @@
       evaluate({
         code: jsCode,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       });
     }
   }
@@ -154,7 +156,9 @@
       evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       })
     );
   }
@@ -166,7 +170,7 @@
           ...contentState,
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -348,11 +352,14 @@
     get content() {
       return useContent;
     },
-    get state() {
+    get localState() {
+      return undefined;
+    },
+    get rootState() {
       return contentState;
     },
-    get setState() {
-      return setContextState;
+    get rootSetState() {
+      return TARGET === "qwik" ? undefined : contentSetState;
     },
     get context() {
       return context || {};

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

@@ -10,9 +10,9 @@
   export let styles: Props["styles"];
 
   $: tag = () => {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // NOTE: we have to obfuscate 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";
+    return ("sty" + "le") as any;
   };
   $: injectedStyleScript = () => {
     return `<${tag()}>${styles}</${tag()}>`;

package/src/constants/sdk-version.ts

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.3.1"

package/src/context/builder.context.ts

@@ -4,8 +4,9 @@ export default {
   Builder: {
     content: null,
     context: {},
-    state: {},
-    setState() {},
+    localState: undefined,
+    rootSetState() {},
+    rootState: {},
     apiKey: null,
     apiVersion: undefined,
     registeredComponents: {},

package/src/context/types.ts

@@ -16,8 +16,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/src/functions/evaluate.test.ts

@@ -0,0 +1,21 @@
+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/src/functions/evaluate.ts

@@ -1,18 +1,26 @@
-import type { BuilderContextInterface } from '../context/types.js';
+import type {
+  BuilderContextInterface,
+  BuilderRenderState,
+} from '../context/types.js';
 import { isBrowser } from './is-browser.js';
 import { isEditing } from './is-editing.js';
 
 export function evaluate({
   code,
   context,
-  state,
+  localState,
+  rootState,
+  rootSetState,
   event,
   isExpression = true,
 }: {
   code: string;
   event?: Event;
   isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): any {
+} & Pick<
+  BuilderContextInterface,
+  'localState' | 'context' | 'rootState' | 'rootSetState'
+>): any {
   if (code === '') {
     console.warn('Skipping evaluation of empty code block.');
     return;
@@ -45,7 +53,13 @@ export function evaluate({
       'context',
       'event',
       useCode
-    )(builder, builder, state, context, event);
+    )(
+      builder,
+      builder,
+      flattenState(rootState, localState, rootSetState),
+      context,
+      event
+    );
   } catch (e) {
     console.warn(
       'Builder custom code error: \n While Evaluating: \n ',
@@ -55,3 +69,31 @@ export function evaluate({
     );
   }
 }
+
+export function flattenState(
+  rootState: Record<string | symbol, any>,
+  localState: Record<string | symbol, any> | undefined,
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined
+): BuilderRenderState {
+  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 as string];
+    },
+    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 as string] = value;
+      rootSetState?.(rootState);
+      return true;
+    },
+  });
+}

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

@@ -4,7 +4,10 @@ import { evaluate } from './evaluate.js';
 
 type Options = {
   block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>;
+} & Pick<
+  BuilderContextInterface,
+  'localState' | 'context' | 'rootState' | 'rootSetState'
+>;
 
 type EventHandler = (event: Event) => any;
 
@@ -14,7 +17,9 @@ export const createEventHandler =
     evaluate({
       code: value,
       context: options.context,
-      state: options.state,
+      localState: options.localState,
+      rootState: options.rootState,
+      rootSetState: options.rootSetState,
       event,
       isExpression: false,
     });

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

@@ -8,7 +8,10 @@ type Actions = { [index: string]: (event: Event) => any };
 export function getBlockActions(
   options: {
     block: BuilderBlock;
-  } & Pick<BuilderContextInterface, 'state' | 'context'>
+  } & Pick<
+    BuilderContextInterface,
+    'localState' | 'context' | 'rootState' | 'rootSetState'
+  >
 ): Actions {
   const obj: Actions = {};
   const optionActions = options.block.actions ?? {};

package/src/functions/get-processed-block.test.ts

@@ -21,7 +21,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/src/functions/get-processed-block.ts

@@ -8,10 +8,15 @@ import { transformBlock } from './transform-block.js';
 const evaluateBindings = ({
   block,
   context,
-  state,
+  localState,
+  rootState,
+  rootSetState,
 }: {
   block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock => {
+} & Pick<
+  BuilderContextInterface,
+  'localState' | 'context' | 'rootState' | 'rootSetState'
+>): BuilderBlock => {
   if (!block.bindings) {
     return block;
   }
@@ -24,7 +29,13 @@ const evaluateBindings = ({
 
   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);
   }
 
@@ -35,7 +46,9 @@ export function getProcessedBlock({
   block,
   context,
   shouldEvaluateBindings,
-  state,
+  localState,
+  rootState,
+  rootSetState,
 }: {
   block: BuilderBlock;
   /**
@@ -43,11 +56,20 @@ export function getProcessedBlock({
    * 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 {
   const transformedBlock = transformBlock(block);
 
   if (shouldEvaluateBindings) {
-    return evaluateBindings({ block: transformedBlock, state, context });
+    return evaluateBindings({
+      block: transformedBlock,
+      localState,
+      rootState,
+      rootSetState,
+      context,
+    });
   } else {
     return transformedBlock;
   }

package/src/scripts/init-editing.ts

@@ -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';
@@ -40,6 +41,7 @@ export const setupBrowserForEditing = (
         type: 'builder.sdkInfo',
         data: {
           target: TARGET,
+          version: SDK_VERSION,
           // TODO: compile these in
           // type: process.env.SDK_TYPE,
           // version: process.env.SDK_VERSION,