feat(vue): support experimental.componentDetection

[IgorShevchik]

Sync with nuxt/ui — ports 3a568b5 (#6731).

experimental.componentDetection narrows the generated theme CSS to the components an app actually uses, plus their dependency closure. It only ever worked under Nuxt; this makes it work in the Vue (unplugin) integration, and fixes several things in the scanner along the way.

The mechanism differs between the two integrations

Worth stating, because it looks like an inconsistency and isn't. Nuxt narrows the @source list to the detected components' template files. The Vue plugin cannot: its templates live inside node_modules, where Tailwind widens a file @source to a scan of the whole parent directory — a narrowed list wouldn't narrow the CSS. So it sources the whole directory and instead blanks the theme of undetected components at write time, the same transformation theme.unstyled performs. The files still exist, because the #build/* aliases and the type imports need them to.

Scanner fixes that came with it

• kebab-case tags — <b24-button> is mandatory for in-DOM templates and was never matched. The kebab alternative only matches as a tag; bare kebab identifiers in scripts and prose would match far too much ordinary text.
• Prose shadowing — the dependency graph is keyed by file basename, and eight components here have a prose/ twin (Accordion, Badge, Card, Collapsible, FieldGroup, Kbd, Table, Tabs). Letting them into the graph overwrote the regular component's dependency set.
• Phantom edges and detections — the pattern matches ordinary identifiers, so both are now filtered against real component files. includeComponents names too, and unknown ones warn.
• Declaration files — components.d.ts declares every component ever rendered, so scanning it kept anything used once detected forever.
• .mts / .mjs / .cjs in the scan glob and the dev watcher.
• resolveExtraScanDirs — scanPackages packages live in node_modules (which the root scan skips) and components.dirs can point outside the root. Build-output ignores are skipped for package dirs, since published packages ship their code in dist/.

Fork adaptations

All plumbing, no logic:

• getTemplates takes vue as its fourth argument, TemplatePlugin takes componentDir as its second — this fork dropped upstream's unused uiConfig/appConfig threading in earlier ports.
• Bitrix24UIOptions stops omitting experimental, which is what made the option unreachable from the Vue plugin in the first place.
• consola rather than @nuxt/kit's logger in utils/components.ts and the Vue plugin — both run outside Nuxt, and that file must not drag @nuxt/kit into a Vue build. templates.ts keeps logger; it is Nuxt-only there.
• The scan prefix is the literal 'B24' at both call sites (this fork has no configurable component prefix). kebabCase('B24') is 'b24', so <b24-button> and <lazy-b24-tooltip> match — verified, not assumed.
• Upstream's PageCTA acronym case is n/a: no component here has an acronym in its name.

Two defects this surfaced

playgrounds/vue/tsconfig.app.json had a broken alias. It mapped "#build/b24ui" to "./node_modules/.b24ui-nuxt/b24ui/*" — a wildcard on the value with none on the key, plus a trailing comma. TypeScript treats a pattern without * as an exact match, so #build/b24ui/button never resolved through it. Upstream's commit adds the same alias correctly; taken as the fix.

The docs named a component that does not exist. Both installation guides showed componentDetection: ['Modal', 'Dropdown', 'Popover']. There is no Dropdown in either project — it is DropdownMenu. That used to be harmless; it isn't any more, now that unknown names warn.

One deliberate divergence

Upstream keeps the scanned-extension list as a literal in two places — the scan glob and the builder:watch filter — and had to edit both in this very commit when .mts/.mjs/.cjs were added. An extension in one and not the other means a file that changes the answer never triggers a refresh: no error, no signal. Exported as COMPONENT_DETECTION_EXTENSIONS and used by both. This fork had already split COMPONENT_DETECTION_WATCH_RE out for the same reason.

Tests

test/utils/components.spec.ts (new) — upstream's spec, adapted. Real temporary directories rather than a mocked fs, because half of what is checked is glob and module-resolution behaviour, which a mock would define away.

Two tests are this fork's rather than upstream's:

• does not build graph edges to names that are not components — upstream's spec does not cover that filter. Verified by deleting it and watching all 38 tests still pass. It needs a stand-in component directory: the real tree has no component that mentions a B24-prefixed non-component, so no fixture under src/ can show the difference.
• componentDetection examples in the docs name components that exist — the Dropdown defect, now guarded.

Upstream's junk-identifier fixture (URL → RL, UUID → UID) doesn't apply with a B24 prefix and is replaced with B24Config/B24Endpoint. The first attempt used B24Theme — which turns out to be a real component here, so the test failed and said so.

test/utils/templates.spec.ts — the extension test now iterates the shared constant instead of a five-item literal, and a second test holds the glob to the same constant so the two can't drift back apart with every test green.

Mutations tried, each red: drop the prose/** ignore; drop the graph-edge filter; drop the validComponents filter; stop ignoring *.d.ts; drop the kebab alternative; make the graph follow the scan prefix; apply build-output ignores to package dirs; point the watcher at a literal; point the glob at a literal; put Dropdown back in the docs.

End-to-end check

Built playgrounds/vue with componentDetection: true — a real exercise of resolveExtraScanDirs, since that playground's components.dirs points at ../nuxt/app/components, outside the Vite root:

[success] Bitrix24 UI detected 43 components in use (including dependencies)

node_modules/.b24ui-nuxt/b24ui/color-picker.ts comes out with every slot blanked; button.ts does not.

The CSS saving there is modest, and worth stating plainly rather than rounding up: 599,544 → 596,929 bytes, about 0.4%. That app uses 43 components, and most of the bundle is shared utilities and design tokens rather than per-component classes. The feature does what it says; the headline number depends entirely on how much of the library an app leaves unused.

Verify (CI=true)

lint · typecheck · test · build — all green. Tests 6410 passed | 6 skipped across 280 files.

Ledger: cursor → 3a568b5, 241 entries; the 9b08a84 and edf73d3 entries are reconciled to PR #395 / c4d291c.

---

Generated by Claude Code