@builder.io/sdk-react 0.4.5 → 0.5.1-0

package/dist/{sdk/blocks → blocks}/BaseText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BaseTextProps {
     text: string;
 }

package/dist/{sdk/blocks → blocks}/BaseText.js

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
+import BuilderContext from "../context/builder.context";
 function BaseText(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement("span", { style: builderContext.inheritedStyles }, props.text));

package/dist/{sdk/blocks → blocks}/button/button.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export interface ButtonProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface ButtonProps {
     attributes?: any;
     text?: string;
     link?: string;

package/dist/{sdk/blocks → blocks}/button/button.js

@@ -1,13 +1,11 @@
-'use client';
+"use client";
 import * as React from "react";
 function Button(props) {
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
             React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement(React.Fragment, null,
-            React.createElement("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))),
-        React.createElement("style", null, `.button-2b50f164 {
+            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-7267e9c6" }, props.text))),
+        React.createElement("style", null, `.button-7267e9c6 {
   all: unset;
 }`)));
 }

package/dist/blocks/button/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/{sdk/blocks → blocks}/button/component-info.js

@@ -12,27 +12,23 @@ export const componentInfo = {
         color: 'white',
         borderRadius: '4px',
         textAlign: 'center',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
-    inputs: [
-        {
+    inputs: [{
             name: 'text',
             type: 'text',
             defaultValue: 'Click me!',
-            bubble: true,
-        },
-        {
+            bubble: true
+        }, {
             name: 'link',
             type: 'url',
-            bubble: true,
-        },
-        {
+            bubble: true
+        }, {
             name: 'openLinkInNewTab',
             type: 'boolean',
             defaultValue: false,
-            friendlyName: 'Open link in new tab',
-        },
-    ],
+            friendlyName: 'Open link in new tab'
+        }],
     static: true,
-    noWrap: true,
+    noWrap: true
 };

package/dist/blocks/columns/columns.d.ts

@@ -0,0 +1,16 @@
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
+declare function Columns(props: PropsWithBuilderData<ColumnProps>): JSX.Element;
+export default Columns;

package/dist/{sdk/blocks → blocks}/columns/columns.js

@@ -1,11 +1,10 @@
-'use client';
+"use client";
 import * as React from "react";
-import { useState, useContext } from "react";
-import RenderBlocks from "../../components/render-blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import { useState } from "react";
+import Blocks from "../../components/blocks/blocks";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import InlinedStyles from "../../components/inlined-styles";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 function Columns(props) {
     const [gutterSize, setGutterSize] = useState(() => typeof props.space === "number" ? props.space || 0 : 20);
     const [cols, setCols] = useState(() => props.columns || []);
@@ -29,11 +28,6 @@ function Columns(props) {
             ? "column-reverse"
             : "column");
     function columnsCssVars() {
-        if (TARGET === "reactNative") {
-            return {
-                flexDirection: flexDir,
-            };
-        }
         return {
             "--flex-dir": flexDir,
             "--flex-dir-tablet": getTabletStyle({
@@ -53,9 +47,10 @@ function Columns(props) {
         const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
+        const marginLeftKey = "marginLeft";
         return {
             width,
-            "margin-left": gutterPixels,
+            [marginLeftKey]: gutterPixels,
             "--column-width-mobile": getMobileStyle({
                 stackedStyle: mobileWidth,
                 desktopStyle: width,
@@ -75,7 +70,7 @@ function Columns(props) {
         };
     }
     function getWidthForBreakpointSize(size) {
-        const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
+        const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
         return breakpointSizes[size].max;
     }
     function columnsStyles() {
@@ -105,20 +100,19 @@ function Columns(props) {
         },
       `;
     }
-    const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-1d72a8ba", style: columnsCssVars() },
+                " div-9f5ab4f8", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-1d72a8ba-2", style: columnCssVars(index), key: index },
-                React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-9f5ab4f8-2", style: columnCssVars(index), key: index },
+                React.createElement(Blocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
-                    } }))))),
-        React.createElement("style", null, `.div-1d72a8ba {
+                    }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
+        React.createElement("style", null, `.div-9f5ab4f8 {
   display: flex;
   line-height: normal;
-}.div-1d72a8ba-2 {
+}.div-9f5ab4f8-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/blocks/columns/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/{sdk/blocks → blocks}/columns/component-info.js

@@ -1,19 +1,16 @@
-import { serializeFn } from '../util.js';
 export const componentInfo = {
     // TODO: ways to statically preprocess JSON for references, functions, etc
     name: 'Columns',
-    inputs: [
-        {
+    isRSC: true,
+    inputs: [{
             name: 'columns',
             type: 'array',
             broadcast: true,
-            subFields: [
-                {
+            subFields: [{
                     name: 'blocks',
                     type: 'array',
                     hideFromUI: true,
-                    defaultValue: [
-                        {
+                    defaultValue: [{
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -28,8 +25,8 @@ export const componentInfo = {
                                     height: 'auto',
                                     minHeight: '20px',
                                     minWidth: '20px',
-                                    overflow: 'hidden',
-                                },
+                                    overflow: 'hidden'
+                                }
                             },
                             component: {
                                 name: 'Image',
@@ -37,11 +34,10 @@ export const componentInfo = {
                                     image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
                                     backgroundPosition: 'center',
                                     backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948,
-                                },
-                            },
-                        },
-                        {
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -53,34 +49,28 @@ export const componentInfo = {
                                     marginTop: '30px',
                                     textAlign: 'center',
                                     lineHeight: 'normal',
-                                    height: 'auto',
-                                },
+                                    height: 'auto'
+                                }
                             },
                             component: {
                                 name: 'Text',
                                 options: {
-                                    text: '<p>Enter some text...</p>',
-                                },
-                            },
-                        },
-                    ],
-                },
-                {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }, {
                     name: 'width',
                     type: 'number',
                     hideFromUI: true,
-                    helperText: 'Width %, e.g. set to 50 to fill half of the space',
-                },
-                {
+                    helperText: 'Width %, e.g. set to 50 to fill half of the space'
+                }, {
                     name: 'link',
                     type: 'url',
-                    helperText: 'Optionally set a url that clicking this column will link to',
-                },
-            ],
-            defaultValue: [
-                {
-                    blocks: [
-                        {
+                    helperText: 'Optionally set a url that clicking this column will link to'
+                }],
+            defaultValue: [{
+                    blocks: [{
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -95,8 +85,8 @@ export const componentInfo = {
                                     height: 'auto',
                                     minHeight: '20px',
                                     minWidth: '20px',
-                                    overflow: 'hidden',
-                                },
+                                    overflow: 'hidden'
+                                }
                             },
                             component: {
                                 name: 'Image',
@@ -104,11 +94,10 @@ export const componentInfo = {
                                     image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
                                     backgroundPosition: 'center',
                                     backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948,
-                                },
-                            },
-                        },
-                        {
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -120,21 +109,18 @@ export const componentInfo = {
                                     marginTop: '30px',
                                     textAlign: 'center',
                                     lineHeight: 'normal',
-                                    height: 'auto',
-                                },
+                                    height: 'auto'
+                                }
                             },
                             component: {
                                 name: 'Text',
                                 options: {
-                                    text: '<p>Enter some text...</p>',
-                                },
-                            },
-                        },
-                    ],
-                },
-                {
-                    blocks: [
-                        {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }, {
+                    blocks: [{
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -149,8 +135,8 @@ export const componentInfo = {
                                     height: 'auto',
                                     minHeight: '20px',
                                     minWidth: '20px',
-                                    overflow: 'hidden',
-                                },
+                                    overflow: 'hidden'
+                                }
                             },
                             component: {
                                 name: 'Image',
@@ -158,11 +144,10 @@ export const componentInfo = {
                                     image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
                                     backgroundPosition: 'center',
                                     backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948,
-                                },
-                            },
-                        },
-                        {
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
                             '@type': '@builder.io/sdk:Element',
                             responsiveStyles: {
                                 large: {
@@ -174,30 +159,28 @@ export const componentInfo = {
                                     marginTop: '30px',
                                     textAlign: 'center',
                                     lineHeight: 'normal',
-                                    height: 'auto',
-                                },
+                                    height: 'auto'
+                                }
                             },
                             component: {
                                 name: 'Text',
                                 options: {
-                                    text: '<p>Enter some text...</p>',
-                                },
-                            },
-                        },
-                    ],
-                },
-            ],
-            onChange: serializeFn((options) => {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }],
+            onChange: (options) => {
                 function clearWidths() {
-                    columns.forEach((col) => {
+                    columns.forEach(col => {
                         col.delete('width');
                     });
                 }
                 const columns = options.get('columns');
                 if (Array.isArray(columns)) {
-                    const containsColumnWithWidth = !!columns.find((col) => col.get('width'));
+                    const containsColumnWithWidth = !!columns.find(col => col.get('width'));
                     if (containsColumnWithWidth) {
-                        const containsColumnWithoutWidth = !!columns.find((col) => !col.get('width'));
+                        const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));
                         if (containsColumnWithoutWidth) {
                             clearWidths();
                         }
@@ -212,29 +195,25 @@ export const componentInfo = {
                         }
                     }
                 }
-            }),
-        },
-        {
+            }
+        }, {
             name: 'space',
             type: 'number',
             defaultValue: 20,
             helperText: 'Size of gap between columns',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'stackColumnsAt',
             type: 'string',
             defaultValue: 'tablet',
             helperText: 'Convert horizontal columns to vertical at what device size',
             enum: ['tablet', 'mobile', 'never'],
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'reverseColumnsWhenStacked',
             type: 'boolean',
             defaultValue: false,
             helperText: 'When stacking columns for mobile devices, reverse the ordering',
-            advanced: true,
-        },
-    ],
+            advanced: true
+        }]
 };

