Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js integration: run Toolpad apps as React server components #3125

Draft
wants to merge 26 commits into
base: master
Choose a base branch
from

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Jan 25, 2024

WIP

Closes #3012

// ./app/my-toolpad-app/[[...slug]]/page.tsx
import * as React from 'react';
import { ToolpadApp } from '@mui/toolpad/next';

export default function ToolpadPage() {
  return <ToolpadApp base="/my-toolpad-app" dir="./myToolpadAppDir" />;
}

To Do:

  • directives in bundles
  • make client component run
  • make server component run
  • make bindings work
  • make backend API work (create an API shim based on serverActions)
  • chokidar/fsevents, sort out how to load it correctly (e.g. how to run it without needing chokidar in package.json and the custom webpack config)
  • @blitz/internal warning
  • latest-version generates webpack warnings
  • ...

@Janpot Janpot added the new feature New feature or request label Jan 25, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 29, 2024
dir: string;
}

export async function ToolpadApp({ base, dir = './toolpad' }: ToolpadAppServerProps) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does the app decide which page to run? If it's the URL path concerning base, is it possible to abstract the URL from the app and modify the props as follows?

export interface ToolpadAppServerProps {
  dir: string;
  page: string;
}

It could help us dynamically render any page without worrying about the paths, giving user more control IMO. WDYT?

Copy link
Member Author

@Janpot Janpot Feb 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that makes sense. This is somewhat on hold because it depends on a bunch of low-level work that needs to happen first. We'll also have to abstract Toolpad routing to be able to plug in the Next.js router.

Another option I'm thinking of is to expose another component that renders a single page instead of the whole app.

Copy link

@buremba buremba Feb 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another option I'm thinking of is to expose another component that renders a single page instead of the whole app.

Yes, that would be even more useful for my use case where I have a backend to pull the MDX file and I can transform it on the fly render the page without even shell. If we can pass components and resources as well, the applications can utilize Toolpad's application model to render the generated pages in our app.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 30, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 30, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 2, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 5, 2024
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request PR: out-of-date The pull request has merge conflicts and can't be merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[studio] Allow to embed a Toolpad Studio page as a React component
2 participants