@builder.io/sdk-react 0.1.3 → 0.1.5

package/packages/react/src/constants/builder-registered-components.js

@@ -14,40 +14,40 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: customCode }, customCodeInfo),
+  __spreadValues({ component: embed }, embedComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
   __spreadValues({ component: Img }, imgComponentInfo),
-  __spreadValues({ component: Text }, textComponentInfo),
-  __spreadValues({ component: Video }, videoComponentInfo),
-  __spreadValues({ component: Symbol }, symbolComponentInfo),
-  __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo),
-  __spreadValues({ component: embed }, embedComponentInfo),
-  __spreadValues({ component: customCode }, customCodeInfo)
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo)
 ];
 export {
   getDefaultRegisteredComponents

package/packages/react/src/context/builder.context.js

@@ -3,6 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
+  setState() {
+  },
   apiKey: null,
   registeredComponents: {},
   inheritedStyles: {}

package/packages/react/src/index-helpers/blocks-exports.js

@@ -1,22 +1,22 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
 export {
-  default7 as Button,
-  default2 as Columns,
-  default9 as Fragment,
-  default3 as Image,
-  default11 as RenderBlocks,
-  default10 as RenderContent,
+  default2 as Button,
+  default3 as Columns,
+  default4 as Fragment,
+  default5 as Image,
+  default6 as RenderBlocks,
+  default7 as RenderContent,
   default8 as Section,
-  default6 as Symbol,
-  default4 as Text,
-  default5 as Video
+  default9 as Symbol,
+  default10 as Text,
+  default11 as Video
 };

package/packages/rsc/src/blocks/button/button.jsx

@@ -17,11 +17,11 @@ export default function Button(props) {
           </a>
         </>
       ) : (
-        <button className="button-12870b9c" {...props.attributes}>
+        <button className="button-b25d5310" {...props.attributes}>
           {props.text}
         </button>
       )}
