@builder.io/sdk-svelte 0.7.0 → 0.7.1-0

package/src/components/content/components/enable-editor.svelte

@@ -44,13 +44,12 @@
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
   export let apiKey: BuilderEditorProps["apiKey"];
-  export let showContent: BuilderEditorProps["showContent"];
-  export let classNameProp: BuilderEditorProps["classNameProp"];
-
-  export let content: BuilderEditorProps["content"] = undefined;
   export let locale: BuilderEditorProps["locale"] = undefined;
   export let includeRefs: BuilderEditorProps["includeRefs"] = undefined;
   export let enrich: BuilderEditorProps["enrich"] = undefined;
+  export let content: BuilderEditorProps["content"] = undefined;
+  export let showContent: BuilderEditorProps["showContent"];
+  export let classNameProp: BuilderEditorProps["classNameProp"];
 
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {
@@ -196,6 +195,72 @@
       );
     }
   }
+  function elementRef_onIniteditingbldr(event) {
+    forceReRenderCount = forceReRenderCount + 1;
+    window.addEventListener("message", processMessage);
+    registerInsertMenu();
+    setupBrowserForEditing({
+      ...(locale
+        ? {
+            locale: locale,
+          }
+        : {}),
+      ...(includeRefs
+        ? {
+            includeRefs: includeRefs,
+          }
+        : {}),
+      ...(enrich
+        ? {
+            enrich: enrich,
+          }
+        : {}),
+    });
+    Object.values<ComponentInfo>($builderContextSignal.componentInfos).forEach(
+      (registeredComponent) => {
+        const message = createRegisterComponentMessage(registeredComponent);
+        window.parent?.postMessage(message, "*");
+      }
+    );
+    window.addEventListener(
+      "builder:component:stateChangeListenerActivated",
+      emitStateUpdate
+    );
+  }
+  function elementRef_onInitpreviewingbldr(event) {
+    const searchParams = new URL(location.href).searchParams;
+    const searchParamPreviewModel = searchParams.get("builder.preview");
+    const searchParamPreviewId = searchParams.get(
+      `builder.preview.${searchParamPreviewModel}`
+    );
+    const previewApiKey =
+      searchParams.get("apiKey") || searchParams.get("builder.space");
+
+    /**
+     * Make sure that:
+     * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
+     *  at the same time, e.g. header/page/footer.
+     * - the API key is the same, since we don't want to preview content from other organizations.
+     * - if there is content, that the preview ID is the same as that of the one we receive.
+     *
+     * TO-DO: should we only update the state when there is a change?
+     **/
+    if (
+      searchParamPreviewModel === model &&
+      previewApiKey === apiKey &&
+      (!content || searchParamPreviewId === content.id)
+    ) {
+      fetchOneEntry({
+        model: model,
+        apiKey: apiKey,
+        apiVersion: $builderContextSignal.apiVersion,
+      }).then((content) => {
+        if (content) {
+          mergeNewContent(content);
+        }
+      });
+    }
+  }
 
   let elementRef;
 
