@builder.io/sdk-react 0.2.3-4 → 0.3.1

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/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/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,8 +1,11 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.3-4",
+  "version": "0.3.1",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": "./dist/sdk/index.js",
     "./server": "./dist/sdk/functions/get-content/index.js"
@@ -11,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"

package/CHANGELOG.md

@@ -1,25 +0,0 @@
-### 0.2.2
-
-- Fix: dynamic bindings for Link URLs.
-- Fix: previewing content that includes a symbol whose `model` property is a `page`.
-- Fix: "Show If"/"Hide If" bindings when the initial value is `undefined`.
-
-### 0.2.1
-
-- No Changes.
-
-### 0.2.0
-
-- Sets the default `apiVersion` to `v3`.
-
-In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
-
-```jsx
-<RenderContent apiVersion="v2" />
-```
-
-```js
-getContent({ apiVersion: 'v2' });
-```
-
-More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).

package/packages/react/src/blocks/BaseText.tsx

@@ -1,19 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-
-export interface BaseTextProps {
-  text: string;
-}
-
-import BuilderContext from "../context/builder.context.js";
-
-function BaseText(props: BaseTextProps) {
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <span style={builderContext.inheritedStyles as any}>{props.text}</span>
-  );
-}
-
-export default BaseText;

package/packages/react/src/blocks/button/button.tsx

@@ -1,45 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
-function Button(props: ButtonProps) {
-  return (
-    <>
-      {props.link ? (
-        <>
-          <a
-            role="button"
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            {props.text}
-          </a>
-        </>
-      ) : (
-        <>
-          <button
-            className={
-              /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
-              props.attributes.class + " button-2b50f164"
-            }
-            {...props.attributes}
-          >
-            {props.text}
-          </button>
-        </>
-      )}
-      <style>{`.button-2b50f164 {
-  all: unset;
-}`}</style>
-    </>
-  );
-}
-
-export default Button;

package/packages/react/src/blocks/button/component-info.ts

@@ -1,42 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Core:Button',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
-  defaultStyles: {
-    // TODO: make min width more intuitive and set one
-    appearance: 'none',
-    paddingTop: '15px',
-    paddingBottom: '15px',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    backgroundColor: '#000000',
-    color: 'white',
-    borderRadius: '4px',
-    textAlign: 'center',
-    cursor: 'pointer',
-  },
-  inputs: [
-    {
-      name: 'text',
-      type: 'text',
-      defaultValue: 'Click me!',
-      bubble: true,
-    },
-    {
-      name: 'link',
-      type: 'url',
-      bubble: true,
-    },
-    {
-      name: 'openLinkInNewTab',
-      type: 'boolean',
-      defaultValue: false,
-      friendlyName: 'Open link in new tab',
-    },
-  ],
-  static: true,
-  noWrap: true,
-};

package/packages/react/src/blocks/columns/columns.tsx

@@ -1,211 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useContext } from "react";
-
-type Column = {
-  blocks: BuilderBlock[];
-  width?: number;
-};
-type CSSVal = string | number;
-type StackColumnsAt = "tablet" | "mobile" | "never";
-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;
-}
-
-import RenderBlocks from "../../components/render-blocks";
-import type { BuilderBlock } from "../../types/builder-block";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import type { SizeName } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
-import type { Dictionary } from "../../types/typescript";
-
-function Columns(props: ColumnProps) {
-  const [gutterSize, setGutterSize] = useState(() =>
-    typeof props.space === "number" ? props.space || 0 : 20
-  );
-
-  const [cols, setCols] = useState(() => props.columns || []);
-
-  const [stackAt, setStackAt] = useState(
-    () => props.stackColumnsAt || "tablet"
-  );
-
-  function getWidth(index: number) {
-    return cols[index]?.width || 100 / cols.length;
-  }
-
-  function getColumnCssWidth(index: number) {
-    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function getTabletStyle({
-    stackedStyle,
-    desktopStyle,
-  }: {
-    stackedStyle: CSSVal;
-    desktopStyle: CSSVal;
-  }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
-  }
-
-  function getMobileStyle({
-    stackedStyle,
-    desktopStyle,
-  }: {
-    stackedStyle: CSSVal;
-    desktopStyle: CSSVal;
-  }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
-  }
-
-  const [flexDir, setFlexDir] = useState(() =>
-    props.stackColumnsAt === "never"
-      ? "row"
-      : props.reverseColumnsWhenStacked
-      ? "column-reverse"
-      : "column"
-  );
-
-  function columnsCssVars() {
-    if (TARGET === "reactNative") {
-      return {
-        flexDirection: flexDir,
-      } as Dictionary<string>;
-    }
-
-    return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir,
-        desktopStyle: "row",
-      }),
-    } as Dictionary<string>;
-  }
-
-  function columnCssVars(index: number) {
-    const gutter = index === 0 ? 0 : gutterSize;
-
-    if (TARGET === "reactNative") {
-      return {
-        marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-      } as any as Dictionary<string>;
-    }
-
-    const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
-    const mobileWidth = "100%";
-    const mobileMarginLeft = 0;
-    return {
-      width,
-      "margin-left": gutterPixels,
-      "--column-width-mobile": getMobileStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-mobile": getMobileStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-      "--column-width-tablet": getTabletStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-tablet": getTabletStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-    } as any as Dictionary<string>;
-  }
-
-  function getWidthForBreakpointSize(size: SizeName) {
-    const breakpointSizes = getSizesForBreakpoints(
-      builderContext.content?.meta?.breakpoints || {}
-    );
-    return breakpointSizes[size].max;
-  }
-
-  function columnsStyles() {
-    return `
-        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${props.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) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      <div
-        className={
-          `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-66c71955"
-        }
-        style={columnsCssVars()}
-      >
-        {TARGET !== "reactNative" ? (
-          <>
-            <RenderInlinedStyles styles={columnsStyles()} />
-          </>
-        ) : null}
-
-        {props.columns?.map((column, index) => (
-          <div
-            className="builder-column div-66c71955-2"
-            style={columnCssVars(index)}
-            key={index}
-          >
-            <RenderBlocks
-              blocks={column.blocks}
-              path={`component.options.columns.${index}.blocks`}
-              parent={props.builderBlock.id}
-              styleProp={{
-                flexGrow: "1",
-              }}
-            />
-          </div>
-        ))}
-      </div>
-      <style>{`.div-66c71955 {
-  display: flex;
-  line-height: normal;
-}.div-66c71955-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`}</style>
-    </>
-  );
-}
-
-export default Columns;