imccyu
e4410b2764
The client tsdown presets found a package's own manifest by name: a glob of every packages/*/*/package.json, parsed until the name matched. tsdown's native config loader imports each package config without module cache, so the module-level cache never hit and all 82 configs repeated the glob (40-125 ms each) synchronously on tsdown's main thread, where it delayed every other package build. It was 34.5% of the client pass's main thread. - clientBundle, staticLinked and clientLibrary take the package directory (import.meta.dirname at every call site) and read <dir>/package.json once; the package name, loader id and externals come from that manifest. - A missing, unreadable or nameless manifest throws an actionable error. - The glob, the name search and the module-level caches are removed. tsdown client pass 12.78 s -> 8.73 s (median of 3 interleaved runs each, -31.7%); all 11,566 lib outputs byte-identical; all 82 configs resolve the same externals and banners. Refs #5852
101 lines
4.1 KiB
TypeScript
101 lines
4.1 KiB
TypeScript
/**
|
|
* Stylesheets enter client bundles through virtual modules, so the loader must
|
|
* register their physical files as watch dependencies.
|
|
*/
|
|
import { mkdtemp, rm, writeFile } from 'node:fs/promises'
|
|
import { tmpdir } from 'node:os'
|
|
import { join } from 'node:path'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { clientBundle } from '../packages/client/tsdown.client.ts'
|
|
|
|
interface CssPlugin {
|
|
name: string
|
|
resolveId?: (source: string, importer?: string) => string | null
|
|
load?: (this: { addWatchFile(id: string): void }, id: string) => Promise<string | null>
|
|
}
|
|
|
|
function cssPlugin(name: 'dsh-css-modules-inline' | 'dsh-css-global-inline' | 'dsh-css-text-inline'): CssPlugin {
|
|
const configs = clientBundle(
|
|
join(import.meta.dirname, '../packages/client/ui-sidebar'),
|
|
['lib/types/index.js'],
|
|
)({ env: { DSH_BUILD_FACE: 'client' } })
|
|
const client = configs.find(config => config.platform === 'browser')
|
|
if (client === undefined) throw new Error('client config missing')
|
|
const plugins = (client as { plugins: CssPlugin[] }).plugins
|
|
const plugin = plugins.find(candidate => candidate.name === name)
|
|
if (plugin === undefined) throw new Error(`${name} missing from client config`)
|
|
return plugin
|
|
}
|
|
|
|
describe('client bundle CSS Modules', () => {
|
|
it('registers the source stylesheet as a watch dependency', async () => {
|
|
const root = await mkdtemp(join(tmpdir(), 'dsh-client-css-watch-'))
|
|
try {
|
|
const stylesheet = join(root, 'Fixture.module.css')
|
|
const importer = join(root, 'index.ts')
|
|
await writeFile(stylesheet, '.root { color: red; }\n')
|
|
const plugin = cssPlugin('dsh-css-modules-inline')
|
|
const virtualId = plugin.resolveId?.('./Fixture.module.css', importer)
|
|
if (typeof virtualId !== 'string' || plugin.load === undefined) {
|
|
throw new Error('CSS Modules plugin hooks are incomplete')
|
|
}
|
|
const watched: string[] = []
|
|
|
|
const output = await plugin.load.call({ addWatchFile: id => watched.push(id) }, virtualId)
|
|
|
|
expect(watched).toEqual([stylesheet])
|
|
expect(output).toContain('data-plugin-css')
|
|
} finally {
|
|
await rm(root, { recursive: true, force: true })
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('client bundle global CSS', () => {
|
|
it('compiles a side-effect stylesheet into a watched style injector', async () => {
|
|
const root = await mkdtemp(join(tmpdir(), 'dsh-client-global-css-watch-'))
|
|
try {
|
|
const stylesheet = join(root, 'base.css')
|
|
const importer = join(root, 'index.ts')
|
|
await writeFile(stylesheet, 'body { color: red; }\n')
|
|
const plugin = cssPlugin('dsh-css-global-inline')
|
|
const virtualId = plugin.resolveId?.('./base.css', importer)
|
|
if (typeof virtualId !== 'string' || plugin.load === undefined) {
|
|
throw new Error('global CSS plugin hooks are incomplete')
|
|
}
|
|
const watched: string[] = []
|
|
|
|
const output = await plugin.load.call({ addWatchFile: id => watched.push(id) }, virtualId)
|
|
|
|
expect(watched).toEqual([stylesheet])
|
|
expect(output).toContain('data-plugin-css')
|
|
expect(output).toContain('body{color:red}')
|
|
} finally {
|
|
await rm(root, { recursive: true, force: true })
|
|
}
|
|
})
|
|
|
|
it('compiles inline stylesheets as watched text without a module side effect', async () => {
|
|
const root = await mkdtemp(join(tmpdir(), 'dsh-client-inline-css-watch-'))
|
|
try {
|
|
const stylesheet = join(root, 'base.css')
|
|
const importer = join(root, 'index.ts')
|
|
await writeFile(stylesheet, 'body { color: red; }\n')
|
|
const plugin = cssPlugin('dsh-css-text-inline')
|
|
const virtualId = plugin.resolveId?.('./base.css?inline', importer)
|
|
if (typeof virtualId !== 'string' || plugin.load === undefined) {
|
|
throw new Error('inline CSS plugin hooks are incomplete')
|
|
}
|
|
const watched: string[] = []
|
|
|
|
const output = await plugin.load.call({ addWatchFile: id => watched.push(id) }, virtualId)
|
|
|
|
expect(watched).toEqual([stylesheet])
|
|
expect(output).toContain('export default "body{color:red}"')
|
|
expect(output).not.toContain('data-plugin-css')
|
|
} finally {
|
|
await rm(root, { recursive: true, force: true })
|
|
}
|
|
})
|
|
})
|