@builder.io/sdk-react 0.5.9 → 0.6.1

package/package.json

@@ -1,38 +1,128 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "files": [
-    "dist"
+    "lib",
+    "types"
   ],
-  "types": "./dist/index.d.ts",
+  "types": "./types/index.d.ts",
+  "main": "./lib/node/index.cjs",
+  "module": "./lib/node/index.mjs",
   "exports": {
-    ".": "./dist/index.js",
-    "./server": "./dist/functions/get-content/index.js"
+    ".": {
+      "node": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/node/index.mjs",
+        "require": "./lib/node/index.cjs"
+      },
+      "browser": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/browser/index.mjs",
+        "require": "./lib/browser/index.cjs"
+      },
+      "edge-routine": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "workerd": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "deno": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "lagon": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "netlify": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "edge-light": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "bun": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/edge/index.mjs",
+        "require": "./lib/edge/index.cjs"
+      },
+      "react-native": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/node/index.mjs",
+        "require": "./lib/node/index.cjs"
+      },
+      "electron": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/node/index.mjs",
+        "require": "./lib/node/index.cjs"
+      },
+      "default": {
+        "types": "./types/index.d.ts",
+        "import": "./lib/browser/index.mjs",
+        "require": "./lib/browser/index.cjs"
+      }
+    },
+    "./edge": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/edge/index.mjs",
+      "require": "./lib/edge/index.cjs"
+    },
+    "./node": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/node/index.mjs",
+      "require": "./lib/node/index.cjs"
+    },
+    "./browser": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/browser/index.mjs",
+      "require": "./lib/browser/index.cjs"
+    },
+    "./server": {
+      "types": "./types/functions/get-content/index.d.ts",
+      "import": "./lib/node/server-entry.mjs",
+      "require": "./lib/node/server-entry.cjs"
+    }
   },
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "yarn clean && tsc"
+    "types": "tsc",
+    "build": "nx run-many -p @builder.io/sdk-react -t types build:node build:edge build:browser",
+    "build:node": "SDK_ENV=node vite build --mode lib",
+    "build:edge": "SDK_ENV=edge vite build --mode lib",
+    "build:browser": "SDK_ENV=browser vite build --mode lib"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
   "devDependencies": {
+    "@builder.io/sdks": "workspace:*",
+    "@vitejs/plugin-react": "^4.0.4",
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
     "react": "^18.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "vite": "^4.4.9"
   },
   "nx": {
-    "implicitDependencies": [
-      "@builder.io/sdks"
-    ],
     "targets": {
       "build": {
         "dependsOn": [
           "^build:react",
           "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/lib",
+          "{projectRoot}/types"
         ]
       }
     }

package/types/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.6.1";

package/types/functions/deopt.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export declare function deoptSignal<T>(value: T): T;

package/types/functions/evaluate/edge-runtime/edge-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInEdge: ({ builder, context, event, rootState, localState, rootSetState, code }: ExecutorArgs) => any;

package/types/functions/evaluate/edge-runtime/index.d.ts

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js';

package/types/functions/evaluate/placeholder-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from './helpers.js';
+export declare const evaluator: (_args: ExecutorArgs) => never;

package/{dist → types}/functions/fetch-builder-props.d.ts

@@ -33,7 +33,8 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
     searchParams?: undefined;
 });
 /**
- * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
  */
 export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

package/{dist → types}/functions/get-content/index.d.ts

@@ -5,17 +5,16 @@ import type { GetContentOptions } from './types.js';
  */
 export declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
 /**
- * @deprecated
- * Consider using `fetchBuilderProps` instead for easier setup.
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
  *
- * NOTE: `getContent` was renamed to `fetchOneEntry` and will be removed in a future release.
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
  */
 export declare const getContent: typeof fetchOneEntry;
 type ContentResults = {
     results: BuilderContent[];
 };
 /**
- * Exported only for testing purposes. Should not be used directly.
+ * @internal Exported only for testing purposes. Do not use.
  */
 export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
 /**
@@ -23,7 +22,7 @@ export declare const _processContentResult: (options: GetContentOptions, content
  */
 export declare function fetchEntries(options: GetContentOptions): Promise<ContentResults>;
 /**
- * @deprecated Use `fetchEntries` instead.
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
  */
 export declare const getAllContent: typeof fetchEntries;
 export {};

package/types/functions/is-edge-runtime.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export declare function isEdgeRuntime(): boolean;

package/{dist → types}/index-helpers/blocks-exports.d.ts

@@ -10,10 +10,10 @@ import { default as Blocks } from '../components/blocks/blocks';
 import { default as Content } from '../components/content-variants/content-variants';
 export { Blocks, Content };
 /**
- * @deprecated Use `Blocks` instead.
+ * @deprecated Renamed to `Blocks`.
  */
 export declare const RenderBlocks: typeof Blocks;
 /**
- * @deprecated Use `Content` instead.
+ * @deprecated Renamed to `Content`.
  */
 export declare const RenderContent: typeof Content;

package/dist/blocks/BaseText.js

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

package/dist/blocks/button/button.js

@@ -1,12 +0,0 @@
-"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", { ...{}, ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-3e7bc8b2" }, props.text))),
-        React.createElement("style", null, `.button-3e7bc8b2 {
-  all: unset;
-}`)));
-}
-export default Button;

package/dist/blocks/button/component-info.js

@@ -1,34 +0,0 @@
-export const 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/dist/blocks/columns/columns.js

@@ -1,121 +0,0 @@
-"use client";
-import * as React from "react";
-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";
-function Columns(props) {
-    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) {
-        return cols[index]?.width || 100 / cols.length;
-    }
-    function getColumnCssWidth(index) {
-        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-    }
-    function getTabletStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "tablet" ? stackedStyle : desktopStyle;
-    }
-    function getMobileStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "never" ? desktopStyle : stackedStyle;
-    }
-    const [flexDir, setFlexDir] = useState(() => props.stackColumnsAt === "never"
-        ? "row"
-        : props.reverseColumnsWhenStacked
-            ? "column-reverse"
-            : "column");
-    function columnsCssVars() {
-        return {
-            "--flex-dir": flexDir,
-            "--flex-dir-tablet": getTabletStyle({
-                stackedStyle: flexDir,
-                desktopStyle: "row",
-            }),
-        };
-    }
-    function columnCssVars(index) {
-        const gutter = index === 0 ? 0 : gutterSize;
-        if (TARGET === "reactNative") {
-            return {
-                marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-            };
-        }
-        const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutter}px`;
-        const mobileWidth = "100%";
-        const mobileMarginLeft = 0;
-        const marginLeftKey = "marginLeft";
-        return {
-            width,
-            [marginLeftKey]: 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,
-            }),
-        };
-    }
-    function getWidthForBreakpointSize(size) {
-        const breakpointSizes = getSizesForBreakpoints(props.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;
-          }
-        },
-      `;
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-3ea707d8", 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-3ea707d8-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",
-                    }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
-        React.createElement("style", null, `.div-3ea707d8 {
-  display: flex;
-  line-height: normal;
-}.div-3ea707d8-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`)));
-}
-export default Columns;

package/dist/blocks/columns/component-info.js

