@builder.io/sdk-react 0.4.4 → 0.5.0

package/dist/scripts/init-editing.js

@@ -0,0 +1,110 @@
+import { SDK_VERSION } from '../constants/sdk-version.js';
+import { TARGET } from '../constants/target.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { register } from '../functions/register.js';
+export const registerInsertMenu = () => {
+    register('insertMenu', {
+        name: '_default',
+        default: true,
+        items: [{
+                name: 'Box'
+            }, {
+                name: 'Text'
+            }, {
+                name: 'Image'
+            }, {
+                name: 'Columns'
+            }, ...(TARGET === 'reactNative' ? [] : [{
+                    name: 'Core:Section'
+                }, {
+                    name: 'Core:Button'
+                }, {
+                    name: 'Embed'
+                }, {
+                    name: 'Custom Code'
+                }])]
+    });
+};
+let isSetupForEditing = false;
+export const setupBrowserForEditing = (options = {}) => {
+    if (isSetupForEditing) {
+        return;
+    }
+    isSetupForEditing = true;
+    if (isBrowser()) {
+        window.parent?.postMessage({
+            type: 'builder.sdkInfo',
+            data: {
+                target: TARGET,
+                version: SDK_VERSION,
+                supportsPatchUpdates: false,
+                // Supports builder-model="..." attribute which is needed to
+                // scope our '+ add block' button styling
+                supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true
+            }
+        }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options
+            }
+        }, '*');
+        window.addEventListener('message', ({ data }) => {
+            if (!data?.type) {
+                return;
+            }
+            switch (data.type) {
+                case 'builder.evaluate':
+                    {
+                        const text = data.data.text;
+                        const args = data.data.arguments || [];
+                        const id = data.data.id;
+                        // tslint:disable-next-line:no-function-constructor-with-string-args
+                        const fn = new Function(text);
+                        let result;
+                        let error = null;
+                        try {
+                            // eslint-disable-next-line prefer-spread
+                            result = fn.apply(null, args);
+                        }
+                        catch (err) {
+                            error = err;
+                        }
+                        if (error) {
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateError',
+                                data: {
+                                    id,
+                                    error: error.message
+                                }
+                            }, '*');
+                        }
+                        else {
+                            if (result && typeof result.then === 'function') {
+                                result.then(finalResult => {
+                                    window.parent?.postMessage({
+                                        type: 'builder.evaluateResult',
+                                        data: {
+                                            id,
+                                            result: finalResult
+                                        }
+                                    }, '*');
+                                }).catch(console.error);
+                            }
+                            else {
+                                window.parent?.postMessage({
+                                    type: 'builder.evaluateResult',
+                                    data: {
+                                        result,
+                                        id
+                                    }
+                                }, '*');
+                            }
+                        }
+                        break;
+                    }
+            }
+        });
+    }
+};

package/dist/types/builder-props.d.ts

@@ -0,0 +1,9 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../context/types.js';
+import type { BuilderBlock } from './builder-block.js';
+export type PropsWithBuilderData<T> = T & {
+    builderBlock: BuilderBlock;
+    builderContext: BuilderContextInterface;
+};
+export type BuilderComponentsProp = {
+    builderComponents: RegisteredComponents;
+};

package/dist/{sdk/types → types}/components.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderElement } from './element';
-import type { Input } from './input';
+import type { BuilderElement } from './element.js';
+import type { Input } from './input.js';
 export interface ComponentInfo {
     /**
      * Name your component something unique, e.g. 'MyButton'. You can override built-in components
@@ -33,6 +33,12 @@ export interface ComponentInfo {
      * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
      */
     noWrap?: boolean;
+    /**
+     * TO-DO: make this optional only for RSC SDK.
+     *
+     * Set this to `true` if your component is a React Server Component (RSC).
+     */
+    isRSC?: boolean;
     /**
      * Default children
      */

package/dist/types/enforced-partials.d.ts

@@ -0,0 +1,21 @@
+import type { Prettify } from './typescript.js';
+type OptionalFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+};
+type RequiredFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+};
+type Enforced<T> = {
+    [K in keyof T]-?: T[K];
+};
+type AndUndefined<T> = {
+    [K in keyof T]: T[K] | undefined;
+};
+/**
+ * Enforce that all optional fields are undefined
+ * @example
+ * type Foo = { a: string, b?: number }
+ * type Bar = EnforcePartials<Foo> // { a: string, b: number | undefined }
+ */
+export type EnforcePartials<From> = Prettify<AndUndefined<Enforced<OptionalFieldsOnly<From>>> & RequiredFieldsOnly<From>>;
+export {};

