@builder.io/sdk-react 0.2.1 → 0.2.3-0

package/dist/rsc/components/render-content/builder-editing.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {object} RegisteredComponent
+ * @typedef {object} BuilderContent
+ * @typedef {(data: {data: object, key: string }) => void} OnUpdateCallback
+ * @typedef {{
+ *   model: string,
+ *   components?: RegisteredComponent[],
+ *   children: any,
+ *   onUpdate?: OnUpdateCallback,
+ * }} BuilderEditingProps
+ */
+/**
+ * @param {BuilderEditingProps} props
+ */
+export function BuilderEditingWrapper(props: BuilderEditingProps): JSX.Element;
+export type RegisteredComponent = object;
+export type BuilderContent = object;
+export type OnUpdateCallback = (data: {
+    data: object;
+    key: string;
+}) => void;
+export type BuilderEditingProps = {
+    model: string;
+    components?: RegisteredComponent[];
+    children: any;
+    onUpdate?: OnUpdateCallback;
+};

package/dist/rsc/components/render-content/components/render-styles.d.ts

@@ -0,0 +1,2 @@
+export default RenderContentStyles;
+declare function RenderContentStyles(props: any): JSX.Element;

package/dist/rsc/components/render-content/components/render-styles.helpers.d.ts

@@ -0,0 +1,7 @@
+export function getCss({ cssCode, contentId }: {
+    cssCode: any;
+    contentId: any;
+}): any;
+export function getFontCss({ customFonts }: {
+    customFonts: any;
+}): any;

package/dist/rsc/components/render-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default2 as default };
+import { default as default2 } from "./render-content";

package/dist/rsc/components/render-content/render-content.d.ts

@@ -0,0 +1,2 @@
+export default RenderContent;
+declare function RenderContent(props: any): JSX.Element;

package/dist/rsc/components/render-content/render-content.helpers.d.ts

@@ -0,0 +1,9 @@
+export function getContentInitialValue({ content, data }: {
+    content: any;
+    data: any;
+}): any;
+export function getContextStateInitialValue({ content, data, locale }: {
+    content: any;
+    data: any;
+    locale: any;
+}): any;

package/dist/rsc/components/render-content/render-content.js

