@builder.io/sdk-react-nextjs 0.5.8 → 0.6.0

package/lib/node/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./bundle-5cab6113.js"),t=require("./USE_CLIENT_BUNDLE-29f9ac5c.js");require("lru-cache");require("react/jsx-runtime");require("react");require("next/navigation");require("./USE_SERVER_BUNDLE-25e181fa.js");exports.Blocks=e.Blocks;exports.Columns=e.Columns;exports.Content=e.ContentVariants;exports.RenderBlocks=e.RenderBlocks;exports.RenderContent=e.RenderContent;exports.Symbol=e.Symbol;exports.Text=e.Text;exports._processContentResult=e._processContentResult;exports.createRegisterComponentMessage=e.createRegisterComponentMessage;exports.fetchBuilderProps=e.fetchBuilderProps;exports.fetchEntries=e.fetchEntries;exports.fetchOneEntry=e.fetchOneEntry;exports.getAllContent=e.getAllContent;exports.getBuilderSearchParams=e.getBuilderSearchParams;exports.getContent=e.getContent;exports.isEditing=e.isEditing;exports.isPreviewing=e.isPreviewing;exports.register=e.register;exports.setEditorSettings=e.setEditorSettings;exports.track=e.track;exports.Button=t.Button;exports.Fragment=t.FragmentComponent;exports.Image=t.Image;exports.Section=t.SectionComponent;exports.Video=t.Video;

package/lib/node/index.mjs

@@ -0,0 +1,34 @@
+import { B as i, v as m, C as c, R as g, u as p, S as l, T as d, F as C, m as u, J as B, z as S, A as f, D as E, G as R, E as h, i as x, w as k, x as y, y as F, H as P } from "./bundle-babbd573.mjs";
+import { c as w, F as A, d as T, S as V, V as b } from "./USE_CLIENT_BUNDLE-dfa97c43.mjs";
+import "lru-cache";
+import "react/jsx-runtime";
+import "react";
+import "next/navigation";
+import "./USE_SERVER_BUNDLE-fcd44ecb.mjs";
+export {
+  i as Blocks,
+  w as Button,
+  m as Columns,
+  c as Content,
+  A as Fragment,
+  T as Image,
+  g as RenderBlocks,
+  p as RenderContent,
+  V as Section,
+  l as Symbol,
+  d as Text,
+  b as Video,
+  C as _processContentResult,
+  u as createRegisterComponentMessage,
+  B as fetchBuilderProps,
+  S as fetchEntries,
+  f as fetchOneEntry,
+  E as getAllContent,
+  R as getBuilderSearchParams,
+  h as getContent,
+  x as isEditing,
+  k as isPreviewing,
+  y as register,
+  F as setEditorSettings,
+  P as track
+};

package/package.json

