@builder.io/sdk-react 0.1.2 → 0.1.3

package/src/blocks/input/input.jsx

@@ -1,35 +1,19 @@
-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";
 import { isEditing } from "../../functions/is-editing.js";
-function FormInputComponent(props) {
-  return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props.attributes), {
-    key: isEditing() && props.defaultValue ? props.defaultValue : "default-key",
-    placeholder: props.placeholder,
-    type: props.type,
-    name: props.name,
-    value: props.value,
-    defaultValue: props.defaultValue,
-    required: props.required
-  }));
+
+export default function FormInputComponent(props) {
+  return (
+    <input
+      {...props.attributes}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      placeholder={props.placeholder}
+      type={props.type}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      required={props.required}
+    />
+  );
 }
-export {
-  FormInputComponent as default
-};

package/src/blocks/raw-text/raw-text.jsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-function RawText(props) {
-  var _a, _b;
-  return /* @__PURE__ */ React.createElement("span", {
-    className: ((_a = props.attributes) == null ? void 0 : _a.class) || ((_b = props.attributes) == null ? void 0 : _b.className),
-    dangerouslySetInnerHTML: { __html: props.text || "" }
-  });
+
+export default function RawText(props) {
+  return (
+    <span
+      className={props.attributes?.class || props.attributes?.className}
+      dangerouslySetInnerHTML={{ __html: props.text || "" }}
+    />
+  );
 }
-export {
-  RawText as default
-};

package/src/blocks/section/section.jsx

@@ -1,39 +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 SectionComponent(props) {
-  return /* @__PURE__ */ React.createElement("section", __spreadProps(__spreadValues({}, props.attributes), {
-    style: {
-      width: "100%",
-      alignSelf: "stretch",
-      flexGrow: "1",
-      boxSizing: "border-box",
-      maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      marginLeft: "auto",
-      marginRight: "auto"
-    }
-  }), props.children);
+
+export default function SectionComponent(props) {
+  return (
+    <section
+      {...props.attributes}
+      style={{
+        width: "100%",
+        alignSelf: "stretch",
+        flexGrow: "1",
+        boxSizing: "border-box",
+        maxWidth: `${
+          props.maxWidth && typeof props.maxWidth === "number"
+            ? props.maxWidth
+            : 1200
+        }px`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        marginLeft: "auto",
+        marginRight: "auto",
+      }}
+    >
+      {props.children}
+    </section>
+  );
 }
-export {
-  SectionComponent as default
-};

package/src/blocks/select/select.jsx

@@ -1,35 +1,20 @@
-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";
 import { isEditing } from "../../functions/is-editing.js";
-function SelectComponent(props) {
-  var _a;
-  return /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues({}, props.attributes), {
-    value: props.value,
-    key: isEditing() && props.defaultValue ? props.defaultValue : "default-key",
-    defaultValue: props.defaultValue,
-    name: props.name
-  }), (_a = props.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ React.createElement("option", {
-    value: option.value
-  }, option.name || option.value)));
+
+export default function SelectComponent(props) {
+  return (
+    <select
+      {...props.attributes}
+      value={props.value}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      defaultValue={props.defaultValue}
+      name={props.name}
+    >
+      {props.options?.map((option) => (
+        <option value={option.value}>{option.name || option.value}</option>
+      ))}
+    </select>
+  );
 }
-export {
-  SelectComponent as default
-};

package/src/blocks/submit-button/submit-button.jsx

@@ -1,25 +1,9 @@
-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";
-function SubmitButton(props) {
-  return /* @__PURE__ */ React.createElement("button", __spreadValues({
-    type: "submit"
-  }, props.attributes), props.text);
+
+export default function SubmitButton(props) {
+  return (
+    <button type="submit" {...props.attributes}>
+      {props.text}
+    </button>
+  );
 }
-export {
-  SubmitButton as default
-};

package/src/blocks/symbol/symbol.jsx

@@ -1,73 +1,84 @@
-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";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.jsx";
+import RenderContent from "../../components/render-content/render-content.js";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
-function Symbol(props) {
-  var _a, _b, _c, _d, _e;
+
+export default function Symbol(props) {
   function className() {
-    var _a2, _b2;
     return [
-      ...TARGET === "vue2" || TARGET === "vue3" ? Object.keys(props.attributes.class) : [props.attributes.class],
+      ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(props.attributes.class)
+        : [props.attributes.class]),
       "builder-symbol",
-      ((_a2 = props.symbol) == null ? void 0 : _a2.inline) ? "builder-inline-symbol" : void 0,
-      ((_b2 = props.symbol) == null ? void 0 : _b2.dynamic) || props.dynamic ? "builder-dynamic-symbol" : void 0
-    ].filter(Boolean).join(" ");
+      props.symbol?.inline ? "builder-inline-symbol" : undefined,
+      props.symbol?.dynamic || props.dynamic
+        ? "builder-dynamic-symbol"
+        : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ");
   }
+
   const [fetchedContent, setFetchedContent] = useState(() => null);
+
   function contentToUse() {
-    var _a2;
-    return ((_a2 = props.symbol) == null ? void 0 : _a2.content) || fetchedContent;
+    return props.symbol?.content || fetchedContent;
   }
+
   const builderContext = useContext(BuilderContext);
+
   useEffect(() => {
     const symbolToUse = props.symbol;
-    if (symbolToUse && !symbolToUse.content && !fetchedContent && symbolToUse.model) {
+
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !fetchedContent &&
+      symbolToUse.model
+    ) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
         query: {
-          id: symbolToUse.entry
-        }
+          id: symbolToUse.entry,
+        },
       }).then((response) => {
         setFetchedContent(response);
       });
     }
   }, [props.symbol, fetchedContent]);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props.attributes), {
-    dataSet: {
-      class: className()
-    },
-    className: className()
-  }), /* @__PURE__ */ React.createElement(RenderContent, {
-    apiKey: builderContext.apiKey,
-    context: builderContext.context,
-    customComponents: Object.values(builderContext.registeredComponents),
-    data: __spreadValues(__spreadValues(__spreadValues({}, (_a = props.symbol) == null ? void 0 : _a.data), builderContext.state), (_d = (_c = (_b = props.symbol) == null ? void 0 : _b.content) == null ? void 0 : _c.data) == null ? void 0 : _d.state),
-    model: (_e = props.symbol) == null ? void 0 : _e.model,
-    content: contentToUse()
-  }));
+
+  return (
+    <div
+      {...props.attributes}
+      dataSet={{
+        class: className(),
+      }}
+      className={className()}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={contentToUse()}
+      />
+    </div>
+  );
 }
