Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RNW-Vite: Add built-in Flow support #29756

Merged
merged 2 commits into from
Nov 30, 2024
Merged

RNW-Vite: Add built-in Flow support #29756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2462631
RNW-Vite: feat add built in flow support
dannyhw Nov 30, 2024
1844245
fix: should transpile all in jsx format
dannyhw Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions code/frameworks/react-native-web-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand Down
18 changes: 16 additions & 2 deletions code/frameworks/react-native-web-vite/src/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
// @ts-expect-error FIXME
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Fix the underlying type error instead of using @ts-expect-error

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';

Expand Down Expand Up @@ -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: [],
}),
Comment on lines +75 to +77
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Empty exclude array may cause Flow to process all files. Consider adding appropriate exclusions for node_modules and build artifacts

react({
babel: {
babelrc: false,
Expand All @@ -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(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Regular expression should be anchored with ^ and $ to prevent partial matches in file paths

},
},
} satisfies InlineConfig);
};

export const core = {
Expand Down
1 change: 1 addition & 0 deletions code/frameworks/react-native-web-vite/src/typings.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module '@bunchtogether/vite-plugin-flow';
80 changes: 80 additions & 0 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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:*"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading