@builder.io/sdk-svelte 0.5.9 → 0.6.0

package/lib/browser/functions/evaluate/evaluate.js

@@ -0,0 +1,52 @@
+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 '../../../browser/functions/evaluate/browser-runtime/index.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,
+        context,
+        event,
+        rootSetState,
+        rootState,
+        localState
+    };
+    try {
+        return evaluator(args);
+    }
+    catch (e) {
+        logger.error('Failed code evaluation: ' + e.message, {
+            code
+        });
+        return undefined;
+    }
+}

package/lib/browser/functions/evaluate/placeholder-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from './helpers.js';
+export declare const evaluator: (_args: ExecutorArgs) => never;

package/lib/browser/functions/evaluate/placeholder-runtime.js

@@ -0,0 +1,3 @@
+export const evaluator = (_args) => {
+    throw new Error('Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.');
+};

package/lib/browser/functions/fetch-builder-props.d.ts

@@ -0,0 +1,40 @@
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
+import type { Dictionary } from '../types/typescript.js';
+import type { GetContentOptions } from './get-content/types.js';
+type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
+    model?: string;
+}) & ({
+    /**
+     * The current URL path. Used to determine the `urlPath` for targeting content.
+     *
+     * Cannot be used with `url`.
+     */
+    path: string;
+    /**
+     * The current URL search params. Used to parse the `searchParams` for targeting content.
+     *
+     * Cannot be used with `url`.
+     */
+    searchParams?: URLSearchParams | Dictionary<string | string[]>;
+    url?: undefined;
+} | {
+    /**
+     * The current URL. Used to determine the `urlPath` for targeting content and
+     * to parse the `searchParams` for targeting content.
+     *
+     * Cannot be used with `path` or `searchParams`.
+     */
+    url: URL;
+    path?: undefined;
+    searchParams?: undefined;
+} | {
+    url?: undefined;
+    path?: undefined;
+    searchParams?: undefined;
+});
+/**
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
+ */
+export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
+export {};

package/lib/browser/functions/fetch-builder-props.js

@@ -0,0 +1,26 @@
+import { getBuilderSearchParams } from './get-builder-search-params/index.js';
+import { fetchOneEntry } from './get-content/index.js';
+/**
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
+ */
+export const fetchBuilderProps = async (_args) => {
+    const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;
+    const getContentArgs = {
+        ..._args,
+        apiKey: _args.apiKey,
+        model: _args.model || 'page',
+        userAttributes: {
+            ..._args.userAttributes,
+            ...(urlPath ? {
+                urlPath
+            } : {})
+        },
+        options: getBuilderSearchParams(_args.searchParams || _args.url?.searchParams || _args.options)
+    };
+    return {
+        apiKey: getContentArgs.apiKey,
+        model: getContentArgs.model,
+        content: await fetchOneEntry(getContentArgs)
+    };
+};

package/lib/browser/functions/get-content/index.d.ts

@@ -0,0 +1,28 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { GetContentOptions } from './types.js';
+/**
+ * Returns a the first entry that matches the given options.
+ */
+export declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
+/**
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
+ *
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
+ */
+export declare const getContent: typeof fetchOneEntry;
+type ContentResults = {
+    results: BuilderContent[];
+};
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+export declare function fetchEntries(options: GetContentOptions): Promise<ContentResults | null>;
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+export declare const getAllContent: typeof fetchEntries;
+export {};

package/lib/browser/functions/get-content/index.js

