From 2462631514341aadb9033d7ec2e794ca1c037b3e Mon Sep 17 00:00:00 2001 From: Daniel Williams <dannyhyunsoowilliams@gmail.com> Date: Sat, 30 Nov 2024 13:00:57 +0000 Subject: [PATCH 1/2] RNW-Vite: feat add built in flow support --- .../react-native-web-vite/package.json | 1 + .../react-native-web-vite/src/preset.ts | 18 ++++- .../react-native-web-vite/src/typings.d.ts | 1 + code/yarn.lock | 80 +++++++++++++++++++ 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 code/frameworks/react-native-web-vite/src/typings.d.ts diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 0aba8948e71c..91e9238a97e7 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -53,6 +53,7 @@ "prep": "jiti ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@bunchtogether/vite-plugin-flow": "^1.0.2", "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index 852d69af2ce3..a082f443420a 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -1,8 +1,9 @@ // @ts-expect-error FIXME import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; +import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow'; import react from '@vitejs/plugin-react'; -import type { PluginOption } from 'vite'; +import type { InlineConfig, PluginOption } from 'vite'; import type { FrameworkOptions, StorybookConfig } from './types'; @@ -61,13 +62,19 @@ export function reactNativeWeb(): PluginOption { } export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { + const { mergeConfig } = await import('vite'); + const { pluginReactOptions = {} } = await options.presets.apply<FrameworkOptions>('frameworkOptions'); const reactConfig = await reactViteFinal(config, options); + const { plugins = [] } = reactConfig; plugins.unshift( + flowPlugin({ + exclude: [], + }), react({ babel: { babelrc: false, @@ -77,9 +84,16 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = ...pluginReactOptions, }) ); + plugins.push(reactNativeWeb()); - return reactConfig; + return mergeConfig(reactConfig, { + optimizeDeps: { + esbuildOptions: { + plugins: [esbuildFlowPlugin()], + }, + }, + } satisfies InlineConfig); }; export const core = { diff --git a/code/frameworks/react-native-web-vite/src/typings.d.ts b/code/frameworks/react-native-web-vite/src/typings.d.ts new file mode 100644 index 000000000000..8aed0ac76f1a --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/typings.d.ts @@ -0,0 +1 @@ +declare module '@bunchtogether/vite-plugin-flow'; diff --git a/code/yarn.lock b/code/yarn.lock index 684f8f1118e2..42fd23469029 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2501,6 +2501,16 @@ __metadata: languageName: node linkType: hard +"@bunchtogether/vite-plugin-flow@npm:^1.0.2": + version: 1.0.2 + resolution: "@bunchtogether/vite-plugin-flow@npm:1.0.2" + dependencies: + flow-remove-types: "npm:^2.158.0" + rollup-pluginutils: "npm:^2.8.2" + checksum: 10c0/84faf014977196470bbeae686b4e167de2805777389f8a0da88647484df7cf39db3da91907d75ea810ea77175c0cdd40a9a3ad92b7c7c44681b0cd1f4156c7b8 + languageName: node + linkType: hard + "@bundled-es-modules/cookie@npm:^2.0.0": version: 2.0.0 resolution: "@bundled-es-modules/cookie@npm:2.0.0" @@ -7099,6 +7109,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" dependencies: + "@bunchtogether/vite-plugin-flow": "npm:^1.0.2" "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" @@ -15317,6 +15328,13 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^0.6.1": + version: 0.6.1 + resolution: "estree-walker@npm:0.6.1" + checksum: 10c0/6dabc855faa04a1ffb17b6a9121b6008ba75ab5a163ad9dc3d7fca05cfda374c5f5e91418d783496620ca75e99a73c40874d8b75f23b4117508cc8bde78e7b41 + languageName: node + linkType: hard + "estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2": version: 2.0.2 resolution: "estree-walker@npm:2.0.2" @@ -16028,6 +16046,20 @@ __metadata: languageName: node linkType: hard +"flow-remove-types@npm:^2.158.0": + version: 2.255.0 + resolution: "flow-remove-types@npm:2.255.0" + dependencies: + hermes-parser: "npm:0.25.1" + pirates: "npm:^3.0.2" + vlq: "npm:^0.2.1" + bin: + flow-node: flow-node + flow-remove-types: flow-remove-types + checksum: 10c0/080cfab76259e313ac77ebd911528fdc9423446d0c4503b95c9f0beb57fde1143657ac3388110382ddbfdb9b7e8ebc20fe903b14a7de374f53d44d6365e26ae1 + languageName: node + linkType: hard + "flush-promises@npm:^1.0.2": version: 1.0.2 resolution: "flush-promises@npm:1.0.2" @@ -17251,6 +17283,22 @@ __metadata: languageName: node linkType: hard +"hermes-estree@npm:0.25.1": + version: 0.25.1 + resolution: "hermes-estree@npm:0.25.1" + checksum: 10c0/48be3b2fa37a0cbc77a112a89096fa212f25d06de92781b163d67853d210a8a5c3784fac23d7d48335058f7ed283115c87b4332c2a2abaaccc76d0ead1a282ac + languageName: node + linkType: hard + +"hermes-parser@npm:0.25.1": + version: 0.25.1 + resolution: "hermes-parser@npm:0.25.1" + dependencies: + hermes-estree: "npm:0.25.1" + checksum: 10c0/3abaa4c6f1bcc25273f267297a89a4904963ea29af19b8e4f6eabe04f1c2c7e9abd7bfc4730ddb1d58f2ea04b6fee74053d8bddb5656ec6ebf6c79cc8d14202c + languageName: node + linkType: hard + "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0": version: 10.7.3 resolution: "highlight.js@npm:10.7.3" @@ -21897,6 +21945,13 @@ __metadata: languageName: node linkType: hard +"node-modules-regexp@npm:^1.0.0": + version: 1.0.0 + resolution: "node-modules-regexp@npm:1.0.0" + checksum: 10c0/d4a9b6425a18e9fadd38f21a7f7820b3bfda4663c7d3b9f80043e3f5f7e27a0a1e04f524077b00a15ae77148cd81319da5772900229d89541062f7e876b36763 + languageName: node + linkType: hard + "node-polyfill-webpack-plugin@npm:^2.0.1": version: 2.0.1 resolution: "node-polyfill-webpack-plugin@npm:2.0.1" @@ -23156,6 +23211,15 @@ __metadata: languageName: node linkType: hard +"pirates@npm:^3.0.2": + version: 3.0.2 + resolution: "pirates@npm:3.0.2" + dependencies: + node-modules-regexp: "npm:^1.0.0" + checksum: 10c0/f71519f64abff750ad00398e7a0f724e7d3af0ce14c0cf149a47dd9e1fae5e9aea24cb3a63b4ce8dce8b051f7d44531af6743078e33f72cb8602c5a7365185d1 + languageName: node + linkType: hard + "pirates@npm:^4.0.5": version: 4.0.6 resolution: "pirates@npm:4.0.6" @@ -25532,6 +25596,15 @@ __metadata: languageName: node linkType: hard +"rollup-pluginutils@npm:^2.8.2": + version: 2.8.2 + resolution: "rollup-pluginutils@npm:2.8.2" + dependencies: + estree-walker: "npm:^0.6.1" + checksum: 10c0/20947bec5a5dd68b5c5c8423911e6e7c0ad834c451f1a929b1f4e2bc08836ad3f1a722ef2bfcbeca921870a0a283f13f064a317dc7a6768496e98c9a641ba290 + languageName: node + linkType: hard + "rollup@npm:^3.27.1": version: 3.29.4 resolution: "rollup@npm:3.29.4" @@ -29221,6 +29294,13 @@ __metadata: languageName: node linkType: hard +"vlq@npm:^0.2.1": + version: 0.2.3 + resolution: "vlq@npm:0.2.3" + checksum: 10c0/d1557b404353ca75c7affaaf403d245a3273a7d1c6b3380ed7f04ae3f080e4658f41ac700d6f48acb3cd4875fe7bc7da4924b3572cd5584a5de83b35b1de5e12 + languageName: node + linkType: hard + "vm-browserify@npm:^1.1.2": version: 1.1.2 resolution: "vm-browserify@npm:1.1.2" From 18442450017d77202dc9fd5aa4910af9c192fce4 Mon Sep 17 00:00:00 2001 From: Daniel Williams <dannyhyunsoowilliams@gmail.com> Date: Sat, 30 Nov 2024 13:43:30 +0000 Subject: [PATCH 2/2] fix: should transpile all in jsx format --- code/frameworks/react-native-web-vite/src/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index a082f443420a..8e3d7d6b58a8 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -90,7 +90,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = return mergeConfig(reactConfig, { optimizeDeps: { esbuildOptions: { - plugins: [esbuildFlowPlugin()], + plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')], }, }, } satisfies InlineConfig);