[docs] Fix integration docs `_app.tsx` #4239

bharatkashyap · 2024-10-11T09:45:13Z

No description provided.

docs/data/toolpad/core/introduction/integration.md

Janpot · 2024-10-11T09:51:12Z

docs/data/toolpad/core/introduction/integration.md

 };

-export default theme;
+function getDefaultLayout(page: React.ReactElement) {


For the purpose of this doc, would it make sense to just show the absolute minimal integration. Without authentication and getDefaultLayout. Just simply showing the principles and leave the rest for the example?

Just copying the full example code in a doc is not very helpful to me, I can just go read it on github then.

Agreed, I'll remove getDefaultLayout as well. I've removed auth features and moved that to an optional bullet below this

Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Bharat Kashyap <[email protected]>

Janpot · 2024-10-11T14:49:30Z

Looking better. How do you feel about removing the credentials provider in this section and only keep the oauth providers? Maybe we should also add something like "for a full example look here..."?

bharatkashyap · 2024-10-13T10:31:03Z

Looking better. How do you feel about removing the credentials provider in this section and only keep the oauth providers? Maybe we should also add something like "for a full example look here..."?

Agreed, updated with those recommendations

Janpot · 2024-10-14T15:03:39Z

docs/data/toolpad/core/introduction/integration.md

-                error.type === 'CredentialsSignin'
-                  ? 'Invalid credentials.'
-                  : 'An error with Auth.js occurred.',
+              error: 'An error with Auth.js occurred.',


Can this be?

Suggested change

error: 'An error with Auth.js occurred.',

error: error.message,

Janpot · 2024-10-14T15:05:06Z

docs/data/toolpad/core/introduction/integration.md

-type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-};
+import type { Navigation } from '@toolpad/core';


Would this be imported from '@toolpad/core/AppProvider';?

cc @apedroferreira ?

It can be, but all the exported types are also importable from @toolpad/core.
If there's a reason not to allow this though we can change it.
In all the docs demos it's always being imported from just @toolpad/core too.

In core demoes it's encouraged to use subpath imports. We have eslint rules for this.

Ok I thought it didn't apply to types and not getting any eslint warnings for those.
I can update all these type imports separately from this PR to use specific subpaths.

Edit: ah you mean they have that rule in MUI Core, I can copy it too then

The problem we solve with it doesn't apply to types, but it's less confusing for users to be consistent. It also forces us to organize well.

Janpot

Few comments. Would make sure that there is a clear subpath to import Navigation from

bharatkashyap · 2024-10-15T10:51:44Z

Few comments. Would make sure that there is a clear subpath to import Navigation from

I've updated the Navigation type import in most places related to this PR

Janpot

I think everything has been addressed. Thank you 👍

FabioZan86 · 2024-10-20T20:15:47Z

Hello...Enjoying the topic....When using the toolpad provider, I noticed a high load in its use in _app.tsx. The LCP (largest contentful painting) metric increased from 130ms to 1.68s. What could it be?

bharatkashyap · 2024-10-21T07:07:19Z

Hello...Enjoying the topic....When using the toolpad provider, I noticed a high load in its use in _app.tsx. The LCP (largest contentful painting) metric increased from 130ms to 1.68s. What could it be?

Hello, what version were you using before and what are you using now? If you could create and share a minimal reproduction, that would be helpful to debug this

FabioZan86 · 2024-10-21T12:16:35Z

Hello...Enjoying the topic....When using the toolpad provider, I noticed a high load in its use in _app.tsx. The LCP (largest contentful painting) metric increased from 130ms to 1.68s. What could it be?

Hello, what version were you using before and what are you using now? If you could create and share a minimal reproduction, that would be helpful to debug this

Hello. In my previous project I did not use the AppProvider provider and when placing it in _app.tsx I noticed this increase in load: "@mui/lab": "^6.0.0-beta.12", "@mui/material": "^6.1.4", "@reduxjs/toolkit": "^2.3.0", "@toolpad/core": "^0.8.1", It was only when I put that I noticed this increase in loading time. I didn't make any more lines of code. I'll see if I can make a reproduction in a sandbox. Tks.

If I remove the AppProvider the LCP returns to 120ms.

apedroferreira · 2024-10-22T13:06:20Z

Hello...Enjoying the topic....When using the toolpad provider, I noticed a high load in its use in _app.tsx. The LCP (largest contentful painting) metric increased from 130ms to 1.68s. What could it be?

Hello, what version were you using before and what are you using now? If you could create and share a minimal reproduction, that would be helpful to debug this

