@builder.io/sdk-react 0.1.2 → 0.1.4

package/dist/rsc/index.js

@@ -0,0 +1,12 @@
+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/dist/rsc/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/dist/rsc/types/builder-block.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/builder-content.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/can-track.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/components.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/deep-partial.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/element.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/targets.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/types/typescript.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "src/index.js",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.js"
     },
     "./rsc": {
-      "import": "./packages/_rsc/src/index.js",
-      "require": "./packages/_rsc/src/index.js"
+      "import": "./dist/rsc/index.js",
+      "require": "./dist/rsc/index.js"
     }
   },
   "scripts": {
-    "build": "echo 'no need to build react SDK'",
+    "build:react": "tsc -p ./tsconfig.react.json",
+    "build:rsc": "tsc -p ./tsconfig.rsc.json",
+    "build": "yarn run build:react && yarn run build:rsc",
     "release:patch": "yarn run build && npm version patch && npm publish",
     "release:minor": "yarn run build && npm version minor && npm publish",
     "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
@@ -25,5 +27,8 @@
   },
   "devDependencies": {
     "react": "^18.2.0"
+  },
+  "dependencies": {
+    "typescript": "^4.9.4"
   }
 }

package/packages/_rsc/src/blocks/BaseText.jsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import BuilderContext from "../context/builder.context.js";
+
+export default function BaseText(props) {
+  const _context = { ...props["_context"] };
+
+  const builderContext = _context["BuilderContext"];
+
+  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export default function Button(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <>
+      {props.link ? (
+        <>
+          <a
+            role="button"
+            {...props.attributes}
+            href={props.link}
+            target={props.openLinkInNewTab ? "_blank" : undefined}
+          >
+            {props.text}
+          </a>
+        </>
+      ) : (
+        <button className="button-12870b9c" {...props.attributes}>
+          {props.text}
+        </button>
+      )}
+      <style>{`.button-12870b9c {
+all: unset;
+}`}</style>
+    </>
+  );
+}

package/packages/_rsc/src/blocks/columns/{columns.js → columns.jsx}