package/dist/types/targets.d.ts

@@ -0,0 +1 @@
+export type Target = 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc';

package/dist/{server/types → types}/typescript.d.ts

@@ -3,3 +3,9 @@ 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;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type PropsWithChildren<P> = P & {
+    children?: any;
+};

package/package.json

@@ -1,30 +1,23 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.4.4",
-  "type": "module",
+  "version": "0.5.0",
   "files": [
     "dist"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/sdk/index.js",
-    "./server": "./dist/sdk/functions/get-content/index.js"
+    ".": "./dist/index.js",
+    "./server": "./dist/functions/get-content/index.js"
   },
   "scripts": {
-    "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"
+    "build": "tsc"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
     "react": "^18.2.0",
-    "rollup-plugin-preserve-directives": "^0.1.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.3.3",
-    "vite-plugin-dts": "^2.3.0"
+    "typescript": "^5.1.6"
   }
 }

package/dist/sdk/blocks/button/component-info.d.ts

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

package/dist/sdk/blocks/columns/columns.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-type Column = {
-    blocks: BuilderBlock[];
-    width?: number;
-};
-type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps {
-    columns?: Column[];
-    builderBlock: BuilderBlock;
-    space?: number;
-    stackColumnsAt?: StackColumnsAt;
-    reverseColumnsWhenStacked?: boolean;
-}
-import type { BuilderBlock } from "../../types/builder-block";
-declare function Columns(props: ColumnProps): JSX.Element;
-export default Columns;

package/dist/sdk/blocks/columns/component-info.d.ts

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

package/dist/sdk/blocks/custom-code/component-info.d.ts

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

package/dist/sdk/blocks/embed/component-info.d.ts

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

package/dist/sdk/blocks/embed/helpers.js

@@ -1,6 +0,0 @@
-const SCRIPT_MIME_TYPES = [
-    'text/javascript',
-    'application/javascript',
-    'application/ecmascript',
-];
-export const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);

package/dist/sdk/blocks/form/component-info.d.ts

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

package/dist/sdk/blocks/form/form.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-interface BuilderElement {
-}
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-export interface FormProps {
-    attributes?: any;
-    name?: string;
-    action?: string;
-    validate?: boolean;
-    method?: string;
-    builderBlock?: BuilderElement;
-    sendSubmissionsTo?: string;
-    sendSubmissionsToEmail?: string;
-    sendWithJs?: boolean;
-    contentType?: string;
-    customHeaders?: {
-        [key: string]: string;
-    };
-    successUrl?: string;
-    previewState?: FormState;
-    successMessage?: BuilderElement[];
-    errorMessage?: BuilderElement[];
-    sendingMessage?: BuilderElement[];
-    resetFormOnSubmit?: boolean;
-    errorMessagePath?: string;
-}
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-export type FormState = "unsubmitted" | "sending" | "success" | "error";
-declare function FormComponent(props: FormProps): JSX.Element;
-export default FormComponent;

package/dist/sdk/blocks/form/form.js