@@ -16,6 +16,7 @@ import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 function RenderContent(props) {
     const _context = { ...props["_context"] };
     const state = {

package/dist/rsc/components/render-content-variants/helpers.js

@@ -0,0 +1,99 @@
+const variantScriptFn = function main(contentId, variants) {
+    console.log("Running variant script", JSON.stringify({ contentId, variants }));
+    if (!navigator.cookieEnabled) {
+        console.log("Cookies are disabled, skipping variant script");
+        return;
+    }
+    const templateSelectorById = (id) => `template[data-template-variant-id="${id}"]`;
+    function removeTemplates() {
+        console.log("Removing variants");
+        variants.forEach((template) => {
+            const el2 = document.querySelector(templateSelectorById(template.id));
+            if (el2) {
+                console.log("Removing variant", template.id);
+                el2.remove();
+            }
+        });
+        const el = document.getElementById(`variants-script-${contentId}`);
+        if (el) {
+            console.log("Removing variant script");
+            el.remove();
+        }
+    }
+    if (typeof document.createElement("template").content === "undefined") {
+        console.log("Template polyfill not found, skipping variant script");
+        removeTemplates();
+        return;
+    }
+    function setCookie(name, value, days) {
+        let expires = "";
+        if (days) {
+            const date = new Date();
+            date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
+    }
+    function getCookie(name) {
+        const nameEQ = name + "=";
+        const ca = document.cookie.split(";");
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) == " ")
+                c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) == 0)
+                return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+    function getAndSetVariantId() {
+        const cookieName = `builder.tests.${contentId}`;
+        const variantInCookie = getCookie(cookieName);
+        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        if (variantInCookie && availableIDs.indexOf(variantInCookie) > -1) {
+            return variantInCookie;
+        }
+        let n = 0;
+        const random = Math.random();
+        for (let i = 0; i < variants.length; i++) {
+            const variant = variants[i];
+            const testRatio = variant.testRatio;
+            n += testRatio;
+            if (random < n) {
+                setCookie(cookieName, variant.id);
+                return variant.id;
+            }
+        }
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const variantId = getAndSetVariantId();
+    if (variantId !== contentId) {
+        console.log("Variant found", variantId);
+        const winningTemplate = document.querySelector(templateSelectorById(variantId));
+        console.log("winningTemplate", winningTemplate);
+        if (!winningTemplate) {
+            console.log("No template found for variant", variantId);
+            console.log("selector: ", templateSelectorById(variantId));
+            return;
+        }
+        const templatesParent = winningTemplate.parentNode;
+        if (templatesParent) {
+            const defaultContent = templatesParent.querySelector(`div[builder-content-id="${contentId}"]`);
+            templatesParent.replaceChild(winningTemplate.content.firstElementChild, defaultContent);
+        }
+    }
+    else if (variants.length > 0) {
+        console.log("No variant found, removing all variants");
+    }
+    removeTemplates();
+    console.log("Variant script complete");
+};
+const getVariantsScriptString = (variants, contentId) => {
+    const fnStr = variantScriptFn.toString().replace(/\s+/g, " ");
+    return `
+  ${fnStr}
+  main("${contentId}", ${JSON.stringify(variants)})
+  `;
+};
+export { getVariantsScriptString };

package/dist/rsc/components/render-content-variants/render-content-variants.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { isBrowser } from "../../functions/is-browser";
+import { getVariantsScriptString } from "./helpers";
+import RenderContent from "../render-content/render-content";
+import { checkIsDefined } from "../../helpers/nullable";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+import { TARGET } from "../../constants/target";
+function RenderContentVariants(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        variantScriptStr: getVariantsScriptString(Object.values(props.content?.variations || {}).map((value) => ({
+            id: value.id,
+            testRatio: value.testRatio,
+        })), props.content?.id || ""),
+        contentToUse: ((isBrowser() && props.canTrack) || !isBrowser()) &&
+            Object.keys(props.content?.variations || {}).length > 0
+            ? undefined
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: checkIsDefined(props.canTrack) ? props.canTrack : true,
+            }),
+        shouldRenderVariants: ((isBrowser() && props.canTrack) || !isBrowser()) &&
+            Object.keys(props.content?.variations || {}).length > 0,
+        variants: null,
+    };
+    useEffect(() => {
+        if (TARGET === "svelte" && state.shouldRenderVariants) {
+            // get first template in loop
+            const templates = document.querySelectorAll(`template[data-template-variant-id="${state.variants[0]?.id}"]`);
+            const lastTemplate = templates[templates.length - 1];
+            // create and append script as sibling of template
+            const script = document.createElement("script");
+            script.id = `variants-script-${props.content?.id}`;
+            script.innerHTML = state.variantScriptStr;
+            lastTemplate?.parentNode?.append(script, lastTemplate);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null, state.shouldRenderVariants ? (React.createElement(React.Fragment, null,
+        Object.values(props.content.variations)?.map((variant) => (React.createElement("template", { key: variant?.id, "data-template-variant-id": variant?.id },
+            React.createElement(RenderContent, { content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context })))),
+        React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: state.variantScriptStr } }),
+        React.createElement(RenderContent, { content: state.contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context }))) : (React.createElement(RenderContent, { content: state.contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context }))));
+}
+export default RenderContentVariants;

package/dist/rsc/components/render-inlined-styles.d.ts

@@ -0,0 +1,2 @@
+export default RenderInlinedStyles;
+declare function RenderInlinedStyles(props: any): JSX.Element;

package/dist/rsc/constants/builder-registered-components.d.ts

@@ -0,0 +1 @@
+export function getDefaultRegisteredComponents(): any[];

package/dist/rsc/constants/device-sizes.d.ts

