@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/src/components/content/content.types.ts

@@ -1,6 +1,6 @@
 import type { BuilderRenderState } from '../../context/types.js';
 import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
 interface InternalRenderProps {
   /**
    * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
@@ -9,7 +9,7 @@ interface InternalRenderProps {
   showContent: boolean;
   isSsrAbTest: boolean;
 }
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
 export interface BuilderComponentStateChange {
   state: BuilderRenderState;
   ref: {

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

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  type VariantsProviderProps = ContentVariantsProps & {
+  type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
@@ -22,20 +22,22 @@
   import { handleABTestingSync } from "../../helpers/ab-tests.js";
   import InlinedScript from "../inlined-script.svelte";
   import { TARGET } from "../../constants/target.js";
-  import type { ContentVariantsProps } from "./content-variants.types.js";
+  import type { ContentVariantsPrps } from "./content-variants.types.js";
 
-  export let canTrack: VariantsProviderProps["canTrack"];
-  export let content: VariantsProviderProps["content"];
-  export let __isNestedRender: VariantsProviderProps["__isNestedRender"];
-  export let model: VariantsProviderProps["model"];
-  export let data: VariantsProviderProps["data"];
-  export let context: VariantsProviderProps["context"];
+  export let canTrack: VariantsProviderProps["canTrack"] = undefined;
+  export let content: VariantsProviderProps["content"] = undefined;
+  export let __isNestedRender: VariantsProviderProps["__isNestedRender"] =
+    undefined;
+  export let model: VariantsProviderProps["model"] = undefined;
+  export let data: VariantsProviderProps["data"] = undefined;
+  export let context: VariantsProviderProps["context"] = undefined;
   export let apiKey: VariantsProviderProps["apiKey"];
-  export let apiVersion: VariantsProviderProps["apiVersion"];
-  export let customComponents: VariantsProviderProps["customComponents"];
-  export let locale: VariantsProviderProps["locale"];
-  export let includeRefs: VariantsProviderProps["includeRefs"];
-  export let enrich: VariantsProviderProps["enrich"];
+  export let apiVersion: VariantsProviderProps["apiVersion"] = undefined;
+  export let customComponents: VariantsProviderProps["customComponents"] =
+    undefined;
+  export let locale: VariantsProviderProps["locale"] = undefined;
+  export let includeRefs: VariantsProviderProps["includeRefs"] = undefined;
+  export let enrich: VariantsProviderProps["enrich"] = undefined;
 
   $: variantScriptStr = () => {
     return getVariantsScriptString(

package/src/components/content-variants/content-variants.types.ts

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent } from '../../context/ty
 import type { ApiVersion } from '../../types/api-version.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
-export interface ContentVariantsProps {
+export interface ContentVariantsPrps {
   content?: Nullable<BuilderContent>;
   model?: string;
   data?: {

package/src/components/inlined-script.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
   export let scriptStr: Props["scriptStr"];
-  export let id: Props["id"];
+  export let id: Props["id"] = undefined;
 </script>
 
 <svelte:element this={"script"} {id}>{@html scriptStr}</svelte:element>

package/src/components/inlined-styles.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
   export let styles: Props["styles"];
-  export let id: Props["id"];
+  export let id: Props["id"] = undefined;
 </script>
 
 <svelte:element this={"sty" + "le"} {id}>{@html styles}</svelte:element>

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.5.8"
+export const SDK_VERSION = "0.6.0"

package/src/functions/deopt.ts

@@ -0,0 +1,6 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export function deoptSignal<T>(value: T): T {
+  return value;
+}

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -0,0 +1,41 @@
+import type { BuilderRenderState } from '../../../context/types.js';
+import type { ExecutorArgs } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+export const runInBrowser = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}: ExecutorArgs) => {
+  const functionArgs = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state: flattenState(rootState, localState, rootSetState)
+  });
+  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+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/evaluate/browser-runtime/index.ts

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js'

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -0,0 +1,96 @@
+import { logger } from '../../../helpers/logger.js';
+import { set } from '../../set.js';
+import Interpreter from './acorn-interpreter.js';
+import type { ExecutorArgs } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+const processCode = (code: string) => {
+  return code.split('\n').map(line => {
+    const trimmed = line.trim();
+
+    // this async wrapper doesn't work in JS-interpreter, so we drop it.
+    if (line.includes('__awaiter')) return undefined;
+
+    // we find all state setter expressions and append a call to setRootState afterwards
+    const isStateSetter = trimmed.startsWith('state.');
+    if (!isStateSetter) return line;
+    const [lhs, rhs] = trimmed.split('=');
+    const setStr = lhs.replace('state.', '').trim();
+    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
+    return `
+  ${line}
+  ${setExpr}
+  `;
+  }).filter(Boolean).join('\n');
+};
+const getJSONValName = (val: string) => val + 'JSON';
+export const runInEdge = ({
+  builder,
+  context,
+  event,
+  rootState,
+  localState,
+  rootSetState,
+  code
+}: ExecutorArgs) => {
+  const state = {
+    ...rootState,
+    ...localState
+  };
+  const properties = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state
+  });
+
+  /**
+   * Deserialize all properties from JSON strings to JS objects
+   */
+  const prependedCode = properties.map(([key]) => {
+    const jsonValName = getJSONValName(key);
+    return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
+  }).join('\n');
+  const cleanedCode = processCode(code);
+  if (cleanedCode === '') {
+    logger.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+  const transformed = `
+function theFunction() {
+  ${prependedCode}
+
+  ${cleanedCode}
+}
+theFunction();
+`;
+  const setRootState = (prop: string, value: any) => {
+    const newState = set(state, prop, value);
+    rootSetState?.(newState);
+  };
+  const initFunc = function (interpreter: any, globalObject: any) {
+    /**
+     * serialize all function args to JSON strings
+     */
+    properties.forEach(([key, val]) => {
+      const jsonVal = JSON.stringify(val);
+      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+    });
+
+    /**
+     * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
+     * state property is set. This function will update the state object.
+     */
+    interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
+  };
+  try {
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
+  } catch (e) {
+    logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
+      e
+    });
+    return;
+  }
+}

