@builder.io/sdk-svelte 0.2.2 → 0.3.1

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

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-  import { CustomFont } from "./render-styles.helpers";
+  import type { CustomFont } from "./render-styles.helpers";
   import { getCss } from "./render-styles.helpers";
   import { getFontCss } from "./render-styles.helpers";
 
@@ -26,16 +26,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `;
 </script>

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

@@ -2,7 +2,7 @@
   import { onDestroy, onMount, setContext } from "svelte";
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-  import {
+  import type {
     BuilderRenderState,
     RegisteredComponent,
     RegisteredComponents,
@@ -18,8 +18,11 @@
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
   import { _track } from "../../functions/track/index.js";
-  import { Breakpoints, BuilderContent } from "../../types/builder-content.js";
-  import { Nullable } from "../../types/typescript.js";
+  import type {
+    Breakpoints,
+    BuilderContent,
+  } from "../../types/builder-content.js";
+  import type { Nullable } from "../../types/typescript.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
   import builderContext from "../../context/builder.context.js";
@@ -29,7 +32,7 @@
   } from "../../scripts/init-editing.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
   import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-  import {
+  import type {
     RenderContentProps,
     BuilderComponentStateChange,
   } from "./render-content.types.js";
@@ -76,8 +79,8 @@
       },
     };
   }
-  function setContextState(newState: BuilderRenderState) {
-    contentState = newState;
+  function contentSetState(newRootState: BuilderRenderState) {
+    contentState = newRootState;
   }
   function processMessage(event: MessageEvent) {
     const { data } = event;
@@ -124,7 +127,9 @@
       evaluate({
         code: jsCode,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       });
     }
   }
@@ -151,7 +156,9 @@
       evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       })
     );
   }
@@ -163,7 +170,7 @@
           ...contentState,
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -345,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 || {};
@@ -363,6 +373,9 @@
     get registeredComponents() {
       return allRegisteredComponents;
     },
+    get inheritedStyles() {
+      return {};
+    },
   });
 
   onDestroy(() => {

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-content/index.ts

@@ -35,7 +35,7 @@ export async function getAllContent(
     const content = await (res.json() as Promise<ContentResponse>);
 
     if ('status' in content && !('results' in content)) {
-      logger.error('Error fetching data. ', content, options);
+      logger.error('Error fetching data. ', { url, content, options });
       return content;
     }
 

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/index.ts

@@ -12,3 +12,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/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,