-      <style>{`.button-12870b9c {
+      <style>{`.button-b25d5310 {
 all: unset;
 }`}</style>
     </>

package/packages/rsc/src/blocks/columns/columns.jsx

@@ -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";
 
@@ -118,7 +118,7 @@ export default function Columns(props) {
       <div
         className={
           `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-540739f0"
+          " div-ca644030"
         }
         style={{
           ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
@@ -136,7 +136,7 @@ export default function Columns(props) {
 
         {props.columns?.map((column, index) => (
           <div
-            className="builder-column div-540739f0-2"
+            className="builder-column div-ca644030-2"
             style={{
               width: state.getColumnCssWidth(index),
               marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
@@ -159,10 +159,10 @@ export default function Columns(props) {
           </div>
         ))}
       </div>
-      <style>{`.div-540739f0 {
+      <style>{`.div-ca644030 {
 display: flex;
 line-height: normal;
-}.div-540739f0-2 {
+}.div-ca644030-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/rsc/src/blocks/form/form.jsx

@@ -1,6 +1,6 @@
 import * as React 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) {
@@ -237,7 +237,7 @@ export default function FormComponent(props) {
         ) : null}{" "}
         {state.submissionState === "error" && state.responseData ? (
           <>
-            <pre className="builder-form-error-text pre-105231da">
+            <pre className="builder-form-error-text pre-41e7c77e">
               {" "}
               {JSON.stringify(state.responseData, null, 2)}{" "}
             </pre>
@@ -253,7 +253,7 @@ export default function FormComponent(props) {
           </>
         ) : null}{" "}
       </form>{" "}
-      <style>{`.pre-105231da { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+      <style>{`.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`}</style>{" "}
     </>
   );
 }

package/packages/rsc/src/blocks/image/image.jsx

@@ -68,7 +68,7 @@ export default function Image(props) {
             className={
               "builder-image" +
               (props.className ? " " + props.className : "") +
-              " img-d6cf1f9c"
+              " img-5aa89e3a"
             }
             src={props.image}
             srcSet={state.srcSetToUse}
@@ -80,7 +80,7 @@ export default function Image(props) {
         !(props.builderBlock?.children?.length && props.fitContent) ? (
           <>
             <div
-              className="builder-image-sizer div-d6cf1f9c"
+              className="builder-image-sizer div-5aa89e3a"
               style={{
                 paddingTop:
                   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -96,18 +96,18 @@ export default function Image(props) {
 
         {!props.fitContent && props.children ? (
           <>
-            <div className="div-d6cf1f9c-2">{props.children}</div>
+            <div className="div-5aa89e3a-2">{props.children}</div>
           </>
         ) : null}
       </>
-      <style>{`.img-d6cf1f9c {
+      <style>{`.img-5aa89e3a {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-d6cf1f9c {
+}.div-5aa89e3a {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-d6cf1f9c-2 {
+}.div-5aa89e3a-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/rsc/src/blocks/symbol/symbol.jsx

@@ -1,5 +1,5 @@
 import * as React 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/packages/rsc/src/components/render-block/block-styles.jsx

@@ -6,7 +6,7 @@ import {
 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) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-block/render-block.jsx

@@ -4,16 +4,16 @@ 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) {
@@ -37,10 +37,29 @@ export default function RenderBlock(props) {
             shouldEvaluateBindings: true,
           });
     },
+    get 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;
+    },
     get actions() {
       return getBlockActions({
         block: state.useBlock,
-        state: props.context.state,
+        state: state.proxyState,
         context: props.context.context,
       });
     },
@@ -117,6 +136,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/packages/rsc/src/components/render-block/render-component.jsx

@@ -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 _context = { ...props["_context"] };

package/packages/rsc/src/components/render-block/render-repeated-block.jsx

@@ -1,6 +1,6 @@
 import * as React 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) {
   const _context = { ...props["_context"] };
@@ -8,6 +8,7 @@ export default function RenderRepeatedBlock(props) {
   _context.BuilderContext = {
     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/packages/rsc/src/components/render-blocks.jsx

@@ -1,8 +1,8 @@
 import * as React 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) {
   const _context = { ...props["_context"] };
@@ -46,7 +46,7 @@ export default function RenderBlocks(props) {
   return (
     <>
       <div
-        className={state.className + " div-4f307ff9"}
+        className={state.className + " div-d19f7a9a"}
         builder-path={props.path}
         builder-parent-id={props.parent}
         dataSet={{
@@ -80,7 +80,7 @@ export default function RenderBlocks(props) {
           </>
         ) : null}
       </div>
-      <style>{`.div-4f307ff9 {
+      <style>{`.div-d19f7a9a {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/rsc/src/components/render-content/builder-editing.jsx

@@ -1,7 +1,64 @@
-import * as React from "react";
+import React, { useEffect } from 'react';
+import { setupBrowserForEditing } from '../../scripts/init-editing.js';
+// import type { RegisteredComponent } from '../../context/types.js';
+// import type { BuilderContent } from '../../types/builder-content.js';
 
-export default function BuilderEditing(props) {
-  const _context = { ...props["_context"] };
+/**
+ * @typedef {object} RegisteredComponent
+ * @typedef {object} BuilderContent
+ * @typedef {(data: {data: object, key: string }) => void} OnUpdateCallback
+ * @typedef {{
+ *   model: string,
+ *   components?: RegisteredComponent[],
+ *   children: any,
+ *   onUpdate?: OnUpdateCallback,
+ * }} BuilderEditingProps
+ */
 
-  return <div />;
+/**
+ * @param {BuilderEditingProps} props
+ */
+export function BuilderEditingWrapper(props) {
+  useEffect(() => {
+    setupBrowserForEditing();
+
+    if (props.components) {
+      for (const component of props.components) {
+        window.parent.postMessage(
+          {
+            type: 'builder.registerComponent',
+            data: component,
+          },
+          '*'
+        );
+      }
+    }
+
+    /**
+     *
+     * @param {MessageEvent} e
+     */
+    function onMessage(e) {
+      switch (e.data?.type) {
+        case 'builder.contentUpdate': {
+          props.onUpdate?.(e.data.data);
+        }
+      }
+    }
+
+    addEventListener('message', onMessage);
+
+    return () => window.removeEventListener('message', onMessage);
+  }, [props.model]);
+  return (
+    <div
+      onMouseDown={(e) => e.preventDefault()}
+      onClickCapture={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      {props.children}
+    </div>
+  );
 }

package/packages/rsc/src/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,57 @@
+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/packages/rsc/src/components/render-content/components/render-styles.jsx

@@ -1,67 +1,21 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 
 export default function RenderContentStyles(props) {
   const _context = { ...props["_context"] };
 
   const state = {
-    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;
-    },
-    getFontCss({ customFonts }) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return (
-        customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
-      );
-    },
-    get injectedStyles() {
-      return `
-${props.cssCode || ""}
-${state.getFontCss({
+    injectedStyles: `
+${getCss({
+  cssCode: props.cssCode,
+  contentId: props.contentId,
+})}
+${getFontCss({
   customFonts: props.customFonts,
-})}`;
-    },
+})}
+`,
   };
 
   return (

package/packages/rsc/src/components/render-content/index.js

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

package/packages/rsc/src/components/render-content/render-content.helpers.js

@@ -0,0 +1,48 @@
+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
+};