@@ -1,203 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block";
-import BuilderBlocks from "../../components/render-blocks";
-import { isEditing } from "../../functions/is-editing.js";
-function FormComponent(props) {
-    const formRef = useRef(null);
-    const [formState, setFormState] = useState(() => "unsubmitted");
-    const [responseData, setResponseData] = useState(() => null);
-    const [formErrorMessage, setFormErrorMessage] = useState(() => "");
-    function submissionState() {
-        return (isEditing() && props.previewState) || formState;
-    }
-    function onSubmit(event) {
-        const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-        if (props.sendSubmissionsTo === "zapier") {
-            event.preventDefault();
-        }
-        else if (sendWithJs) {
-            if (!(props.action || props.sendSubmissionsTo === "email")) {
-                event.preventDefault();
-                return;
-            }
-            event.preventDefault();
-            const el = event.currentTarget;
-            const headers = props.customHeaders || {};
-            let body;
-            const formData = new FormData(el);
-            // TODO: maybe support null
-            const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea"))
-                .filter((el) => !!el.name)
-                .map((el) => {
-                let value;
-                const key = el.name;
-                if (el instanceof HTMLInputElement) {
-                    if (el.type === "radio") {
-                        if (el.checked) {
-                            value = el.name;
-                            return {
-                                key,
-                                value,
-                            };
-                        }
-                    }
-                    else if (el.type === "checkbox") {
-                        value = el.checked;
-                    }
-                    else if (el.type === "number" || el.type === "range") {
-                        const num = el.valueAsNumber;
-                        if (!isNaN(num)) {
-                            value = num;
-                        }
-                    }
-                    else if (el.type === "file") {
-                        // TODO: one vs multiple files
-                        value = el.files;
-                    }
-                    else {
-                        value = el.value;
-                    }
-                }
-                else {
-                    value = el.value;
-                }
-                return {
-                    key,
-                    value,
-                };
-            });
-            let contentType = props.contentType;
-            if (props.sendSubmissionsTo === "email") {
-                contentType = "multipart/form-data";
-            }
-            Array.from(formPairs).forEach(({ value }) => {
-                if (value instanceof File ||
-                    (Array.isArray(value) && value[0] instanceof File) ||
-                    value instanceof FileList) {
-                    contentType = "multipart/form-data";
-                }
-            });
-            // TODO: send as urlEncoded or multipart by default
-            // because of ease of use and reliability in browser API
-            // for encoding the form?
-            if (contentType !== "application/json") {
-                body = formData;
-            }
-            else {
-                // Json
-                const json = {};
-                Array.from(formPairs).forEach(({ value, key }) => {
-                    set(json, key, value);
-                });
-                body = JSON.stringify(json);
-            }
-            if (contentType && contentType !== "multipart/form-data") {
-                if (
-                /* Zapier doesn't allow content-type header to be sent from browsers */ !(sendWithJs && props.action?.includes("zapier.com"))) {
-                    headers["content-type"] = contentType;
-                }
-            }
-            const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-            if (formRef.current) {
-                formRef.current.dispatchEvent(presubmitEvent);
-                if (presubmitEvent.defaultPrevented) {
-                    return;
-                }
-            }
-            setFormState("sending");
-            const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-            fetch(props.sendSubmissionsTo === "email"
-                ? formUrl
-                : props.action /* TODO: throw error if no action URL */, { body, headers, method: props.method || "post" }).then(async (res) => {
-                let body;
-                const contentType = res.headers.get("content-type");
-                if (contentType && contentType.indexOf("application/json") !== -1) {
-                    body = await res.json();
-                }
-                else {
-                    body = await res.text();
-                }
-                if (!res.ok && props.errorMessagePath) {
-                    /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath);
-                    if (message) {
-                        if (typeof message !== "string") {
-                            /* TODO: ideally convert json to yaml so it woul dbe like           error: - email has been taken */ message =
-                                JSON.stringify(message);
-                        }
-                        setFormErrorMessage(message);
-                    }
-                }
-                setResponseData(body);
-                setFormState(res.ok ? "success" : "error");
-                if (res.ok) {
-                    const submitSuccessEvent = new CustomEvent("submit:success", {
-                        detail: { res, body },
-                    });
-                    if (formRef.current) {
-                        formRef.current.dispatchEvent(submitSuccessEvent);
-                        if (submitSuccessEvent.defaultPrevented) {
-                            return;
-                        }
-                        /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) {
-                            formRef.current.reset();
-                        }
-                    }
-                    /* TODO: client side route event first that can be preventDefaulted */ if (props.successUrl) {
-                        if (formRef.current) {
-                            const event = new CustomEvent("route", {
-                                detail: { url: props.successUrl },
-                            });
-                            formRef.current.dispatchEvent(event);
-                            if (!event.defaultPrevented) {
-                                location.href = props.successUrl;
-                            }
-                        }
-                        else {
-                            location.href = props.successUrl;
-                        }
-                    }
-                }
-            }, (err) => {
-                const submitErrorEvent = new CustomEvent("submit:error", {
-                    detail: { error: err },
-                });
-                if (formRef.current) {
-                    formRef.current.dispatchEvent(submitErrorEvent);
-                    if (submitErrorEvent.defaultPrevented) {
-                        return;
-                    }
-                }
-                setResponseData(err);
-                setFormState("error");
-            });
-        }
-    }
-    const builderContext = useContext(BuilderContext);
-    return (React.createElement(React.Fragment, null,
-        " ",
-        React.createElement("form", { validate: props.validate, ref: formRef, action: !props.sendWithJs && props.action, method: props.method, name: props.name, onSubmit: (event) => onSubmit(event), ...props.attributes },
-            " ",
-            props.builderBlock && props.builderBlock.children ? (React.createElement(React.Fragment, null, props.builderBlock?.children?.map((block) => (React.createElement(RenderBlock, { block: block, context: builderContext }))))) : null,
-            " ",
-            submissionState() === "error" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "errorMessage", blocks: props.errorMessage }))) : null,
-            " ",
-            submissionState() === "sending" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
-            " ",
-            submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-0217077c" },
-                    " ",
-                    JSON.stringify(responseData, null, 2),
-                    " "))) : null,
-            " ",
-            submissionState() === "success" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
-            " "),
-        " ",
-        React.createElement("style", null, `.pre-0217077c { padding: 10px; color: red; text-align: center; }`),
-        " "));
-}
-export default FormComponent;

