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

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.6.4",
+  "version": "0.7.1-0",
   "type": "module",
   "files": [
     "lib",
@@ -37,6 +37,7 @@
   },
   "types": "./lib/browser/index.d.ts",
   "scripts": {
+    "release": "npm publish",
     "prepare": "SDK_ENV=browser svelte-kit sync",
     "build": "nx run-many -p @builder.io/sdk-svelte -t build:node build:edge build:browser",
     "build:node": "SDK_ENV=node svelte-package -i src/ -o lib/node",
@@ -82,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;

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

@@ -24,33 +24,32 @@
     registerInsertMenu,
     setupBrowserForEditing,
   } from "../../../scripts/init-editing.js";
-  import { checkIsDefined } from "../../../helpers/nullable.js";
   import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
   import type {
     ContentProps,
     BuilderComponentStateChange,
   } from "../content.types.js";
-  import { logger } from "../../../helpers/logger.js";
   import type { ComponentInfo } from "../../../types/components.js";
   import { fetchOneEntry } from "../../../functions/get-content/index.js";
   import { isPreviewing } from "../../../functions/is-previewing.js";
   import type { BuilderContent } from "../../../types/builder-content.js";
   import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
   import { fastClone } from "../../../functions/fast-clone.js";
+  import { logger } from "../../../helpers/logger.js";
+  import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
   import type { Writable } from "svelte/store";
 
-  export let canTrack: BuilderEditorProps["canTrack"] = undefined;
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
   export let model: BuilderEditorProps["model"] = undefined;
   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 = {
@@ -127,7 +126,7 @@
       const contentId = $builderContextSignal.content?.id;
       _track({
         type: "click",
-        canTrack: canTrackToUse,
+        canTrack: getDefaultCanTrack(canTrack),
         contentId,
         apiKey: apiKey,
         variationId: variationId !== contentId ? variationId : undefined,
@@ -196,10 +195,75 @@
       );
     }
   }
+  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;
 
-  let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
   let forceReRenderCount = 0;
   let lastUpdated = 0;
   let shouldSendResetCookie = false;
@@ -207,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: canTrackToUse,
+          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) {
@@ -338,6 +348,7 @@
 
 {#if $builderContextSignal.content}
   <div
+    {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
@@ -353,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.6.4"
+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'