Skip to content

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

Open
brijeshb42 wants to merge 1 commit intomui:masterfrom
brijeshb42:migrate-docs-app
Open

[docs-infra] Extract shared App component from _app into @mui/docs#47933
brijeshb42 wants to merge 1 commit intomui:masterfrom
brijeshb42:migrate-docs-app

Conversation

@brijeshb42
Copy link
Contributor

@brijeshb42 brijeshb42 commented Mar 9, 2026

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, _document.js, codeVariant and codeStyling to typescript.

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.

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

mui-bot commented Mar 9, 2026

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 e7b5a04

@brijeshb42 brijeshb42 force-pushed the migrate-docs-app branch 9 times, most recently from de42f91 to aedfd8c Compare March 10, 2026 06:11
@brijeshb42 brijeshb42 requested review from a team March 10, 2026 07:14
@brijeshb42 brijeshb42 marked this pull request as ready for review March 10, 2026 07:25
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants