[docs-infra] Extract shared App component from _app into @mui/docs by brijeshb42 · Pull Request #47933 · mui/material-ui

brijeshb42 · 2026-03-09T17:05:32Z

Create a configurable <DocsApp> component in @mui/docs/DocsApp that encapsulates the common provider tree and boilerplate previously duplicated between material-ui and mui-x _app files.

Followup to - #47897

New module: packages/mui-docs/src/DocsApp/

DocsApp.tsx: Configurable component rendering the full provider tree (DocsProvider → CodeCopyProvider → CodeStylingProvider → CodeVariantProvider → PageContext → DemoContext → ThemeWrapper → StyledEngineProvider → AnalyticsProvider → children + GoogleAnalytics). Accepts props for config, serviceWorkerPath, pageContextValue, demoContextValue, adConfig, ThemeWrapper, and onInit.
createGetInitialProps.ts: Factory for MyApp.getInitialProps, parameterized by translationsContext (webpack require.context). Follows the same pattern as @mui/docs/Document's createGetInitialProps.
reportWebVitals.ts: Shared reportWebVitals function.
printConsoleBanner.ts: Exported function for the MUI ASCII banner.
serviceWorker.ts: registerServiceWorker(swPath) parameterized by path.
loadDependencies.ts: Material Icons CSS font loading via fg-loadcss.

Moved into DocsApp/ (only used by DocsApp, no external consumers):

AnalyticsProvider.tsx (from src/AnalyticsProvider/)
GoogleAnalytics.tsx (from src/GoogleAnalytics/)
StyledEngineProvider.tsx (from src/StyledEngineProvider/)

Converted _app.js, _document.js, codeVariant and codeStyling to typescript.

Type fixes in PageContext when converting to typescript:

Added productCategoryId to MuiPageContext interface (was passed at runtime but missing from the type).
Relaxed ProductVersion to { text; current?; href? } to match actual usage (versions are either current or have an href link, not both required).

Added docs/types/webpack.d.ts declaring require.context() on NodeJS.Require to support the TypeScript conversion.

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2026-03-09T17:06:48Z

Netlify deploy preview

https://deploy-preview-47933--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B^(0.00%)	0B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against eda05f3

Janpot

Seems good, would consider tweaking the API a bit, such that we assemble contexts inside of the component, not outside.

Janpot · 2026-03-13T10:04:10Z

+    if (productId === 'system') {
+      return 'MUI System';
+    }
+    if (productId?.startsWith('x-')) {


Which pages would hit this branch?

As per the code, all pages like /x/react-<data-grid|datepickers|charts|tree-view>.
It might also be the case that its not needed here since mui-x already has this. I have not removed any of the existing logic, just re-arranged the components/props.

Just asking because I don't think it will ever be reached in this app

I think you are right. I can add a note to remove in a separate PR. I don't want to change any logic in this PR.

Create a configurable <DocsApp> component in @mui/docs/DocsApp that encapsulates the common provider tree and boilerplate previously duplicated between material-ui and mui-x _app files. New module: packages/mui-docs/src/DocsApp/ - DocsApp.tsx: Configurable component rendering the full provider tree (DocsProvider → CodeCopyProvider → CodeStylingProvider → CodeVariantProvider → PageContext → DemoContext → ThemeWrapper → StyledEngineProvider → AnalyticsProvider → children + GoogleAnalytics). Accepts props for config, serviceWorkerPath, pageContextValue, demoContextValue, adConfig, ThemeWrapper, and onInit. - createGetInitialProps.ts: Factory for MyApp.getInitialProps, parameterized by translationsContext (webpack require.context). Follows the same pattern as @mui/docs/Document's createGetInitialProps. - reportWebVitals.ts: Shared reportWebVitals function. - printConsoleBanner.ts: Exported function for the MUI ASCII banner. - serviceWorker.ts: registerServiceWorker(swPath) parameterized by path. - loadDependencies.ts: Material Icons CSS font loading via fg-loadcss. Moved into DocsApp/ (only used by DocsApp, no external consumers): - AnalyticsProvider.tsx (from src/AnalyticsProvider/) - GoogleAnalytics.tsx (from src/GoogleAnalytics/) - StyledEngineProvider.tsx (from src/StyledEngineProvider/) Converted _app.js → _app.tsx and _document.js → _document.tsx in both material-ui and mui-x docs, adding proper TypeScript annotations. Type fixes in PageContext: - Added productCategoryId to MuiPageContext interface (was passed at runtime but missing from the type). - Relaxed ProductVersion to { text; current?; href? } to match actual usage (versions are either current or have an href link, not both required). Added docs/types/webpack.d.ts declaring require.context() on NodeJS.Require to support the TypeScript conversion.

Also renamed some

silviuaavram · 2026-03-13T12:15:55Z

+    }
+
+    // TODO: 'core' is a productCategoryId, not a productId — this branch may be dead code.
+    if ((productId as string) === 'core') {


why does this need a cast and the other checks don't?

We need a bit of cleanup in this logic. Its currently there mainly because I converted some of the code to typescript and this was what was caught in a ts issue since core is not a productId. So I cast it because I didn't want to touch any of the existing logic.

siriwatknp

I don't see emotionCache used in the new _app.tsx, is it expected?

siriwatknp

Ah, okay. It's in DocsApp.tsx.

…ui#47933)

brijeshb42 added the scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). label Mar 9, 2026

