@builder.io/sdk-react 0.2.3 → 0.3.1

package/README.md

@@ -1,6 +1,72 @@
 # Builder.io React SDK v2 (BETA)
 
-This is the React v2 SDK. It is still in Beta: for the stable React v1 SDK [go here](../../../react/).
+This is the React v2 SDK, `@builder.io/sdk-react`.
+
+NOTE: it is still in Beta. For the stable React v1 SDK [go here](../../../react/), i.e. `builder.io/react`.
+
+## API Reference
+
+To use the SDK, you need to:
+
+- fetch the builder data using `getContent`: you can see how to use it here https://www.builder.io/c/docs/content-api, and how it differs from the React V1 SDK's `builder.get()` function.
+
+NOTE: if you are using the SDK in next v13's app directory, you will have to import `getContent` from @builder.io/sdk-react/server`. this is a special import that guarantees you don't import any client components with your data fetching.
+
+- pass that data to the `RenderContent` component, along with the following properties:
+
+```ts
+type RenderContentProps = {
+  content?: Nullable<BuilderContent>;
+  model?: string;
+  data?: { [key: string]: any };
+  context?: BuilderRenderContext;
+  apiKey: string;
+  apiVersion?: ApiVersion;
+  customComponents?: RegisteredComponent[];
+  canTrack?: boolean;
+  locale?: string;
+  includeRefs?: boolean;
+};
+```
+
+Here is a simplified example showing how you would use both:
+
+```tsx
+import { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-react';
+import { useEffect, useState } from 'react';
+
+const BUILDER_PUBLIC_API_KEY = 'YOUR API KEY';
+
+function App() {
+  const [content, setContent] = useState(undefined);
+
+  useEffect(() => {
+    getContent({
+      model: 'page',
+      apiKey: BUILDER_PUBLIC_API_KEY,
+      userAttributes: {
+        urlPath: window.location.pathname || '/',
+      },
+    }).then((content) => {
+      setContent(content);
+    });
+  }, []);
+
+  const shouldRenderBuilderContent = content || isPreviewing();
+
+  return shouldRenderBuilderContent ? (
+    <RenderContent
+      content={content}
+      model="page"
+      apiKey={BUILDER_PUBLIC_API_KEY}
+    />
+  ) : (
+    <div>Content Not Found</div>
+  );
+}
+```
+
+Look at the [examples](#examples) for more information.
 
 ## Mitosis
 
@@ -13,10 +79,13 @@ To check the status of the SDK, look at [these tables](../../README.md#feature-i
 ## Getting Started
 
 ```
-npm install @builder.io/sdk-react@dev
+npm install @builder.io/sdk-react
 ```
 
-Take a look at [our example repo](/examples/react-v2) for how to use this SDK.
+## Examples
+
+- [React](../../../../examples/react-v2/)
+- [Next.js + app dir](../../../../examples/next-app-directory)
 
 ## Fetch
 

package/dist/sdk/blocks/columns/columns.js

@@ -50,7 +50,7 @@ function Columns(props) {
             };
         }
         const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutterSize}px`;
+        const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
         return {
@@ -108,17 +108,17 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-348c3b10", style: columnsCssVars() },
+                " div-08005e06", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-348c3b10-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-08005e06-2", style: columnCssVars(index), key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-348c3b10 {
+        React.createElement("style", null, `.div-08005e06 {
   display: flex;
   line-height: normal;
-}.div-348c3b10-2 {
+}.div-08005e06-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/symbol/symbol.js

@@ -62,7 +62,7 @@ function Symbol(props) {
     return (React.createElement("div", { ...props.attributes, className: className },
         React.createElement(RenderContent, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...props.symbol?.data,
-                ...builderContext.state,
+                ...builderContext.localState,
                 ...contentToUse?.data?.state,
             }, model: props.symbol?.model, content: contentToUse })));
 }

package/dist/sdk/components/render-block/block-styles.js

