fix getIsReactVersion18or19

Author: bashmish

packages/storybook-builder/src/index.ts

@@ -86,7 +86,7 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router, s
           }
         },
       },
-      wdsPluginPrebundleModules(env),
+      wdsPluginPrebundleModules(env, options),
       wdsPluginStorybookBuilder(options),
       wdsPluginMdx(options),
       wdsPluginExternalGlobals(globalsNameReferenceMap || globals),
@@ -160,7 +160,7 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
         externalAssets: 'sb-common-assets/**',
       }),
       rollupPluginNodeResolve(),
-      rollupPluginPrebundleModules(env),
+      rollupPluginPrebundleModules(env, options),
       rollupPluginStorybookBuilder(options),
       rollupPluginMdx(options),
       rollupPluginExternalGlobals(globalsNameReferenceMap || globals),

packages/storybook-builder/src/rollup-plugin-mdx.ts

@@ -6,15 +6,15 @@ import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
 import type { Plugin } from 'rollup';
 
-export function rollupPluginMdx(storybookOptions: Options): Plugin {
+export function rollupPluginMdx(options: Options): Plugin {
   let mdxPluginOptions: Record<string, any>;
   let jsxOptions: Record<string, any>;
 
   return {
     name: 'rollup-plugin-mdx',
 
     async buildStart() {
-      ({ mdxPluginOptions, jsxOptions } = await storybookOptions.presets.apply<Record<string, any>>(
+      ({ mdxPluginOptions, jsxOptions } = await options.presets.apply<Record<string, any>>(
         'options',
         {},
       ));
@@ -32,7 +32,7 @@ export function rollupPluginMdx(storybookOptions: Options): Plugin {
       const mdxPath = id.replace(/\.js$/, '');
       const mdxCode = await readFile(mdxPath.split('/').join(sep), { encoding: 'utf8' });
 
-      const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
+      const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
           // TODO(storybook): this is done by Storybook in 3 different places:

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -9,7 +9,10 @@ import { getNodeModuleDir } from './get-node-module-dir.js';
 
 export const PREBUNDLED_MODULES_DIR = normalize('node_modules/.prebundled_modules');
 
-export function rollupPluginPrebundleModules(env: Record<string, string>): Plugin {
+export function rollupPluginPrebundleModules(
+  env: Record<string, string>,
+  options: Options,
+): Plugin {
   const modulePaths: Record<string, string> = {};
 
   return {
@@ -39,7 +42,7 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
         alias: {
           /* for @storybook/addon-docs */
           ...(moduleExists('@storybook/react-dom-shim') && {
-            '@storybook/react-dom-shim': await getReactDomShimAlias(),
+            '@storybook/react-dom-shim': await getReactDomShimAlias(options),
           }),
         },
         external: [...modules],
@@ -94,20 +97,16 @@ export const CANDIDATES = [
  * 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
  */
-// async function getIsReactVersion18or19(options: Options) {
-async function getIsReactVersion18or19() {
-  // TODO(storybook): find a solution to have "options" here and fix the implementation
+async function getIsReactVersion18or19(options: Options) {
+  const { legacyRootApi } =
+    (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
 
-  // const { legacyRootApi } =
-  //   (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
-
-  // if (legacyRootApi) {
-  //   return false;
-  // }
+  if (legacyRootApi) {
+    return false;
+  }
 
-  // const resolvedReact = await options.presets.apply<{ reactDom?: string }>('resolvedReact', {});
-  // const reactDom = resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json'));
-  const reactDom = dirname(require.resolve('react-dom/package.json'));
+  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
@@ -119,8 +118,8 @@ async function getIsReactVersion18or19() {
   return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0');
 }
 
-async function getReactDomShimAlias() {
-  return (await getIsReactVersion18or19())
+async function getReactDomShimAlias(options: Options) {
+  return (await getIsReactVersion18or19(options))
     ? require.resolve('@storybook/react-dom-shim')
     : require.resolve('@storybook/react-dom-shim/dist/react-16');
 }

packages/storybook-builder/src/rollup-plugin-storybook-builder.ts

@@ -11,14 +11,14 @@ import {
   virtualStoriesFilename,
 } from './virtual-file-names.js';
 
-export function rollupPluginStorybookBuilder(storybookOptions: Options): Plugin {
+export function rollupPluginStorybookBuilder(options: Options): Plugin {
   let storyFilePaths: string[];
 
   return {
     name: 'rollup-plugin-storybook-builder',
 
     async buildStart() {
-      storyFilePaths = await listStories(storybookOptions);
+      storyFilePaths = await listStories(options);
     },
 
     async resolveId(source) {
@@ -37,15 +37,15 @@ export function rollupPluginStorybookBuilder(storybookOptions: Options): Plugin
 
     async load(id) {
       if (id.endsWith(virtualAppFilename)) {
-        return generateAppScript(storybookOptions);
+        return generateAppScript(options);
       }
 
       if (id.endsWith(virtualSetupAddonsFilename)) {
         return generateSetupAddonsScript();
       }
 
       if (id.endsWith(virtualStoriesFilename)) {
-        return generateStoriesScript(storybookOptions);
+        return generateStoriesScript(options);
       }
     },