@@ -1,219 +0,0 @@
-export const componentInfo = {
-    // TODO: ways to statically preprocess JSON for references, functions, etc
-    name: 'Columns',
-    isRSC: true,
-    inputs: [{
-            name: 'columns',
-            type: 'array',
-            broadcast: true,
-            subFields: [{
-                    name: 'blocks',
-                    type: 'array',
-                    hideFromUI: true,
-                    defaultValue: [{
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto',
-                                    minHeight: '20px',
-                                    minWidth: '20px',
-                                    overflow: 'hidden'
-                                }
-                            },
-                            component: {
-                                name: 'Image',
-                                options: {
-                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                                    backgroundPosition: 'center',
-                                    backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948
-                                }
-                            }
-                        }, {
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto'
-                                }
-                            },
-                            component: {
-                                name: 'Text',
-                                options: {
-                                    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'
-                }, {
-                    name: 'link',
-                    type: 'url',
-                    helperText: 'Optionally set a url that clicking this column will link to'
-                }],
-            defaultValue: [{
-                    blocks: [{
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto',
-                                    minHeight: '20px',
-                                    minWidth: '20px',
-                                    overflow: 'hidden'
-                                }
-                            },
-                            component: {
-                                name: 'Image',
-                                options: {
-                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                                    backgroundPosition: 'center',
-                                    backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948
-                                }
-                            }
-                        }, {
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto'
-                                }
-                            },
-                            component: {
-                                name: 'Text',
-                                options: {
-                                    text: '<p>Enter some text...</p>'
-                                }
-                            }
-                        }]
-                }, {
-                    blocks: [{
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto',
-                                    minHeight: '20px',
-                                    minWidth: '20px',
-                                    overflow: 'hidden'
-                                }
-                            },
-                            component: {
-                                name: 'Image',
-                                options: {
-                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                                    backgroundPosition: 'center',
-                                    backgroundSize: 'cover',
-                                    aspectRatio: 0.7004048582995948
-                                }
-                            }
-                        }, {
-                            '@type': '@builder.io/sdk:Element',
-                            responsiveStyles: {
-                                large: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'stretch',
-                                    flexShrink: '0',
-                                    position: 'relative',
-                                    marginTop: '30px',
-                                    textAlign: 'center',
-                                    lineHeight: 'normal',
-                                    height: 'auto'
-                                }
-                            },
-                            component: {
-                                name: 'Text',
-                                options: {
-                                    text: '<p>Enter some text...</p>'
-                                }
-                            }
-                        }]
-                }],
-            onChange: (options) => {
-                function clearWidths() {
-                    columns.forEach(col => {
-                        col.delete('width');
-                    });
-                }
-                const columns = options.get('columns');
-                if (Array.isArray(columns)) {
-                    const containsColumnWithWidth = !!columns.find(col => col.get('width'));
-                    if (containsColumnWithWidth) {
-                        const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));
-                        if (containsColumnWithoutWidth) {
-                            clearWidths();
-                        }
-                        else {
-                            const sumWidths = columns.reduce((memo, col) => {
-                                return memo + col.get('width');
-                            }, 0);
-                            const widthsDontAddUp = sumWidths !== 100;
-                            if (widthsDontAddUp) {
-                                clearWidths();
-                            }
-                        }
-                    }
-                }
-            }
-        }, {
-            name: 'space',
-            type: 'number',
-            defaultValue: 20,
-            helperText: 'Size of gap between columns',
-            advanced: true
-        }, {
-            name: 'stackColumnsAt',
-            type: 'string',
-            defaultValue: 'tablet',
-            helperText: 'Convert horizontal columns to vertical at what device size',
-            enum: ['tablet', 'mobile', 'never'],
-            advanced: true
-        }, {
-            name: 'reverseColumnsWhenStacked',
-            type: 'boolean',
-            defaultValue: false,
-            helperText: 'When stacking columns for mobile devices, reverse the ordering',
-            advanced: true
-        }]
-};

package/dist/blocks/custom-code/component-info.js

@@ -1,23 +0,0 @@
-export const componentInfo = {
-    name: 'Custom Code',
-    static: true,
-    requiredPermissions: ['editCode'],
-    inputs: [{
-            name: 'code',
-            type: 'html',
-            required: true,
-            defaultValue: '<p>Hello there, I am custom HTML code!</p>',
-            code: true
-        }, {
-            name: 'replaceNodes',
-            type: 'boolean',
-            helperText: 'Preserve server rendered dom nodes',
-            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
-        }]
-};