-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20698 from Dschungelabenteuer/fix-hmr-vite
Vite: Replace vite-plugin-externals with custom plugin
- Loading branch information
Showing
6 changed files
with
168 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
code/lib/builder-vite/src/plugins/external-globals-plugin.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { rewriteImport } from './external-globals-plugin'; | ||
|
|
||
| const packageName = '@storybook/package'; | ||
| const globals = { [packageName]: '_STORYBOOK_PACKAGE_' }; | ||
|
|
||
| const cases = [ | ||
| { | ||
| globals, | ||
| packageName, | ||
| input: `import { Rain, Jour as Day, Nuit as Night, Sun } from "${packageName}"`, | ||
| output: `const { Rain, Jour: Day, Nuit: Night, Sun } = ${globals[packageName]}`, | ||
| }, | ||
| { | ||
| globals, | ||
| packageName, | ||
| input: `import * as Foo from "${packageName}"`, | ||
| output: `const Foo = ${globals[packageName]}`, | ||
| }, | ||
| { | ||
| globals, | ||
| packageName, | ||
| input: `import Foo from "${packageName}"`, | ||
| output: `const {default: Foo} = ${globals[packageName]}`, | ||
| }, | ||
| { | ||
| globals, | ||
| packageName, | ||
| input: `import{Rain,Jour as Day,Nuit as Night,Sun}from'${packageName}'`, | ||
| output: `const {Rain,Jour: Day,Nuit: Night,Sun} =${globals[packageName]}`, | ||
| }, | ||
| { | ||
| globals, | ||
| packageName, | ||
| input: `const { Afternoon } = await import('${packageName}')`, | ||
| output: `const { Afternoon } = ${globals[packageName]}`, | ||
| }, | ||
| ]; | ||
|
|
||
| test('rewriteImport', () => { | ||
| cases.forEach(({ input, output, globals: caseGlobals, packageName: casePackage }) => { | ||
| expect(rewriteImport(input, caseGlobals, casePackage)).toStrictEqual(output); | ||
| }); | ||
| }); |
119 changes: 119 additions & 0 deletions
119
code/lib/builder-vite/src/plugins/external-globals-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import { join } from 'node:path'; | ||
| import { init, parse } from 'es-module-lexer'; | ||
| import MagicString from 'magic-string'; | ||
| import { emptyDir, ensureDir, ensureFile, writeFile } from 'fs-extra'; | ||
| import { mergeAlias } from 'vite'; | ||
| import type { Alias, Plugin } from 'vite'; | ||
|
|
||
| const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); | ||
| const defaultImportRegExp = 'import ([^*{}]+) from'; | ||
| const replacementMap = new Map([ | ||
| ['import ', 'const '], | ||
| ['import{', 'const {'], | ||
| ['* as ', ''], | ||
| [' as ', ': '], | ||
| [' from ', ' = '], | ||
| ['}from', '} ='], | ||
| ]); | ||
|
|
||
| /** | ||
| * This plugin swaps out imports of pre-bundled storybook preview modules for destructures from global | ||
| * variables that are added in runtime.mjs. | ||
| * | ||
| * For instance: | ||
| * | ||
| * ```js | ||
| * import { useMemo as useMemo2, useEffect as useEffect2 } from "@storybook/preview-api"; | ||
| * ``` | ||
| * | ||
| * becomes | ||
| * | ||
| * ```js | ||
| * const { useMemo: useMemo2, useEffect: useEffect2 } = __STORYBOOK_MODULE_PREVIEW_API__; | ||
| * ``` | ||
| * | ||
| * It is based on existing plugins like https://github.com/crcong/vite-plugin-externals | ||
| * and https://github.com/eight04/rollup-plugin-external-globals, but simplified to meet our simple needs. | ||
| */ | ||
| export async function externalGlobalsPlugin(externals: Record<string, string>) { | ||
| await init; | ||
| return { | ||
| name: 'storybook:external-globals-plugin', | ||
| enforce: 'post', | ||
| // In dev (serve), we set up aliases to files that we write into node_modules/.cache. | ||
| async config(config, { command }) { | ||
| if (command !== 'serve') { | ||
| return undefined; | ||
| } | ||
| const newAlias = mergeAlias([], config.resolve?.alias) as Alias[]; | ||
|
|
||
| const cachePath = join(process.cwd(), 'node_modules', '.cache', 'vite-plugin-externals'); | ||
| await ensureDir(cachePath); | ||
| await emptyDir(cachePath); | ||
| await Promise.all( | ||
| (Object.keys(externals) as Array<keyof typeof externals>).map(async (externalKey) => { | ||
| const externalCachePath = join(cachePath, `${externalKey}.js`); | ||
| newAlias.push({ find: new RegExp(`^${externalKey}$`), replacement: externalCachePath }); | ||
| await ensureFile(externalCachePath); | ||
| await writeFile(externalCachePath, `module.exports = ${externals[externalKey]};`); | ||
| }) | ||
| ); | ||
|
|
||
| return { | ||
| resolve: { | ||
| alias: newAlias, | ||
| }, | ||
| }; | ||
| }, | ||
| // Replace imports with variables destructured from global scope | ||
| async transform(code: string, id: string) { | ||
| const globalsList = Object.keys(externals); | ||
| if (globalsList.every((glob) => !code.includes(glob))) return undefined; | ||
|
|
||
| const [imports] = parse(code); | ||
| const src = new MagicString(code); | ||
| imports.forEach(({ n: path, ss: startPosition, se: endPosition }) => { | ||
| const packageName = path; | ||
| if (packageName && globalsList.includes(packageName)) { | ||
| const importStatement = src.slice(startPosition, endPosition); | ||
| const transformedImport = rewriteImport(importStatement, externals, packageName); | ||
| src.update(startPosition, endPosition, transformedImport); | ||
| } | ||
| }); | ||
|
|
||
| return { | ||
| code: src.toString(), | ||
| map: src.generateMap({ | ||
| source: id, | ||
| includeContent: true, | ||
| hires: true, | ||
| }), | ||
| }; | ||
| }, | ||
| } satisfies Plugin; | ||
| } | ||
|
|
||
| function getDefaultImportReplacement(match: string) { | ||
| const matched = match.match(defaultImportRegExp); | ||
| return matched && `const {default: ${matched[1]}} =`; | ||
| } | ||
|
|
||
| function getSearchRegExp(packageName: string) { | ||
| const staticKeys = [...replacementMap.keys()].map(escapeKeys); | ||
| const packageNameLiteral = `.${packageName}.`; | ||
| const dynamicImportExpression = `await import\\(.${packageName}.\\)`; | ||
| const lookup = [defaultImportRegExp, ...staticKeys, packageNameLiteral, dynamicImportExpression]; | ||
| return new RegExp(`(${lookup.join('|')})`, 'g'); | ||
| } | ||
|
|
||
| export function rewriteImport( | ||
| importStatement: string, | ||
| globs: Record<string, string>, | ||
| packageName: string | ||
| ): string { | ||
| const search = getSearchRegExp(packageName); | ||
| return importStatement.replace( | ||
| search, | ||
| (match) => replacementMap.get(match) ?? getDefaultImportReplacement(match) ?? globs[packageName] | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters