@builder.io/sdk-react 0.2.3-4 → 0.3.1

package/packages/rsc/src/blocks/text/component-info.js

@@ -1,23 +0,0 @@
-const componentInfo = {
-  name: "Text",
-  static: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-  inputs: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
-  ],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
-};
-export {
-  componentInfo
-};

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

@@ -1,17 +0,0 @@
-import * as React from "react";
-
-function Text(props) {
-  const _context = { ...props["_context"] };
-
-  return (
-    <span
-      className="builder-text"
-      dangerouslySetInnerHTML={{ __html: props.text }}
-      style={{
-        outline: "none",
-      }}
-    />
-  );
-}
-
-export default Text;

package/packages/rsc/src/blocks/textarea/component-info.js

@@ -1,46 +0,0 @@
-const componentInfo = {
-  name: "Form:TextArea",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
-  inputs: [
-    {
-      advanced: true,
-      name: "value",
-      type: "string"
-    },
-    {
-      name: "name",
-      type: "string",
-      required: true,
-      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
-    },
-    {
-      name: "defaultValue",
-      type: "string"
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      defaultValue: "Hello there"
-    },
-    {
-      name: "required",
-      type: "boolean",
-      defaultValue: false
-    }
-  ],
-  defaultStyles: {
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    borderRadius: "3px",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "#ccc"
-  },
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

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

@@ -1,17 +0,0 @@
-import * as React from "react";
-
-function Textarea(props) {
-  const _context = { ...props["_context"] };
-
-  return (
-    <textarea
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    />
-  );
-}
-
-export default Textarea;

package/packages/rsc/src/blocks/util.js

@@ -1,8 +0,0 @@
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
-export {
-  serializeFn
-};

package/packages/rsc/src/blocks/video/component-info.js

@@ -1,105 +0,0 @@
-const componentInfo = {
-  name: "Video",
-  canHaveChildren: true,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [
-    {
-      name: "video",
-      type: "file",
-      allowedFileTypes: ["mp4"],
-      bubble: true,
-      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-      required: true
-    },
-    {
-      name: "posterImage",
-      type: "file",
-      allowedFileTypes: ["jpeg", "png"],
-      helperText: "Image to show before the video plays"
-    },
-    {
-      name: "autoPlay",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "controls",
-      type: "boolean",
-      defaultValue: false
-    },
-    {
-      name: "muted",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "loop",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "playsInline",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "fit",
-      type: "text",
-      defaultValue: "cover",
-      enum: ["contain", "cover", "fill", "auto"]
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "position",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "height",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "width",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      advanced: true,
-      defaultValue: 0.7004048582995948
-    },
-    {
-      name: "lazyLoad",
-      type: "boolean",
-      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

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

@@ -1,63 +0,0 @@
-import * as React from "react";
-
-function Video(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    get videoProps() {
-      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,
-            }
-          : {}),
-      };
-    },
-    get spreadProps() {
-      return {
-        ...props.attributes,
-        ...state.videoProps,
-      };
-    },
-  };
-
-  return (
-    <video
-      {...state.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 default Video;

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

@@ -1,88 +0,0 @@
-import * as React from "react";
-import {
-  getMaxWidthQueryForSize,
-  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 { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles";
-
-function BlockStyles(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    get useBlock() {
-      return getProcessedBlock({
-        block: props.block,
-        state: props.context.state,
-        context: props.context.context,
-        shouldEvaluateBindings: true,
-      });
-    },
-    get canShowBlock() {
-      // only render styles for blocks that are visible
-      if (checkIsDefined(state.useBlock.hide)) {
-        return !state.useBlock.hide;
-      }
-      if (checkIsDefined(state.useBlock.show)) {
-        return state.useBlock.show;
-      }
-      return true;
-    },
-    get css() {
-      const styles = state.useBlock.responsiveStyles;
-      const content = props.context.content;
-      const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
-        content?.meta?.breakpoints || {}
-      );
-      const largeStyles = styles?.large;
-      const mediumStyles = styles?.medium;
-      const smallStyles = styles?.small;
-      const className = state.useBlock.id;
-      if (!className) {
-        return "";
-      }
-      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 (
-    <>
-      {TARGET !== "reactNative" && state.css && state.canShowBlock ? (
-        <>
-          <RenderInlinedStyles styles={state.css} _context={_context} />
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default BlockStyles;

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

@@ -1,129 +0,0 @@
-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));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { evaluate } from "../../functions/evaluate";
-import { getProcessedBlock } from "../../functions/get-processed-block";
-const EMPTY_HTML_ELEMENTS = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-const isEmptyHtmlElement = (tagName) => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
-const getComponent = ({
-  block,
-  context
-}) => {
-  var _a;
-  const componentName = (_a = getProcessedBlock({
-    block,
-    state: context.state,
-    context: context.context,
-    shouldEvaluateBindings: false
-  }).component) == null ? void 0 : _a.name;
-  if (!componentName) {
-    return null;
-  }
-  const ref = context.registeredComponents[componentName];
-  if (!ref) {
-    console.warn(`
-      Could not find a registered component named "${componentName}". 
-      If you registered it, is the file that registered it imported by the file that needs to render it?`);
-    return void 0;
-  } else {
-    return ref;
-  }
-};
-const getRepeatItemData = ({
-  block,
-  context
-}) => {
-  const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
-  if (!(repeat == null ? void 0 : repeat.collection)) {
-    return void 0;
-  }
-  const itemsArray = evaluate({
-    code: repeat.collection,
-    state: context.state,
-    context: context.context
-  });
-  if (!Array.isArray(itemsArray)) {
-    return void 0;
-  }
-  const collectionName = repeat.collection.split(".").pop();
-  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
-  const repeatArray = itemsArray.map((item, index) => ({
-    context: __spreadProps(__spreadValues({}, context), {
-      state: __spreadProps(__spreadValues({}, context.state), {
-        $index: index,
-        $item: item,
-        [itemNameToUse]: item,
-        [`$${itemNameToUse}Index`]: index
-      })
-    }),
-    block: blockWithoutRepeat
-  }));
-  return repeatArray;
-};
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      var _a;
-      obj[prop] = value;
-      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-      return true;
-    }
-  });
-  return useState;
-};
-export {
-  getComponent,
-  getProxyState,
-  getRepeatItemData,
-  isEmptyHtmlElement
-};

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

@@ -1,201 +0,0 @@
-import * as React from "react";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles";
-import {
-  getComponent,
-  getProxyState,
-  getRepeatItemData,
-  isEmptyHtmlElement,
-} from "./render-block.helpers.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";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-
-function RenderBlock(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    component: getComponent({
-      block: props.block,
-      context: props.context,
-    }),
-    repeatItemData: getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    }),
-    get useBlock() {
-      return state.repeatItemData
-        ? props.block
-        : getProcessedBlock({
-            block: props.block,
-            state: props.context.state,
-            context: props.context.context,
-            shouldEvaluateBindings: true,
-          });
-    },
-    tag: props.block.tagName || "div",
-    get canShowBlock() {
-      if ("hide" in state.useBlock) {
-        return !state.useBlock.hide;
-      }
-      if ("show" in state.useBlock) {
-        return state.useBlock.show;
-      }
-      return true;
-    },
-    proxyState: getProxyState(props.context),
-    get actions() {
-      return getBlockActions({
-        block: state.useBlock,
-        state: TARGET === "qwik" ? props.context.state : state.proxyState,
-        context: props.context.context,
-      });
-    },
-    get attributes() {
-      const blockProperties = getBlockProperties(state.useBlock);
-      return {
-        ...blockProperties,
-        ...(TARGET === "reactNative"
-          ? {
-              style: getReactNativeBlockStyles({
-                block: state.useBlock,
-                context: props.context,
-                blockStyles: blockProperties.style,
-              }),
-            }
-          : {}),
-      };
-    },
-    get childrenWithoutParentComponent() {
-      /**
-       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-       * we render them outside of `componentRef`.
-       * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
-       * blocks, and the children will be repeated within those blocks.
-       */
-      const shouldRenderChildrenOutsideRef =
-        !state.component?.component && !state.repeatItemData;
-      return shouldRenderChildrenOutsideRef
-        ? state.useBlock.children ?? []
-        : [];
-    },
-    get childrenContext() {
-      const getInheritedTextStyles = () => {
-        if (TARGET !== "reactNative") {
-          return {};
-        }
-        return extractTextStyles(
-          getReactNativeBlockStyles({
-            block: state.useBlock,
-            context: props.context,
-            blockStyles: state.attributes.style,
-          })
-        );
-      };
-      return {
-        apiKey: props.context.apiKey,
-        apiVersion: props.context.apiVersion,
-        state: props.context.state,
-        content: props.context.content,
-        context: props.context.context,
-        setState: props.context.setState,
-        registeredComponents: props.context.registeredComponents,
-        inheritedStyles: getInheritedTextStyles(),
-      };
-    },
-    get renderComponentProps() {
-      return {
-        blockChildren: state.useBlock.children ?? [],
-        componentRef: state.component?.component,
-        componentOptions: {
-          ...getBlockComponentOptions(state.useBlock),
-          /**
-           * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-           * they are provided to the component itself directly.
-           */
-          ...(!state.component?.noWrap
-            ? {}
-            : {
-                attributes: {
-                  ...state.attributes,
-                  ...state.actions,
-                },
-              }),
-        },
-        context: state.childrenContext,
-      };
-    },
-  };
-
-  const TagRef = state.tag;
-
-  return (
-    <>
-      {state.canShowBlock ? (
-        <>
-          {!state.component?.noWrap ? (
-            <>
-              {isEmptyHtmlElement(state.tag) ? (
-                <>
-                  <TagRef {...state.attributes} {...state.actions} />
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
-                <>
-                  {state.repeatItemData?.map((data, index) => (
-                    <RenderRepeatedBlock
-                      key={index}
-                      repeatContext={data.context}
-                      block={data.block}
-                      _context={_context}
-                    />
-                  ))}
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
-                <>
-                  <TagRef {...state.attributes} {...state.actions}>
-                    <RenderComponent
-                      {...state.renderComponentProps}
-                      _context={_context}
-                    />
-
-                    {state.childrenWithoutParentComponent?.map((child) => (
-                      <RenderBlock
-                        key={"render-block-" + child.id}
-                        block={child}
-                        context={state.childrenContext}
-                        _context={_context}
-                      />
-                    ))}
-
-                    {state.childrenWithoutParentComponent?.map((child) => (
-                      <BlockStyles
-                        key={"block-style-" + child.id}
-                        block={child}
-                        context={state.childrenContext}
-                        _context={_context}
-                      />
-                    ))}
-                  </TagRef>
-                </>
-              ) : null}
-            </>
-          ) : (
-            <RenderComponent
-              {...state.renderComponentProps}
-              _context={_context}
-            />
-          )}
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default RenderBlock;