@@ -206,95 +271,41 @@
   let clicked = false;
 
   onMount(() => {
-    if (!apiKey) {
-      logger.error(
-        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-      );
-    }
     if (isBrowser()) {
-      if (isEditing()) {
-        forceReRenderCount = forceReRenderCount + 1;
-        window.addEventListener("message", processMessage);
-        registerInsertMenu();
-        setupBrowserForEditing({
-          ...(locale
-            ? {
-                locale: locale,
-              }
-            : {}),
-          ...(includeRefs
-            ? {
-                includeRefs: includeRefs,
-              }
-            : {}),
-          ...(enrich
-            ? {
-                enrich: enrich,
-              }
-            : {}),
-        });
-        Object.values<ComponentInfo>(
-          $builderContextSignal.componentInfos
-        ).forEach((registeredComponent) => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
-        });
-        window.addEventListener(
-          "builder:component:stateChangeListenerActivated",
-          emitStateUpdate
-        );
+      if (isEditing() && elementRef) {
+        elementRef.dispatchEvent(new CustomEvent("initeditingbldr"));
       }
-      if ($builderContextSignal.content) {
+      const shouldTrackImpression =
+        $builderContextSignal.content && getDefaultCanTrack(canTrack);
+      if (shouldTrackImpression) {
         const variationId = $builderContextSignal.content?.testVariationId;
         const contentId = $builderContextSignal.content?.id;
+        const apiKeyProp = apiKey;
         _track({
           type: "impression",
-          canTrack: getDefaultCanTrack(canTrack),
+          canTrack: true,
           contentId,
-          apiKey: apiKey,
+          apiKey: apiKeyProp!,
           variationId: variationId !== contentId ? variationId : undefined,
         });
       }
-      // override normal content in preview mode
-      if (isPreviewing()) {
-        const searchParams = new URL(location.href).searchParams;
-        const searchParamPreviewModel = searchParams.get("builder.preview");
-        const searchParamPreviewId = searchParams.get(
-          `builder.preview.${searchParamPreviewModel}`
-        );
-        const previewApiKey =
-          searchParams.get("apiKey") || searchParams.get("builder.space");
 
-        /**
-         * Make sure that:
-         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
-         *  at the same time, e.g. header/page/footer.
-         * - the API key is the same, since we don't want to preview content from other organizations.
-         * - if there is content, that the preview ID is the same as that of the one we receive.
-         *
-         * TO-DO: should we only update the state when there is a change?
-         **/
-        if (
-          searchParamPreviewModel === model &&
-          previewApiKey === apiKey &&
-          (!content || searchParamPreviewId === content.id)
-        ) {
-          fetchOneEntry({
-            model: model,
-            apiKey: apiKey,
-            apiVersion: $builderContextSignal.apiVersion,
-          }).then((content) => {
-            if (content) {
-              mergeNewContent(content);
-            }
-          });
-        }
+      // override normal content in preview mode
+      if (isPreviewing() && elementRef) {
+        elementRef.dispatchEvent(new CustomEvent("initpreviewingbldr"));
       }
-      evaluateJsCode();
-      runHttpRequests();
-      emitStateUpdate();
     }
   });
+  onMount(() => {
+    if (!apiKey) {
+      logger.error(
+        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
+    }
+    evaluateJsCode();
+    runHttpRequests();
+    emitStateUpdate();
+  });
 
   function onUpdateFn_0(..._args: any[]) {
     if (content) {
@@ -337,6 +348,7 @@
 
 {#if $builderContextSignal.content}
   <div
+    {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
@@ -352,6 +364,12 @@
           "aria-hidden": true,
         }}
     class={classNameProp}
+    on:initeditingbldr={(event) => {
+      elementRef_onIniteditingbldr(event);
+    }}
+    on:initpreviewingbldr={(event) => {
+      elementRef_onInitpreviewingbldr(event);
+    }}
   >
     <slot />
   </div>

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.7.0"
+export const SDK_VERSION = "0.7.1-0"

package/src/functions/evaluate/choose-eval.ts

@@ -0,0 +1,22 @@
+import { runInBrowser } from './browser-runtime/browser.js';
+import type { ExecutorArgs } from './helpers.js';
+import { isBrowser } from '../is-browser.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';
+
+/**
+ * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
+ * end up sending the server runtime code to the browser (most notably in dev mode).
+ */
+export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() ? runInBrowser(args) : evaluator(args)

package/src/functions/evaluate/evaluate.ts

@@ -1,25 +1,7 @@
 import { logger } from '../../helpers/logger.js';
-import { isBrowser } from '../is-browser.js';
-import { isEditing } from '../is-editing.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;
-};
+import type { EvaluatorArgs, ExecutorArgs } from './helpers.js';
+import { getBuilderGlobals, parseCode } from './helpers.js';
+import { chooseBrowserOrServerEval } from './choose-eval.js';
 export function evaluate({
   code,
   context,
@@ -33,22 +15,11 @@ export function evaluate({
     logger.warn('Skipping evaluation of empty code block.');
     return;
   }
-  const builder: BuilderGlobals = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser(),
-    getUserAttributes: () => getUserAttributes()
-  };
-
-  // Be able to handle simple expressions like "state.foo" or "1 + 1"
-  // as well as full blocks like "var foo = "bar"; return foo"
-  const useReturn =
-  // we disable this for cases where we definitely don't want a return
-  isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
-  const useCode = useReturn ? `return (${code});` : code;
   const args: ExecutorArgs = {
-    code: useCode,
-    builder,
+    code: parseCode(code, {
+      isExpression
+    }),
+    builder: getBuilderGlobals(),
     context,
     event,
     rootSetState,
@@ -56,7 +27,7 @@ export function evaluate({
     localState
   };
   try {
-    return evaluator(args);
+    return chooseBrowserOrServerEval(args);
   } catch (e: any) {
     logger.error('Failed code evaluation: ' + e.message, {
       code

package/src/functions/evaluate/helpers.ts

@@ -1,5 +1,11 @@
 import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
-import type { getUserAttributes } from '../track/helpers.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from '../track/helpers.js';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+  event?: Event;
+  isExpression?: boolean;
+};
 export type BuilderGlobals = {
   isEditing: boolean | undefined;
   isBrowser: boolean | undefined;
@@ -29,4 +35,21 @@ export const getFunctionArguments = ({
     context,
     event
   });
+};
+export const getBuilderGlobals = (): BuilderGlobals => ({
+  isEditing: isEditing(),
+  isBrowser: isBrowser(),
+  isServer: !isBrowser(),
+  getUserAttributes: () => getUserAttributes()
+});
+export const parseCode = (code: string, {
+  isExpression = true
+}: Pick<EvaluatorArgs, 'isExpression'>) => {
+  // Be able to handle simple expressions like "state.foo" or "1 + 1"
+  // as well as full blocks like "var foo = "bar"; return foo"
+  const useReturn =
+  // we disable this for cases where we definitely don't want a return
+  isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
+  const useCode = useReturn ? `return (${code});` : code;
+  return useCode;
 }

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

@@ -1 +1 @@
-export { evaluator } from '../browser-runtime/index.js'
+export { runInNode as evaluator } from './node-runtime.js'

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

@@ -0,0 +1,138 @@
+import type { FunctionArguments, ExecutorArgs, BuilderGlobals } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+import { safeDynamicRequire } from './safeDynamicRequire.js';
+import { fastClone } from '../../fast-clone.js';
+import { set } from '../../set.js';
+const ivm: typeof import('isolated-vm') = safeDynamicRequire('isolated-vm');
+const getSyncValName = (key: string) => `bldr_${key}_sync`;
+const BUILDER_SET_STATE_NAME = 'BUILDER_SET_STATE';
+const INJECTED_IVM_GLOBAL = 'BUILDER_IVM';
+
+// Convert all argument references to proxies, and pass `copySync` method to target object, to return a copy of the original JS object
+// https://github.com/laverdet/isolated-vm#referencecopysync
+const REF_TO_PROXY_FN = `
+var refToProxy = (obj) => {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  return new Proxy({}, {
+    get(target, key) {
+        if (key === 'copySync') {
+          return () => obj.copySync();
+        }
+        const val = obj.getSync(key);
+        if (typeof val?.getSync === 'function') {
+            return refToProxy(val);
+        }
+        return val;
+    },
+    set(target, key, value) {
+        const v = typeof value === 'object' ? new ${INJECTED_IVM_GLOBAL}.Reference(value) : value;
+        obj.setSync(key, v);
+        ${BUILDER_SET_STATE_NAME}(key, value)
+    },
+    deleteProperty(target, key) {
+        obj.deleteSync(key);
+    }
+  })
+}
+`;
+const processCode = ({
+  code,
+  args
+}: {
+  code: string;
+  args: FunctionArguments;
+}) => {
+  const fnArgs = args.map(([name]) => `var ${name} = refToProxy(${getSyncValName(name)}); `).join('');
+
+  // the output is stringified and parsed back to the parent isolate if needed (when it's an `object`)
+  return `
+${REF_TO_PROXY_FN}
+${fnArgs}
+function theFunction() {
+  ${code}
+}
+
+let output = theFunction()
+
+if (typeof output === 'object' && output !== null) {
+  output = JSON.stringify(output.copySync ? output.copySync() : output);
+}
+
+output;
+`;
+};
+const getIsolateContext = () => {
+  // if (Builder.serverContext) {
+  //   return Builder.serverContext;
+  // }
+  // Builder.setServerContext(isolate.createContextSync());
+  const isolate = new ivm.Isolate({
+    memoryLimit: 128
+  });
+  return isolate.createContextSync();
+};
+export const runInNode = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}: ExecutorArgs) => {
+  const state = fastClone({
+    ...rootState,
+    ...localState
+  });
+  const args = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state
+  });
+  const isolateContext = getIsolateContext();
+  const jail = isolateContext.global;
+  // This makes the global object available in the context as `global`. We use `derefInto()` here
+  // because otherwise `global` would actually be a Reference{} object in the new isolate.
+  jail.setSync('global', jail.derefInto());
+
+  // We will create a basic `log` function for the new isolate to use.
+  jail.setSync('log', function (...logArgs: any[]) {
+    console.log(...logArgs);
+  });
+
+  /**
+   * Propagate state changes back to the reactive root state.
+   */
+  jail.setSync(BUILDER_SET_STATE_NAME, function (key: string, value: any) {
+    // mutate the `rootState` object itself. Important for cases where we do not have `rootSetState`
+    // like Qwik.
+    set(rootState, key, value);
+    // call the `rootSetState` function if it exists
+    rootSetState?.(rootState);
+  });
+  args.forEach(([key, arg]) => {
+    const val = typeof arg === 'object' ? new ivm.Reference(
+    // workaround: methods with default values for arguments is not being cloned over
+    key === 'builder' ? {
+      ...arg,
+      getUserAttributes: () => (arg as BuilderGlobals).getUserAttributes()
+    } : arg) : null;
+    jail.setSync(getSyncValName(key), val);
+  });
+  jail.setSync(INJECTED_IVM_GLOBAL, ivm);
+  const evalStr = processCode({
+    code,
+    args
+  });
+  const resultStr = isolateContext.evalSync(evalStr);
+  try {
+    // returning objects throw errors in isolated vm, so we stringify it and parse it back
+    const res = JSON.parse(resultStr);
+    return res;
+  } catch (_error: any) {
+    return resultStr;
+  }
+}

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

@@ -0,0 +1,18 @@
+const noop = () => null;
+
+/**
+ * Allows us to require node-specific code safely within bundlers.
+ *
+ * https://github.com/laverdet/isolated-vm/issues/423
+ *
+ * NOTE: this code should only ever run in `node`, and never in an `edge` runtime.
+ * This is guaranteed by the fact that each SDK has separate bundles for each runtime.
+ * However, it might still end up running in the `browser` if the `node` bundle is loaded in the
+ * browser (which happens in many apps' dev mode, and certain other scenarios like Qwik's prod mode).
+ */
+export let safeDynamicRequire: typeof require = ((noop as unknown) as typeof require);
+try {
+  safeDynamicRequire = eval('require');
+} catch (error) {
+  /* empty */
+}

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

@@ -2,6 +2,7 @@ import { flatten } from '../../helpers/flatten.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.js';
+const isPositiveNumber = (thing: unknown) => typeof thing === 'number' && !isNaN(thing) && thing >= 0;
 export const generateContentUrl = (options: GetContentOptions): URL => {
   let {
     noTraverse = false
@@ -15,7 +16,14 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     includeRefs = true,
     enrich,
     locale,
-    apiVersion = DEFAULT_API_VERSION
+    apiVersion = DEFAULT_API_VERSION,
+    fields,
+    omit,
+    offset,
+    cacheSeconds,
+    staleCacheSeconds,
+    sort,
+    includeUnpublished
   } = options;
   if (!apiKey) {
     throw new Error('Missing API key');
@@ -29,6 +37,33 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     noTraverse = true;
   }
   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}` : ''}`);
+  url.searchParams.set('omit', omit || 'meta.componentsUsed');
+  if (fields) {
+    url.searchParams.set('fields', fields);
+  }
+  if (Number.isFinite(offset) && offset! > -1) {
+    url.searchParams.set('offset', String(Math.floor(offset!)));
+  }
+  if (typeof includeUnpublished === 'boolean') {
+    url.searchParams.set('includeUnpublished', String(includeUnpublished));
+  }
+  if (cacheSeconds && isPositiveNumber(cacheSeconds)) {
+    url.searchParams.set('cacheSeconds', String(cacheSeconds));
+  }
+  if (staleCacheSeconds && isPositiveNumber(staleCacheSeconds)) {
+    url.searchParams.set('staleCacheSeconds', String(staleCacheSeconds));
+  }
+  if (sort) {
+    const flattened = flatten({
+      sort
+    });
+    for (const key in flattened) {
+      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
+    }
+  }
+
+  // TODO: how to express 'offset' in the url - as direct queryparam or as flattened in options[key] ?
+
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})