@builder.io/sdk-svelte 0.4.5 → 0.5.0

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

@@ -0,0 +1,94 @@
+import { logger } from '../../helpers/logger';
+import { set } from '../set';
+import Interpreter from './interpreter.js';
+import type { ExecutorArgs } from './types';
+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 runInNonNode = ({
+  builder,
+  context,
+  event,
+  rootState,
+  localState,
+  rootSetState,
+  useCode
+}: ExecutorArgs) => {
+  const state = {
+    ...rootState,
+    ...localState
+  };
+  const properties = {
+    state,
+    Builder: builder,
+    builder,
+    context,
+    event
+  };
+
+  /**
+   * Deserialize all properties from JSON strings to JS objects
+   */
+  const prependedCode = Object.keys(properties).map(key => `var ${key} = JSON.parse(${getJSONValName(key)});`).join('\n');
+  const cleanedCode = processCode(useCode);
+  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
+     */
+    Object.keys(properties).forEach(key => {
+      const val = properties[(key as keyof typeof properties)] || {};
+      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 non-node runtime. SDK can only execute ES5 JavaScript.', {
+      e
+    });
+    return;
+  }
+}

package/src/functions/evaluate/types.ts

@@ -0,0 +1,10 @@
+import type { BuilderContextInterface } from '../../context/types';
+export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
+  useCode: string;
+  builder: {
+    isEditing: boolean | undefined;
+    isBrowser: boolean | undefined;
+    isServer: boolean | undefined;
+  };
+  event: Event | undefined;
+}

package/src/functions/extract-text-styles.ts

@@ -1,10 +1,4 @@
-const TEXT_STYLE_KEYS = [
-  'color',
-  'whiteSpace',
-  'direction',
-  'hyphens',
-  'overflowWrap',
-];
+const TEXT_STYLE_KEYS = ['color', 'whiteSpace', 'direction', 'hyphens', 'overflowWrap'];
 
 /**
  * Check if the key represent a CSS style property that applies to text
@@ -12,15 +6,7 @@ const TEXT_STYLE_KEYS = [
  * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
  */
 const isTextStyle = (key: string) => {
-  return (
-    TEXT_STYLE_KEYS.includes(key) ||
-    key.startsWith('font') ||
-    key.startsWith('text') ||
-    key.startsWith('letter') ||
-    key.startsWith('line') ||
-    key.startsWith('word') ||
-    key.startsWith('writing')
-  );
+  return TEXT_STYLE_KEYS.includes(key) || key.startsWith('font') || key.startsWith('text') || key.startsWith('letter') || key.startsWith('line') || key.startsWith('word') || key.startsWith('writing');
 };
 
 /**
@@ -34,6 +20,5 @@ export const extractTextStyles = (styles: Partial<CSSStyleDeclaration>) => {
       textStyles[key] = value;
     }
   });
-
   return textStyles;
-};
+}

package/src/functions/fast-clone.ts

@@ -1,5 +1,4 @@
 /**
  * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
  */
-export const fastClone = <T extends object>(obj: T): T =>
-  JSON.parse(JSON.stringify(obj));
+export const fastClone = <T extends object,>(obj: T): T => JSON.parse(JSON.stringify(obj))

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

@@ -1,25 +1,16 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-import { evaluate } from './evaluate.js';
-
+import { evaluate } from './evaluate';
 type Options = {
   block: BuilderBlock;
-} & Pick<
-  BuilderContextInterface,
-  'localState' | 'context' | 'rootState' | 'rootSetState'
->;
-
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>;
 type EventHandler = (event: Event) => any;
-
-export const createEventHandler =
-  (value: string, options: Options): EventHandler =>
-  (event) =>
-    evaluate({
-      code: value,
-      context: options.context,
-      localState: options.localState,
-      rootState: options.rootState,
-      rootSetState: options.rootSetState,
-      event,
-      isExpression: false,
-    });
+export const createEventHandler = (value: string, options: Options): EventHandler => event => evaluate({
+  code: value,
+  context: options.context,
+  localState: options.localState,
+  rootState: options.rootState,
+  rootSetState: options.rootSetState,
+  event,
+  isExpression: false
+})

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

