From addf7874421179d1cece6625fbdb56e92314f115 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 25 Oct 2020 00:04:53 +0800 Subject: [PATCH 1/7] React: Support JSX transform introduced in 16.14.0 --- app/react/src/server/framework-preset-react.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index c2180d367dd9..0750813f380a 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -2,6 +2,7 @@ import { TransformOptions } from '@babel/core'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import type { Configuration } from 'webpack'; +import semver from '@storybook/semver'; import { logger } from '@storybook/node-logger'; import type { StorybookOptions } from '@storybook/core/types'; @@ -22,11 +23,20 @@ export async function babel(config: TransformOptions, options: StorybookOptions) } export async function babelDefault(config: TransformOptions) { + let reactVersion; + try { + // eslint-disable-next-line global-require,import/no-dynamic-require + const reactPkg = require(require.resolve('react/package.json')); + reactVersion = reactPkg.version; + } catch { + logger.warn('Unable to determine react version'); + } + const presetReactOptions = semver.gte(reactVersion, '16.14.0') ? { runtime: 'automatic' } : {}; return { ...config, presets: [ ...config.presets, - require.resolve('@babel/preset-react'), + [require.resolve('@babel/preset-react'), presetReactOptions], require.resolve('@babel/preset-flow'), ], plugins: [...(config.plugins || []), require.resolve('babel-plugin-add-react-displayname')], From 271fb46d48aa7639e8baeed7981d5e7f3e1883fb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 25 Oct 2020 00:54:32 +0800 Subject: [PATCH 2/7] Don't use JSX transform when no react version --- app/react/src/server/framework-preset-react.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index 0750813f380a..4c82f2a4249a 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -31,7 +31,8 @@ export async function babelDefault(config: TransformOptions) { } catch { logger.warn('Unable to determine react version'); } - const presetReactOptions = semver.gte(reactVersion, '16.14.0') ? { runtime: 'automatic' } : {}; + const presetReactOptions = + reactVersion && semver.gte(reactVersion, '16.14.0') ? { runtime: 'automatic' } : {}; return { ...config, presets: [ From 434223de42dcf91497616258def0857685f2d134 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= Date: Sat, 24 Oct 2020 21:34:38 +0200 Subject: [PATCH 3/7] detect user's react version --- app/react/src/server/framework-preset-react.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index 4c82f2a4249a..d72f8b06356f 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -1,3 +1,4 @@ +import path from 'path'; import { TransformOptions } from '@babel/core'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import type { Configuration } from 'webpack'; @@ -21,12 +22,17 @@ export async function babel(config: TransformOptions, options: StorybookOptions) plugins: [require.resolve('react-refresh/babel'), ...(config.plugins || [])], }; } +const storybookReactDirName = path.dirname(require.resolve('@storybook/react/package.json')); +// TODO: improve node_modules detection +const context = storybookReactDirName.includes('node_modules') + ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules + : path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo export async function babelDefault(config: TransformOptions) { let reactVersion; try { // eslint-disable-next-line global-require,import/no-dynamic-require - const reactPkg = require(require.resolve('react/package.json')); + const reactPkg = require(require.resolve('react/package.json', { paths: [context] })); reactVersion = reactPkg.version; } catch { logger.warn('Unable to determine react version'); From 6f60abbdcee01e3c4ffbac6f62ee151571b71be2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= Date: Sun, 25 Oct 2020 10:45:38 +0100 Subject: [PATCH 4/7] React test jsx runtime --- app/react/src/server/framework-preset-react.ts | 14 +++++++++++--- lib/cli/src/frameworks/react/js/Button.js | 2 +- lib/cli/src/frameworks/react/js/Header.js | 2 +- lib/cli/src/frameworks/react/js/Page.js | 2 +- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index d72f8b06356f..a4452881b974 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -28,17 +28,25 @@ const context = storybookReactDirName.includes('node_modules') ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules : path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo +const hasJsxRuntime = (() => { + try { + require.resolve('react/jsx-runtime', { paths: [context] }); + return true; + } catch (e) { + return false; + } +})(); + export async function babelDefault(config: TransformOptions) { let reactVersion; try { // eslint-disable-next-line global-require,import/no-dynamic-require - const reactPkg = require(require.resolve('react/package.json', { paths: [context] })); + const reactPkg = require(require.resolve('react/jsx-runtime', { paths: [context] })); reactVersion = reactPkg.version; } catch { logger.warn('Unable to determine react version'); } - const presetReactOptions = - reactVersion && semver.gte(reactVersion, '16.14.0') ? { runtime: 'automatic' } : {}; + const presetReactOptions = hasJsxRuntime ? { runtime: 'automatic' } : {}; return { ...config, presets: [ diff --git a/lib/cli/src/frameworks/react/js/Button.js b/lib/cli/src/frameworks/react/js/Button.js index 15dde3920956..8d661c6f13ae 100644 --- a/lib/cli/src/frameworks/react/js/Button.js +++ b/lib/cli/src/frameworks/react/js/Button.js @@ -1,4 +1,4 @@ -import React from 'react'; +// import React from 'react'; import PropTypes from 'prop-types'; import './button.css'; diff --git a/lib/cli/src/frameworks/react/js/Header.js b/lib/cli/src/frameworks/react/js/Header.js index 30afca379c75..544acff11688 100644 --- a/lib/cli/src/frameworks/react/js/Header.js +++ b/lib/cli/src/frameworks/react/js/Header.js @@ -1,4 +1,4 @@ -import React from 'react'; +// import React from 'react'; import PropTypes from 'prop-types'; import { Button } from './Button'; diff --git a/lib/cli/src/frameworks/react/js/Page.js b/lib/cli/src/frameworks/react/js/Page.js index a537a006719e..718f4e642ba5 100644 --- a/lib/cli/src/frameworks/react/js/Page.js +++ b/lib/cli/src/frameworks/react/js/Page.js @@ -1,4 +1,4 @@ -import React from 'react'; +// import React from 'react'; import PropTypes from 'prop-types'; import { Header } from './Header'; From 4667e7082ca2b0ad498cbc9af19ae2c4b4ad9c99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= Date: Sun, 25 Oct 2020 11:03:42 +0100 Subject: [PATCH 5/7] cleanup --- app/react/src/server/framework-preset-react.ts | 14 +++----------- lib/cli/src/frameworks/react/js/Button.js | 2 +- lib/cli/src/frameworks/react/js/Header.js | 2 +- lib/cli/src/frameworks/react/js/Page.js | 2 +- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index a4452881b974..d1dba1620886 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -28,25 +28,17 @@ const context = storybookReactDirName.includes('node_modules') ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules : path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo -const hasJsxRuntime = (() => { +const hasJsxRuntime = () => { try { require.resolve('react/jsx-runtime', { paths: [context] }); return true; } catch (e) { return false; } -})(); +}; export async function babelDefault(config: TransformOptions) { - let reactVersion; - try { - // eslint-disable-next-line global-require,import/no-dynamic-require - const reactPkg = require(require.resolve('react/jsx-runtime', { paths: [context] })); - reactVersion = reactPkg.version; - } catch { - logger.warn('Unable to determine react version'); - } - const presetReactOptions = hasJsxRuntime ? { runtime: 'automatic' } : {}; + const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {}; return { ...config, presets: [ diff --git a/lib/cli/src/frameworks/react/js/Button.js b/lib/cli/src/frameworks/react/js/Button.js index 8d661c6f13ae..15dde3920956 100644 --- a/lib/cli/src/frameworks/react/js/Button.js +++ b/lib/cli/src/frameworks/react/js/Button.js @@ -1,4 +1,4 @@ -// import React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import './button.css'; diff --git a/lib/cli/src/frameworks/react/js/Header.js b/lib/cli/src/frameworks/react/js/Header.js index 544acff11688..30afca379c75 100644 --- a/lib/cli/src/frameworks/react/js/Header.js +++ b/lib/cli/src/frameworks/react/js/Header.js @@ -1,4 +1,4 @@ -// import React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Button } from './Button'; diff --git a/lib/cli/src/frameworks/react/js/Page.js b/lib/cli/src/frameworks/react/js/Page.js index 718f4e642ba5..a537a006719e 100644 --- a/lib/cli/src/frameworks/react/js/Page.js +++ b/lib/cli/src/frameworks/react/js/Page.js @@ -1,4 +1,4 @@ -// import React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Header } from './Header'; From 587be3ac3d3bb3557874aa20a8fdfeabccef5e36 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 25 Oct 2020 21:54:42 +0800 Subject: [PATCH 6/7] Remove unused import --- app/react/src/server/framework-preset-react.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index d1dba1620886..a24e228da3dd 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -3,7 +3,6 @@ import { TransformOptions } from '@babel/core'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import type { Configuration } from 'webpack'; -import semver from '@storybook/semver'; import { logger } from '@storybook/node-logger'; import type { StorybookOptions } from '@storybook/core/types'; From ab0d35b0117ce78a166e6cc3df512eabc244d1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= Date: Sun, 25 Oct 2020 14:55:58 +0100 Subject: [PATCH 7/7] cleanup semver import --- app/react/src/server/framework-preset-react.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index d1dba1620886..a24e228da3dd 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -3,7 +3,6 @@ import { TransformOptions } from '@babel/core'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import type { Configuration } from 'webpack'; -import semver from '@storybook/semver'; import { logger } from '@storybook/node-logger'; import type { StorybookOptions } from '@storybook/core/types';