/
preset.ts
71 lines (61 loc) · 2.17 KB
/
preset.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import type { Options } from '@storybook/types';
import { join, dirname, isAbsolute } from 'path';
import { readFile } from 'fs/promises';
/**
* Get react-dom version from the resolvedReact preset, which points to either
* a root react-dom dependency or the react-dom dependency shipped with addon-docs
*/
const getIsReactVersion18or19 = async (options: Options) => {
const { legacyRootApi } =
(await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
if (legacyRootApi) {
return false;
}
const resolvedReact = await options.presets.apply<{ reactDom?: string }>('resolvedReact', {});
const reactDom = resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json'));
if (!isAbsolute(reactDom)) {
// if react-dom is not resolved to a file we can't be sure if the version in package.json is correct or even if package.json exists
// this happens when react-dom is resolved to 'preact/compat' for example
return false;
}
const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8'));
return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0');
};
export const webpackFinal = async (config: any, options: Options) => {
const isReactVersion18 = await getIsReactVersion18or19(options);
if (isReactVersion18) {
return config;
}
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve?.alias,
'@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
},
},
};
};
export const viteFinal = async (config: any, options: Options) => {
const isReactVersion18 = await getIsReactVersion18or19(options);
if (isReactVersion18) {
return config;
}
const alias = Array.isArray(config.resolve?.alias)
? config.resolve.alias.concat({
find: /^@storybook\/react-dom-shim$/,
replacement: '@storybook/react-dom-shim/dist/react-16',
})
: {
...config.resolve?.alias,
'@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
};
return {
...config,
resolve: {
...config.resolve,
alias,
},
};
};