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: Fix reanimated support with babel plugin for node_modules #30188

Merged
merged 12 commits into from
Jan 7, 2025
Merged

RNW-Vite: Fix reanimated support with babel plugin for node_modules #30188

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
60c06af
fix: add extra babel plugin to handle node modules
dannyhw Jan 4, 2025
9149ae8
fix: comment
dannyhw Jan 4, 2025
7f181a0
fix: add dependency
dannyhw Jan 4, 2025
30ddce6
fix: lock
dannyhw Jan 4, 2025
1fd1509
fix: remove expo preset and reduce to just the important plugins
dannyhw Jan 5, 2025
cb64e89
fix: comments
dannyhw Jan 5, 2025
d28b7be
fix: remove uneeded expo os env
dannyhw Jan 5, 2025
f3fdb8a
fix: remove require thing for now
dannyhw Jan 5, 2025
90ef869
better comments
dannyhw Jan 5, 2025
7794b8e
split up config for the babel plugin
dannyhw Jan 5, 2025
2db1781
fix: preset react options and make them an object
dannyhw Jan 5, 2025
30f7368
fix: oops types
dannyhw Jan 5, 2025
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
3 changes: 3 additions & 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,12 +53,15 @@
"prep": "jiti ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.26.3",
"@babel/preset-react": "^7.26.3",
"@bunchtogether/vite-plugin-flow": "^1.0.2",
"@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
"@storybook/builder-vite": "workspace:*",
"@storybook/react": "workspace:*",
"@storybook/react-vite": "workspace:*",
"@vitejs/plugin-react": "^4.3.2",
"vite-plugin-babel": "^1.3.0",
"vite-tsconfig-paths": "^5.1.4"
},
"devDependencies": {
Expand Down
50 changes: 47 additions & 3 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
Expand Up @@ -3,6 +3,7 @@ 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 { InlineConfig, PluginOption } from 'vite';
import babel from 'vite-plugin-babel';
import tsconfigPaths from 'vite-tsconfig-paths';

import type { FrameworkOptions, StorybookConfig } from './types';
Expand Down Expand Up @@ -64,25 +65,67 @@ export function reactNativeWeb(): PluginOption {
export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
const { mergeConfig } = await import('vite');

const { pluginReactOptions = {} } =
const { pluginReactOptions = {}, pluginBabelOptions = {} } =
await options.presets.apply<FrameworkOptions>('frameworkOptions');

const isDevelopment = options.configType !== 'PRODUCTION';

const reactConfig = await reactViteFinal(config, options);

const { plugins = [] } = reactConfig;

plugins.unshift(
tsconfigPaths(),

// fix for react native packages shipping with flow types untranspiled
flowPlugin({
exclude: [/node_modules\/(?!react-native|@react-native)/],
}),
react({
...pluginReactOptions,
jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic',
babel: {
babelrc: false,
configFile: false,
...pluginReactOptions.babel,
},
}),

// we need to add this extra babel config because the react plugin doesn't allow
// for transpiling node_modules. We need this because many react native packages are untranspiled.
// However we keep the react plugin to get the fast refresh and the other stuff its doing
dannyhw marked this conversation as resolved.
Show resolved Hide resolved
babel({
...pluginBabelOptions,
include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/],
dannyhw marked this conversation as resolved.
Show resolved Hide resolved
exclude: pluginBabelOptions.exclude,
babelConfig: {
...pluginBabelOptions.babelConfig,
babelrc: false,
configFile: false,
presets: [
[
'@babel/preset-react',
{
dannyhw marked this conversation as resolved.
Show resolved Hide resolved
development: isDevelopment,
jsxRuntime: pluginBabelOptions.jsxRuntime || 'automatic',
jsxImportSource: pluginBabelOptions.jsxImportSource || 'react',
},
],
...(pluginBabelOptions.babelConfig?.presets || []),
],
plugins: [
[
// this is a fix for reanimated not working in production
'@babel/plugin-transform-modules-commonjs',
{
strict: false,
strictMode: false, // prevent "use strict" injections
allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
},
],
...(pluginBabelOptions.babelConfig?.plugins || []),
],
},
jsxRuntime: 'automatic',
...pluginReactOptions,
})
);

Expand All @@ -91,6 +134,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
return mergeConfig(reactConfig, {
optimizeDeps: {
esbuildOptions: {
// fix for react native packages shipping with flow types untranspiled
plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')],
},
},
Expand Down
5 changes: 5 additions & 0 deletions code/frameworks/react-native-web-vite/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ import type {
} from '@storybook/react-vite';

import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
import type { BabelPluginOptions } from 'vite-plugin-babel';

export type FrameworkOptions = FrameworkOptionsBase & {
pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions };
pluginBabelOptions?: BabelPluginOptions & {
jsxRuntime?: 'automatic' | 'classic';
jsxImportSource?: string;
};
};

type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
Expand Down
110 changes: 110 additions & 0 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,15 @@ __metadata:
languageName: node
linkType: hard

"@babel/helper-annotate-as-pure@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
dependencies:
"@babel/types": "npm:^7.25.9"
checksum: 10c0/095b6ba50489d797733abebc4596a81918316a99e3632755c9f02508882912b00c2ae5e468532a25a5c2108d109ddbe9b7da78333ee7cc13817fc50c00cf06fe
languageName: node
linkType: hard

"@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7":
version: 7.24.7
resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7"
Expand Down Expand Up @@ -1064,6 +1073,17 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-syntax-jsx@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
dependencies:
"@babel/helper-plugin-utils": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c
languageName: node
linkType: hard

"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4":
version: 7.10.4
resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
Expand Down Expand Up @@ -1495,6 +1515,18 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-modules-commonjs@npm:^7.26.3":
version: 7.26.3
resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
dependencies:
"@babel/helper-module-transforms": "npm:^7.26.0"
"@babel/helper-plugin-utils": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2
languageName: node
linkType: hard

"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1":
version: 7.24.7
resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7"
Expand Down Expand Up @@ -1689,6 +1721,17 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-display-name@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9"
dependencies:
"@babel/helper-plugin-utils": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/63a0f962d64e71baf87c212755419e25c637d2d95ea6fdc067df26b91e606ae186442ae815b99a577eca9bf5404d9577ecad218a3cf42d0e9e286ca7b003a992
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
Expand All @@ -1700,6 +1743,17 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx-development@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9"
dependencies:
"@babel/plugin-transform-react-jsx": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/c0b92ff9eb029620abf320ff74aae182cea87524723d740fb48a4373d0d16bddf5edbe1116e7ba341332a5337e55c2ceaee8b8cad5549e78af7f4b3cfe77debb
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx-self@npm:^7.24.7":
version: 7.25.9
resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9"
Expand Down Expand Up @@ -1737,6 +1791,21 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
dependencies:
"@babel/helper-annotate-as-pure": "npm:^7.25.9"
"@babel/helper-module-imports": "npm:^7.25.9"
"@babel/helper-plugin-utils": "npm:^7.25.9"
"@babel/plugin-syntax-jsx": "npm:^7.25.9"
"@babel/types": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/5c9947e8ed141f7606f54da3e05eea1074950c5b8354c39df69cb7f43cb5a83c6c9d7973b24bc3d89341c8611f8ad50830a98ab10d117d850e6bdd8febdce221
languageName: node
linkType: hard

"@babel/plugin-transform-react-pure-annotations@npm:^7.24.1":
version: 7.24.1
resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1"
Expand All @@ -1749,6 +1818,18 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9":
version: 7.25.9
resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9"
dependencies:
"@babel/helper-annotate-as-pure": "npm:^7.25.9"
"@babel/helper-plugin-utils": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/7c8eac04644ad19dcd71bb8e949b0ae22b9e548fa4a58e545d3d0342f647fb89db7f8789a7c5b8074d478ce6d3d581eaf47dd4b36027e16fd68211c383839abc
languageName: node
linkType: hard

"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1":
version: 7.24.7
resolution: "@babel/plugin-transform-regenerator@npm:7.24.7"
Expand Down Expand Up @@ -2154,6 +2235,22 @@ __metadata:
languageName: node
linkType: hard

"@babel/preset-react@npm:^7.26.3":
version: 7.26.3
resolution: "@babel/preset-react@npm:7.26.3"
dependencies:
"@babel/helper-plugin-utils": "npm:^7.25.9"
"@babel/helper-validator-option": "npm:^7.25.9"
"@babel/plugin-transform-react-display-name": "npm:^7.25.9"
"@babel/plugin-transform-react-jsx": "npm:^7.25.9"
"@babel/plugin-transform-react-jsx-development": "npm:^7.25.9"
"@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9"
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 10c0/b470dcba11032ef6c832066f4af5c75052eaed49feb0f445227231ef1b5c42aacd6e216988c0bd469fd5728cd27b6b059ca307c9ecaa80c6bb5da4bf1c833e12
languageName: node
linkType: hard

"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1":
version: 7.24.1
resolution: "@babel/preset-typescript@npm:7.24.1"
Expand Down Expand Up @@ -6712,6 +6809,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite"
dependencies:
"@babel/plugin-transform-modules-commonjs": "npm:^7.26.3"
"@babel/preset-react": "npm:^7.26.3"
"@bunchtogether/vite-plugin-flow": "npm:^1.0.2"
"@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2"
"@storybook/builder-vite": "workspace:*"
Expand All @@ -6720,6 +6819,7 @@ __metadata:
"@types/node": "npm:^22.0.0"
"@vitejs/plugin-react": "npm:^4.3.2"
typescript: "npm:^5.3.2"
vite-plugin-babel: "npm:^1.3.0"
vite-tsconfig-paths: "npm:^5.1.4"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
Expand Down Expand Up @@ -28762,6 +28862,16 @@ __metadata:
languageName: node
linkType: hard

"vite-plugin-babel@npm:^1.3.0":
version: 1.3.0
resolution: "vite-plugin-babel@npm:1.3.0"
peerDependencies:
"@babel/core": ^7.0.0
vite: ^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
checksum: 10c0/1613c45ee220ffbad18aeacbbe395d4d346cbe7c971c7469b0cd96df422bd9d617821a40bacf3b6ea3e7c4ded43e6ccdfd17ec3c0899fee2835f56e8971c6b57
languageName: node
linkType: hard

"vite-plugin-inspect@npm:^0.8.5":
version: 0.8.5
resolution: "vite-plugin-inspect@npm:0.8.5"
Expand Down
Loading