brijeshb42 force-pushed the migrate-docs-app branch 9 times, most recently from de42f91 to aedfd8c Compare March 10, 2026 06:11

brijeshb42 requested review from a team March 10, 2026 07:14

brijeshb42 force-pushed the migrate-docs-app branch from aedfd8c to b6c2edb Compare March 10, 2026 07:14

brijeshb42 marked this pull request as ready for review March 10, 2026 07:25

brijeshb42 force-pushed the migrate-docs-app branch from b6c2edb to e7b5a04 Compare March 10, 2026 07:52

brijeshb42 mentioned this pull request Mar 10, 2026

[docs-infra] Migrate modules to be used from @mui/docs mui/mui-x#21590

Merged

1 task

brijeshb42 force-pushed the migrate-docs-app branch 7 times, most recently from 59ce4e3 to d76d8de Compare March 11, 2026 11:07

brijeshb42 requested a review from Janpot March 11, 2026 11:15

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2026

brijeshb42 force-pushed the migrate-docs-app branch from d76d8de to 2c9c958 Compare March 11, 2026 11:35

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2026

brijeshb42 force-pushed the migrate-docs-app branch 2 times, most recently from 01464c2 to e5aacf9 Compare March 12, 2026 09:23

Janpot reviewed Mar 13, 2026

View reviewed changes

Comment thread docs/pages/_app.tsx Outdated

Janpot approved these changes Mar 13, 2026

View reviewed changes

brijeshb42 force-pushed the migrate-docs-app branch 2 times, most recently from 8d72564 to 350e2ae Compare March 13, 2026 09:48

Janpot reviewed Mar 13, 2026

View reviewed changes

brijeshb42 force-pushed the migrate-docs-app branch from 350e2ae to 0683b28 Compare March 13, 2026 10:20

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 13, 2026

brijeshb42 added 2 commits March 13, 2026 17:02

Flatten props for demo and page context providers

eda05f3

Also renamed some

brijeshb42 force-pushed the migrate-docs-app branch from 0683b28 to eda05f3 Compare March 13, 2026 11:33

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 13, 2026

silviuaavram approved these changes Mar 13, 2026

View reviewed changes

siriwatknp reviewed Mar 13, 2026

View reviewed changes

siriwatknp approved these changes Mar 13, 2026

View reviewed changes

brijeshb42 merged commit c5c1d83 into mui:master Mar 16, 2026
23 checks passed

brijeshb42 deleted the migrate-docs-app branch March 16, 2026 07:19

siriwatknp pushed a commit to siriwatknp/material-ui that referenced this pull request Mar 18, 2026

[docs-infra] Extract shared App component from _app into @mui/docs (m…

cefe1c4

…ui#47933)

brijeshb42 mentioned this pull request Mar 18, 2026

[docs-infra] Migrate more leaf components to mui-docs #48018

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[docs-infra] Extract shared App component from _app into @mui/docs#47933

[docs-infra] Extract shared App component from _app into @mui/docs#47933
brijeshb42 merged 2 commits into
mui:masterfrom
brijeshb42:migrate-docs-app

brijeshb42 commented Mar 9, 2026 •

edited

Loading

Uh oh!

mui-bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Janpot left a comment

Uh oh!

Janpot Mar 13, 2026

Uh oh!

brijeshb42 Mar 13, 2026 •

edited

Loading

Uh oh!

Janpot Mar 13, 2026

Uh oh!

brijeshb42 Mar 13, 2026

Uh oh!

silviuaavram Mar 13, 2026

Uh oh!

brijeshb42 Mar 13, 2026

Uh oh!

siriwatknp left a comment

Uh oh!

siriwatknp left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

brijeshb42 commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Uh oh!

Janpot left a comment

Choose a reason for hiding this comment

Uh oh!

Janpot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Janpot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

silviuaavram Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

brijeshb42 Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

brijeshb42 commented Mar 9, 2026 •

edited

Loading

mui-bot commented Mar 9, 2026 •

edited

Loading

brijeshb42 Mar 13, 2026 •

edited

Loading