@builder.io/sdk-react 0.1.1 → 0.1.3

package/packages/rsc/src/index.js

@@ -0,0 +1,14 @@
+export * from "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track/index.js";
+export {
+  track
+};

package/packages/rsc/src/scripts/init-editing.js

@@ -0,0 +1,93 @@
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { register } from "../functions/register.js";
+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;
+const setupBrowserForEditing = (options = {}) => {
+  var _a, _b;
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
+  if (isBrowser()) {
+    (_a = window.parent) == null ? void 0 : _a.postMessage({
+      type: "builder.sdkInfo",
+      data: {
+        target: TARGET,
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
+      }
+    }, "*");
+    (_b = window.parent) == null ? void 0 : _b.postMessage({
+      type: "builder.updateContent",
+      data: {
+        options
+      }
+    }, "*");
+    window.addEventListener("message", ({ data }) => {
+      var _a2, _b2;
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+                  type: "builder.evaluateResult",
+                  data: { id, result: finalResult }
+                }, "*");
+              }).catch(console.error);
+            } else {
+              (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
+            }
+          }
+          break;
+        }
+      }
+    });
+  }
+};
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};

package/src/blocks/BaseText.jsx

@@ -1,12 +1,9 @@
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
-function BaseText(props) {
+
+export default function BaseText(props) {
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement("span", {
-    style: builderContext.inheritedStyles
-  }, props.text);
+
+  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
 }
-export {
-  BaseText as default
-};

package/src/blocks/button/button.jsx

@@ -1,34 +1,27 @@
-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));
 import * as React from "react";
-function Button(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
-    role: "button"
-  }, props.attributes), {
-    href: props.link,
-    target: props.openLinkInNewTab ? "_blank" : void 0
-  }), props.text)) : /* @__PURE__ */ React.createElement("button", __spreadValues({
-    className: "button-7028b0a4"
-  }, props.attributes), props.text), /* @__PURE__ */ React.createElement("style", null, `.button-7028b0a4 { 
-all: unset; }`));
+
+export default function Button(props) {
+  return (
+    <>
+      {props.link ? (
+        <>
+          <a
+            role="button"
+            {...props.attributes}
+            href={props.link}
+            target={props.openLinkInNewTab ? "_blank" : undefined}
+          >
+            {props.text}
+          </a>
+        </>
+      ) : (
+        <button className="button-7028b0a4" {...props.attributes}>
+          {props.text}
+        </button>
+      )}
+      <style>{`.button-7028b0a4 {
+all: unset;
+}`}</style>
+    </>
+  );
 }
-export {
-  Button as default
-};

package/src/blocks/columns/columns.jsx

@@ -1,55 +1,49 @@
-var __defProp = Object.defineProperty;
-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;
-};
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.jsx";
+import RenderBlocks from "../../components/render-blocks.js";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
+import RenderInlinedStyles from "../../components/render-inlined-styles.js";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
-function Columns(props) {
-  var _a;
+
+export default function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
+
   function getColumns() {
     return props.columns || [];
   }
+
   function getWidth(index) {
-    var _a2;
     const columns = getColumns();
-    return ((_a2 = columns[index]) == null ? void 0 : _a2.width) || 100 / columns.length;
+    return columns[index]?.width || 100 / columns.length;
   }
+
   function getColumnCssWidth(index) {
     const columns = getColumns();
     const gutterSize = getGutterSize();
-    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
+
   function maybeApplyForTablet(prop) {
     const _stackColumnsAt = props.stackColumnsAt || "tablet";
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
+
   function columnsCssVars() {
-    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    const flexDir =
+      props.stackColumnsAt === "never"
+        ? "inherit"
+        : props.reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
     return {
       "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
     };
   }
+
   function columnCssVars() {
     const width = "100%";
     const marginLeft = "0";
@@ -57,37 +51,42 @@ function Columns(props) {
       "--column-width": width,
       "--column-margin-left": marginLeft,
       "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
     };
   }
+
   function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(
+      props.customBreakpoints || {}
+    );
     return breakpointSizes[size].max;
   }
+
   function columnStyleObjects() {
     return {
       columns: {
         small: {
           flexDirection: "var(--flex-dir)",
-          alignItems: "stretch"
+          alignItems: "stretch",
         },
         medium: {
           flexDirection: "var(--flex-dir-tablet)",
-          alignItems: "stretch"
-        }
+          alignItems: "stretch",
+        },
       },
       column: {
         small: {
           width: "var(--column-width) !important",
-          marginLeft: "var(--column-margin-left) !important"
+          marginLeft: "var(--column-margin-left) !important",
         },
         medium: {
           width: "var(--column-width-tablet) !important",
-          marginLeft: "var(--column-margin-left-tablet) !important"
-        }
-      }
+          marginLeft: "var(--column-margin-left-tablet) !important",
+        },
+      },
     };
   }