@@ -10,7 +10,9 @@ function BlockStyles(props) {
     function useBlock() {
         return getProcessedBlock({
             block: props.block,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             context: props.context.context,
             shouldEvaluateBindings: true,
         });

package/dist/sdk/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/dist/sdk/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/dist/sdk/components/render-block/render-block.js

@@ -6,7 +6,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";
-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";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -17,16 +17,20 @@ function RenderBlock(props) {
         block: props.block,
         context: props.context,
     }));
-    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
-        block: props.block,
-        context: props.context,
-    }));
+    function repeatItem() {
+        return getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        });
+    }
     function useBlock() {
-        return repeatItemData
+        return repeatItem()
             ? props.block
             : getProcessedBlock({
                 block: props.block,
-                state: props.context.state,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
                 context: props.context.context,
                 shouldEvaluateBindings: true,
             });
@@ -41,11 +45,12 @@ function RenderBlock(props) {
         }
         return true;
     }
-    const [proxyState, setProxyState] = useState(() => getProxyState(props.context));
     function actions() {
         return getBlockActions({
             block: useBlock(),
-            state: TARGET === "qwik" ? props.context.state : proxyState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
             context: props.context.context,
         });
     }
@@ -71,7 +76,7 @@ function RenderBlock(props) {
          * 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 ?? [] : [];
     }
     function childrenContext() {
@@ -88,10 +93,11 @@ function RenderBlock(props) {
         return {
             apiKey: props.context.apiKey,
             apiVersion: props.context.apiVersion,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             content: props.context.content,
             context: props.context.context,
-            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };
@@ -122,8 +128,8 @@ function RenderBlock(props) {
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
         isEmptyHtmlElement(tag) ? (React.createElement(React.Fragment, null,
             React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
+        !isEmptyHtmlElement(tag) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !isEmptyHtmlElement(tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
             React.createElement(TagRef, { ...attributes(), ...actions() },
                 React.createElement(RenderComponent, { ...renderComponentProps() }),
                 childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),

package/dist/sdk/components/render-block/render-repeated-block.js

@@ -14,8 +14,9 @@ import RenderBlock from "./render-block";
 function RenderRepeatedBlock(props) {
     return (React.createElement(BuilderContext.Provider, { value: {
             content: props.repeatContext.content,
-            state: props.repeatContext.state,
-            setState: props.repeatContext.setState,
+            localState: props.repeatContext.localState,
+            rootState: props.repeatContext.rootState,
+            rootSetState: props.repeatContext.rootSetState,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,

package/dist/sdk/components/render-content/render-content.js

@@ -58,8 +58,8 @@ function RenderContent(props) {
         data: props.data,
         locale: props.locale,
     }));
-    function setContextState(newState) {
-        setContentState(newState);
+    function contentSetState(newRootState) {
+        setContentState(newRootState);
     }
     const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
         ...getDefaultRegisteredComponents(),
@@ -117,7 +117,9 @@ function RenderContent(props) {
             evaluate({
                 code: jsCode,
                 context: props.context || {},
-                state: contentState,
+                localState: undefined,
+                rootState: contentState,
+                rootSetState: contentSetState,
             });
         }
     }
@@ -145,7 +147,9 @@ function RenderContent(props) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
             code: group,
             context: props.context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         }));
     }
     function handleRequest({ url, key }) {
@@ -156,7 +160,7 @@ function RenderContent(props) {
                 ...contentState,
                 [key]: json,
             };
-            setContextState(newState);
+            contentSetState(newState);
         })
             .catch((err) => {
             console.error("error fetching dynamic data", url, err);
@@ -280,8 +284,9 @@ function RenderContent(props) {
     }, []);
     return (React.createElement(builderContext.Provider, { value: {
             content: useContent,
-            state: contentState,
-            setState: setContextState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: TARGET === "qwik" ? undefined : contentSetState,
             context: props.context || {},
             apiKey: props.apiKey,
             apiVersion: props.apiVersion,

package/dist/sdk/components/render-content-variants/helpers.d.ts

@@ -0,0 +1,12 @@
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export {};

package/dist/sdk/components/render-content-variants/helpers.js

@@ -0,0 +1,154 @@
+import { isBrowser } from '../../functions/is-browser';
+export const checkShouldRunVariants = ({ canTrack, content, }) => {
+    const hasVariants = Object.keys(content?.variations || {}).length > 0;
+    if (!hasVariants) {
+        return false;
+    }
+    if (!canTrack) {
+        return false;
+    }
+    if (isBrowser()) {
+        return false;
+    }
+    return true;
+};
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+const variantScriptFn = function main(contentId, variants) {
+    function templateSelectorById(id) {
+        return `template[data-template-variant-id="${id}"]`;
+    }
+    function removeTemplatesAndScript() {
+        variants.forEach((template) => {
+            const el = document.querySelector(templateSelectorById(template.id));
+            if (el) {
+                el.remove();
+            }
+        });
+        const el = document.getElementById(`variants-script-${contentId}`);
+        if (el) {
+            el.remove();
+        }
+    }
+    /**
+     * Replace the old parent with the new one.
+     *
+     * NOTE: replacing the old parent with the new one means that any other children of that parent will be removed.
+     *
+     * ```jsx
+     *  <div>                               <-- templatesParent.parentNode
+     *    <div>                             <-- templatesParent
+     *      <h1>Page Title</h1>             <-- will disappear?
+     *      <RenderContentVariants>
+     *        <template>...</template>
+     *        <template>...</template>
+     *        <template>...</template>
+     *        <script />                    <-- this script
+     *      </RenderContentVariants>
+     *      <footer>Footer Content</foote>  <-- will disappear?
+     *    </div>
+     *  </div>
+     * ```
+     *
+     * Since `RenderContentVariants will replace its parent, the rest of the content will be removed.
+     */
+    function injectVariant() {
+        if (!navigator.cookieEnabled) {
+            return;
+        }
+        /**
+         * TO-DO: what is this check doing?
+         * seems like a template polyfill check
+         */
+        if (typeof document.createElement('template').content === 'undefined') {
+            return;
+        }
+        function getAndSetVariantId() {
+            function setCookie(name, value, days) {
+                let expires = '';
+                if (days) {
+                    const date = new Date();
+                    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+                    expires = '; expires=' + date.toUTCString();
+                }
+                document.cookie =
+                    name +
+                        '=' +
+                        (value || '') +
+                        expires +
+                        '; path=/' +
+                        '; Secure; SameSite=None';
+            }
+            function getCookie(name) {
+                const nameEQ = name + '=';
+                const ca = document.cookie.split(';');
+                for (let i = 0; i < ca.length; i++) {
+                    let c = ca[i];
+                    while (c.charAt(0) === ' ')
+                        c = c.substring(1, c.length);
+                    if (c.indexOf(nameEQ) === 0)
+                        return c.substring(nameEQ.length, c.length);
+                }
+                return null;
+            }
+            const cookieName = `builder.tests.${contentId}`;
+            const variantInCookie = getCookie(cookieName);
+            const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+            /**
+             * cookie already exists
+             */
+            if (variantInCookie && availableIDs.includes(variantInCookie)) {
+                console.log('[DEBUG]: cookie exists: ', variantInCookie);
+                return variantInCookie;
+            }
+            /**
+             * no cookie exists, find variant
+             */
+            let n = 0;
+            const random = Math.random();
+            for (let i = 0; i < variants.length; i++) {
+                const variant = variants[i];
+                const testRatio = variant.testRatio;
+                n += testRatio;
+                if (random < n) {
+                    setCookie(cookieName, variant.id);
+                    return variant.id;
+                }
+            }
+            /**
+             * no variant found, assign default content
+             */
+            setCookie(cookieName, contentId);
+            return contentId;
+        }
+        const variantId = getAndSetVariantId();
+        if (variantId === contentId) {
+            console.log('[DEBUG]: variantId === contentId');
+            return;
+        }
+        const winningTemplate = document.querySelector(templateSelectorById(variantId));
+        if (!winningTemplate) {
+            /**
+             * TO-DO: what do in this case? throw? warn?
+             */
+            console.log('[DEBUG]: no winning template');
+            return;
+        }
+        const templatesParent = winningTemplate.parentNode;
+        const newParent = templatesParent.cloneNode(false);
+        newParent.appendChild(winningTemplate.content.firstElementChild);
+        templatesParent.parentNode.replaceChild(newParent, templatesParent);
+        console.log('[DEBUG]: injected variant');
+    }
+    injectVariant();
+    removeTemplatesAndScript();
+};
+export const getVariantsScriptString = (variants, contentId) => {
+    const fnStr = variantScriptFn.toString().replace(/\s+/g, ' ');
+    return `
+  ${fnStr}
+  main("${contentId}", ${JSON.stringify(variants)})
+  `;
+};

package/dist/sdk/components/render-content-variants/render-content-variants.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+type VariantsProviderProps = RenderContentProps;
+import type { RenderContentProps } from "../render-content/render-content.types";
+declare function RenderContentVariants(props: VariantsProviderProps): JSX.Element;
+export default RenderContentVariants;

package/dist/sdk/components/render-content-variants/render-content-variants.js

@@ -0,0 +1,29 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import { checkShouldRunVariants, getVariantsScriptString } from "./helpers";
+import RenderContent from "../render-content/render-content";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+function RenderContentVariants(props) {
+    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(Object.values(props.content?.variations || {}).map((value) => ({
+        id: value.id,
+        testRatio: value.testRatio,
+    })), props.content?.id || ""));
+    const [shouldRenderVariants, setShouldRenderVariants] = useState(() => checkShouldRunVariants({
+        canTrack: getDefaultCanTrack(props.canTrack),
+        content: props.content,
+    }));
+    const [ScriptTag, setScriptTag] = useState(() => "script");
+    const [TemplateTag, setTemplateTag] = useState(() => "template");
+    return (React.createElement(React.Fragment, null, shouldRenderVariants ? (React.createElement(React.Fragment, null,
+        Object.values(props.content.variations)?.map((variant) => (React.createElement(state.TemplateTag, { key: variant?.id, "data-template-variant-id": variant?.id },
+            React.createElement(RenderContent, { content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents })))),
+        React.createElement(state.ScriptTag, { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }),
+        React.createElement(RenderContent, { content: props.content, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents }))) : (React.createElement(React.Fragment, null,
+        React.createElement(RenderContent, { content: handleABTestingSync({
+                item: props.content,
+                canTrack: getDefaultCanTrack(props.canTrack),
+            }), apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents })))));
+}
+export default RenderContentVariants;

package/dist/sdk/components/render-inlined-styles.js

@@ -3,9 +3,9 @@ import * as React from "react";
 import { TARGET } from "../constants/target.js";
 function RenderInlinedStyles(props) {
     function 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 "style";
+        return ("sty" + "le");
     }
     function injectedStyleScript() {
         return `<${tag()}>${props.styles}</${tag()}>`;

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

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

package/dist/sdk/constants/sdk-version.js

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

package/dist/sdk/context/builder.context.js

@@ -2,8 +2,9 @@ import { createContext } from "react";
 export default createContext({
     content: null,
     context: {},
-    state: {},
-    setState() { },
+    localState: undefined,
+    rootSetState() { },
+    rootState: {},
     apiKey: null,
     apiVersion: undefined,
     registeredComponents: {},

package/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/functions/evaluate.test.d.ts

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

package/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/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/dist/sdk/helpers/canTrack.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;

package/dist/sdk/helpers/canTrack.js

@@ -0,0 +1,2 @@
+import { checkIsDefined } from './nullable';
+export const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;

package/dist/sdk/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-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "type": "module",
   "files": [
     "dist"
@@ -14,10 +14,7 @@
     "build:types:server": "tsc -p ./tsconfig.server.json",
     "build:types:sdk": "tsc -p ./tsconfig.sdk.json",
     "build:types": "yarn build:types:sdk",
-    "build": "yarn build:types",
-    "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"
+    "build": "yarn build:types"
   },
   "peerDependencies": {
     "react": "^18.2.0"