-export {
-  Symbol as default
-};

package/src/blocks/text/text.jsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-function Text(props) {
-  return /* @__PURE__ */ React.createElement("span", {
-    className: "builder-text",
-    dangerouslySetInnerHTML: { __html: props.text }
-  });
+
+export default function Text(props) {
+  return (
+    <span
+      className="builder-text"
+      dangerouslySetInnerHTML={{ __html: props.text }}
+    />
+  );
 }
-export {
-  Text as default
-};

package/src/blocks/textarea/textarea.jsx

@@ -1,31 +1,13 @@
-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 Textarea(props) {
-  return /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, props.attributes), {
-    placeholder: props.placeholder,
-    name: props.name,
-    value: props.value,
-    defaultValue: props.defaultValue
-  }));
+
+export default function Textarea(props) {
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
 }
-export {
-  Textarea as default
-};

package/src/blocks/video/video.jsx

@@ -1,54 +1,58 @@
-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 Video(props) {
-  var _a;
+
+export default function Video(props) {
   function videoProps() {
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props.autoPlay === true ? {
-      autoPlay: true
-    } : {}), props.muted === true ? {
-      muted: true
-    } : {}), props.controls === true ? {
-      controls: true
-    } : {}), props.loop === true ? {
-      loop: true
-    } : {}), props.playsInline === true ? {
-      playsInline: true
-    } : {});
+    return {
+      ...(props.autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(props.muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(props.controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(props.loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(props.playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
   }
+
   function spreadProps() {
-    return __spreadValues(__spreadValues({}, props.attributes), videoProps());
+    return {
+      ...props.attributes,
+      ...videoProps(),
+    };
   }
-  return /* @__PURE__ */ React.createElement("video", __spreadProps(__spreadValues({}, spreadProps()), {
-    style: __spreadProps(__spreadValues({
-      width: "100%",
-      height: "100%"
-    }, (_a = props.attributes) == null ? void 0 : _a.style), {
-      objectFit: props.fit,
-      objectPosition: props.position,
-      borderRadius: 1
-    }),
-    src: props.video || "no-src",
-    poster: props.posterImage
-  }));
+
+  return (
+    <video
+      {...spreadProps()}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    />
+  );
 }
-export {
-  Video as default
-};

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

@@ -1,50 +1,69 @@
 import * as React from "react";
 import {
   getMaxWidthQueryForSize,
-  getSizesForBreakpoints
+  getSizesForBreakpoints,
 } from "../../constants/device-sizes.js";
 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.jsx";
-function BlockStyles(props) {
+import RenderInlinedStyles from "../render-inlined-styles.js";
+
+export default function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: props.context.state,
       context: props.context.context,
-      shouldEvaluateBindings: true
+      shouldEvaluateBindings: true,
     });
   }
+
   function css() {
-    var _a;
     const styles = useBlock().responsiveStyles;
     const content = props.context.content;
-    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
-    const largeStyles = styles == null ? void 0 : styles.large;
-    const mediumStyles = styles == null ? void 0 : styles.medium;
-    const smallStyles = styles == null ? void 0 : styles.small;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
     const className = useBlock().id;
-    const largeStylesClass = largeStyles ? createCssClass({
-      className,
-      styles: largeStyles
-    }) : "";
-    const mediumStylesClass = mediumStyles ? createCssClass({
-      className,
-      styles: mediumStyles,
-      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
-    }) : "";
-    const smallStylesClass = smallStyles ? createCssClass({
-      className,
-      styles: smallStyles,
-      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
-    }) : "";
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: css()
-  })) : null);
+
+  return (
+    <>
+      {TARGET !== "reactNative" && css() ? (
+        <>
+          <RenderInlinedStyles styles={css()} />
+        </>
+      ) : null}
+    </>
+  );
 }
-export {
-  BlockStyles as default
-};