@builder.io/sdk-react 0.1.3 → 0.1.5

package/dist/react/blocks/button/button.js

@@ -2,8 +2,8 @@ import * as React from "react";
 export default function Button(props) {
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
-            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-7028b0a4", ...props.attributes }, props.text)),
-        React.createElement("style", null, `.button-7028b0a4 {
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-66d34b93", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-66d34b93 {
 all: unset;
 }`)));
 }

package/dist/react/blocks/columns/columns.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 export default function Columns(props) {
@@ -105,13 +105,13 @@ export default function Columns(props) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-bda7d4e0", style: {
+                " div-46a0fd84", style: {
                 ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
                 ...columnsCssVars(),
             } },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-bda7d4e0-2", style: {
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-46a0fd84-2", style: {
                     width: getColumnCssWidth(index),
                     marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
                     ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
@@ -120,10 +120,10 @@ export default function Columns(props) {
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-bda7d4e0 {
+        React.createElement("style", null, `.div-46a0fd84 {
 display: flex;
 line-height: normal;
-}.div-bda7d4e0-2 {
+}.div-46a0fd84-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/blocks/form/form.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 export default function FormComponent(props) {
     const formRef = useRef(null);
@@ -187,7 +187,7 @@ export default function FormComponent(props) {
                 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-4bdc7532" },
+                React.createElement("pre", { className: "builder-form-error-text pre-0d1abaf2" },
                     " ",
                     JSON.stringify(responseData, null, 2),
                     " "))) : null,
@@ -196,6 +196,6 @@ export default function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
             " "),
         " ",
-        React.createElement("style", null, `.pre-4bdc7532 { padding: 10px; color: red; text-align: center; }`),
+        React.createElement("style", null, `.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`),
         " "));
 }

package/dist/react/blocks/image/image.js

@@ -51,25 +51,25 @@ export default function Image(props) {
                         ...aspectRatioCss(),
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-72859b6f", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
+                        " img-54289eda", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-72859b6f", style: {
+                React.createElement("div", { className: "builder-image-sizer div-54289eda", style: {
                         paddingTop: 
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                         props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-72859b6f-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-72859b6f {
+                React.createElement("div", { className: "div-54289eda-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-54289eda {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-72859b6f {
+}.div-54289eda {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-72859b6f-2 {
+}.div-54289eda-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/blocks/symbol/symbol.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+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";

package/dist/react/components/render-block/block-styles.js

@@ -3,7 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 export default function BlockStyles(props) {
     function useBlock() {
         return getProcessedBlock({

package/dist/react/components/render-block/render-block.js

@@ -5,12 +5,12 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 export default function RenderBlock(props) {
     const [component, setComponent] = useState(() => getComponent({
@@ -30,10 +30,26 @@ export default function RenderBlock(props) {
                 shouldEvaluateBindings: true,
             });
     }
+    function proxyState() {
+        if (typeof Proxy === "undefined") {
+            console.error("no Proxy available in this environment, cannot proxy state.");
+            return props.context.state;
+        }
+        const useState = new Proxy(props.context.state, {
+            set: (obj, prop, value) => {
+                // set the value on the state object, so that the event handler instantly gets the update.
+                obj[prop] = value;
+                // set the value in the context, so that the rest of the app gets the update.
+                props.context.setState?.(obj);
+                return true;
+            },
+        });
+        return useState;
+    }
     function actions() {
         return getBlockActions({
             block: useBlock(),
-            state: props.context.state,
+            state: proxyState(),
             context: props.context.context,
         });
     }
@@ -105,6 +121,7 @@ export default function RenderBlock(props) {
             state: props.context.state,
             content: props.context.content,
             context: props.context.context,
+            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };

package/dist/react/components/render-block/render-component.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 export default function RenderComponent(props) {
     const ComponentRefRef = props.componentRef;
     return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,

package/dist/react/components/render-block/render-repeated-block.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 export default function RenderRepeatedBlock(props) {
     return (React.createElement(BuilderContext.Provider, { value: {
             content: props.repeatContext.content,
             state: props.repeatContext.state,
+            setState: props.repeatContext.setState,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,

package/dist/react/components/render-blocks.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 export default function RenderBlocks(props) {
     function className() {
         return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -32,12 +32,12 @@ export default function RenderBlocks(props) {
     }
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-05727d92", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+        React.createElement("div", { className: className() + " div-297c34fa", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
                 class: className(),
             }, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-05727d92 {
+        React.createElement("style", null, `.div-297c34fa {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/react/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,51 @@
+const getCssFromFont = (font) => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+export { getCss, getFontCss };

package/dist/react/components/render-content/components/render-styles.js

@@ -1,59 +1,17 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import { useState } from "react";
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 export default function RenderContentStyles(props) {
-    function getCssFromFont(font) {
-        // TODO: compute what font sizes are used and only load those.......
-        const family = font.family +
-            (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-        const name = family.split(",")[0];
-        const url = font.fileUrl ?? font?.files?.regular;
-        let str = "";
-        if (url && family && name) {
-            str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-        }
-        if (font.files) {
-            for (const weight in font.files) {
-                const isNumber = String(Number(weight)) === weight;
-                if (!isNumber) {
-                    continue;
-                }
-                // TODO: maybe limit number loaded
-                const weightUrl = font.files[weight];
-                if (weightUrl && weightUrl !== url) {
-                    str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-                }
-            }
-        }
-        return str;
-    }
-    function getFontCss({ customFonts }) {
-        // TODO: flag for this
-        // if (!builder.allowCustomFonts) {
-        //   return '';
-        // }
-        // TODO: separate internal data from external
-        return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
-    }
-    function injectedStyles() {
-        return `
-${props.cssCode || ""}
+    const [injectedStyles, setInjectedStyles] = useState(() => `
+${getCss({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
 ${getFontCss({
-            customFonts: props.customFonts,
-        })}`;
-    }
-    return React.createElement(RenderInlinedStyles, { styles: injectedStyles() });
+        customFonts: props.customFonts,
+    })}
+`);
+    return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
 }

package/dist/react/components/render-content/index.js

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

package/dist/react/components/render-content/render-content.helpers.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getContextStateInitialValue = ({ content, data, locale }) => {
+    var _a, _b, _c;
+    const defaultValues = {};
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+        var _a2;
+        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+const getContentInitialValue = ({ content, data }) => {
+    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+        meta: content == null ? void 0 : content.meta
+    });
+};
+export { getContentInitialValue, getContextStateInitialValue };