@builder.io/sdk-react 0.2.3-2 → 0.2.3-4

package/dist/server/functions/get-content/index.d.ts

@@ -0,0 +1,11 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { GetContentOptions } from './types.js';
+export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
+type ContentResponse = {
+    results: BuilderContent[];
+} | {
+    status: number;
+    message: string;
+};
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
+export {};

package/dist/server/functions/get-content/index.js

@@ -0,0 +1,40 @@
+import { logger } from '../../helpers/logger.js';
+import { fetch } from '../get-fetch.js';
+import { handleABTesting } from './ab-testing.js';
+import { generateContentUrl } from './generate-content-url.js';
+export async function getContent(options) {
+    const allContent = await getAllContent({ ...options, limit: 1 });
+    if (allContent && 'results' in allContent) {
+        return allContent?.results[0] || null;
+    }
+    return null;
+}
+export async function getAllContent(options) {
+    try {
+        const url = generateContentUrl(options);
+        const res = await fetch(url.href);
+        const content = await res.json();
+        if ('status' in content && !('results' in content)) {
+            logger.error('Error fetching data. ', { url, content, options });
+            return content;
+        }
+        const canTrack = options.canTrack !== false;
+        try {
+            if (canTrack &&
+                // This makes sure we have a non-error response with the results array.
+                Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    await handleABTesting({ item, canTrack });
+                }
+            }
+        }
+        catch (e) {
+            logger.error('Could not setup A/B testing. ', e);
+        }
+        return content;
+    }
+    catch (error) {
+        logger.error('Error fetching data. ', error);
+        return null;
+    }
+}

package/dist/server/functions/get-content/types.d.ts