package/src/functions/evaluate/edge-runtime/index.ts

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js'

package/src/functions/evaluate/evaluate.ts

@@ -1,10 +1,25 @@
-import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
 import { logger } from '../../helpers/logger.js';
 import { isBrowser } from '../is-browser.js';
 import { isEditing } from '../is-editing.js';
-import { isNonNodeServer } from '../is-non-node-server.js';
-import type { ExecutorArgs } from './types.js';
-import { runInNonNode } from './non-node-runtime/index.js';
+import type { BuilderGlobals, ExecutorArgs } from './helpers.js';
+import { getUserAttributes } from '../track/helpers.js';
+
+/**
+ * THIS IS A MAGICAL IMPORT. It is aliased by the build process of every SDK configuration, so that
+ * it points to the correct runtime for that configuration, which are expected to live exactly at:
+ *  - ./browser-runtime/index.js
+ *  - ./node-runtime/index.js
+ *  - ./edge-runtime/index.js
+ *
+ * We have code in `/output-generation` that does this aliasing, and is re-used by each SDK.
+ * Also, each individual `tsconfig.json` aliases this import to the browser runtime so that the
+ * types can be resolved correctly.
+ */
+import { evaluator } from 'placeholder-runtime';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+  event?: Event;
+  isExpression?: boolean;
+};
 export function evaluate({
   code,
   context,
@@ -13,19 +28,16 @@ export function evaluate({
   rootSetState,
   event,
   isExpression = true
-}: {
-  code: string;
-  event?: Event;
-  isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any {
+}: EvaluatorArgs): any {
   if (code === '') {
     logger.warn('Skipping evaluation of empty code block.');
     return;
   }
-  const builder = {
+  const builder: BuilderGlobals = {
     isEditing: isEditing(),
     isBrowser: isBrowser(),
-    isServer: !isBrowser()
+    isServer: !isBrowser(),
+    getUserAttributes: () => getUserAttributes()
   };
 
   // Be able to handle simple expressions like "state.foo" or "1 + 1"
@@ -35,7 +47,7 @@ export function evaluate({
   isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
   const useCode = useReturn ? `return (${code});` : code;
   const args: ExecutorArgs = {
-    useCode,
+    code: useCode,
     builder,
     context,
     event,
@@ -43,48 +55,12 @@ export function evaluate({
     rootState,
     localState
   };
-  if (isBrowser()) return runInBrowser(args);
-  if (isNonNodeServer()) return runInNonNode(args);
-  return runInNode(args);
-}
-export const runInBrowser = ({
-  useCode,
-  builder,
-  context,
-  event,
-  localState,
-  rootSetState,
-  rootState
-}: ExecutorArgs) => {
-  const state = flattenState(rootState, localState, rootSetState);
   try {
-    return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
-  } catch (e) {
-    logger.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
-  }
-};
-export const runInNode = (args: ExecutorArgs) => {
-  // TO-DO: use vm-isolate
-  return runInBrowser(args);
-};
-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 evaluator(args);
+  } catch (e: any) {
+    logger.error('Failed code evaluation: ' + e.message, {
+      code
+    });
+    return undefined;
   }
-  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/evaluate/helpers.ts

@@ -0,0 +1,32 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
+import type { getUserAttributes } from '../track/helpers.js';
+export type BuilderGlobals = {
+  isEditing: boolean | undefined;
+  isBrowser: boolean | undefined;
+  isServer: boolean | undefined;
+  getUserAttributes: typeof getUserAttributes;
+};
+export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
+  code: string;
+  builder: BuilderGlobals;
+  event: Event | undefined;
+};
+export type Executor = (args: ExecutorArgs) => any;
+export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
+export const getFunctionArguments = ({
+  builder,
+  context,
+  event,
+  state
+}: Pick<ExecutorArgs, 'builder' | 'context' | 'event'> & {
+  state: BuilderRenderState;
+}) => {
+  return Object.entries({
+    state,
+    Builder: builder,
+    // legacy
+    builder,
+    context,
+    event
+  });
+}

package/src/functions/evaluate/index.ts

@@ -1 +1 @@
-export { evaluate } from './evaluate'
+export { evaluate } from './evaluate.js'

package/src/functions/evaluate/node-runtime/index.ts

@@ -0,0 +1 @@
+export { evaluator } from '../browser-runtime/index.js'

package/src/functions/evaluate/placeholder-runtime.ts

@@ -0,0 +1,4 @@
+import type { ExecutorArgs } from './helpers.js';
+export const evaluator = (_args: ExecutorArgs) => {
+  throw new Error('Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.');
+}

package/src/functions/fetch-builder-props.ts

@@ -1,5 +1,5 @@
 import { getBuilderSearchParams } from './get-builder-search-params/index.js';
-import type { ContentVariantsProps } from '../components/content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
 import type { Dictionary } from '../types/typescript.js';
 import { fetchOneEntry } from './get-content/index.js';
 import type { GetContentOptions } from './get-content/types.js';
@@ -37,9 +37,10 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 });
 
 /**
- * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
  */
-export const fetchBuilderProps = async (_args: GetBuilderPropsOptions): Promise<ContentVariantsProps> => {
+export const fetchBuilderProps = async (_args: GetBuilderPropsOptions): Promise<ContentVariantsPrps> => {
   const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;
   const getContentArgs: GetContentOptions = {
     ..._args,

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

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-import { evaluate } from './evaluate';
+import { evaluate } from './evaluate/index.js';
 type Options = {
   block: BuilderBlock;
 } & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>;

package/src/functions/get-content/index.ts

@@ -25,10 +25,9 @@ export async function fetchOneEntry(options: GetContentOptions): Promise<Builder
 }
 
 /**
- * @deprecated
- * Consider using `fetchBuilderProps` instead for easier setup.
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
  *
- * NOTE: `getContent` was renamed to `fetchOneEntry` and will be removed in a future release.
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
  */
 export const getContent = fetchOneEntry;
 type ContentResults = {
@@ -46,7 +45,7 @@ const _fetchContent = async (options: GetContentOptions) => {
 };
 
 /**
- * Exported only for testing purposes. Should not be used directly.
+ * @internal Exported only for testing purposes. Do not use.
  */
 export const _processContentResult = async (options: GetContentOptions, content: ContentResults, url: URL = generateContentUrl(options)) => {
   const canTrack = getDefaultCanTrack(options.canTrack);
@@ -106,6 +105,6 @@ export async function fetchEntries(options: GetContentOptions) {
 }
 
 /**
- * @deprecated Use `fetchEntries` instead.
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
  */
 export const getAllContent = fetchEntries

package/src/functions/is-edge-runtime.ts

@@ -0,0 +1,9 @@
+import { isBrowser } from './is-browser.js';
+
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export function isEdgeRuntime(): boolean {
+  const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+  return !isBrowser() && !hasNode();
+}

package/src/index-helpers/blocks-exports.ts

@@ -11,10 +11,10 @@ import { default as Content } from '../components/content-variants/content-varia
 export { Blocks, Content };
 
 /**
- * @deprecated Use `Blocks` instead.
+ * @deprecated Renamed to `Blocks`.
  */
 export const RenderBlocks = Blocks;
 /**
- * @deprecated Use `Content` instead.
+ * @deprecated Renamed to `Content`.
  */
 export const RenderContent = Content

package/src/index.ts

@@ -1,16 +1,8 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-export { isEditing } from './functions/is-editing.js';
-export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
-export { register } from './functions/register.js';
-export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
-export { setEditorSettings } from './functions/set-editor-settings.js';
-export type { Settings } from './functions/set-editor-settings.js';
-export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
-export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export type { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
-export type { ContentProps } from './components/content/content.types.js';
-export { fetchBuilderProps } from './functions/fetch-builder-props.js'
+
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js'

package/src/server-index.ts

@@ -0,0 +1,15 @@
+export * from './index-helpers/top-of-file.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export type { Settings } from './functions/set-editor-settings.js';
+export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export type { RegisteredComponent } from './context/types.js';
+export type { ComponentInfo } from './types/components.js';
+export type { ContentProps } from './components/content/content.types.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props.js'