package/dist/blocks/custom-code/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/{sdk/blocks → blocks}/custom-code/component-info.js

@@ -2,26 +2,22 @@ export const componentInfo = {
     name: 'Custom Code',
     static: true,
     requiredPermissions: ['editCode'],
-    inputs: [
-        {
+    inputs: [{
             name: 'code',
             type: 'html',
             required: true,
             defaultValue: '<p>Hello there, I am custom HTML code!</p>',
-            code: true,
-        },
-        {
+            code: true
+        }, {
             name: 'replaceNodes',
             type: 'boolean',
             helperText: 'Preserve server rendered dom nodes',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'scriptsClientOnly',
             type: 'boolean',
             defaultValue: false,
             helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
-            advanced: true,
-        },
-    ],
+            advanced: true
+        }]
 };

package/dist/{sdk/blocks → blocks}/custom-code/custom-code.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CustomCodeProps {
     code: string;
     replaceNodes?: boolean;

package/dist/{sdk/blocks → blocks}/custom-code/custom-code.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 function CustomCode(props) {

package/dist/blocks/embed/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/{sdk/blocks → blocks}/embed/component-info.js

@@ -1,23 +1,19 @@
-import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Embed',
     static: true,
-    inputs: [
-        {
+    inputs: [{
             name: 'url',
             type: 'url',
             required: true,
             defaultValue: '',
             helperText: 'e.g. enter a youtube url, google map, etc',
-            onChange: serializeFn((options) => {
+            onChange: (options) => {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');
                     // TODO: get this out of here!
                     const apiKey = 'ae0e60e78201a3f2b0de4b';
-                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)
-                        .then((res) => res.json())
-                        .then((data) => {
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get('url') === url) {
                             if (data.html) {
                                 options.set('content', data.html);
@@ -26,21 +22,18 @@ export const componentInfo = {
                                 options.set('content', 'Invalid url, please try another');
                             }
                         }
-                    })
-                        .catch((_err) => {
+                    }).catch(_err => {
                         options.set('content', 'There was an error embedding this URL, please try again or another URL');
                     });
                 }
                 else {
                     options.delete('content');
                 }
-            }),
-        },
-        {
+            }
+        }, {
             name: 'content',
             type: 'html',
             defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-            hideFromUI: true,
-        },
-    ],
+            hideFromUI: true
+        }]
 };

package/dist/{sdk/blocks → blocks}/embed/embed.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface EmbedProps {
     content: string;
 }

package/dist/{sdk/blocks → blocks}/embed/embed.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";

package/dist/blocks/embed/helpers.js

@@ -0,0 +1,2 @@
+const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
+export const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);

package/dist/blocks/form/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;