Skip to content

Conversation

@dav-is
Copy link
Member

@dav-is dav-is commented Aug 12, 2025

Uses a webpack loader to take a single entrypoint parsed with the Typescript Language Service API and pass it through typescript-api-extractor. This loads only the necessary files for a given entrypoint, and caches them in memory. This decreases the typescript parse by 90% compared to a monolithic parse (~2 seconds to ~200ms). The larger a library becomes, the more dramatic this difference becomes. Since we cache shared libraries and dependancies, when loading another entrypoint this can further decrease hot reloading time by 100-300ms.

Shaping Page (implements Option D)

Docs

Read the docs for:

Screenshots

Important

This is just an example component, and users of this library will be expected to create their own (likely more functional) table

image

Try installing

pnpm add https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@3a782ba

Performance

By default, we read the types from .d.ts files, so generating the types metadata can be fairly quick and parse only the .d.ts files.

Simple Function (types)

8 Dependant Files
  • tsconfig.json
  • ../tsconfig.json
  • ../packages/docs-infra/build/esm/basic/index.js
  • ../packages/docs-infra/build/esm/basic/Component.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/global.d.ts
  • ../node_modules/.pnpm/[email protected]/node_modules/csstype/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/jsx-runtime.d.ts

Complex React Function (CodeHighlighter types):

12 Dependant Files
  • tsconfig.json
  • ../tsconfig.json
  • ../packages/docs-infra/build/esm/CodeHighlighter/index.js
  • ../packages/docs-infra/build/esm/CodeHighlighter/types.d.ts
  • ../packages/docs-infra/build/esm/CodeHighlighter/CodeHighlighter.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/unist/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/hast/index.d.ts
  • ../node_modules/.pnpm/[email protected]/node_modules/dmsnell/diff-match-patch/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/global.d.ts
  • ../node_modules/.pnpm/[email protected]/node_modules/csstype/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/jsx-runtime.d.ts

When using compilerOptions.paths in Typescript Config

If using paths in the typescript config (or when watchSourceDirectly: true), the TS compile is based on the source files instead of the d.ts files, which can add many dependent files (global types, each imported source file, etc). This is useful if importing files in a monorepo and don't have a separate build watcher to recompile the d.ts files.

Simple Function (types) using watchSourceDirectly: true

7 Dependant Files
  • tsconfig.json
  • ../tsconfig.json
  • ../packages/docs-infra/src/basic/index.ts
  • ../packages/docs-infra/src/basic/Component.tsx
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/global.d.ts
  • ../node_modules/.pnpm/[email protected]/node_modules/csstype/index.d.ts
  • ../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/index.d.ts

Complex React Function (CodeHighlighter types): using compilerOptions.paths / watchSourceDirectly: true

150 Dependant Files

Closes: #421

@dav-is dav-is added the scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). label Aug 12, 2025
@dav-is dav-is linked an issue Aug 13, 2025 that may be closed by this pull request
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 25, 2025
@mui-bot
Copy link

mui-bot commented Aug 25, 2025

Bundle size report

Bundle size will be reported once CircleCI build #6648 finishes.

Generated by 🚫 dangerJS against d66a1f5

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 25, 2025
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 27, 2025
@mui-bot
Copy link

mui-bot commented Sep 8, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui-components/react 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 8, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 5, 2026
@netlify
Copy link

netlify bot commented Jan 5, 2026

Deploy Preview for mui-internal ready!

Name Link
🔨 Latest commit b0ec9d5
🔍 Latest deploy log https://app.netlify.com/projects/mui-internal/deploys/695c246c3400ef000850b0fc
😎 Deploy Preview https://deploy-preview-489--mui-internal.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 8, 2026
@dav-is dav-is removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 8, 2026
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.

[docs-infra] Automatic Type Doc generation

3 participants