BuilderIO / builder

Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
https://builder.io
MIT License
6.77k stars 840 forks source link

SDKs: add registerComponent and linkComponent for RSC blocks #3244

Closed kerwanp closed 2 weeks ago

kerwanp commented 2 weeks ago

Description

RSC components does not have the ability to retrieve the builderLinkComponent and the builderComponents. So they are not able to render children.

async function MyCustomRSComponent(props) {
  return (
        <Blocks
          blocks={props.blocks}
          path={`component.options.enabled`}
          registeredComponents={props.builderComponents} // <- Not available
          parent={props.builderBlock.id}
          context={props.builderContext}
          linkComponent={props.builderLinkComponent} // <- Not available
        />
  );
}

This pull request adds builderComponents and builderLinkComponent to the Block componentRef.componentOptions.

changeset-bot[bot] commented 2 weeks ago

🦋 Changeset detected

Latest commit: cbde5401ea7c517b6e19268056bf70f66d31b290

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ---------------------------- | ----- | | @builder.io/sdk-react-nextjs | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nextjs-app-router-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2024 4:44pm
nextjs-pages-router-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2024 4:44pm
remix-gen2-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2024 4:44pm
svelte-vite-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2024 4:44pm
kerwanp commented 2 weeks ago

It could be interesting to add some error handling as now isRSC forces the component to be actually a server component as we now pass functions as props. And the error trace does not contain the component name Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

kerwanp commented 2 weeks ago

Rebased!

nx-cloud[bot] commented 2 weeks ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cbde5401ea7c517b6e19268056bf70f66d31b290. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 13 targets - [`nx test @e2e/tests`](https://cloud.nx.app/runs/HThnzj1XIG?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/svelte @e2e/sveltekit`](https://cloud.nx.app/runs/J5vHBl02qJ?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/next-app-dir`](https://cloud.nx.app/runs/jB66dv682b?utm_source=pull-request&utm_medium=comment) - [`nx test @builder.io/sdks`](https://cloud.nx.app/runs/3VP2KtPSVB?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/vue @e2e/nuxt`](https://cloud.nx.app/runs/ISX2lRYWWX?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/react-native`](https://cloud.nx.app/runs/xJtMcmPvnv?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/react @e2e/next-pages-dir @e2e/next-app-dir-client`](https://cloud.nx.app/runs/tiKXXy5XhL?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/qwik-city`](https://cloud.nx.app/runs/2zvQx3UwF4?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/solid @e2e/solid-start`](https://cloud.nx.app/runs/lqimk8IYv3?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/angular`](https://cloud.nx.app/runs/mUsybKsEZl?utm_source=pull-request&utm_medium=comment) - [`nx typecheck @builder.io/sdks`](https://cloud.nx.app/runs/ufksV13af1?utm_source=pull-request&utm_medium=comment) - [`nx run-many -t build -p @e2e/gen1-react @e2e/gen1-next @e2e/gen1-remix`](https://cloud.nx.app/runs/bHaSlDvcYz?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/sdk`](https://cloud.nx.app/runs/wSW4Mr1Zvx?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.