@vitejs/plugin-react 4.0.3 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +17 -20
  2. package/dist/index.d.cts +58 -0
  3. package/dist/index.d.mts +58 -0
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.mjs +15 -6
  6. package/dist/refreshUtils.js +4 -2
  7. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -1,31 +1,18 @@
1
1
  'use strict';
2
2
 
3
- const babel = require('@babel/core');
4
3
  const vite = require('vite');
5
4
  const fs = require('node:fs');
6
5
  const path = require('node:path');
7
6
  const node_module = require('node:module');
8
7
 
8
+ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
9
9
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
10
10
 
11
- function _interopNamespaceCompat(e) {
12
- if (e && typeof e === 'object' && 'default' in e) return e;
13
- const n = Object.create(null);
14
- if (e) {
15
- for (const k in e) {
16
- n[k] = e[k];
17
- }
18
- }
19
- n.default = e;
20
- return n;
21
- }
22
-
23
- const babel__namespace = /*#__PURE__*/_interopNamespaceCompat(babel);
24
11
  const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
25
12
  const path__default = /*#__PURE__*/_interopDefaultCompat(path);
26
13
 
27
14
  const runtimePublicPath = "/@react-refresh";
28
- const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
15
+ const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
29
16
  const reactRefreshDir = path__default.dirname(
30
17
  _require.resolve("react-refresh/package.json")
31
18
  );
@@ -86,13 +73,22 @@ function addRefreshWrapper(code, id) {
86
73
  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
87
74
  }
88
75
 
76
+ let babel;
77
+ async function loadBabel() {
78
+ if (!babel) {
79
+ babel = await import('@babel/core');
80
+ }
81
+ return babel;
82
+ }
89
83
  const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
90
84
  const defaultIncludeRE = /\.[tj]sx?$/;
91
85
  const tsRE = /\.tsx?$/;
92
86
  function viteReact(opts = {}) {
93
87
  let devBase = "/";
94
88
  const filter = vite.createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
95
- const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
89
+ const jsxImportSource = opts.jsxImportSource ?? "react";
90
+ const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
91
+ const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
96
92
  let isProduction = true;
97
93
  let projectRoot = process.cwd();
98
94
  let skipFastRefresh = false;
@@ -155,7 +151,7 @@ function viteReact(opts = {}) {
155
151
  })();
156
152
  const plugins = [...babelOptions.plugins];
157
153
  const isJSX = filepath.endsWith("x");
