Skip to content

Commit

Permalink
Merge pull request #30188 from storybookjs/danny/fix-rnw-transpile-no…
Browse files Browse the repository at this point in the history 
…de-modules

RNW-Vite: Fix reanimated support with babel plugin for node_modules
  • Loading branch information
@shilman
shilman authored Jan 7, 2025
2 parents f6a6867 + 30f7368 commit 77c0a57
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 3 deletions.
3 changes: 3 additions & 0 deletions code/frameworks/react-native-web-vite/package.json
View file
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
51 changes: 48 additions & 3 deletions code/frameworks/react-native-web-vite/src/preset.ts
View file
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,68 @@ 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 un-transpiled.
// see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306
// However we keep the react plugin to get the fast refresh and the other stuff its doing
babel({
...pluginBabelOptions,
include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/],
exclude: pluginBabelOptions.exclude,
babelConfig: {
...pluginBabelOptions.babelConfig,
babelrc: false,
configFile: false,
presets: [
[
'@babel/preset-react',
{
development: isDevelopment,
runtime: 'automatic',
...(pluginBabelOptions.presetReact || {}),
},
],
...(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 +135,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
8 changes: 8 additions & 0 deletions code/frameworks/react-native-web-vite/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,17 @@ 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 & {
presetReact?: {
[key: string]: any;
runtime?: 'automatic' | 'classic';
importSource?: string;
};
};
};

type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
Expand Down
110 changes: 110 additions & 0 deletions code/yarn.lock
View file
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

0 comments on commit 77c0a57

Please sign in to comment.