package/dist/sdk/blocks/fragment/component-info.d.ts

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

package/dist/sdk/blocks/image/component-info.d.ts

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

package/dist/sdk/blocks/img/component-info.d.ts

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

package/dist/sdk/blocks/input/component-info.d.ts

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

package/dist/sdk/blocks/raw-text/component-info.d.ts

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

package/dist/sdk/blocks/raw-text/raw-text.js

@@ -1,6 +0,0 @@
-'use client';
-import * as React from "react";
-function RawText(props) {
-    return (React.createElement("span", { className: props.attributes?.class || props.attributes?.className, dangerouslySetInnerHTML: { __html: props.text || "" } }));
-}
-export default RawText;

package/dist/sdk/blocks/section/component-info.d.ts

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

package/dist/sdk/blocks/select/component-info.d.ts

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

package/dist/sdk/blocks/submit-button/component-info.d.ts

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

package/dist/sdk/blocks/symbol/component-info.d.ts

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

package/dist/sdk/blocks/symbol/symbol.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-export interface SymbolInfo {
-    model?: string;
-    entry?: string;
-    data?: any;
-    content?: BuilderContent;
-    inline?: boolean;
-    dynamic?: boolean;
-}
-export interface SymbolProps {
-    symbol?: SymbolInfo;
-    dataOnly?: boolean;
-    dynamic?: boolean;
-    builderBlock?: BuilderBlock;
-    attributes?: any;
-    inheritState?: boolean;
-}
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-declare function Symbol(props: SymbolProps): JSX.Element;
-export default Symbol;

package/dist/sdk/blocks/symbol/symbol.js

@@ -1,69 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content";
-import BuilderContext from "../../context/builder.context.js";
-import { getContent } from "../../functions/get-content/index.js";
-import { TARGET } from "../../constants/target";
-import { logger } from "../../helpers/logger";
-function Symbol(props) {
-    const [className, setClassName] = useState(() => [
-        ...(TARGET === "vue2" || TARGET === "vue3"
-            ? Object.keys(props.attributes.class)
-            : [props.attributes.class]),
-        "builder-symbol",
-        props.symbol?.inline ? "builder-inline-symbol" : undefined,
-        props.symbol?.dynamic || props.dynamic
-            ? "builder-dynamic-symbol"
-            : undefined,
-    ]
-        .filter(Boolean)
-        .join(" "));
-    const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
-    function fetchContent() {
-        /**
-         * If:
-         * - we have a symbol prop
-         * - yet it does not have any content
-         * - and we have not already stored content from before
-         * - and it has a model name
-         *
-         * then we want to re-fetch the symbol content.
-         */
-        if (!contentToUse &&
-            props.symbol?.model &&
-            // This is a hack, we should not need to check for this, but it is needed for Svelte.
-            builderContext?.apiKey) {
-            getContent({
-                model: props.symbol.model,
-                apiKey: builderContext.apiKey,
-                apiVersion: builderContext.apiVersion,
-                query: {
-                    id: props.symbol.entry,
-                },
-            })
-                .then((response) => {
-                if (response) {
-                    setContentToUse(response);
-                }
-            })
-                .catch((err) => {
-                logger.error("Could not fetch symbol content: ", err);
-            });
-        }
-    }
-    const builderContext = useContext(BuilderContext);
-    useEffect(() => {
-        fetchContent();
-    }, []);
-    useEffect(() => {
-        fetchContent();
-    }, [props.symbol]);
-    return (React.createElement("div", { ...props.attributes, className: className },
-        React.createElement(RenderContent, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
-                ...props.symbol?.data,
-                ...builderContext.localState,
-                ...contentToUse?.data?.state,
-            }, model: props.symbol?.model, content: contentToUse })));
-}
-export default Symbol;

package/dist/sdk/blocks/text/component-info.d.ts

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

package/dist/sdk/blocks/textarea/component-info.d.ts

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

package/dist/sdk/blocks/util.d.ts

@@ -1,4 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-export declare const serializeFn: (fnValue: Function) => string;