Integrate Toolpad Core in Toolpad Studio runtime #4119
Conversation
| @@ -270,6 +270,14 @@ if (import.meta.hot) { | |||
| : // load compiled | |||
| path.resolve(currentDirectory, '../exports'), | |||
| }, | |||
| { | |||
| find: '@toolpad/core', | |||
There was a problem hiding this comment.
I had to add an alias here to get @toolpad/core imports to work in Studio, not sure why it's not needed for @toolpad/studio-components for example, as those just worked?
There was a problem hiding this comment.
pnpm installs the core build folder into studio node modules because of its package.json publishConfig.directory setting. During the core build command a package.json is generated in that build folder. the build folder is what gets published on npm.
The dev command of builds the sources into the build folder, but it doesn't copy the package.json. That's why module resolution doesn't work. You made it work by alisaing to the core main folder, which does have a package.json.
I added some commits that just call the copy command in the dev command. It's not perfect, it won't watch for changes to package.json, but at least it unblocks us in the PR.
github-actions
bot
added
PR: out-of-date
|
This horizontal scrolling is something to investigate: Screen.Recording.2024-09-20.at.10.26.48.mov |
Yeah still fixing a few things. |
github-actions
bot
added
the
PR: out-of-date
| return [ | ||
| `import { ${name} } from '@toolpad/core/${name}';${ | ||
| hasNextJsVersion | ||
| ? `\nimport { ${name} } from '@toolpad/core/nextjs/${name}'; // Next.js` | ||
| : '' | ||
| }${ | ||
| hasReactRouterDOMVersion | ||
| ? `\nimport { ${name} } from '@toolpad/core/react-router-dom/${name}'; // react-router-dom` |
There was a problem hiding this comment.
We don't support imports deeper than one level. This must be
import { AppProvider } from '@toolpad/core/react-router-dom'cc @bharatkashyap same for nextjs
github-actions
bot
removed
the
PR: out-of-date
apedroferreira
force-pushed
the
use-core-in-studio
branch
from
028a6fb
to
f0d6a06
Compare
github-actions
bot
added
the
PR: out-of-date
There was a problem hiding this comment.
Looks good, let's just add that test that covers the React warning we see in https://stackblitz.com/run?file=Demo.tsx,index.tsx
github-actions
bot
removed
the
PR: out-of-date
Added that test and also a full-size map demo in https://deploy-preview-4119--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#full-screen-content Merging soon if there's nothing else! |
|
The theme toggle doesn't work Screen.Recording.2024-10-09.at.16.22.07.mov |
Works for me... |
Yes, I could But now it seems to be fixed. I did expect all of them to change when I switch one 🤔 |
Weird, I guess we can ignore for now and it might come up again if it's an issue?
This used to happen before, I can try to make it work like that again later if we decide it would be best. |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Closes #4060
Closes #4155
Screen.Recording.2024-10-03.at.14.21.49.mov
Screen.Recording.2024-10-03.at.14.22.40.mov
AppProviderwithreact-router-domrouting out of the boxsxprop toDashboardLayoutthat can be used to customizeheight,widthor any other styles. The default layout dimensions are100vhand100vwbut can be overriden. The layout header and sidebar do not use fixed positions anymore, but absolute ones instead, and vertical scrolling happens in the layout content only.https://deploy-preview-4119--mui-toolpad-docs.netlify.app/toolpad/core/introduction/base-concepts
https://deploy-preview-4119--mui-toolpad-docs.netlify.app/toolpad/core/react-app-provider
https://deploy-preview-4119--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#full-screen-content
#4045 and #4149 will be covered separately for a fuller documentation of the new
AppProviderfor React Router. Left TODO comments in both issues.