@builder.io/sdk-react 0.1.1 → 0.1.3

package/src/components/render-blocks.jsx

@@ -2,62 +2,88 @@ 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.jsx";
-import RenderBlock from "./render-block/render-block.jsx";
-function RenderBlocks(props) {
-  var _a, _b;
+import BlockStyles from "./render-block/block-styles.js";
+import RenderBlock from "./render-block/render-block.js";
+
+export default function RenderBlocks(props) {
   function className() {
-    var _a2;
-    return "builder-blocks" + (!((_a2 = props.blocks) == null ? void 0 : _a2.length) ? " no-blocks" : "");
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
+
   function onClick() {
-    var _a2, _b2;
-    if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
-        type: "builder.clickEmptyBlocks",
-        data: {
-          parentElementId: props.parent,
-          dataPath: props.path
-        }
-      }, "*");
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
     }
   }
+
   function onMouseEnter() {
-    var _a2, _b2;
-    if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
-        type: "builder.hoverEmptyBlocks",
-        data: {
-          parentElementId: props.parent,
-          dataPath: props.path
-        }
-      }, "*");
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
     }
   }
+
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: className() + " div-05727d92",
-    "builder-path": props.path,
-    "builder-parent-id": props.parent,
-    dataSet: {
-      class: className()
-    },
-    style: props.styleProp,
-    onClick: (event) => onClick(),
-    onMouseEnter: (event) => onMouseEnter()
-  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: "render-block-" + block.id,
-    block,
-    context: builderContext
-  }))) : null, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = props.blocks) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(BlockStyles, {
-    key: "block-style-" + block.id,
-    block,
-    context: builderContext
-  }))) : null), /* @__PURE__ */ React.createElement("style", null, `.div-05727d92 { 
+
+  return (
+    <>
+      <div
+        className={className() + " div-05727d92"}
+        builder-path={props.path}
+        builder-parent-id={props.parent}
+        dataSet={{
+          class: className(),
+        }}
+        style={props.styleProp}
+        onClick={(event) => onClick()}
+        onMouseEnter={(event) => onMouseEnter()}
+      >
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+                context={builderContext}
+              />
+            ))}
+          </>
+        ) : null}
+
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={builderContext}
+              />
+            ))}
+          </>
+        ) : null}
+      </div>
+      <style>{`.div-05727d92 {
 display: flex;
 flex-direction: column;
-align-items: stretch; }`));
+align-items: stretch;
+}`}</style>
+    </>
+  );
 }
-export {
-  RenderBlocks as default
-};

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

@@ -1,7 +1,5 @@
 import * as React from "react";
-function BuilderEditing(props) {
-  return /* @__PURE__ */ React.createElement("div", null);
+
+export default function BuilderEditing(props) {
+  return <div />;
 }
-export {
-  BuilderEditing as default
-};

package/src/components/render-content/components/render-styles.jsx

@@ -1,11 +1,14 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.jsx";
-function RenderContentStyles(props) {
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+
+export default function RenderContentStyles(props) {
   function getCssFromFont(font) {
-    var _a, _b;
-    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    // 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 = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    const url = font.fileUrl ?? font?.files?.regular;
     let str = "";
     if (url && family && name) {
       str += `
@@ -23,6 +26,7 @@ function RenderContentStyles(props) {
         if (!isNumber) {
           continue;
         }
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) {
           str += `
@@ -38,21 +42,23 @@ function RenderContentStyles(props) {
     }
     return str;
   }
+
   function getFontCss({ customFonts }) {
-    var _a;
-    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+    // 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 || ""}
 ${getFontCss({
-      customFonts: props.customFonts
-    })}`;
+  customFonts: props.customFonts,
+})}`;
   }
-  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: injectedStyles()
-  });
+
+  return <RenderInlinedStyles styles={injectedStyles()} />;
 }
-export {
-  RenderContentStyles as default
-};

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

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