+
   function columnsStyles() {
     return `
       @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
@@ -111,38 +110,63 @@ function Columns(props) {
       },
     `;
   }
+
   function reactNativeColumnsStyles() {
     return columnStyleObjects.columns.small;
   }
+
   function reactNativeColumnStyles() {
     return columnStyleObjects.column.small;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: `builder-columns ${props.builderBlock.id}-breakpoints div-bda7d4e0`,
-    style: __spreadValues(__spreadValues({}, TARGET === "reactNative" ? reactNativeColumnsStyles() : {}), columnsCssVars())
-  }, TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: columnsStyles()
-  })) : null, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-bda7d4e0-2",
-    style: __spreadValues(__spreadValues({
-      width: getColumnCssWidth(index),
-      marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
-    }, TARGET === "reactNative" ? reactNativeColumnStyles() : {}), columnCssVars()),
-    key: index
-  }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: column.blocks,
-    path: `component.options.columns.${index}.blocks`,
-    parent: props.builderBlock.id,
-    styleProp: {
-      flexGrow: "1"
-    }
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-bda7d4e0 { 
+
+  return (
+    <>
+      <div
+        className={
+          `builder-columns ${props.builderBlock.id}-breakpoints` +
+          " div-bda7d4e0"
+        }
+        style={{
+          ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+          ...columnsCssVars(),
+        }}
+      >
+        {TARGET !== "reactNative" ? (
+          <>
+            <RenderInlinedStyles styles={columnsStyles()} />
+          </>
+        ) : null}
+
+        {props.columns?.map((column, index) => (
+          <div
+            className="builder-column div-bda7d4e0-2"
+            style={{
+              width: getColumnCssWidth(index),
+              marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+              ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
+              ...columnCssVars(),
+            }}
+            key={index}
+          >
+            <RenderBlocks
+              blocks={column.blocks}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+              styleProp={{
+                flexGrow: "1",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      <style>{`.div-bda7d4e0 {
 display: flex;
-line-height: normal; }.div-bda7d4e0-2 { 
+line-height: normal;
+}.div-bda7d4e0-2 {
 display: flex;
 flex-direction: column;
-align-items: stretch; }`));
+align-items: stretch;
+}`}</style>
+    </>
+  );
 }
-export {
-  Columns as default
-};

package/src/blocks/custom-code/custom-code.jsx

@@ -1,11 +1,19 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-function CustomCode(props) {
+
+export default function CustomCode(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
   const [scriptsRun, setScriptsRun] = useState(() => []);
+
   function findAndRunScripts() {
-    if (elem.current && elem.current.getElementsByTagName && typeof window !== "undefined") {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (
+      elem.current &&
+      elem.current.getElementsByTagName &&
+      typeof window !== "undefined"
+    ) {
       const scripts = elem.current.getElementsByTagName("script");
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -18,11 +26,14 @@ function CustomCode(props) {
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
-        } else if (!script.type || [
-          "text/javascript",
-          "application/javascript",
-          "application/ecmascript"
-        ].includes(script.type)) {
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
           }
@@ -36,15 +47,18 @@ function CustomCode(props) {
       }
     }
   }
+
   useEffect(() => {
     findAndRunScripts();
   }, []);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: elem,
-    className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
-    dangerouslySetInnerHTML: { __html: props.code }
-  });
+
+  return (
+    <div
+      ref={elem}
+      className={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
 }
-export {
-  CustomCode as default
-};

package/src/blocks/embed/embed.jsx

@@ -1,14 +1,17 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";
-function Embed(props) {
+
+export default function Embed(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
   const [scriptsRun, setScriptsRun] = useState(() => []);
+
   const [ranInitFn, setRanInitFn] = useState(() => false);
+
   function findAndRunScripts() {
-    if (!elem.current || !elem.current.getElementsByTagName)
-      return;
+    if (!elem.current || !elem.current.getElementsByTagName) return;
     const scripts = elem.current.getElementsByTagName("script");
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
@@ -28,18 +31,19 @@ function Embed(props) {
       }
     }
   }
+
   useEffect(() => {
     if (elem.current && !ranInitFn) {
       setRanInitFn(true);
       findAndRunScripts();
     }
   }, [elem.current, ranInitFn]);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "builder-embed",
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: props.content }
-  });
+
+  return (
+    <div
+      className="builder-embed"
+      ref={elem}
+      dangerouslySetInnerHTML={{ __html: props.content }}
+    />
+  );
 }
-export {
-  Embed as default
-};