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

package/lib/browser/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/browser/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/browser/functions/is-node-runtime.d.ts

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

package/lib/browser/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/lib/edge/blocks/custom-code/custom-code.svelte

@@ -3,52 +3,50 @@
 <script>import { onMount } from "svelte";
 export let replaceNodes = undefined;
 export let code;
-function findAndRunScripts() {
+let elementRef;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
     // 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);
+    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)();
             }
-            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);
-                }
+            catch (error) {
+                console.warn("`CustomCode`: Error running script:", error);
             }
         }
     }
-}
-let elem;
-let scriptsInserted = [];
-let scriptsRun = [];
-onMount(() => {
-    findAndRunScripts();
 });
 </script>
 
 <div
-  bind:this={elem}
+  bind:this={elementRef}
   class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
 >
   {@html code}

package/lib/edge/components/content/components/enable-editor.svelte

@@ -21,12 +21,12 @@ export let model = undefined;
 export let context = undefined;
 export let canTrack = undefined;
 export let apiKey;
-export let showContent;
-export let classNameProp;
-export let content = undefined;
 export let locale = undefined;
 export let includeRefs = undefined;
 export let enrich = undefined;
+export let content = undefined;
+export let showContent;
+export let classNameProp;
 function mergeNewContent(newContent) {
     const newContentValue = {
         ...$builderContextSignal.content,
@@ -159,6 +159,61 @@ function emitStateUpdate() {
         }));
     }
 }
+function elementRef_onIniteditingbldr(event) {
+    forceReRenderCount = forceReRenderCount + 1;
+    window.addEventListener("message", processMessage);
+    registerInsertMenu();
+    setupBrowserForEditing({
+        ...(locale
+            ? {
+                locale: locale,
+            }
+            : {}),
+        ...(includeRefs
+            ? {
+                includeRefs: includeRefs,
+            }
+            : {}),
+        ...(enrich
+            ? {
+                enrich: enrich,
+            }
+            : {}),
+    });
+    Object.values($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 forceReRenderCount = 0;
 let lastUpdated = 0;
@@ -166,82 +221,37 @@ let shouldSendResetCookie = false;
 let httpReqsData = {};
 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($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);
-                    }
-                });
-            }
+        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) {
     if (content) {
         mergeNewContent(content);
@@ -276,6 +286,7 @@ onDestroy(() => {
 
 {#if $builderContextSignal.content}
   <div
+    {...{}}
     key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
@@ -291,6 +302,12 @@ onDestroy(() => {
           "aria-hidden": true,
         }}
     class={classNameProp}
+    on:initeditingbldr={(event) => {
+      elementRef_onIniteditingbldr(event);
+    }}
+    on:initpreviewingbldr={(event) => {
+      elementRef_onInitpreviewingbldr(event);
+    }}
   >
     <slot />
   </div>

package/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -14,12 +14,12 @@ declare const __propDef: {
         context?: BuilderEditorProps["context"];
         canTrack?: BuilderEditorProps["canTrack"];
         apiKey: BuilderEditorProps["apiKey"];
-        showContent: BuilderEditorProps["showContent"];
-        classNameProp: BuilderEditorProps["classNameProp"];
-        content?: BuilderEditorProps["content"];
         locale?: BuilderEditorProps["locale"];
         includeRefs?: BuilderEditorProps["includeRefs"];
         enrich?: BuilderEditorProps["enrich"];
+        content?: BuilderEditorProps["content"];
+        showContent: BuilderEditorProps["showContent"];
+        classNameProp: BuilderEditorProps["classNameProp"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/edge/constants/sdk-version.d.ts

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

package/lib/edge/constants/sdk-version.js

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

package/lib/edge/functions/evaluate/choose-eval.d.ts

@@ -0,0 +1,6 @@
+import type { ExecutorArgs } from './helpers.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 declare const chooseBrowserOrServerEval: (args: ExecutorArgs) => any;

package/lib/edge/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 '../../../edge/functions/evaluate/edge-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/edge/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/edge/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 '../../../edge/functions/evaluate/edge-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/edge/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/edge/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/edge/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/edge/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/edge/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;