@@ -1,38 +1,121 @@
 {
   "name": "@builder.io/sdk-react-nextjs",
-  "description": "Builder.io SDK for React",
-  "version": "0.5.8",
+  "description": "Builder.io RSC SDK for NextJS App Directory",
+  "version": "0.6.0",
   "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"
+    ".": {
+      "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"
+    }
   },
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "yarn clean && tsc"
+    "types": "tsc",
+    "build": "nx run-many -p @builder.io/sdk-react-nextjs -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": {
-    "next": "^13.4.4",
+    "next": "13.4.20-canary.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "next": "^13.4.4",
+    "@builder.io/sdks": "workspace:*",
+    "@vitejs/plugin-react": "^4.0.4",
+    "next": "13.4.20-canary.10",
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
     "react": "^18.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.2"
   },
   "dependencies": {
     "lru-cache": "^10.0.0"
   },
   "nx": {
-    "implicitDependencies": [
-      "@builder.io/sdks"
-    ],
     "targets": {
       "build": {
         "dependsOn": [

package/{dist → types}/components/content/content.types.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderRenderState } from '../../context/types.js';
 import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
 interface InternalRenderProps {
     /**
      * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
@@ -9,7 +9,7 @@ interface InternalRenderProps {
     showContent: boolean;
     isSsrAbTest: boolean;
 }
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {

package/{dist → types}/components/content-variants/content-variants.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-type VariantsProviderProps = ContentVariantsProps & {
+type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
     __isNestedRender?: boolean;
 };
-import type { ContentVariantsProps } from "./content-variants.types.js";
+import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare function ContentVariants(props: VariantsProviderProps): JSX.Element;
 export default ContentVariants;

package/{dist → types}/components/content-variants/content-variants.types.d.ts

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent } from '../../context/ty
 import type { ApiVersion } from '../../types/api-version.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
-export interface ContentVariantsProps {
+export interface ContentVariantsPrps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {

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

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

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/browser-runtime/browser.d.ts

@@ -0,0 +1,4 @@
+import type { BuilderRenderState } from '../../../context/types.js';
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInBrowser: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

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

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js';

package/types/functions/evaluate/evaluate.d.ts

@@ -0,0 +1,6 @@
+import type { ExecutorArgs } from './helpers.js';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+    event?: Event;
+    isExpression?: boolean;
+};
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;

package/types/functions/evaluate/helpers.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
+import type { getUserAttributes } from '../track/helpers.js';
+export type BuilderGlobals = {
+    isEditing: boolean | undefined;
+    isBrowser: boolean | undefined;
+    isServer: boolean | undefined;
+    getUserAttributes: typeof getUserAttributes;
+};
+export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
+    code: string;
+    builder: BuilderGlobals;
+    event: Event | undefined;
+};
+export type Executor = (args: ExecutorArgs) => any;
+export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
+export declare const getFunctionArguments: ({ builder, context, event, state }: Pick<ExecutorArgs, "context" | "builder" | "event"> & {
+    state: BuilderRenderState;
+}) => [string, Event | BuilderRenderState | import("../../context/types.js").BuilderRenderContext | BuilderGlobals][];

package/types/functions/evaluate/index.d.ts

@@ -0,0 +1 @@
+export { evaluate } from './evaluate.js';

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

@@ -1,4 +1,4 @@
-import type { ContentVariantsProps } from '../components/content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
 import type { Dictionary } from '../types/typescript.js';
 import type { GetContentOptions } from './get-content/types.js';
 type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
@@ -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<ContentVariantsProps>;
+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/{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/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/{dist/index.d.ts → types/server-index.d.ts}

@@ -1,5 +1,4 @@
 export * from './index-helpers/top-of-file.js';
-export * from './index-helpers/blocks-exports.js';
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';

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-7267e9c6" }, props.text))),
-        React.createElement("style", null, `.button-7267e9c6 {
-  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,119 +0,0 @@
-import * as React 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 = typeof props.space === "number" ? props.space || 0 : 20;
-    const cols = props.columns || [];
-    const stackAt = props.stackColumnsAt || "tablet";
-    const getWidth = function getWidth(index) {
-        return cols[index]?.width || 100 / cols.length;
-    };
-    const getColumnCssWidth = function getColumnCssWidth(index) {
-        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-    };
-    const getTabletStyle = function getTabletStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "tablet" ? stackedStyle : desktopStyle;
-    };
-    const getMobileStyle = function getMobileStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "never" ? desktopStyle : stackedStyle;
-    };
-    const flexDir = props.stackColumnsAt === "never"
-        ? "row"
-        : props.reverseColumnsWhenStacked
-            ? "column-reverse"
-            : "column";
-    const columnsCssVars = function columnsCssVars() {
-        return {
-            "--flex-dir": flexDir,
-            "--flex-dir-tablet": getTabletStyle({
-                stackedStyle: flexDir,
-                desktopStyle: "row",
-            }),
-        };
-    };
-    const columnCssVars = 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,
-            }),
-        };
-    };
-    const getWidthForBreakpointSize = function getWidthForBreakpointSize(size) {
-        const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
-        return breakpointSizes[size].max;
-    };
-    const columnsStyles = 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-3ec60680", 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-3ec60680-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-3ec60680 {
-  display: flex;
-  line-height: normal;
-}.div-3ec60680-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`)));
-}
-export default Columns;