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

package/dist/sdk/blocks/columns/columns.js

@@ -108,17 +108,17 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-66c71955", style: columnsCssVars() },
+                " div-348c3b10", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-66c71955-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-348c3b10-2", style: columnCssVars(index), key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-66c71955 {
+        React.createElement("style", null, `.div-348c3b10 {
   display: flex;
   line-height: normal;
-}.div-66c71955-2 {
+}.div-348c3b10-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/image/image.js

@@ -5,7 +5,8 @@ function Image(props) {
     function srcSetToUse() {
         const imageToUse = props.image || props.src;
         const url = imageToUse;
-        if (!url || // We can auto add srcset for cdn.builder.io and shopify
+        if (!url ||
+            // We can auto add srcset for cdn.builder.io and shopify
             // images, otherwise you can supply this prop manually
             !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
             return props.srcset;
@@ -51,23 +52,23 @@ function Image(props) {
                         ...aspectRatioCss(),
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-24559440", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
+                        " img-3c135cd4", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-24559440", style: {
+                React.createElement("div", { className: "builder-image-sizer div-3c135cd4", style: {
                         paddingTop: props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-24559440-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-24559440 {
+                React.createElement("div", { className: "div-3c135cd4-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-3c135cd4 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-24559440 {
+}.div-3c135cd4 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-24559440-2 {
+}.div-3c135cd4-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/symbol/symbol.js

@@ -31,7 +31,8 @@ function Symbol(props) {
          * then we want to re-fetch the symbol content.
          */
         if (!contentToUse &&
-            props.symbol?.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
+            props.symbol?.model &&
+            // This is a hack, we should not need to check for this, but it is needed for Svelte.
             builderContext?.apiKey) {
             getContent({
                 model: props.symbol.model,

package/dist/sdk/blocks/video/video.js

@@ -31,7 +31,10 @@ function Video(props) {
         };
     }
     function spreadProps() {
-        return { ...props.attributes, ...videoProps() };
+        return {
+            ...props.attributes,
+            ...videoProps(),
+        };
     }
     return (React.createElement("video", { ...spreadProps(), style: {
             width: "100%",

package/dist/sdk/components/render-block/render-block.js

@@ -109,7 +109,10 @@ function RenderBlock(props) {
                 ...(!component?.noWrap
                     ? {}
                     : {
-                        attributes: { ...attributes(), ...actions() },
+                        attributes: {
+                            ...attributes(),
+                            ...actions(),
+                        },
                     }),
             },
             context: childrenContext(),

package/dist/sdk/components/render-content/render-content.js

@@ -31,7 +31,10 @@ function RenderContent(props) {
         setUseContent({
             ...useContent,
             ...newContent,
-            data: { ...useContent?.data, ...newContent?.data },
+            data: {
+                ...useContent?.data,
+                ...newContent?.data,
+            },
             meta: {
                 ...useContent?.meta,
                 ...newContent?.meta,
@@ -42,7 +45,10 @@ function RenderContent(props) {
     function setBreakpoints(breakpoints) {
         setUseContent({
             ...useContent,
-            meta: { ...useContent?.meta, breakpoints },
+            meta: {
+                ...useContent?.meta,
+                breakpoints,
+            },
         });
     }
     const [update, setUpdate] = useState(() => 0);
@@ -57,13 +63,17 @@ function RenderContent(props) {
     }
     const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
         // which is the new standard way of providing custom components, and must therefore take precedence.
         ...components,
         ...(props.customComponents || []),
-    ].reduce((acc, curr) => ({ ...acc, [curr.name]: curr }), {}));
+    ].reduce((acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+    }), {}));
     function processMessage(event) {
         const { data } = event;
         if (data) {
@@ -142,7 +152,10 @@ function RenderContent(props) {
         fetch(url)
             .then((response) => response.json())
             .then((json) => {
-            const newState = { ...contentState, [key]: json };
+            const newState = {
+                ...contentState,
+                [key]: json,
+            };
             setContextState(newState);
         })
             .catch((err) => {
@@ -210,7 +223,8 @@ function RenderContent(props) {
                     apiKey: props.apiKey,
                     variationId: variationId !== contentId ? variationId : undefined,
                 });
-            } // override normal content in preview mode
+            }
+            // override normal content in preview mode
             if (isPreviewing()) {
                 const searchParams = new URL(location.href).searchParams;
                 const searchParamPreviewModel = searchParams.get("builder.preview");

package/dist/sdk/index.d.ts

@@ -10,3 +10,4 @@ export * from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';
+export type { RenderContentProps } from './components/render-content/render-content.types.js';

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.3-4",
+  "version": "0.2.3",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": "./dist/sdk/index.js",
     "./server": "./dist/sdk/functions/get-content/index.js"

package/CHANGELOG.md

@@ -1,25 +0,0 @@
-### 0.2.2
-
-- Fix: dynamic bindings for Link URLs.
-- Fix: previewing content that includes a symbol whose `model` property is a `page`.
-- Fix: "Show If"/"Hide If" bindings when the initial value is `undefined`.
-
-### 0.2.1
-
-- No Changes.
-
-### 0.2.0
-
-- Sets the default `apiVersion` to `v3`.
-
-In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
-
-```jsx
-<RenderContent apiVersion="v2" />
-```
-
-```js
-getContent({ apiVersion: 'v2' });
-```
-
-More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).

package/packages/react/src/blocks/BaseText.tsx

@@ -1,19 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-
-export interface BaseTextProps {
-  text: string;
-}
-
-import BuilderContext from "../context/builder.context.js";
-
-function BaseText(props: BaseTextProps) {
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <span style={builderContext.inheritedStyles as any}>{props.text}</span>
-  );
-}
-
-export default BaseText;

package/packages/react/src/blocks/button/button.tsx

@@ -1,45 +0,0 @@
-"use client";
-import * as React from "react";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
-function Button(props: ButtonProps) {
-  return (
-    <>
-      {props.link ? (
-        <>
-          <a
-            role="button"
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            {props.text}
-          </a>
-        </>
-      ) : (
-        <>
-          <button
-            className={
-              /** * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`. */
-              props.attributes.class + " button-2b50f164"
-            }
-            {...props.attributes}
-          >
-            {props.text}
-          </button>
-        </>
-      )}
-      <style>{`.button-2b50f164 {
-  all: unset;
-}`}</style>
-    </>
-  );
-}
-
-export default Button;