@@ -0,0 +1,99 @@
+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 { fetch } from '../get-fetch.js';
+import { isBrowser } from '../is-browser.js';
+import { generateContentUrl } from './generate-content-url.js';
+const checkContentHasResults = (content) => 'results' in content;
+/**
+ * Returns a the first entry that matches the given options.
+ */
+export async function fetchOneEntry(options) {
+    const allContent = await fetchEntries({
+        ...options,
+        limit: 1
+    });
+    if (allContent) {
+        return allContent.results[0] || null;
+    }
+    return null;
+}
+/**
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
+ *
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
+ */
+export const getContent = fetchOneEntry;
+const _fetchContent = async (options) => {
+    const url = generateContentUrl(options);
+    const res = await fetch(url.href);
+    const content = await res.json();
+    return content;
+};
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+export const _processContentResult = async (options, content, url = generateContentUrl(options)) => {
+    const canTrack = getDefaultCanTrack(options.canTrack);
+    const isPreviewing = url.search.includes(`preview=`);
+    if (TARGET === 'rsc' && isPreviewing) {
+        const newResults = [];
+        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;
+    /**
+     * For client-side navigations, it is ideal to handle AB testing at this point instead of using our
+     * complex multi-rendering variants approach, which is only needed for SSR'd content.
+     *
+     * This is also where react-native would handle AB testing.
+     */
+    try {
+        const newResults = [];
+        for (const item of content.results) {
+            newResults.push(await handleABTesting({
+                item,
+                canTrack
+            }));
+        }
+        content.results = newResults;
+    }
+    catch (e) {
+        logger.error('Could not process A/B tests. ', e);
+    }
+    return content;
+};
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+export async function fetchEntries(options) {
+    try {
+        const url = generateContentUrl(options);
+        const content = await _fetchContent(options);
+        if (!checkContentHasResults(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;
+    }
+}
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+export const getAllContent = fetchEntries;

package/lib/browser/functions/is-edge-runtime.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export declare function isEdgeRuntime(): boolean;

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

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

package/lib/browser/index-helpers/blocks-exports.d.ts

@@ -0,0 +1,19 @@
+export { default as Button } from '../blocks/button/button.svelte';
+export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
+export { default as Image } from '../blocks/image/image.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
+export { default as Text } from '../blocks/text/text.svelte';
+export { default as Video } from '../blocks/video/video.svelte';
+import { default as Blocks } from '../components/blocks/blocks.svelte';
+import { default as Content } from '../components/content-variants/content-variants.svelte';
+export { Blocks, Content };
+/**
+ * @deprecated Renamed to `Blocks`.
+ */
+export declare const RenderBlocks: typeof Blocks;
+/**
+ * @deprecated Renamed to `Content`.
+ */
+export declare const RenderContent: typeof Content;

package/lib/browser/index-helpers/blocks-exports.js

@@ -0,0 +1,19 @@
+export { default as Button } from '../blocks/button/button.svelte';
+export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
+export { default as Image } from '../blocks/image/image.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
+export { default as Text } from '../blocks/text/text.svelte';
+export { default as Video } from '../blocks/video/video.svelte';
+import { default as Blocks } from '../components/blocks/blocks.svelte';
+import { default as Content } from '../components/content-variants/content-variants.svelte';
+export { Blocks, Content };
+/**
+ * @deprecated Renamed to `Blocks`.
+ */
+export const RenderBlocks = Blocks;
+/**
+ * @deprecated Renamed to `Content`.
+ */
+export const RenderContent = Content;

package/lib/edge/blocks/BaseText.svelte

@@ -0,0 +1,21 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BuilderContext from "../context/builder.context.js";
+export let text;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+let builderContext = getContext(BuilderContext.key);
+</script>
+
+<span use:mitosis_styling={$builderContext.inheritedStyles}>
+  {text}
+</span>

package/lib/edge/blocks/button/button.svelte

@@ -0,0 +1,46 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let text = undefined;
+export let link = undefined;
+export let openLinkInNewTab = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+{#if link}
+  <a
+    role="button"
+    {...filterAttrs(attributes, "on:", false)}
+    href={link}
+    target={openLinkInNewTab ? "_blank" : undefined}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {text}
+  </a>
+{:else}
+  <button
+    use:mitosis_styling={attributes.style}
+    {...filterAttrs(attributes, "on:", false)}
+    class={attributes.class + " button"}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {text}
+  </button>
+{/if}
+
+<style>
+  .button {
+    all: unset;
+  }
+</style>

package/lib/edge/blocks/button/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/edge/blocks/button/component-info.js

@@ -0,0 +1,34 @@
+export const componentInfo = {
+    name: 'Core:Button',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+    defaultStyles: {
+        // TODO: make min width more intuitive and set one
+        appearance: 'none',
+        paddingTop: '15px',
+        paddingBottom: '15px',
+        paddingLeft: '25px',
+        paddingRight: '25px',
+        backgroundColor: '#000000',
+        color: 'white',
+        borderRadius: '4px',
+        textAlign: 'center',
+        cursor: 'pointer'
+    },
+    inputs: [{
+            name: 'text',
+            type: 'text',
+            defaultValue: 'Click me!',
+            bubble: true
+        }, {
+            name: 'link',
+            type: 'url',
+            bubble: true
+        }, {
+            name: 'openLinkInNewTab',
+            type: 'boolean',
+            defaultValue: false,
+            friendlyName: 'Open link in new tab'
+        }],
+    static: true,
+    noWrap: true
+};

package/lib/edge/blocks/columns/columns.svelte

@@ -0,0 +1,156 @@
+<script context="module"></script>
+
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import InlinedStyles from "../../components/inlined-styles.svelte";
+import { TARGET } from "../../constants/target.js";
+import "../../functions/deopt.js";
+export let js;
+export let space = undefined;
+export let columns = undefined;
+export let stackColumnsAt = undefined;
+export let reverseColumnsWhenStacked = undefined;
+export let builderContext;
+export let builderBlock;
+export let builderComponents;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+function getWidth(index) {
+    return cols[index]?.width || 100 / cols.length;
+}
+function getColumnCssWidth(index) {
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+}
+function getTabletStyle({ stackedStyle, desktopStyle, }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+}
+function getMobileStyle({ stackedStyle, desktopStyle, }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+}
+function columnCssVars(index) {
+    const gutter = index === 0 ? 0 : gutterSize;
+    const width = getColumnCssWidth(index);
+    const gutterPixels = `${gutter}px`;
+    const mobileWidth = "100%";
+    const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
+    return {
+        width,
+        [marginLeftKey]: gutterPixels,
+        "--column-width-mobile": getMobileStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-mobile": getMobileStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutterPixels,
+        }),
+        "--column-width-tablet": getTabletStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-tablet": getTabletStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutterPixels,
+        }),
+    };
+}
+function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints($builderContext.content?.meta?.breakpoints || {});
+    return breakpointSizes[size].max;
+}
+$: columnsCssVars = () => {
+    return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": getTabletStyle({
+            stackedStyle: flexDir,
+            desktopStyle: "row",
+        }),
+    };
+};
+$: columnsStyles = () => {
+    return `
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+};
+let gutterSize = typeof space === "number" ? space || 0 : 20;
+let cols = columns || [];
+let stackAt = stackColumnsAt || "tablet";
+let flexDir = stackColumnsAt === "never"
+    ? "row"
+    : reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+</script>
+
+<div
+  use:mitosis_styling={columnsCssVars()}
+  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  {...{}}
+>
+  {#if TARGET !== "reactNative"}
+    <InlinedStyles styles={columnsStyles()} />
+  {/if}
+
+  {#each columns as column, index (index)}
+    <div
+      use:mitosis_styling={columnCssVars(index)}
+      class="builder-column div-2"
+      {...{}}
+    >
+      <Blocks
+        path={`component.options.columns.${index}.blocks`}
+        parent={builderBlock.id}
+        styleProp={{
+          flexGrow: "1",
+        }}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        blocks={column.blocks}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    line-height: normal;
+  }
+  .div-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

package/lib/edge/blocks/columns/columns.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
+declare const __propDef: {
+    props: {
+        js: any;
+        space?: PropsWithBuilderData<ColumnProps>["space"];
+        columns?: PropsWithBuilderData<ColumnProps>["columns"];
+        stackColumnsAt?: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
+        reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+        builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+        builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnsProps = typeof __propDef.props;
+export type ColumnsEvents = typeof __propDef.events;
+export type ColumnsSlots = typeof __propDef.slots;
+export default class Columns extends SvelteComponent<ColumnsProps, ColumnsEvents, ColumnsSlots> {
+}
+export {};

package/lib/edge/blocks/columns/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;