@@ -0,0 +1,21 @@
+export function getMaxWidthQueryForSize(size: any, sizeValues?: {
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+}): string;
+export function getSizesForBreakpoints({ small, medium }: {
+    small: any;
+    medium: any;
+}): any;

package/dist/rsc/constants/target.d.ts

@@ -0,0 +1 @@
+export const TARGET: "rsc";

package/dist/rsc/context/builder.context.d.ts

@@ -0,0 +1,11 @@
+export { stdin_default as default };
+declare namespace stdin_default {
+    const content: null;
+    const context: {};
+    const state: {};
+    function setState(): void;
+    const apiKey: null;
+    const apiVersion: undefined;
+    const registeredComponents: {};
+    const inheritedStyles: {};
+}

package/dist/rsc/functions/camel-to-kebab-case.d.ts

@@ -0,0 +1 @@
+export function camelToKebabCase(string: any): any;

package/dist/rsc/functions/evaluate.d.ts

@@ -0,0 +1 @@
+export function evaluate(): null;

package/dist/rsc/functions/event-handler-name.d.ts

@@ -0,0 +1 @@
+export function getEventHandlerName(key: any): string;

package/dist/rsc/functions/extract-text-styles.d.ts

@@ -0,0 +1 @@
+export function extractTextStyles(styles: any): {};

package/dist/rsc/functions/fast-clone.d.ts

@@ -0,0 +1 @@
+export function fastClone(obj: any): any;

package/dist/rsc/functions/get-block-actions-handler.d.ts

@@ -0,0 +1 @@
+export function createEventHandler(value: any, options: any): (event: any) => null;

package/dist/rsc/functions/get-block-actions.d.ts

@@ -0,0 +1 @@
+export function getBlockActions(options: any): {};

package/dist/rsc/functions/get-block-component-options.d.ts

@@ -0,0 +1 @@
+export function getBlockComponentOptions(block: any): any;

package/dist/rsc/functions/get-block-properties.d.ts

@@ -0,0 +1 @@
+export function getBlockProperties(block: any): any;

package/dist/rsc/functions/get-block-properties.js

@@ -20,9 +20,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { TARGET } from "../constants/target.js";
 import { convertStyleMapToCSSArray } from "../helpers/css.js";
 import { transformBlockProperties } from "./transform-block-properties.js";