158
- const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(devRuntime)));
154
+ const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
159
155
  if (useFastRefresh) {
160
156
  plugins.push([
161
157
  await loadPlugin("react-refresh/babel"),
@@ -170,7 +166,7 @@ function viteReact(opts = {}) {
170
166
  );
171
167
  }
172
168
  }
173
- if (!plugins.length && !babelOptions.configFile && !babelOptions.babelrc) {
169
+ if (!plugins.length && !babelOptions.presets.length && !babelOptions.configFile && !babelOptions.babelrc) {
174
170
  return;
175
171
  }
176
172
  const parserPlugins = [...babelOptions.parserOpts.plugins];
@@ -180,7 +176,8 @@ function viteReact(opts = {}) {
180
176
  if (tsRE.test(filepath)) {
181
177
  parserPlugins.push("typescript");
182
178
  }
183
- const result = await babel__namespace.transformAsync(code, {
179
+ const babel2 = await loadBabel();
180
+ const result = await babel2.transformAsync(code, {
184
181
  ...babelOptions,
185
182
  root: projectRoot,
186
183
  filename: id,
@@ -216,7 +213,7 @@ function viteReact(opts = {}) {
216
213
  // We can't add `react-dom` because the dependency is `react-dom/client`
217
214
  // for React 18 while it's `react-dom` for React 17. We'd need to detect
218
215
  // what React version the user has installed.
219
- include: ["react", devRuntime]
216
+ include: ["react", jsxImportDevRuntime, jsxImportRuntime]
220
217
  },
221
218
  resolve: {
222
219
  dedupe: ["react", "react-dom"]
package/dist/index.d.cts ADDED
@@ -0,0 +1,58 @@
1
+ import { TransformOptions, ParserOptions } from '@babel/core';
2
+ import { ResolvedConfig, PluginOption } from 'vite';
3
+
4
+ interface Options {
5
+ include?: string | RegExp | Array<string | RegExp>;
6
+ exclude?: string | RegExp | Array<string | RegExp>;
7
+ /**
8
+ * Control where the JSX factory is imported from.
9
+ * https://esbuild.github.io/api/#jsx-import-source
10
+ * @default 'react'
11
+ */
12
+ jsxImportSource?: string;
13
+ /**
14
+ * Note: Skipping React import with classic runtime is not supported from v4
15
+ * @default "automatic"
16
+ */
17
+ jsxRuntime?: 'classic' | 'automatic';
18
+ /**
19
+ * Babel configuration applied in both dev and prod.
20
+ */
21
+ babel?: BabelOptions | ((id: string, options: {
22
+ ssr?: boolean;
23
+ }) => BabelOptions);
24
+ }
25
+ type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
26
+ /**
27
+ * The object type used by the `options` passed to plugins with
28
+ * an `api.reactBabel` method.
29
+ */
30
+ interface ReactBabelOptions extends BabelOptions {
31
+ plugins: Extract<BabelOptions['plugins'], any[]>;
32
+ presets: Extract<BabelOptions['presets'], any[]>;
33
+ overrides: Extract<BabelOptions['overrides'], any[]>;
34
+ parserOpts: ParserOptions & {
35
+ plugins: Extract<ParserOptions['plugins'], any[]>;
36
+ };
37
+ }
38
+ type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
39
+ type ReactBabelHookContext = {
40
+ ssr: boolean;
41
+ id: string;
42
+ };
43
+ declare module 'vite' {
44
+ interface Plugin {
45
+ api?: {
46
+ /**
47
+ * Manipulate the Babel options of `@vitejs/plugin-react`
48
+ */
49
+ reactBabel?: ReactBabelHook;
50
+ };
51
+ }
52
+ }
53
+ declare function viteReact(opts?: Options): PluginOption[];
54
+ declare namespace viteReact {
55
+ var preambleCode: string;
56
+ }
57
+
58
+ export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
package/dist/index.d.mts ADDED
@@ -0,0 +1,58 @@
1
+ import { TransformOptions, ParserOptions } from '@babel/core';
2
+ import { ResolvedConfig, PluginOption } from 'vite';
3
+
4
+ interface Options {
5
+ include?: string | RegExp | Array<string | RegExp>;
6
+ exclude?: string | RegExp | Array<string | RegExp>;
7
+ /**
8
+ * Control where the JSX factory is imported from.
9
+ * https://esbuild.github.io/api/#jsx-import-source
10
+ * @default 'react'
11
+ */
12
+ jsxImportSource?: string;
13
+ /**
14
+ * Note: Skipping React import with classic runtime is not supported from v4
15
+ * @default "automatic"
16
+ */
17
+ jsxRuntime?: 'classic' | 'automatic';
18
+ /**
19
+ * Babel configuration applied in both dev and prod.
20
+ */
21
+ babel?: BabelOptions | ((id: string, options: {
22
+ ssr?: boolean;
23
+ }) => BabelOptions);
24
+ }
25
+ type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
26
+ /**
27
+ * The object type used by the `options` passed to plugins with
28
+ * an `api.reactBabel` method.
29
+ */
30
+ interface ReactBabelOptions extends BabelOptions {
31
+ plugins: Extract<BabelOptions['plugins'], any[]>;
32
+ presets: Extract<BabelOptions['presets'], any[]>;
33
+ overrides: Extract<BabelOptions['overrides'], any[]>;
34
+ parserOpts: ParserOptions & {
35
+ plugins: Extract<ParserOptions['plugins'], any[]>;
36
+ };
37
+ }
38
+ type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
39
+ type ReactBabelHookContext = {
40
+ ssr: boolean;
41
+ id: string;
42
+ };
43
+ declare module 'vite' {
44
+ interface Plugin {
45
+ api?: {
46
+ /**
47
+ * Manipulate the Babel options of `@vitejs/plugin-react`
48
+ */
49
+ reactBabel?: ReactBabelHook;
50
+ };
51
+ }
52
+ }
53
+ declare function viteReact(opts?: Options): PluginOption[];
54
+ declare namespace viteReact {
55
+ var preambleCode: string;
56
+ }
57
+
58
+ export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
package/dist/index.d.ts CHANGED
@@ -55,4 +55,4 @@ declare namespace viteReact {
55
55
  var preambleCode: string;
56
56
  }
57
57
 
58
- export { BabelOptions, Options, ReactBabelOptions, viteReact as default };
58
+ export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
package/dist/index.mjs CHANGED
@@ -1,4 +1,3 @@
1
- import * as babel from '@babel/core';
2
1
  import { createFilter } from 'vite';
3
2
  import fs from 'node:fs';
4
3
  import path from 'node:path';
@@ -66,13 +65,22 @@ function addRefreshWrapper(code, id) {
66
65
  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
67
66
  }
68
67
 
68
+ let babel;
69
+ async function loadBabel() {
70
+ if (!babel) {
71
+ babel = await import('@babel/core');
72
+ }
73
+ return babel;
74
+ }
69
75
  const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
70
76
  const defaultIncludeRE = /\.[tj]sx?$/;
71
77
  const tsRE = /\.tsx?$/;
72
78
  function viteReact(opts = {}) {
73
79
  let devBase = "/";
74
80
  const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
75
- const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
81
+ const jsxImportSource = opts.jsxImportSource ?? "react";
82
+ const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
83
+ const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
76
84
  let isProduction = true;
77
85
  let projectRoot = process.cwd();
78
86
  let skipFastRefresh = false;
@@ -135,7 +143,7 @@ function viteReact(opts = {}) {
135
143
  })();
136
144
  const plugins = [...babelOptions.plugins];
137
145
  const isJSX = filepath.endsWith("x");
138
- const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(devRuntime)));
146
+ const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
139
147
  if (useFastRefresh) {
140
148
  plugins.push([
141
149
  await loadPlugin("react-refresh/babel"),
@@ -150,7 +158,7 @@ function viteReact(opts = {}) {
150
158
  );
151
159
  }
152
160
  }
153
- if (!plugins.length && !babelOptions.configFile && !babelOptions.babelrc) {
161
+ if (!plugins.length && !babelOptions.presets.length && !babelOptions.configFile && !babelOptions.babelrc) {
154
162
  return;
155
163
  }
156
164
  const parserPlugins = [...babelOptions.parserOpts.plugins];
@@ -160,7 +168,8 @@ function viteReact(opts = {}) {
160
168
  if (tsRE.test(filepath)) {
161
169
  parserPlugins.push("typescript");
162
170
  }
163
- const result = await babel.transformAsync(code, {
171
+ const babel2 = await loadBabel();
172
+ const result = await babel2.transformAsync(code, {
164
173
  ...babelOptions,
165
174
  root: projectRoot,
166
175
  filename: id,
@@ -196,7 +205,7 @@ function viteReact(opts = {}) {
196
205
  // We can't add `react-dom` because the dependency is `react-dom/client`
197
206
  // for React 18 while it's `react-dom` for React 17. We'd need to detect
198
207
  // what React version the user has installed.
199
- include: ["react", devRuntime]
208
+ include: ["react", jsxImportDevRuntime, jsxImportRuntime]
200
209
  },
201
210
  resolve: {
202
211
  dedupe: ["react", "react-dom"]
package/dist/refreshUtils.js CHANGED
@@ -26,9 +26,12 @@ function registerExportsForReactRefresh(filename, moduleExports) {
26
26
  }
27
27
 
28
28
  function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
29
- if (!predicateOnExport(prevExports, (key) => !!nextExports[key])) {
29
+ if (!predicateOnExport(prevExports, (key) => key in nextExports)) {
30
30
  return 'Could not Fast Refresh (export removed)'
31
31
  }
32
+ if (!predicateOnExport(nextExports, (key) => key in prevExports)) {
33
+ return 'Could not Fast Refresh (new export)'
34
+ }
32
35
 
33
36
  let hasExports = false
34
37
  const allExportsAreComponentsOrUnchanged = predicateOnExport(
@@ -36,7 +39,6 @@ function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
36
39
  (key, value) => {
37
40
  hasExports = true
38
41
  if (exports.isLikelyComponentType(value)) return true
39
- if (!prevExports[key]) return false
40
42
  return prevExports[key] === nextExports[key]
41
43
  },
42
44
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vitejs/plugin-react",
3
- "version": "4.0.3",
3
+ "version": "4.1.0",
4
4
  "license": "MIT",
5
5
  "author": "Evan You",
6
6
  "contributors": [
@@ -15,7 +15,6 @@
15
15
  "types": "./dist/index.d.ts",
16
16
  "exports": {
17
17
  ".": {
18
- "types": "./dist/index.d.ts",
19
18
  "import": "./dist/index.mjs",
20
19
  "require": "./dist/index.cjs"
21
20
  }
@@ -39,9 +38,10 @@
39
38
  },
40
39
  "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
41
40
  "dependencies": {
42
- "@babel/core": "^7.22.5",
41
+ "@babel/core": "^7.22.20",
43
42
  "@babel/plugin-transform-react-jsx-self": "^7.22.5",
44
43
  "@babel/plugin-transform-react-jsx-source": "^7.22.5",
44
+ "@types/babel__core": "^7.20.2",
45
45
  "react-refresh": "^0.14.0"
46
46
  },
47
47
  "peerDependencies": {