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

package/lib/node/functions/evaluate/choose-eval.js

@@ -0,0 +1,19 @@
+import { runInBrowser } from './browser-runtime/browser.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 '../../../node/functions/evaluate/node-runtime/index.js';
+/**
+ * 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) => isBrowser() ? runInBrowser(args) : evaluator(args);

package/lib/node/functions/evaluate/evaluate.d.ts

@@ -1,6 +1,2 @@
-import type { ExecutorArgs } from './helpers.js';
-export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
-    event?: Event;
-    isExpression?: boolean;
-};
+import type { EvaluatorArgs } from './helpers.js';
 export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;

package/lib/node/functions/evaluate/evaluate.js

@@ -1,39 +1,16 @@
 import { logger } from '../../helpers/logger.js';
-import { isBrowser } from '../is-browser.js';
-import { isEditing } from '../is-editing.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 '../../../node/functions/evaluate/node-runtime/index.js';
+import { getBuilderGlobals, parseCode } from './helpers.js';
+import { chooseBrowserOrServerEval } from './choose-eval.js';
 export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
     if (code === '') {
         logger.warn('Skipping evaluation of empty code block.');
         return;
     }
-    const builder = {
-        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 = {
-        code: useCode,
-        builder,
+        code: parseCode(code, {
+            isExpression
+        }),
+        builder: getBuilderGlobals(),
         context,
         event,
         rootSetState,
@@ -41,7 +18,7 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         localState
     };
     try {
-        return evaluator(args);
+        return chooseBrowserOrServerEval(args);
     }
     catch (e) {
         logger.error('Failed code evaluation: ' + e.message, {

package/lib/node/functions/evaluate/helpers.d.ts

@@ -1,5 +1,9 @@
 import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
-import type { getUserAttributes } from '../track/helpers.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;
@@ -16,3 +20,5 @@ export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
 export declare const getFunctionArguments: ({ builder, context, event, state }: Pick<ExecutorArgs, "context" | "builder" | "event"> & {
     state: BuilderRenderState;
 }) => [string, Event | BuilderRenderState | import("../../context/types.js").BuilderRenderContext | BuilderGlobals | undefined][];
+export declare const getBuilderGlobals: () => BuilderGlobals;
+export declare const parseCode: (code: string, { isExpression }: Pick<EvaluatorArgs, 'isExpression'>) => string;

package/lib/node/functions/evaluate/helpers.js

@@ -1,3 +1,6 @@
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from '../track/helpers.js';
 export const getFunctionArguments = ({ builder, context, event, state }) => {
     return Object.entries({
         state,
@@ -8,3 +11,18 @@ export const getFunctionArguments = ({ builder, context, event, state }) => {
         event
     });
 };
+export const getBuilderGlobals = () => ({
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser(),
+    getUserAttributes: () => getUserAttributes()
+});
+export const parseCode = (code, { isExpression = true }) => {
+    // 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/lib/node/functions/evaluate/node-runtime/index.d.ts

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

package/lib/node/functions/evaluate/node-runtime/index.js

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

package/lib/node/functions/evaluate/node-runtime/node-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInNode: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;

package/lib/node/functions/evaluate/node-runtime/node-runtime.js

@@ -0,0 +1,120 @@
+import { getFunctionArguments } from '../helpers.js';
+import { safeDynamicRequire } from './safeDynamicRequire.js';
+import { fastClone } from '../../fast-clone.js';
+import { set } from '../../set.js';
+const ivm = safeDynamicRequire('isolated-vm');
+const getSyncValName = (key) => `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 }) => {
+    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 }) => {
+    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) {
+        console.log(...logArgs);
+    });
+    /**
+     * Propagate state changes back to the reactive root state.
+     */
+    jail.setSync(BUILDER_SET_STATE_NAME, function (key, value) {
+        // 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.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) {
+        return resultStr;
+    }
+};

package/lib/node/functions/evaluate/node-runtime/safeDynamicRequire.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+/// <reference types="react-native" />
+/**
+ * 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 declare let safeDynamicRequire: typeof require;

package/lib/node/functions/evaluate/node-runtime/safeDynamicRequire.js

@@ -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 = noop;
+try {
+    safeDynamicRequire = eval('require');
+}
+catch (error) {
+    /* empty */
+}

package/lib/node/functions/get-content/generate-content-url.js

@@ -1,9 +1,10 @@
 import { flatten } from '../../helpers/flatten.js';
 import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from '../get-builder-search-params/index.js';
 import { DEFAULT_API_VERSION } from '../../types/api-version.js';
+const isPositiveNumber = (thing) => typeof thing === 'number' && !isNaN(thing) && thing >= 0;
 export const generateContentUrl = (options) => {
     let { noTraverse = false } = options;
-    const { limit = 30, userAttributes, query, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION } = options;
+    const { limit = 30, userAttributes, query, model, apiKey, includeRefs = true, enrich, locale, apiVersion = DEFAULT_API_VERSION, fields, omit, offset, cacheSeconds, staleCacheSeconds, sort, includeUnpublished } = options;
     if (!apiKey) {
         throw new Error('Missing API key');
     }
@@ -15,6 +16,31 @@ export const generateContentUrl = (options) => {
         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[key]));
+        }
+    }
+    // TODO: how to express 'offset' in the url - as direct queryparam or as flattened in options[key] ?
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})

package/lib/node/functions/get-content/types.d.ts