package/packages/react/src/blocks/button/component-info.ts

@@ -1,42 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-
-export const componentInfo: ComponentInfo = {
-  name: 'Core:Button',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
-  defaultStyles: {
-    // TODO: make min width more intuitive and set one
-    appearance: 'none',
-    paddingTop: '15px',
-    paddingBottom: '15px',
-    paddingLeft: '25px',
-    paddingRight: '25px',
-    backgroundColor: '#000000',
-    color: 'white',
-    borderRadius: '4px',
-    textAlign: 'center',
-    cursor: 'pointer',
-  },
-  inputs: [
-    {
-      name: 'text',
-      type: 'text',
-      defaultValue: 'Click me!',
-      bubble: true,
-    },
-    {
-      name: 'link',
-      type: 'url',
-      bubble: true,
-    },
-    {
-      name: 'openLinkInNewTab',
-      type: 'boolean',
-      defaultValue: false,
-      friendlyName: 'Open link in new tab',
-    },
-  ],
-  static: true,
-  noWrap: true,
-};

package/packages/react/src/blocks/columns/columns.tsx

@@ -1,211 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useContext } from "react";
-
-type Column = {
-  blocks: BuilderBlock[];
-  width?: number;
-};
-type CSSVal = string | number;
-type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps {
-  columns?: Column[];
-  builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
-import RenderBlocks from "../../components/render-blocks";
-import type { BuilderBlock } from "../../types/builder-block";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import type { SizeName } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
-import type { Dictionary } from "../../types/typescript";
-
-function Columns(props: ColumnProps) {
-  const [gutterSize, setGutterSize] = useState(() =>
-    typeof props.space === "number" ? props.space || 0 : 20
-  );
-
-  const [cols, setCols] = useState(() => props.columns || []);
-
-  const [stackAt, setStackAt] = useState(
-    () => props.stackColumnsAt || "tablet"
-  );
-
-  function getWidth(index: number) {
-    return cols[index]?.width || 100 / cols.length;
-  }
-
-  function getColumnCssWidth(index: number) {
-    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function getTabletStyle({
-    stackedStyle,
-    desktopStyle,
-  }: {
-    stackedStyle: CSSVal;
-    desktopStyle: CSSVal;
-  }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
-  }
-
-  function getMobileStyle({
-    stackedStyle,
-    desktopStyle,
-  }: {
-    stackedStyle: CSSVal;
-    desktopStyle: CSSVal;
-  }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
-  }
-
-  const [flexDir, setFlexDir] = useState(() =>
-    props.stackColumnsAt === "never"
-      ? "row"
-      : props.reverseColumnsWhenStacked
-      ? "column-reverse"
-      : "column"
-  );
-
-  function columnsCssVars() {
-    if (TARGET === "reactNative") {
-      return {
-        flexDirection: flexDir,
-      } as Dictionary<string>;
-    }
-
-    return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir,
-        desktopStyle: "row",
-      }),
-    } as Dictionary<string>;
-  }
-
-  function columnCssVars(index: number) {
-    const gutter = index === 0 ? 0 : gutterSize;
-
-    if (TARGET === "reactNative") {
-      return {
-        marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-      } as any as Dictionary<string>;
-    }
-
-    const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
-    const mobileWidth = "100%";
-    const mobileMarginLeft = 0;
-    return {
-      width,
-      "margin-left": gutterPixels,
-      "--column-width-mobile": getMobileStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-mobile": getMobileStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-      "--column-width-tablet": getTabletStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-tablet": getTabletStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-    } as any as Dictionary<string>;
-  }
-
-  function getWidthForBreakpointSize(size: SizeName) {
-    const breakpointSizes = getSizesForBreakpoints(
-      builderContext.content?.meta?.breakpoints || {}
-    );
-    return breakpointSizes[size].max;
-  }
-
-  function columnsStyles() {
-    return `
-        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-
-        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      <div
-        className={
-          `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-66c71955"
-        }
-        style={columnsCssVars()}
-      >
-        {TARGET !== "reactNative" ? (
-          <>
-            <RenderInlinedStyles styles={columnsStyles()} />
-          </>
-        ) : null}
-
-        {props.columns?.map((column, index) => (
-          <div
-            className="builder-column div-66c71955-2"
-            style={columnCssVars(index)}
-            key={index}
-          >
-            <RenderBlocks
-              blocks={column.blocks}
-              path={`component.options.columns.${index}.blocks`}
-              parent={props.builderBlock.id}
-              styleProp={{
-                flexGrow: "1",
-              }}
-            />
-          </div>
-        ))}
-      </div>
-      <style>{`.div-66c71955 {
-  display: flex;
-  line-height: normal;
-}.div-66c71955-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`}</style>
-    </>
-  );
-}
-
-export default Columns;