@@ -0,0 +1,45 @@
+export interface GetContentOptions {
+    /** The model to get content for */
+    model: string;
+    /** Your public API key */
+    apiKey: string;
+    /** Number of items to fetch. Default is 1 */
+    limit?: number;
+    /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+    userAttributes?: (Record<string, string> & {
+        urlPath?: string;
+    }) | null;
+    /** Custom query */
+    query?: Record<string, any>;
+    /**
+     * Any other API options.
+     * Accepts both a key/value object or a `URLSearchParams` instance
+     * */
+    options?: Record<string, any> | URLSearchParams;
+    /**
+     * If set to `true`, it will lazy load symbols/references.
+     * If set to `false`, it will render the entire content tree eagerly.
+     */
+    noTraverse?: boolean;
+    /**
+     * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
+     * only the default variation will be returned to every user.
+     *
+     * Defaults to `true`.
+     */
+    canTrack?: boolean;
+    /**
+     * Include references in the response. Defaults to `true`.
+     */
+    includeRefs?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
+     */
+    locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v3`.
+     */
+    apiVersion?: 'v2' | 'v3';
+}

package/dist/server/functions/get-content/types.js

@@ -0,0 +1 @@
+export {};

package/dist/server/functions/get-fetch.d.ts

@@ -0,0 +1 @@
+export declare const fetch: typeof globalThis.fetch;

package/dist/server/functions/get-fetch.js

@@ -0,0 +1,11 @@
+import { getGlobalThis } from './get-global-this.js';
+function getFetch() {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === 'undefined') {
+        console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+        throw new Error('Builder SDK could not find a global `fetch` function');
+    }
+    return globalFetch;
+}
+export const fetch = getFetch();

package/dist/server/functions/get-global-this.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="node" />
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+export declare function getGlobalThis(): Global;
+export {};

package/dist/server/functions/get-global-this.js

@@ -0,0 +1,15 @@
+export function getGlobalThis() {
+    if (typeof globalThis !== 'undefined') {
+        return globalThis;
+    }
+    if (typeof window !== 'undefined') {
+        return window;
+    }
+    if (typeof global !== 'undefined') {
+        return global;
+    }
+    if (typeof self !== 'undefined') {
+        return self;
+    }
+    return globalThis;
+}

package/dist/server/functions/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/dist/server/functions/is-browser.js

@@ -0,0 +1,3 @@
+export function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}

package/dist/server/helpers/ab-tests.d.ts

@@ -0,0 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
+    contentId: string;
+} & CanTrack) => Promise<string>;
+export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
+    contentId: string;
+    value: string;
+} & CanTrack) => Promise<void>;

package/dist/server/helpers/ab-tests.js

@@ -0,0 +1,5 @@
+import { getCookie, setCookie } from './cookie.js';
+const BUILDER_STORE_PREFIX = 'builderio.variations';
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+export const getContentVariationCookie = ({ contentId, canTrack, }) => getCookie({ name: getContentTestKey(contentId), canTrack });
+export const setContentVariationCookie = ({ contentId, canTrack, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack });

package/dist/server/helpers/cookie.d.ts

@@ -0,0 +1,15 @@
+import type { CanTrack } from '../types/can-track.js';
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export declare const getCookie: ({ name, canTrack, }: {
+    name: string;
+} & CanTrack) => Promise<string | undefined>;
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export declare const setCookie: ({ name, value, expires, canTrack, }: {
+    name: string;
+    value: string;
+    expires?: Date;
+} & CanTrack) => Promise<void>;

package/dist/server/helpers/cookie.js

@@ -0,0 +1,65 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { checkIsDefined } from './nullable.js';
+import { getTopLevelDomain } from './url.js';
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export const getCookie = async ({ name, canTrack, }) => {
+    try {
+        if (!canTrack) {
+            return undefined;
+        }
+        /**
+         * Extracted from MDN docs
+         * https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
+         */
+        return document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(`${name}=`))
+            ?.split('=')[1];
+    }
+    catch (err) {
+        console.debug('[COOKIE] GET error: ', err);
+        return undefined;
+    }
+};
+const stringifyCookie = (cookie) => cookie
+    .map(([key, value]) => (value ? `${key}=${value}` : key))
+    .filter(checkIsDefined)
+    .join('; ');
+const SECURE_CONFIG = [
+    ['secure', ''],
+    ['SameSite', 'None'],
+];
+const createCookieString = ({ name, value, expires, }) => {
+    const secure = isBrowser() ? location.protocol === 'https:' : true;
+    const secureObj = secure ? SECURE_CONFIG : [[]];
+    // TODO: need to know if secure server side
+    const expiresObj = expires
+        ? [['expires', expires.toUTCString()]]
+        : [[]];
+    const cookieValue = [
+        [name, value],
+        ...expiresObj,
+        ['path', '/'],
+        ['domain', getTopLevelDomain(window.location.hostname)],
+        ...secureObj,
+    ];
+    const cookie = stringifyCookie(cookieValue);
+    return cookie;
+};
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export const setCookie = async ({ name, value, expires, canTrack, }) => {
+    try {
+        if (!canTrack) {
+            return;
+        }
+        const cookie = createCookieString({ name, value, expires });
+        document.cookie = cookie;
+    }
+    catch (err) {
+        console.warn('[COOKIE] SET error: ', err);
+    }
+};

package/dist/server/helpers/flatten.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export declare function flatten<T extends Record<string, any>>(object: T, path?: string | null, separator?: string): T;

package/dist/server/helpers/flatten.js

@@ -0,0 +1,19 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export function flatten(object, path = null, separator = '.') {
+    return Object.keys(object).reduce((acc, key) => {
+        const value = object[key];
+        const newPath = [path, key].filter(Boolean).join(separator);
+        const isObject = [
+            typeof value === 'object',
+            value !== null,
+            !(Array.isArray(value) && value.length === 0),
+        ].every(Boolean);
+        return isObject
+            ? { ...acc, ...flatten(value, newPath, separator) }
+            : { ...acc, [newPath]: value };
+    }, {});
+}

package/dist/server/helpers/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+};

package/dist/server/helpers/logger.js

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+    log: (...message) => console.log(MSG_PREFIX, ...message),
+    error: (...message) => console.error(MSG_PREFIX, ...message),
+    warn: (...message) => console.warn(MSG_PREFIX, ...message),
+};

package/dist/server/helpers/nullable.d.ts

@@ -0,0 +1,2 @@
+export type Nullable<T> = T | null | undefined;
+export declare const checkIsDefined: <T>(maybeT: T) => maybeT is T;

package/dist/server/helpers/nullable.js

@@ -0,0 +1 @@
+export const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== undefined;

package/dist/server/helpers/url.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export declare const getTopLevelDomain: (host: string) => string;

package/dist/server/helpers/url.js

@@ -0,0 +1,15 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export const getTopLevelDomain = (host) => {
+    if (host === 'localhost' || host === '127.0.0.1') {
+        return host;
+    }
+    const parts = host.split('.');
+    if (parts.length > 2) {
+        return parts.slice(1).join('.');
+    }
+    return host;
+};

package/dist/server/types/api-version.d.ts

@@ -0,0 +1,2 @@
+export type ApiVersion = 'v2' | 'v3';
+export declare const DEFAULT_API_VERSION: ApiVersion;

package/dist/server/types/api-version.js

@@ -0,0 +1 @@
+export const DEFAULT_API_VERSION = 'v3';

package/dist/server/types/builder-block.d.ts

@@ -0,0 +1,66 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+interface JSONObject {
+    [x: string]: JSONValue;
+}
+interface JSONArray extends Array<JSONValue> {
+}
+/** @todo typedoc this */
+export interface BuilderBlock {
+    '@type': '@builder.io/sdk:Element';
+    '@version'?: number;
+    id?: string;
+    tagName?: string;
+    layerName?: string;
+    groupLocked?: boolean;
+    layerLocked?: boolean;
+    /** @todo make alias for properties.class */
+    class?: string;
+    children?: BuilderBlock[];
+    responsiveStyles?: {
+        large?: Partial<CSSStyleDeclaration>;
+        medium?: Partial<CSSStyleDeclaration>;
+        small?: Partial<CSSStyleDeclaration>;
+        /** @deprecated */
+        xsmall?: Partial<CSSStyleDeclaration>;
+    };
+    component?: {
+        name: string;
+        options?: any;
+        tag?: string;
+    };
+    bindings?: {
+        [key: string]: string;
+    };
+    meta?: {
+        [key: string]: JSONValue;
+    };
+    actions?: {
+        [key: string]: string;
+    };
+    properties?: {
+        [key: string]: string;
+    };
+    code?: {
+        bindings?: {
+            [key: string]: string;
+        };
+        actions?: {
+            [key: string]: string;
+        };
+    };
+    repeat?: {
+        collection: string;
+        itemName?: string;
+    } | null;
+    animations?: any[];
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * generated by the "Hide If" binding
+     */
+    hide?: boolean;
+    /**
+     * generated by the "Show If" binding
+     */
+    show?: boolean;
+}
+export {};

package/dist/server/types/builder-block.js

@@ -0,0 +1 @@
+export {};

package/dist/server/types/builder-content.d.ts

@@ -0,0 +1,46 @@
+import type { BuilderBlock } from './builder-block.js';
+import type { Input } from './input.js';
+import type { Nullable } from './typescript.js';
+export interface Breakpoints {
+    small: number;
+    medium: number;
+}
+export interface BuilderContentVariation {
+    data?: {
+        title?: string;
+        blocks?: BuilderBlock[];
+        inputs?: Input[];
+        state?: {
+            [key: string]: any;
+        };
+        jsCode?: string;
+        tsCode?: string;
+        httpRequests?: {
+            [key: string]: string;
+        };
+        [key: string]: any;
+    };
+    name?: string;
+    testRatio?: number;
+    id?: string;
+    meta?: {
+        breakpoints?: Nullable<Breakpoints>;
+        [key: string]: any;
+    };
+}
+export interface BuilderContent extends BuilderContentVariation {
+    '@version'?: number;
+    id?: string;
+    name?: string;
+    published?: 'published' | 'draft' | 'archived';
+    modelId?: string;
+    priority?: number;
+    lastUpdated?: number;
+    startDate?: number;
+    endDate?: number;
+    variations?: {
+        [id: string]: BuilderContentVariation | undefined;
+    };
+    testVariationId?: string;
+    testVariationName?: string;
+}

package/dist/server/types/builder-content.js

@@ -0,0 +1 @@
+export {};

package/dist/server/types/can-track.d.ts

@@ -0,0 +1,3 @@
+export type CanTrack = {
+    canTrack: boolean;
+};

package/dist/server/types/can-track.js

@@ -0,0 +1 @@
+export {};

package/dist/server/types/input.d.ts

@@ -0,0 +1,121 @@
+export interface Input {
+    /** This is the name of the component prop this input represents */
+    name: string;
+    /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
+    friendlyName?: string;
+    /** @hidden @deprecated */
+    description?: string;
+    /** A default value to use */
+    defaultValue?: any;
+    /**
+     * The type of input to use, such as 'text'
+     *
+     * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
+     * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
+     */
+    type: string;
+    /** Is this input mandatory or not */
+    required?: boolean;
+    /** @hidden */
+    autoFocus?: boolean;
+    subFields?: Input[];
+    /**
+     * Additional text to render in the UI to give guidance on how to use this
+     *
+     * @example
+     * ```js
+     * helperText: 'Be sure to use a proper URL, starting with "https://"'
+     * 111
+     */
+    helperText?: string;
+    /** @hidden */
+    allowedFileTypes?: string[];
+    /** @hidden */
+    imageHeight?: number;
+    /** @hidden */
+    imageWidth?: number;
+    /** @hidden */
+    mediaHeight?: number;
+    /** @hidden */
+    mediaWidth?: number;
+    /** @hidden */
+    hideFromUI?: boolean;
+    /** @hidden */
+    modelId?: string;
+    /**
+     * Number field type validation maximum accepted input
+     */
+    max?: number;
+    /**
+     * Number field type validation minimum accepted input
+     */
+    min?: number;
+    /**
+     * Number field type step size when using arrows
+     */
+    step?: number;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * children of this component are selected. This is useful for things
+     * like Tabs, such that users may not always select the Tabs component
+     * directly but will still be looking for how to add additional tabs
+     */
+    broadcast?: boolean;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * group locked parents of this component are selected. This is useful
+     * to bubble up important inputs for locked groups, like text and images
+     */
+    bubble?: boolean;
+    /**
+     * Set this to `true` if you want this component to be translatable
+     */
+    localized?: boolean;
+    /** @hidden */
+    options?: {
+        [key: string]: any;
+    };
+    /**
+     * For "text" input type, specifying an enum will show a dropdown of options instead
+     */
+    enum?: string[] | {
+        label: string;
+        value: any;
+        helperText?: string;
+    }[];
+    /** Regex field validation for all string types (text, longText, html, url, etc) */
+    regex?: {
+        /** pattern to test, like "^\/[a-z]$" */
+        pattern: string;
+        /** flags for the RegExp constructor, e.g. "gi"  */
+        options?: string;
+        /**
+         * Friendly message to display to end-users if the regex fails, e.g.
+         * "You must use a relative url starting with '/...' "
+         */
+        message: string;
+    };
+    /**
+     * Set this to `true` to put this under the "show more" section of
+     * the options editor. Useful for things that are more advanced
+     * or more rarely used and don't need to be too prominent
+     */
+    advanced?: boolean;
+    /** @hidden */
+    /** @hidden */
+    code?: boolean;
+    /** @hidden */
+    richText?: boolean;
+    /** @hidden */
+    showIf?: ((options: Map<string, any>) => boolean) | string;
+    /** @hidden */
+    copyOnAdd?: boolean;
+    /**
+     * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
+     */
+    model?: string;
+    valueType?: {
+        type?: string;
+    };
+    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+}