+const extractRelevantRootBlockProperties = (block) => {
+    return { href: block.href };
+};
 function getBlockProperties(block) {
     var _a;
-    const properties = __spreadProps(__spreadValues({}, block.properties), {
+    const properties = __spreadProps(__spreadValues(__spreadValues({}, extractRelevantRootBlockProperties(block)), block.properties), {
         "builder-id": block.id,
         style: getStyleAttribute(block.style),
         class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")

package/dist/rsc/functions/get-builder-search-params/fn.test.d.ts

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

package/dist/rsc/functions/get-builder-search-params/index.d.ts

@@ -0,0 +1,4 @@
+export function convertSearchParamsToQueryObject(searchParams: any): {};
+export function getBuilderSearchParams(_options: any): {};
+export function getBuilderSearchParamsFromWindow(): {};
+export function normalizeSearchParams(searchParams: any): any;

package/dist/rsc/functions/get-content/ab-testing.d.ts

@@ -0,0 +1 @@
+export function handleABTesting(_0: any): Promise<any>;

package/dist/rsc/functions/get-content/generate-content-url.d.ts

@@ -0,0 +1 @@
+export function generateContentUrl(options: any): URL;

package/dist/rsc/functions/get-content/generate-content-url.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export function getAllContent(options: any): Promise<any>;
+export function getContent(options: any): Promise<any>;

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

@@ -39,13 +39,14 @@ var __async = (__this, __arguments, generator) => {
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
+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";
 function getContent(options) {
     return __async(this, null, function* () {
         const allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
-        if ("results" in allContent) {
+        if (allContent && "results" in allContent) {
             return (allContent == null ? void 0 : allContent.results[0]) || null;
         }
         return null;
@@ -53,25 +54,31 @@ function getContent(options) {
 }
 function getAllContent(options) {
     return __async(this, null, function* () {
-        const url = generateContentUrl(options);
-        const res = yield fetch(url.href);
-        const content = yield res.json();
-        if ("status" in content && !("results" in content)) {
-            console.error("[Builder.io]: Error fetching data. ", content, options);
-            return content;
-        }
-        const canTrack = options.canTrack !== false;
         try {
-            if (canTrack && Array.isArray(content.results)) {
-                for (const item of content.results) {
-                    yield handleABTesting({ item, canTrack });
+            const url = generateContentUrl(options);
+            const res = yield fetch(url.href);
+            const content = yield 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 && Array.isArray(content.results)) {
+                    for (const item of content.results) {
+                        yield handleABTesting({ item, canTrack });
+                    }
                 }
             }
+            catch (e) {
+                logger.error("Could not setup A/B testing. ", e);
+            }
+            return content;
         }
-        catch (e) {
-            console.error("[Builder.io]: Could not setup A/B testing. ", e);
+        catch (error) {
+            logger.error("Error fetching data. ", error);
+            return null;
         }
-        return content;
     });
 }
 export { getAllContent, getContent };

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

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

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

@@ -0,0 +1 @@
+export function getGlobalThis(): typeof globalThis;

package/dist/rsc/functions/get-processed-block.d.ts

@@ -0,0 +1,6 @@
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, state }: {
+    block: any;
+    context: any;
+    shouldEvaluateBindings: any;
+    state: any;
+}): any;

package/dist/rsc/functions/get-processed-block.test.d.ts

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

package/dist/rsc/functions/get-react-native-block-styles.d.ts

@@ -0,0 +1,5 @@
+export function getReactNativeBlockStyles({ block, context, blockStyles }: {
+    block: any;
+    context: any;
+    blockStyles: any;
+}): {};

package/dist/rsc/functions/if-target.d.ts

@@ -0,0 +1,5 @@
+export function ifTarget({ targets, doThing, elseThing }: {
+    targets: any;
+    doThing: any;
+    elseThing: any;
+}): any;

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

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

package/dist/rsc/functions/is-editing.d.ts

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

package/dist/rsc/functions/is-iframe.d.ts

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

package/dist/rsc/functions/is-previewing.d.ts

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

package/dist/rsc/functions/on-change.d.ts

@@ -0,0 +1,2 @@
+export function onChange(obj: any, cb: any): any;
+export const onChangeProxySymbol: unique symbol;

package/dist/rsc/functions/on-change.test.d.ts

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

package/dist/rsc/functions/register-component.d.ts

@@ -0,0 +1,6 @@
+export const components: any[];
+export function createRegisterComponentMessage(_a: any): {
+    type: string;
+    data: any;
+};
+export function registerComponent(component: any, info: any): any;

package/dist/rsc/functions/register.d.ts

@@ -0,0 +1 @@
+export function register(type: any, info: any): void;

package/dist/rsc/functions/sanitize-react-native-block-styles.d.ts

@@ -0,0 +1 @@
+export function sanitizeReactNativeBlockStyles(styles: any): {};

package/dist/rsc/functions/set-editor-settings.d.ts

@@ -0,0 +1 @@
+export function setEditorSettings(newSettings: any): void;

package/dist/rsc/functions/set.d.ts

@@ -0,0 +1 @@
+export function set(obj: any, _path: any, value: any): any;

package/dist/rsc/functions/set.test.d.ts

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

package/dist/rsc/functions/track/helpers.d.ts

@@ -0,0 +1,5 @@
+export function getUserAttributes(): {
+    urlPath: string | undefined;
+    host: string | undefined;
+    device: string;
+};

package/dist/rsc/functions/track/index.d.ts

@@ -0,0 +1,2 @@
+export function _track(eventProps: any): Promise<any>;
+export function track(args: any): Promise<any>;

package/dist/rsc/functions/track/index.js

@@ -52,6 +52,7 @@ var __async = (__this, __arguments, generator) => {
     });
 };
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 import { getSessionId } from "../../helpers/sessionId.js";
 import { getVisitorId } from "../../helpers/visitorId.js";
 import { isBrowser } from "../is-browser.js";
@@ -90,7 +91,7 @@ const createEvent = (_a) => __async(void 0, null, function* () {
 function _track(eventProps) {
     return __async(this, null, function* () {
         if (!eventProps.apiKey) {
-            console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
+            logger.error("Missing API key for track call. Please provide your API key.");
             return;
         }
         if (!eventProps.canTrack) {

package/dist/rsc/functions/track/interaction.d.ts

@@ -0,0 +1,14 @@
+export function getInteractionPropertiesForEvent(event: any): {
+    targetBuilderElement: any;
+    metadata: {
+        targetOffset: {
+            x: number;
+            y: number;
+        } | undefined;
+        builderTargetOffset: {
+            x: number;
+            y: number;
+        } | undefined;
+        builderElementIndex: number | undefined;
+    };
+};

package/dist/rsc/functions/transform-block-properties.d.ts

@@ -0,0 +1 @@
+export function transformBlockProperties(properties: any): any;

package/dist/rsc/functions/transform-block.d.ts

@@ -0,0 +1 @@
+export function transformBlock(block: any): any;

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

@@ -0,0 +1,9 @@
+export function getContentVariationCookie({ contentId, canTrack }: {
+    contentId: any;
+    canTrack: any;
+}): Promise<any>;
+export function setContentVariationCookie({ contentId, canTrack, value }: {
+    contentId: any;
+    canTrack: any;
+    value: any;
+}): Promise<any>;

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

@@ -0,0 +1,2 @@
+export function getCookie(_0: any): Promise<any>;
+export function setCookie(_0: any): Promise<any>;

package/dist/rsc/helpers/css.d.ts

@@ -0,0 +1,7 @@
+export function convertStyleMapToCSS(style: any): string;
+export function convertStyleMapToCSSArray(style: any): (string | undefined)[];
+export function createCssClass({ mediaQuery, className, styles }: {
+    mediaQuery: any;
+    className: any;
+    styles: any;
+}): string;

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

@@ -0,0 +1 @@
+export function flatten(object: any, path?: null, separator?: string): any;

package/dist/rsc/helpers/localStorage.d.ts

@@ -0,0 +1,9 @@
+export function getLocalStorageItem({ key, canTrack }: {
+    key: any;
+    canTrack: any;
+}): string | null | undefined;
+export function setLocalStorageItem({ key, canTrack, value }: {
+    key: any;
+    canTrack: any;
+    value: any;
+}): void;

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

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

package/dist/rsc/helpers/logger.js

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

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

@@ -0,0 +1 @@
+export function checkIsDefined(maybeT: any): boolean;

package/dist/rsc/helpers/sessionId.d.ts

@@ -0,0 +1,6 @@
+export function createSessionId(): string;
+export function getSessionId(_0: any): Promise<any>;
+export function setSessionId({ id, canTrack }: {
+    id: any;
+    canTrack: any;
+}): Promise<any>;

package/dist/rsc/helpers/time.d.ts

@@ -0,0 +1 @@
+export function getCurrentDatePlusMinutes(minutes?: number): Date;

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

@@ -0,0 +1 @@
+export function getTopLevelDomain(host: any): any;

package/dist/rsc/helpers/url.test.d.ts

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

package/dist/rsc/helpers/uuid.d.ts

@@ -0,0 +1,2 @@
+export function uuid(): string;
+export function uuidv4(): string;

package/dist/rsc/helpers/visitorId.d.ts

@@ -0,0 +1,8 @@
+export function createVisitorId(): string;
+export function getVisitorId({ canTrack }: {
+    canTrack: any;
+}): string | null | undefined;
+export function setVisitorId({ id, canTrack }: {
+    id: any;
+    canTrack: any;
+}): void;