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 on the webpack loader here.

Running the POC Demo

cd packages/docs-infra
pnpm run build
cd ./docs
pnpm run dev
http://localhost:3000/docs-infra/hooks/use-types

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 watchSourceDirectly: true

Important

Do not use watchSourceDirectly: true unless you can optimize the source code's imports.
As shown below, it can balloon and drastically slow down builds.
If building d.ts files with a watcher, there's no need to watch the source files directly.

150 Dependant Files [warning]

In this complex case with watchSourceDirectly: true, it can be beneficial to move the types to their own types.ts file to avoid needing so many dependencies.

In cases like this (more than 25 dependencies), we should warn the user that they should optimize this entrypoint, or disable watchSourceDirectly: true for this given entrypoint. The types metadata will still update when the library is rebuilt.

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 added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 24, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 25, 2025
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