Hello. In my previous project I did not use the AppProvider provider and when placing it in _app.tsx I noticed this increase in load: "@mui/lab": "^6.0.0-beta.12", "@mui/material": "^6.1.4", "@reduxjs/toolkit": "^2.3.0", "@toolpad/core": "^0.8.1", It was only when I put that I noticed this increase in loading time. I didn't make any more lines of code. I'll see if I can make a reproduction in a sandbox. Tks.

If I remove the AppProvider the LCP returns to 120ms.

The AppProvider component already includes a ThemeProvider and CSSBaseline, so maybe removing those from your file will help?

And if anything else needs to be wrapped by the theme then you can move them inside the AppProvider.

fix: Integration docs _app.tsx incorrect

6b76e9d

bharatkashyap added the docs Improvements or additions to the documentation label Oct 11, 2024

Janpot reviewed Oct 11, 2024

View reviewed changes

docs/data/toolpad/core/introduction/integration.md Outdated Show resolved Hide resolved

Janpot reviewed Oct 11, 2024

View reviewed changes

bharatkashyap and others added 3 commits October 11, 2024 04:10

Update docs/data/toolpad/core/introduction/integration.md

59d359a

Co-authored-by: Jan Potoms <[email protected]> Signed-off-by: Bharat Kashyap <[email protected]>

Merge branch 'master' into docs/integration-fixes

033f83b

fix: Simplify the default pages _app.tsx

d2afc76

bharatkashyap requested a review from Janpot October 11, 2024 14:38

bharatkashyap added 3 commits October 11, 2024 20:33

fix: Simplify the auth.ts file

c982feb

Merge branch 'master' into docs/integration-fixes

7a66c5c

Merge branch 'master' into docs/integration-fixes

ab31317

Janpot reviewed Oct 14, 2024

View reviewed changes

fix: Jan review

364ba8f

fix: CI

5f77cc0

Janpot approved these changes Oct 15, 2024

View reviewed changes

bharatkashyap merged commit 28e914d into mui:master Oct 16, 2024
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Fix integration docs `_app.tsx` #4239

[docs] Fix integration docs `_app.tsx` #4239

bharatkashyap commented Oct 11, 2024

Janpot Oct 11, 2024 •

edited

Loading

bharatkashyap Oct 11, 2024

Janpot commented Oct 11, 2024 •

edited

Loading

bharatkashyap commented Oct 13, 2024

Janpot Oct 14, 2024

Janpot Oct 14, 2024

apedroferreira Oct 14, 2024 •

edited

Loading

Janpot Oct 14, 2024

apedroferreira Oct 14, 2024 •

edited

Loading

Janpot Oct 14, 2024

Janpot left a comment

bharatkashyap commented Oct 15, 2024

Janpot left a comment

FabioZan86 commented Oct 20, 2024

bharatkashyap commented Oct 21, 2024

FabioZan86 commented Oct 21, 2024 •

edited

Loading

apedroferreira commented Oct 22, 2024 •

edited

Loading

	error: 'An error with Auth.js occurred.',
	error: error.message,

[docs] Fix integration docs _app.tsx #4239

[docs] Fix integration docs _app.tsx #4239

Conversation

bharatkashyap commented Oct 11, 2024

Janpot Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

bharatkashyap Oct 11, 2024

Choose a reason for hiding this comment

Janpot commented Oct 11, 2024 • edited Loading

bharatkashyap commented Oct 13, 2024

Janpot Oct 14, 2024

Choose a reason for hiding this comment

Janpot Oct 14, 2024

Choose a reason for hiding this comment

apedroferreira Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Janpot Oct 14, 2024

Choose a reason for hiding this comment

apedroferreira Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Janpot Oct 14, 2024

Choose a reason for hiding this comment

Janpot left a comment

Choose a reason for hiding this comment

bharatkashyap commented Oct 15, 2024

Janpot left a comment

Choose a reason for hiding this comment

FabioZan86 commented Oct 20, 2024

bharatkashyap commented Oct 21, 2024

FabioZan86 commented Oct 21, 2024 • edited Loading

apedroferreira commented Oct 22, 2024 • edited Loading

[docs] Fix integration docs `_app.tsx` #4239

[docs] Fix integration docs `_app.tsx` #4239

Janpot Oct 11, 2024 •

edited

Loading

Janpot commented Oct 11, 2024 •

edited

Loading

apedroferreira Oct 14, 2024 •

edited

Loading

apedroferreira Oct 14, 2024 •

edited

Loading

FabioZan86 commented Oct 21, 2024 •

edited

Loading

apedroferreira commented Oct 22, 2024 •

edited

Loading