@@ -1,28 +1,13 @@
-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.js";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.js";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
-function Columns(props) {
-  var _a;
-  const _context = __spreadValues({}, props["_context"]);
+
+export default function Columns(props) {
+  const _context = { ...props["_context"] };
+
   const state = {
     getGutterSize() {
       return typeof props.space === "number" ? props.space || 0 : 20;
@@ -31,14 +16,14 @@ function Columns(props) {
       return props.columns || [];
     },
     getWidth(index) {
-      var _a2;
       const columns = state.getColumns();
-      return ((_a2 = columns[index]) == null ? void 0 : _a2.width) || 100 / columns.length;
+      return columns[index]?.width || 100 / columns.length;
     },
     getColumnCssWidth(index) {
       const columns = state.getColumns();
       const gutterSize = state.getGutterSize();
-      const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+      const subtractWidth =
+        (gutterSize * (columns.length - 1)) / columns.length;
       return `calc(${state.getWidth(index)}% - ${subtractWidth}px)`;
     },
     maybeApplyForTablet(prop) {
@@ -46,10 +31,15 @@ function Columns(props) {
       return _stackColumnsAt === "tablet" ? prop : "inherit";
     },
     get 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": state.maybeApplyForTablet(flexDir)
+        "--flex-dir-tablet": state.maybeApplyForTablet(flexDir),
       };
     },
     get columnCssVars() {
@@ -59,11 +49,13 @@ function Columns(props) {
         "--column-width": width,
         "--column-margin-left": marginLeft,
         "--column-width-tablet": state.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft)
+        "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft),
       };
     },
     getWidthForBreakpointSize(size) {
-      const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+      const breakpointSizes = getSizesForBreakpoints(
+        props.customBreakpoints || {}
+      );
       return breakpointSizes[size].max;
     },
     get columnStyleObjects() {
@@ -71,23 +63,23 @@ function Columns(props) {
         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",
+          },
+        },
       };
     },
     get columnsStyles() {
@@ -118,36 +110,63 @@ function Columns(props) {
     },
     get reactNativeColumnStyles() {
       return this.columnStyleObjects.column.small;
-    }
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: `builder-columns ${props.builderBlock.id}-breakpoints div-540739f0`,
-    style: __spreadValues(__spreadValues({}, TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}), state.columnsCssVars)
-  }, TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: state.columnsStyles,
-    _context
-  })) : null, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-540739f0-2",
-    style: __spreadValues(__spreadValues({
-      width: state.getColumnCssWidth(index),
-      marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`
-    }, TARGET === "reactNative" ? state.reactNativeColumnStyles : {}), state.columnCssVars),
-    key: index
-  }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: column.blocks,
-    path: `component.options.columns.${index}.blocks`,
-    parent: props.builderBlock.id,
-    styleProp: {
-      flexGrow: "1"
     },
-    _context
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-540739f0 { 
+  };
+
+  return (
+    <>
+      <div
+        className={
+          `builder-columns ${props.builderBlock.id}-breakpoints` +
+          " div-540739f0"
+        }
+        style={{
+          ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
+          ...state.columnsCssVars,
+        }}
+      >
+        {TARGET !== "reactNative" ? (
+          <>
+            <RenderInlinedStyles
+              styles={state.columnsStyles}
+              _context={_context}
+            />
+          </>
+        ) : null}
+
+        {props.columns?.map((column, index) => (
+          <div
+            className="builder-column div-540739f0-2"
+            style={{
+              width: state.getColumnCssWidth(index),
+              marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+              ...(TARGET === "reactNative"
+                ? state.reactNativeColumnStyles
+                : {}),
+              ...state.columnCssVars,
+            }}
+            key={index}
+          >
+            <RenderBlocks
+              blocks={column.blocks}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+              styleProp={{
+                flexGrow: "1",
+              }}
+              _context={_context}
+            />
+          </div>
+        ))}
+      </div>
+      <style>{`.div-540739f0 {
 display: flex;
-line-height: normal; }.div-540739f0-2 { 
+line-height: normal;
+}.div-540739f0-2 {
 display: flex;
 flex-direction: column;
-align-items: stretch; }`));
+align-items: stretch;
+}`}</style>
+    </>
+  );
 }
-export {
-  Columns as default
-};

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export default function CustomCode(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    scriptsInserted: [],
+    scriptsRun: [],
+    findAndRunScripts() {
+      // TODO: Move this function to standalone one in '@builder.io/utils'
+      if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+        const scripts = elem.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+          const script = scripts[i];
+          if (script.src) {
+            if (state.scriptsInserted.includes(script.src)) {
+              continue;
+            }
+            state.scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+          } else if (
+            !script.type ||
+            [
+              "text/javascript",
+              "application/javascript",
+              "application/ecmascript",
+            ].includes(script.type)
+          ) {
+            if (state.scriptsRun.includes(script.innerText)) {
+              continue;
+            }
+            try {
+              state.scriptsRun.push(script.innerText);
+              new Function(script.innerText)();
+            } catch (error) {
+              console.warn("`CustomCode`: Error running script:", error);
+            }
+          }
+        }
+      }
+    },
+  };
+
+  return (
+    <div
+      className={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}

package/packages/_rsc/src/blocks/embed/embed.jsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { isJsScript } from "./helpers.js";
+
+export default function Embed(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    scriptsInserted: [],
+    scriptsRun: [],
+    ranInitFn: false,
+    findAndRunScripts() {
+      if (!elem || !elem.getElementsByTagName) return;
+      const scripts = elem.getElementsByTagName("script");
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (script.src && !state.scriptsInserted.includes(script.src)) {
+          state.scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          isJsScript(script) &&
+          !state.scriptsRun.includes(script.innerText)
+        ) {
+          try {
+            state.scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
+          }
+        }
+      }
+    },
+  };
+
+  return (
+    <div
+      className="builder-embed"
+      dangerouslySetInnerHTML={{ __html: props.content }}
+    />
+  );
+}