@@ -1,28 +1,36 @@
+import { TARGET } from '../constants/target.js';
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { getEventHandlerName } from './event-handler-name.js';
 import { createEventHandler } from './get-block-actions-handler.js';
-
-type Actions = { [index: string]: (event: Event) => any };
-
-export function getBlockActions(
-  options: {
-    block: BuilderBlock;
-  } & Pick<
-    BuilderContextInterface,
-    'localState' | 'context' | 'rootState' | 'rootSetState'
-  >
-): Actions {
+type Actions = {
+  [index: string]: (event: Event) => any;
+};
+export function getBlockActions(options: {
+  block: BuilderBlock;
+  stripPrefix?: boolean;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): Actions {
   const obj: Actions = {};
   const optionActions = options.block.actions ?? {};
-
   for (const key in optionActions) {
     // eslint-disable-next-line no-prototype-builtins
     if (!optionActions.hasOwnProperty(key)) {
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = createEventHandler(value, options);
+    let eventHandlerName = getEventHandlerName(key);
+    if (options.stripPrefix) {
+      switch (TARGET) {
+        case 'vue2':
+        case 'vue3':
+          eventHandlerName = eventHandlerName.replace('v-on:', '');
+          break;
+        case 'svelte':
+          eventHandlerName = eventHandlerName.replace('on:', '');
+          break;
+      }
+    }
+    obj[eventHandlerName] = createEventHandler(value, options);
   }
   return obj;
-}
+}

package/src/functions/get-block-component-options.ts

@@ -1,5 +1,4 @@
 import type { BuilderBlock } from '../types/builder-block.js';
-
 export function getBlockComponentOptions(block: BuilderBlock) {
   return {
     ...block.component?.options,
@@ -7,6 +6,6 @@ export function getBlockComponentOptions(block: BuilderBlock) {
     /**
      * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
      */
-    builderBlock: block,
+    builderBlock: block
   };
-}
+}

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

@@ -1,8 +1,9 @@
 import { TARGET } from '../constants/target.js';
+import type { BuilderContextInterface } from '../context/types.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.js';
+import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
 import { transformBlockProperties } from './transform-block-properties.js';
-
 const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
   // currently we are only spreading the `href` property
   // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
@@ -33,20 +34,31 @@ const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
   //   ...remainingBlockProperties
   // } = block;
 
-  return { href: (block as any).href };
+  return {
+    href: (block as any).href
+  };
 };
-
-export function getBlockProperties(block: BuilderBlock) {
+export function getBlockProperties({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) {
   const properties = {
     ...extractRelevantRootBlockProperties(block),
     ...block.properties,
     'builder-id': block.id,
-    style: getStyleAttribute(block.style),
-    class: [block.id, 'builder-block', block.class, block.properties?.class]
-      .filter(Boolean)
-      .join(' '),
+    style: block.style ? getStyleAttribute(block.style) : undefined,
+    class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
   };
-
+  if (TARGET === 'reactNative') {
+    properties.style = getReactNativeBlockStyles({
+      block,
+      context,
+      blockStyles: properties.style
+    });
+  }
   return transformBlockProperties(properties);
 }
 /**
@@ -54,13 +66,7 @@ export function getBlockProperties(block: BuilderBlock) {
  *
  * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
  */
-function getStyleAttribute(
-  style: Partial<CSSStyleDeclaration> | undefined
-): string | Partial<CSSStyleDeclaration> | undefined {
-  if (!style) {
-    return undefined;
-  }
-
+function getStyleAttribute(style: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration> {
   switch (TARGET) {
     case 'svelte':
     case 'vue2':
@@ -70,6 +76,7 @@ function getStyleAttribute(
     case 'qwik':
     case 'reactNative':
     case 'react':
+    case 'rsc':
       return style;
   }
-}
+}

package/src/functions/get-builder-search-params/index.ts

@@ -1,12 +1,8 @@
 import { isBrowser } from '../is-browser.js';
-
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
 const BUILDER_OPTIONS_PREFIX = 'options.';
 type QueryObject = Record<string, string | string[]>;
-
-export const convertSearchParamsToQueryObject = (
-  searchParams: URLSearchParams
-): QueryObject => {
+export const convertSearchParamsToQueryObject = (searchParams: URLSearchParams): QueryObject => {
   const options: Record<string, string> = {};
   searchParams.forEach((value, key) => {
     options[key] = value;
@@ -20,26 +16,20 @@ export const convertSearchParamsToQueryObject = (
  *
  * @returns
  */
-export const getBuilderSearchParams = (
-  _options: QueryObject | URLSearchParams | undefined
-) => {
+export const getBuilderSearchParams = (_options: QueryObject | URLSearchParams | undefined) => {
   if (!_options) {
     return {};
   }
   const options = normalizeSearchParams(_options);
-
   const newOptions: QueryObject = {};
-  Object.keys(options).forEach((key) => {
+  Object.keys(options).forEach(key => {
     if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key
-        .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
-        .replace(BUILDER_OPTIONS_PREFIX, '');
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
       newOptions[trimmedKey] = options[key];
     }
   });
   return newOptions;
 };
-
 export const getBuilderSearchParamsFromWindow = () => {
   if (!isBrowser()) {
     return {};
@@ -47,10 +37,4 @@ export const getBuilderSearchParamsFromWindow = () => {
   const searchParams = new URLSearchParams(window.location.search);
   return getBuilderSearchParams(searchParams);
 };
-
-export const normalizeSearchParams = (
-  searchParams: QueryObject | URLSearchParams
-): QueryObject =>
-  searchParams instanceof URLSearchParams
-    ? convertSearchParamsToQueryObject(searchParams)
-    : searchParams;
+export const normalizeSearchParams = (searchParams: QueryObject | URLSearchParams): QueryObject => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams

package/src/functions/get-content/generate-content-url.ts

@@ -1,11 +1,7 @@
 import { flatten } from '../../helpers/flatten.js';
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams,
-} from '../get-builder-search-params/index.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from '../get-builder-search-params/index.js';
 import type { GetContentOptions } from './types.js';
-import { DEFAULT_API_VERSION } from '../../types/api-version';
-
+import { DEFAULT_API_VERSION } from '../../types/api-version.js';
 export const generateContentUrl = (options: GetContentOptions): URL => {
   const {
     limit = 30,
@@ -17,44 +13,33 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     includeRefs = true,
     enrich,
     locale,
-    apiVersion = DEFAULT_API_VERSION,
+    apiVersion = DEFAULT_API_VERSION
   } = options;
-
   if (!apiKey) {
     throw new Error('Missing API key');
   }
-
   if (!['v2', 'v3'].includes(apiVersion)) {
-    throw new Error(
-      `Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`
-    );
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
   }
-
-  const url = new URL(
-    `https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
-      locale ? `&locale=${locale}` : ''
-    }${enrich ? `&enrich=${enrich}` : ''}`
-  );
-
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}${enrich ? `&enrich=${enrich}` : ''}`);
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {}),
+    ...normalizeSearchParams(options.options || {})
   };
-
   const flattened = flatten(queryOptions);
   for (const key in flattened) {
     url.searchParams.set(key, String(flattened[key]));
   }
-
   if (userAttributes) {
     url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
   }
   if (query) {
-    const flattened = flatten({ query });
+    const flattened = flatten({
+      query
+    });
     for (const key in flattened) {
       url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
     }
   }
-
   return url;
-};
+}

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

@@ -2,41 +2,32 @@ import { TARGET } from '../../constants/target.js';
 import { handleABTesting } from '../../helpers/ab-tests.js';
 import { getDefaultCanTrack } from '../../helpers/canTrack.js';
 import { logger } from '../../helpers/logger.js';
+import { getPreviewContent } from '../../helpers/preview-lru-cache/get.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import { fetch } from '../get-fetch.js';
 import { isBrowser } from '../is-browser.js';
 import { generateContentUrl } from './generate-content-url.js';
 import type { GetContentOptions } from './types.js';
-
-const checkContentHasResults = (
-  content: ContentResponse
-): content is ContentResults => 'results' in content;
-
-export async function getContent(
-  options: GetContentOptions
-): Promise<BuilderContent | null> {
-  const allContent = await getAllContent({ ...options, limit: 1 });
-  if (allContent && checkContentHasResults(allContent)) {
+const checkContentHasResults = (content: ContentResponse): content is ContentResults => 'results' in content;
+export async function getContent(options: GetContentOptions): Promise<BuilderContent | null> {
+  const allContent = await getAllContent({
+    ...options,
+    limit: 1
+  });
+  if (allContent) {
     return allContent.results[0] || null;
   }
-
   return null;
 }
-
 type ContentResults = {
   results: BuilderContent[];
 };
-
-type ContentResponse =
-  | ContentResults
-  | {
-      status: number;
-      message: string;
-    };
-
+type ContentResponse = ContentResults | {
+  status: number;
+  message: string;
+};
 const fetchContent = async (options: GetContentOptions) => {
   const url = generateContentUrl(options);
-
   const res = await fetch(url.href);
   const content = await (res.json() as Promise<ContentResponse>);
   return content;
@@ -45,12 +36,17 @@ const fetchContent = async (options: GetContentOptions) => {
 /**
  * Exported only for testing purposes. Should not be used directly.
  */
-export const processContentResult = async (
-  options: GetContentOptions,
-  content: ContentResults
-) => {
+export const processContentResult = async (options: GetContentOptions, content: ContentResults, url: URL = generateContentUrl(options)) => {
   const canTrack = getDefaultCanTrack(options.canTrack);
-
+  const isPreviewing = url.search.includes(`preview=`);
+  if (TARGET === 'rsc' && isPreviewing) {
+    const newResults: BuilderContent[] = [];
+    for (const item of content.results) {
+      const previewContent = getPreviewContent(url.searchParams);
+      newResults.push(previewContent || item);
+    }
+    content.results = newResults;
+  }
   if (!canTrack) return content;
   if (!(isBrowser() || TARGET === 'reactNative')) return content;
 
@@ -63,31 +59,32 @@ export const processContentResult = async (
   try {
     const newResults: BuilderContent[] = [];
     for (const item of content.results) {
-      newResults.push(await handleABTesting({ item, canTrack }));
+      newResults.push(await handleABTesting({
+        item,
+        canTrack
+      }));
     }
     content.results = newResults;
   } catch (e) {
     logger.error('Could not process A/B tests. ', e);
   }
-
   return content;
 };
-
-export async function getAllContent(
-  options: GetContentOptions
-): Promise<ContentResponse | null> {
+export async function getAllContent(options: GetContentOptions) {
   try {
     const url = generateContentUrl(options);
     const content = await fetchContent(options);
-
     if (!checkContentHasResults(content)) {
-      logger.error('Error fetching data. ', { url, content, options });
-      return content;
+      logger.error('Error fetching data. ', {
+        url,
+        content,
+        options
+      });
+      return null;
     }
-
     return processContentResult(options, content);
   } catch (error) {
     logger.error('Error fetching data. ', error);
     return null;
   }
-}
+}

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

@@ -9,7 +9,9 @@ export interface GetContentOptions {
   limit?: number;
 
   /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
-  userAttributes?: (Record<string, string> & { urlPath?: string }) | null;
+  userAttributes?: (Record<string, string> & {
+    urlPath?: string;
+  }) | null;
 
   /** Custom query */
   query?: Record<string, any>;
@@ -57,4 +59,4 @@ export interface GetContentOptions {
    * Defaults to `v3`.
    */
   apiVersion?: 'v2' | 'v3';
-}
+}

package/src/functions/get-fetch.ts

@@ -1,18 +1,11 @@
 import { getGlobalThis } from './get-global-this.js';
-
 function getFetch(): typeof global.fetch {
   const globalFetch: typeof global.fetch = getGlobalThis().fetch;
-
   if (typeof globalFetch === 'undefined') {
-    console.warn(
-      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
-      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
-    );
-
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
     throw new Error('Builder SDK could not find a global `fetch` function');
   }
-
   return globalFetch;
 }
-
-export const fetch = getFetch();
+export const fetch = getFetch()

package/src/functions/get-global-this.ts

@@ -1,5 +1,4 @@
 type Global = typeof global | typeof window | typeof self | typeof globalThis;
-
 export function getGlobalThis(): Global {
   if (typeof globalThis !== 'undefined') {
     return globalThis;
@@ -14,4 +13,4 @@ export function getGlobalThis(): Global {
     return self;
   }
   return globalThis;
-}
+}