package/dist/server/types/input.js

@@ -0,0 +1 @@
+export {};

package/dist/server/types/typescript.d.ts

@@ -0,0 +1,5 @@
+export type Nullable<T> = T | null | undefined;
+export type Dictionary<T> = {
+    [key: string]: T;
+};
+export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;

package/dist/server/types/typescript.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,22 +1,17 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.3-2",
+  "version": "0.2.3-4",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/react/esm/index.js",
-      "require": "./dist/react/cjs/index.js"
-    },
-    "./get-content": {
-      "import": "./dist/react/esm/functions/get-content/index.js",
-      "require": "./dist/react/cjs/functions/get-content/index.js"
-    }
+    ".": "./dist/sdk/index.js",
+    "./server": "./dist/sdk/functions/get-content/index.js"
   },
   "scripts": {
-    "build:react": "tsc -p ./tsconfig.react-cjs.json && tsc -p ./tsconfig.react-esm.json",
-    "build:rsc": "tsc -p ./tsconfig.rsc.json",
-    "build": "yarn run build:react",
+    "build:types:server": "tsc -p ./tsconfig.server.json",
+    "build:types:sdk": "tsc -p ./tsconfig.sdk.json",
+    "build:types": "yarn build:types:sdk",
+    "build": "yarn build:types",
     "release:patch": "yarn run build && npm version patch && npm publish",
     "release:minor": "yarn run build && npm version minor && npm publish",
     "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
@@ -25,7 +20,11 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
     "react": "^18.2.0",
-    "typescript": "^4.9.4"
+    "rollup-plugin-preserve-directives": "^0.1.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.3.3",
+    "vite-plugin-dts": "^2.3.0"
   }
 }

package/packages/react/src/blocks/BaseText.tsx

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+import { useContext } from "react";
+
+export interface BaseTextProps {
+  text: string;
+}
+
+import BuilderContext from "../context/builder.context.js";
+
+function BaseText(props: BaseTextProps) {
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <span style={builderContext.inheritedStyles as any}>{props.text}</span>
+  );
+}
+
+export default BaseText;