@@ -5,11 +5,42 @@ export interface GetContentOptions {
     apiKey: string;
     /** Number of items to fetch. Default is 1 */
     limit?: number;
-    /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+    /**
+     * Use to specify an offset for pagination of results. The default is 0.
+     */
+    offset?: number;
+    /**
+     * User attribute key value pairs to be used for targeting
+     * https://www.builder.io/c/docs/custom-targeting-attributes
+     *
+     * e.g.
+     * ```js
+     * userAttributes: {
+     *   urlPath: '/',
+     *   returnVisitor: true,
+     *   device: 'mobile'
+     * }
+     * ```
+     */
     userAttributes?: (Record<string, string> & {
         urlPath?: string;
     }) | null;
-    /** Custom query */
+    /**
+     * Mongodb style query of your data. E.g.:
+     *
+     * ```js
+     * query: {
+     *  id: 'abc123',
+     *  data: {
+     *    myCustomField: { $gt: 20 },
+     *  }
+     * }
+     * ```
+     *
+     * See more info on MongoDB's query operators and format.
+     *
+     * @see {@link https://docs.mongodb.com/manual/reference/operator/query/}
+     */
     query?: Record<string, any>;
     /**
      * Any other API options.
@@ -30,7 +61,7 @@ export interface GetContentOptions {
      */
     canTrack?: boolean;
     /**
-     * Include references in the response. Defaults to `true`.
+     * Include content of references in the response. Defaults to `true`.
      * @deprecated use `enrich` instead
      */
     includeRefs?: boolean;
@@ -48,4 +79,64 @@ export interface GetContentOptions {
      * Defaults to `v3`.
      */
     apiVersion?: 'v2' | 'v3';
+    /**
+     * Only include these fields.
+     * Note: 'omit' takes precedence over 'fields'
+     *
+     * @example
+     * ```
+     * fields: 'id, name, data.customField'
+     * ```
+     */
+    fields?: string;
+    /**
+     * Omit only these fields.
+     * Note: 'omit' takes precedence over 'fields'
+     *
+     * @example
+     * ```
+     * omit: 'data.bigField,data.blocks'
+     * ```
+     */
+    omit?: string;
+    /**
+     * Seconds to cache content. Sets the max-age of the cache-control header
+     * response header.
+     *
+     * Use a higher value for better performance, lower for content that will change more frequently
+     *
+     * @see {@link https://www.builder.io/c/docs/query-api#__next:~:text=%26includeRefs%3Dtrue-,cacheSeconds,-No}
+     */
+    cacheSeconds?: number;
+    /**
+     * Builder.io uses stale-while-revalidate caching at the CDN level. This means we always serve
+     * from edge cache and update caches in the background for maximum possible performance. This also
+     * means that the more frequently content is requested, the more fresh it will be. The longest we
+     * will ever hold something in stale cache is 1 day by default, and you can set this to be shorter
+     * yourself as well. We suggest keeping this high unless you have content that must change rapidly
+     * and gets very little traffic.
+     *
+     * @see {@link https://www.fastly.com/blog/prevent-application-network-instability-serve-stale-content}
+     */
+    staleCacheSeconds?: number;
+    /**
+     * Property to order results by.
+     * Use 1 for ascending and -1 for descending.
+     *
+     * The key is what you're sorting on, so the following example sorts by createdDate
+     * and because the value is 1, the sort is ascending.
+     *
+     * @example
+     * ```
+     * createdDate: 1
+     * ```
+     */
+    sort?: {
+        [key: string]: 1 | -1;
+    };
+    /**
+     * Include content entries in a response that are still in
+     * draft mode and un-archived. Default is false.
+     */
+    includeUnpublished?: boolean;
 }

package/lib/node/functions/is-edge-runtime.js

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

package/lib/node/functions/is-node-runtime.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies node runtime
+ */
+export declare function isNodeRuntime(): boolean;

package/lib/node/functions/is-node-runtime.js

@@ -0,0 +1,7 @@
+import { checkIsDefined } from '../helpers/nullable';
+/**
+ * Identifies node runtime
+ */
+export function isNodeRuntime() {
+    return typeof process !== 'undefined' && checkIsDefined(process?.versions?.node);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.7.0",
+  "version": "0.7.1-0",
   "type": "module",
   "files": [
     "lib",
@@ -83,6 +83,7 @@
     }
   },
   "peerDependencies": {
+    "isolated-vm": "^4.6.0",
     "svelte": "^4.1.2"
   }
 }

package/src/blocks/custom-code/custom-code.svelte

@@ -11,55 +11,52 @@
   export let replaceNodes: CustomCodeProps["replaceNodes"] = undefined;
   export let code: CustomCodeProps["code"];
 
-  function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
-      const scripts = elem.getElementsByTagName("script");
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
-          }
-        }
-      }
-    }
-  }
-
-  let elem;
+  let elementRef;
 
   let scriptsInserted = [];
   let scriptsRun = [];
 
   onMount(() => {
-    findAndRunScripts();
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+      return;
+    }
+    const scripts = elementRef.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (scriptsInserted.includes(script.src)) {
+          continue;
+        }
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (
+        !script.type ||
+        [
+          "text/javascript",
+          "application/javascript",
+          "application/ecmascript",
+        ].includes(script.type)
+      ) {
+        if (scriptsRun.includes(script.innerText)) {
+          continue;
+        }
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
   });
 </script>
 
 <div
-  bind:this={elem}
+  bind:this={elementRef}
   class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
 >
   {@html code}

package/src/blocks/image/image.svelte

@@ -11,7 +11,7 @@
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
-    children?: JSX.Element;
+    children?: any;
     fitContent?: boolean;
     builderBlock?: BuilderBlock;
     noWebp?: boolean;