@vitejs/plugin-react 4.7.0 → 5.0.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.
- package/README.md +1 -3
- package/dist/index.d.ts +2 -5
- package/dist/index.js +82 -43
- package/package.json +8 -16
- package/dist/index.cjs +0 -343
- package/dist/index.d.cts +0 -67
package/README.md
CHANGED
@@ -21,7 +21,7 @@ export default defineConfig({
|
|
21
21
|
|
22
22
|
### include/exclude
|
23
23
|
|
24
|
-
Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to `.mdx` files:
|
24
|
+
Includes `.js`, `.jsx`, `.ts` & `.tsx` and excludes `/node_modules/` by default. This option can be used to add fast refresh to `.mdx` files:
|
25
25
|
|
26
26
|
```js
|
27
27
|
import { defineConfig } from 'vite'
|
@@ -36,8 +36,6 @@ export default defineConfig({
|
|
36
36
|
})
|
37
37
|
```
|
38
38
|
|
39
|
-
> `node_modules` are never processed by this plugin (but esbuild will)
|
40
|
-
|
41
39
|
### jsxImportSource
|
42
40
|
|
43
41
|
Control where the JSX factory is imported from. Default to `'react'`
|
package/dist/index.d.ts
CHANGED
@@ -30,10 +30,6 @@ interface Options {
|
|
30
30
|
* reactRefreshHost: 'http://localhost:3000'
|
31
31
|
*/
|
32
32
|
reactRefreshHost?: string;
|
33
|
-
/**
|
34
|
-
* If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
|
35
|
-
*/
|
36
|
-
disableOxcRecommendation?: boolean;
|
37
33
|
}
|
38
34
|
type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
|
39
35
|
/**
|
@@ -63,5 +59,6 @@ declare function viteReact(opts?: Options): Plugin[];
|
|
63
59
|
declare namespace viteReact {
|
64
60
|
var preambleCode: string;
|
65
61
|
}
|
62
|
+
declare function viteReactForCjs(this: unknown, options: Options): Plugin[];
|
66
63
|
//#endregion
|
67
|
-
export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default };
|
64
|
+
export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default, viteReactForCjs as "module.exports" };
|
package/dist/index.js
CHANGED
@@ -83,10 +83,9 @@ function removeLineBreaksIfNeeded(code, enabled) {
|
|
83
83
|
//#endregion
|
84
84
|
//#region ../common/warning.ts
|
85
85
|
const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
|
86
|
-
var _userConfig$build;
|
87
86
|
if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
|
88
87
|
if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
|
89
|
-
if (
|
88
|
+
if (userConfig.build?.rollupOptions?.onwarn) userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
|
90
89
|
else defaultHandler(warning);
|
91
90
|
} } });
|
92
91
|
|
@@ -100,15 +99,16 @@ async function loadBabel() {
|
|
100
99
|
return babel;
|
101
100
|
}
|
102
101
|
const defaultIncludeRE = /\.[tj]sx?$/;
|
102
|
+
const defaultExcludeRE = /\/node_modules\//;
|
103
103
|
const tsRE = /\.tsx?$/;
|
104
104
|
function viteReact(opts = {}) {
|
105
|
-
var _opts$babel;
|
106
105
|
const include = opts.include ?? defaultIncludeRE;
|
107
|
-
const exclude = opts.exclude;
|
106
|
+
const exclude = opts.exclude ?? defaultExcludeRE;
|
108
107
|
const filter = createFilter(include, exclude);
|
109
108
|
const jsxImportSource = opts.jsxImportSource ?? "react";
|
110
109
|
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
|
111
110
|
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
|
111
|
+
const isRolldownVite = "rolldownVersion" in vite;
|
112
112
|
let runningInVite = false;
|
113
113
|
let isProduction = true;
|
114
114
|
let projectRoot = process.cwd();
|
@@ -119,18 +119,35 @@ function viteReact(opts = {}) {
|
|
119
119
|
const viteBabel = {
|
120
120
|
name: "vite:react-babel",
|
121
121
|
enforce: "pre",
|
122
|
-
config() {
|
123
|
-
if (opts.jsxRuntime === "classic")
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
122
|
+
config(_userConfig, { command }) {
|
123
|
+
if ("rolldownVersion" in vite) if (opts.jsxRuntime === "classic") return { oxc: {
|
124
|
+
jsx: {
|
125
|
+
runtime: "classic",
|
126
|
+
refresh: command === "serve",
|
127
|
+
development: false
|
128
|
+
},
|
129
|
+
jsxRefreshInclude: include,
|
130
|
+
jsxRefreshExclude: exclude
|
131
|
+
} };
|
132
|
+
else return {
|
133
|
+
oxc: {
|
134
|
+
jsx: {
|
135
|
+
runtime: "automatic",
|
136
|
+
importSource: jsxImportSource,
|
137
|
+
refresh: command === "serve"
|
138
|
+
},
|
139
|
+
jsxRefreshInclude: include,
|
140
|
+
jsxRefreshExclude: exclude
|
141
|
+
},
|
142
|
+
optimizeDeps: { rollupOptions: { jsx: { mode: "automatic" } } }
|
143
|
+
};
|
144
|
+
if (opts.jsxRuntime === "classic") return { esbuild: { jsx: "transform" } };
|
128
145
|
else return {
|
129
146
|
esbuild: {
|
130
147
|
jsx: "automatic",
|
131
|
-
jsxImportSource
|
148
|
+
jsxImportSource
|
132
149
|
},
|
133
|
-
optimizeDeps:
|
150
|
+
optimizeDeps: { esbuildOptions: { jsx: "automatic" } }
|
134
151
|
};
|
135
152
|
},
|
136
153
|
configResolved(config) {
|
@@ -138,12 +155,7 @@ function viteReact(opts = {}) {
|
|
138
155
|
projectRoot = config.root;
|
139
156
|
isProduction = config.isProduction;
|
140
157
|
skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
|
141
|
-
|
142
|
-
const hooks = config.plugins.map((plugin) => {
|
143
|
-
var _plugin$api;
|
144
|
-
return (_plugin$api = plugin.api) === null || _plugin$api === void 0 ? void 0 : _plugin$api.reactBabel;
|
145
|
-
}).filter(defined);
|
146
|
-
if ("rolldownVersion" in vite && !opts.babel && !hooks.length && !opts.disableOxcRecommendation) config.logger.warn("[vite:react-babel] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown");
|
158
|
+
const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(defined);
|
147
159
|
if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
|
148
160
|
hooks.forEach((hook) => hook(babelOptions, context, config));
|
149
161
|
};
|
@@ -164,17 +176,16 @@ function viteReact(opts = {}) {
|
|
164
176
|
transform: {
|
165
177
|
filter: { id: {
|
166
178
|
include: makeIdFiltersToMatchWithQuery(include),
|
167
|
-
exclude:
|
179
|
+
exclude: makeIdFiltersToMatchWithQuery(exclude)
|
168
180
|
} },
|
169
181
|
async handler(code, id, options) {
|
170
|
-
if (id.includes("/node_modules/")) return;
|
171
182
|
const [filepath] = id.split("?");
|
172
183
|
if (!filter(filepath)) return;
|
173
|
-
const ssr =
|
184
|
+
const ssr = options?.ssr === true;
|
174
185
|
const babelOptions = (() => {
|
175
186
|
if (staticBabelOptions) return staticBabelOptions;
|
176
187
|
const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
|
177
|
-
runPluginOverrides
|
188
|
+
runPluginOverrides?.(newBabelOptions, {
|
178
189
|
id,
|
179
190
|
ssr
|
180
191
|
});
|
@@ -183,7 +194,7 @@ function viteReact(opts = {}) {
|
|
183
194
|
const plugins = [...babelOptions.plugins];
|
184
195
|
const isJSX = filepath.endsWith("x");
|
185
196
|
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
|
186
|
-
if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
|
197
|
+
if (useFastRefresh && !isRolldownVite) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
|
187
198
|
if (opts.jsxRuntime === "classic" && isJSX) {
|
188
199
|
if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
|
189
200
|
}
|
@@ -222,13 +233,42 @@ function viteReact(opts = {}) {
|
|
222
233
|
}
|
223
234
|
}
|
224
235
|
};
|
236
|
+
const viteRefreshWrapper = {
|
237
|
+
name: "vite:react:refresh-wrapper",
|
238
|
+
apply: "serve",
|
239
|
+
transform: isRolldownVite ? {
|
240
|
+
filter: { id: {
|
241
|
+
include: makeIdFiltersToMatchWithQuery(include),
|
242
|
+
exclude: makeIdFiltersToMatchWithQuery(exclude)
|
243
|
+
} },
|
244
|
+
handler(code, id, options) {
|
245
|
+
const ssr = options?.ssr === true;
|
246
|
+
const [filepath] = id.split("?");
|
247
|
+
const isJSX = filepath.endsWith("x");
|
248
|
+
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime));
|
249
|
+
if (!useFastRefresh) return;
|
250
|
+
const { code: newCode } = addRefreshWrapper(code, avoidSourceMapOption, "@vitejs/plugin-react", id);
|
251
|
+
return {
|
252
|
+
code: newCode,
|
253
|
+
map: null
|
254
|
+
};
|
255
|
+
}
|
256
|
+
} : void 0
|
257
|
+
};
|
258
|
+
const viteConfigPost = {
|
259
|
+
name: "vite:react:config-post",
|
260
|
+
enforce: "post",
|
261
|
+
config(userConfig) {
|
262
|
+
if (userConfig.server?.hmr === false) return { oxc: { jsx: { refresh: false } } };
|
263
|
+
}
|
264
|
+
};
|
225
265
|
const dependencies = [
|
226
266
|
"react",
|
227
267
|
"react-dom",
|
228
268
|
jsxImportDevRuntime,
|
229
269
|
jsxImportRuntime
|
230
270
|
];
|
231
|
-
const staticBabelPlugins = typeof opts.babel === "object" ?
|
271
|
+
const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
|
232
272
|
const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
|
233
273
|
if (reactCompilerPlugin != null) {
|
234
274
|
const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
|
@@ -239,8 +279,7 @@ function viteReact(opts = {}) {
|
|
239
279
|
enforce: "pre",
|
240
280
|
config: (userConfig) => ({
|
241
281
|
build: silenceUseClientWarning(userConfig),
|
242
|
-
optimizeDeps: { include: dependencies }
|
243
|
-
resolve: { dedupe: ["react", "react-dom"] }
|
282
|
+
optimizeDeps: { include: dependencies }
|
244
283
|
}),
|
245
284
|
resolveId: {
|
246
285
|
filter: { id: exactRegex(runtimePublicPath) },
|
@@ -262,9 +301,18 @@ function viteReact(opts = {}) {
|
|
262
301
|
}];
|
263
302
|
}
|
264
303
|
};
|
265
|
-
return [
|
304
|
+
return [
|
305
|
+
viteBabel,
|
306
|
+
viteRefreshWrapper,
|
307
|
+
viteConfigPost,
|
308
|
+
viteReactRefresh
|
309
|
+
];
|
266
310
|
}
|
267
311
|
viteReact.preambleCode = preambleCode;
|
312
|
+
function viteReactForCjs(options) {
|
313
|
+
return viteReact.call(this, options);
|
314
|
+
}
|
315
|
+
Object.assign(viteReactForCjs, { default: viteReactForCjs });
|
268
316
|
function canSkipBabel(plugins, babelOptions) {
|
269
317
|
return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
|
270
318
|
}
|
@@ -281,17 +329,16 @@ function loadPlugin(path) {
|
|
281
329
|
return promise;
|
282
330
|
}
|
283
331
|
function createBabelOptions(rawOptions) {
|
284
|
-
var _babelOptions$parserO;
|
285
332
|
const babelOptions = {
|
286
333
|
babelrc: false,
|
287
334
|
configFile: false,
|
288
335
|
...rawOptions
|
289
336
|
};
|
290
|
-
babelOptions.plugins
|
291
|
-
babelOptions.presets
|
292
|
-
babelOptions.overrides
|
293
|
-
babelOptions.parserOpts
|
294
|
-
|
337
|
+
babelOptions.plugins ||= [];
|
338
|
+
babelOptions.presets ||= [];
|
339
|
+
babelOptions.overrides ||= [];
|
340
|
+
babelOptions.parserOpts ||= {};
|
341
|
+
babelOptions.parserOpts.plugins ||= [];
|
295
342
|
return babelOptions;
|
296
343
|
}
|
297
344
|
function defined(value) {
|
@@ -303,18 +350,10 @@ function getReactCompilerPlugin(plugins) {
|
|
303
350
|
function getReactCompilerRuntimeModule(plugin) {
|
304
351
|
let moduleName = "react/compiler-runtime";
|
305
352
|
if (Array.isArray(plugin)) {
|
306
|
-
|
307
|
-
if (((_plugin$ = plugin[1]) === null || _plugin$ === void 0 ? void 0 : _plugin$.target) === "17" || ((_plugin$2 = plugin[1]) === null || _plugin$2 === void 0 ? void 0 : _plugin$2.target) === "18") moduleName = "react-compiler-runtime";
|
308
|
-
else if (typeof ((_plugin$3 = plugin[1]) === null || _plugin$3 === void 0 ? void 0 : _plugin$3.runtimeModule) === "string") {
|
309
|
-
var _plugin$4;
|
310
|
-
moduleName = (_plugin$4 = plugin[1]) === null || _plugin$4 === void 0 ? void 0 : _plugin$4.runtimeModule;
|
311
|
-
}
|
353
|
+
if (plugin[1]?.target === "17" || plugin[1]?.target === "18") moduleName = "react-compiler-runtime";
|
312
354
|
}
|
313
355
|
return moduleName;
|
314
356
|
}
|
315
|
-
function ensureArray(value) {
|
316
|
-
return Array.isArray(value) ? value : [value];
|
317
|
-
}
|
318
357
|
|
319
358
|
//#endregion
|
320
|
-
export { viteReact as default };
|
359
|
+
export { viteReact as default, viteReactForCjs as "module.exports" };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@vitejs/plugin-react",
|
3
|
-
"version": "
|
3
|
+
"version": "5.0.0",
|
4
4
|
"license": "MIT",
|
5
5
|
"author": "Evan You",
|
6
6
|
"description": "The default Vite plugin for React projects",
|
@@ -20,15 +20,7 @@
|
|
20
20
|
"dist"
|
21
21
|
],
|
22
22
|
"type": "module",
|
23
|
-
"
|
24
|
-
"module": "./dist/index.js",
|
25
|
-
"types": "./dist/index.d.ts",
|
26
|
-
"exports": {
|
27
|
-
".": {
|
28
|
-
"import": "./dist/index.js",
|
29
|
-
"require": "./dist/index.cjs"
|
30
|
-
}
|
31
|
-
},
|
23
|
+
"exports": "./dist/index.js",
|
32
24
|
"scripts": {
|
33
25
|
"dev": "tsdown --watch",
|
34
26
|
"build": "tsdown",
|
@@ -36,7 +28,7 @@
|
|
36
28
|
"test-unit": "vitest run"
|
37
29
|
},
|
38
30
|
"engines": {
|
39
|
-
"node": "^
|
31
|
+
"node": "^20.19.0 || >=22.12.0"
|
40
32
|
},
|
41
33
|
"repository": {
|
42
34
|
"type": "git",
|
@@ -51,7 +43,7 @@
|
|
51
43
|
"@babel/core": "^7.28.0",
|
52
44
|
"@babel/plugin-transform-react-jsx-self": "^7.27.1",
|
53
45
|
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
|
54
|
-
"@rolldown/pluginutils": "1.0.0-beta.
|
46
|
+
"@rolldown/pluginutils": "1.0.0-beta.30",
|
55
47
|
"@types/babel__core": "^7.20.5",
|
56
48
|
"react-refresh": "^0.17.0"
|
57
49
|
},
|
@@ -61,10 +53,10 @@
|
|
61
53
|
"devDependencies": {
|
62
54
|
"@vitejs/react-common": "workspace:*",
|
63
55
|
"babel-plugin-react-compiler": "19.1.0-rc.2",
|
64
|
-
"react": "^19.1.
|
65
|
-
"react-dom": "^19.1.
|
66
|
-
"rolldown": "1.0.0-beta.
|
67
|
-
"tsdown": "^0.
|
56
|
+
"react": "^19.1.1",
|
57
|
+
"react-dom": "^19.1.1",
|
58
|
+
"rolldown": "1.0.0-beta.30",
|
59
|
+
"tsdown": "^0.13.2",
|
68
60
|
"vitest": "^3.2.4"
|
69
61
|
}
|
70
62
|
}
|
package/dist/index.cjs
DELETED
@@ -1,343 +0,0 @@
|
|
1
|
-
//#region rolldown:runtime
|
2
|
-
var __create = Object.create;
|
3
|
-
var __defProp = Object.defineProperty;
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
-
var __copyProps = (to, from, except, desc) => {
|
9
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
10
|
-
key = keys[i];
|
11
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
12
|
-
get: ((k) => from[k]).bind(null, key),
|
13
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
14
|
-
});
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
19
|
-
value: mod,
|
20
|
-
enumerable: true
|
21
|
-
}) : target, mod));
|
22
|
-
|
23
|
-
//#endregion
|
24
|
-
const node_path = __toESM(require("node:path"));
|
25
|
-
const node_url = __toESM(require("node:url"));
|
26
|
-
const node_fs = __toESM(require("node:fs"));
|
27
|
-
const vite = __toESM(require("vite"));
|
28
|
-
const __rolldown_pluginutils = __toESM(require("@rolldown/pluginutils"));
|
29
|
-
|
30
|
-
//#region ../common/refresh-utils.ts
|
31
|
-
const runtimePublicPath = "/@react-refresh";
|
32
|
-
const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
|
33
|
-
const refreshContentRE = /\$RefreshReg\$\(/;
|
34
|
-
const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
|
35
|
-
injectIntoGlobalHook(window);
|
36
|
-
window.$RefreshReg$ = () => {};
|
37
|
-
window.$RefreshSig$ = () => (type) => type;`;
|
38
|
-
const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
|
39
|
-
const avoidSourceMapOption = Symbol();
|
40
|
-
function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
|
41
|
-
const hasRefresh = refreshContentRE.test(code);
|
42
|
-
const onlyReactComp = !hasRefresh && reactCompRE.test(code);
|
43
|
-
const normalizedMap = map === avoidSourceMapOption ? null : map;
|
44
|
-
if (!hasRefresh && !onlyReactComp) return {
|
45
|
-
code,
|
46
|
-
map: normalizedMap
|
47
|
-
};
|
48
|
-
const avoidSourceMap = map === avoidSourceMapOption;
|
49
|
-
const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
|
50
|
-
let newCode = code;
|
51
|
-
if (hasRefresh) {
|
52
|
-
const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
|
53
|
-
let prevRefreshSig;
|
54
|
-
|
55
|
-
if (import.meta.hot && !inWebWorker) {
|
56
|
-
if (!window.$RefreshReg$) {
|
57
|
-
throw new Error(
|
58
|
-
"${pluginName} can't detect preamble. Something is wrong."
|
59
|
-
);
|
60
|
-
}
|
61
|
-
|
62
|
-
prevRefreshReg = window.$RefreshReg$;
|
63
|
-
prevRefreshSig = window.$RefreshSig$;
|
64
|
-
window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
|
65
|
-
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
|
66
|
-
}
|
67
|
-
|
68
|
-
`, avoidSourceMap);
|
69
|
-
newCode = `${refreshHead}${newCode}
|
70
|
-
|
71
|
-
if (import.meta.hot && !inWebWorker) {
|
72
|
-
window.$RefreshReg$ = prevRefreshReg;
|
73
|
-
window.$RefreshSig$ = prevRefreshSig;
|
74
|
-
}
|
75
|
-
`;
|
76
|
-
if (newMap) newMap.mappings = ";".repeat(16) + newMap.mappings;
|
77
|
-
}
|
78
|
-
const sharedHead = removeLineBreaksIfNeeded(`import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
|
79
|
-
const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
|
80
|
-
|
81
|
-
`, avoidSourceMap);
|
82
|
-
newCode = `${sharedHead}${newCode}
|
83
|
-
|
84
|
-
if (import.meta.hot && !inWebWorker) {
|
85
|
-
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
|
86
|
-
RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
|
87
|
-
import.meta.hot.accept((nextExports) => {
|
88
|
-
if (!nextExports) return;
|
89
|
-
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
|
90
|
-
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
|
91
|
-
});
|
92
|
-
});
|
93
|
-
}
|
94
|
-
`;
|
95
|
-
if (newMap) newMap.mappings = ";;;" + newMap.mappings;
|
96
|
-
return {
|
97
|
-
code: newCode,
|
98
|
-
map: newMap
|
99
|
-
};
|
100
|
-
}
|
101
|
-
function removeLineBreaksIfNeeded(code, enabled) {
|
102
|
-
return enabled ? code.replace(/\n/g, "") : code;
|
103
|
-
}
|
104
|
-
|
105
|
-
//#endregion
|
106
|
-
//#region ../common/warning.ts
|
107
|
-
const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
|
108
|
-
var _userConfig$build;
|
109
|
-
if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
|
110
|
-
if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
|
111
|
-
if ((_userConfig$build = userConfig.build) === null || _userConfig$build === void 0 || (_userConfig$build = _userConfig$build.rollupOptions) === null || _userConfig$build === void 0 ? void 0 : _userConfig$build.onwarn) userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
|
112
|
-
else defaultHandler(warning);
|
113
|
-
} } });
|
114
|
-
|
115
|
-
//#endregion
|
116
|
-
//#region src/index.ts
|
117
|
-
const _dirname = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
|
118
|
-
const refreshRuntimePath = (0, node_path.join)(_dirname, "refresh-runtime.js");
|
119
|
-
let babel;
|
120
|
-
async function loadBabel() {
|
121
|
-
if (!babel) babel = await import("@babel/core");
|
122
|
-
return babel;
|
123
|
-
}
|
124
|
-
const defaultIncludeRE = /\.[tj]sx?$/;
|
125
|
-
const tsRE = /\.tsx?$/;
|
126
|
-
function viteReact(opts = {}) {
|
127
|
-
var _opts$babel;
|
128
|
-
const include = opts.include ?? defaultIncludeRE;
|
129
|
-
const exclude = opts.exclude;
|
130
|
-
const filter = (0, vite.createFilter)(include, exclude);
|
131
|
-
const jsxImportSource = opts.jsxImportSource ?? "react";
|
132
|
-
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
|
133
|
-
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
|
134
|
-
let runningInVite = false;
|
135
|
-
let isProduction = true;
|
136
|
-
let projectRoot = process.cwd();
|
137
|
-
let skipFastRefresh = true;
|
138
|
-
let runPluginOverrides;
|
139
|
-
let staticBabelOptions;
|
140
|
-
const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
|
141
|
-
const viteBabel = {
|
142
|
-
name: "vite:react-babel",
|
143
|
-
enforce: "pre",
|
144
|
-
config() {
|
145
|
-
if (opts.jsxRuntime === "classic") if ("rolldownVersion" in vite) return { oxc: { jsx: {
|
146
|
-
runtime: "classic",
|
147
|
-
development: false
|
148
|
-
} } };
|
149
|
-
else return { esbuild: { jsx: "transform" } };
|
150
|
-
else return {
|
151
|
-
esbuild: {
|
152
|
-
jsx: "automatic",
|
153
|
-
jsxImportSource: opts.jsxImportSource
|
154
|
-
},
|
155
|
-
optimizeDeps: "rolldownVersion" in vite ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
|
156
|
-
};
|
157
|
-
},
|
158
|
-
configResolved(config) {
|
159
|
-
runningInVite = true;
|
160
|
-
projectRoot = config.root;
|
161
|
-
isProduction = config.isProduction;
|
162
|
-
skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
|
163
|
-
if ("jsxPure" in opts) config.logger.warnOnce("[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly.");
|
164
|
-
const hooks = config.plugins.map((plugin) => {
|
165
|
-
var _plugin$api;
|
166
|
-
return (_plugin$api = plugin.api) === null || _plugin$api === void 0 ? void 0 : _plugin$api.reactBabel;
|
167
|
-
}).filter(defined);
|
168
|
-
if ("rolldownVersion" in vite && !opts.babel && !hooks.length && !opts.disableOxcRecommendation) config.logger.warn("[vite:react-babel] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown");
|
169
|
-
if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
|
170
|
-
hooks.forEach((hook) => hook(babelOptions, context, config));
|
171
|
-
};
|
172
|
-
else if (typeof opts.babel !== "function") {
|
173
|
-
staticBabelOptions = createBabelOptions(opts.babel);
|
174
|
-
if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) delete viteBabel.transform;
|
175
|
-
}
|
176
|
-
},
|
177
|
-
options(options) {
|
178
|
-
if (!runningInVite) {
|
179
|
-
options.jsx = {
|
180
|
-
mode: opts.jsxRuntime,
|
181
|
-
importSource: opts.jsxImportSource
|
182
|
-
};
|
183
|
-
return options;
|
184
|
-
}
|
185
|
-
},
|
186
|
-
transform: {
|
187
|
-
filter: { id: {
|
188
|
-
include: (0, __rolldown_pluginutils.makeIdFiltersToMatchWithQuery)(include),
|
189
|
-
exclude: [...exclude ? (0, __rolldown_pluginutils.makeIdFiltersToMatchWithQuery)(ensureArray(exclude)) : [], /\/node_modules\//]
|
190
|
-
} },
|
191
|
-
async handler(code, id, options) {
|
192
|
-
if (id.includes("/node_modules/")) return;
|
193
|
-
const [filepath] = id.split("?");
|
194
|
-
if (!filter(filepath)) return;
|
195
|
-
const ssr = (options === null || options === void 0 ? void 0 : options.ssr) === true;
|
196
|
-
const babelOptions = (() => {
|
197
|
-
if (staticBabelOptions) return staticBabelOptions;
|
198
|
-
const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
|
199
|
-
runPluginOverrides === null || runPluginOverrides === void 0 || runPluginOverrides(newBabelOptions, {
|
200
|
-
id,
|
201
|
-
ssr
|
202
|
-
});
|
203
|
-
return newBabelOptions;
|
204
|
-
})();
|
205
|
-
const plugins = [...babelOptions.plugins];
|
206
|
-
const isJSX = filepath.endsWith("x");
|
207
|
-
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
|
208
|
-
if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
|
209
|
-
if (opts.jsxRuntime === "classic" && isJSX) {
|
210
|
-
if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
|
211
|
-
}
|
212
|
-
if (canSkipBabel(plugins, babelOptions)) return;
|
213
|
-
const parserPlugins = [...babelOptions.parserOpts.plugins];
|
214
|
-
if (!filepath.endsWith(".ts")) parserPlugins.push("jsx");
|
215
|
-
if (tsRE.test(filepath)) parserPlugins.push("typescript");
|
216
|
-
const babel$1 = await loadBabel();
|
217
|
-
const result = await babel$1.transformAsync(code, {
|
218
|
-
...babelOptions,
|
219
|
-
root: projectRoot,
|
220
|
-
filename: id,
|
221
|
-
sourceFileName: filepath,
|
222
|
-
retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
|
223
|
-
parserOpts: {
|
224
|
-
...babelOptions.parserOpts,
|
225
|
-
sourceType: "module",
|
226
|
-
allowAwaitOutsideFunction: true,
|
227
|
-
plugins: parserPlugins
|
228
|
-
},
|
229
|
-
generatorOpts: {
|
230
|
-
...babelOptions.generatorOpts,
|
231
|
-
importAttributesKeyword: "with",
|
232
|
-
decoratorsBeforeExport: true
|
233
|
-
},
|
234
|
-
plugins,
|
235
|
-
sourceMaps: true
|
236
|
-
});
|
237
|
-
if (result) {
|
238
|
-
if (!useFastRefresh) return {
|
239
|
-
code: result.code,
|
240
|
-
map: result.map
|
241
|
-
};
|
242
|
-
return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react", id, opts.reactRefreshHost);
|
243
|
-
}
|
244
|
-
}
|
245
|
-
}
|
246
|
-
};
|
247
|
-
const dependencies = [
|
248
|
-
"react",
|
249
|
-
"react-dom",
|
250
|
-
jsxImportDevRuntime,
|
251
|
-
jsxImportRuntime
|
252
|
-
];
|
253
|
-
const staticBabelPlugins = typeof opts.babel === "object" ? ((_opts$babel = opts.babel) === null || _opts$babel === void 0 ? void 0 : _opts$babel.plugins) ?? [] : [];
|
254
|
-
const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
|
255
|
-
if (reactCompilerPlugin != null) {
|
256
|
-
const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
|
257
|
-
dependencies.push(reactCompilerRuntimeModule);
|
258
|
-
}
|
259
|
-
const viteReactRefresh = {
|
260
|
-
name: "vite:react-refresh",
|
261
|
-
enforce: "pre",
|
262
|
-
config: (userConfig) => ({
|
263
|
-
build: silenceUseClientWarning(userConfig),
|
264
|
-
optimizeDeps: { include: dependencies },
|
265
|
-
resolve: { dedupe: ["react", "react-dom"] }
|
266
|
-
}),
|
267
|
-
resolveId: {
|
268
|
-
filter: { id: (0, __rolldown_pluginutils.exactRegex)(runtimePublicPath) },
|
269
|
-
handler(id) {
|
270
|
-
if (id === runtimePublicPath) return id;
|
271
|
-
}
|
272
|
-
},
|
273
|
-
load: {
|
274
|
-
filter: { id: (0, __rolldown_pluginutils.exactRegex)(runtimePublicPath) },
|
275
|
-
handler(id) {
|
276
|
-
if (id === runtimePublicPath) return (0, node_fs.readFileSync)(refreshRuntimePath, "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react");
|
277
|
-
}
|
278
|
-
},
|
279
|
-
transformIndexHtml(_, config) {
|
280
|
-
if (!skipFastRefresh) return [{
|
281
|
-
tag: "script",
|
282
|
-
attrs: { type: "module" },
|
283
|
-
children: getPreambleCode(config.server.config.base)
|
284
|
-
}];
|
285
|
-
}
|
286
|
-
};
|
287
|
-
return [viteBabel, viteReactRefresh];
|
288
|
-
}
|
289
|
-
viteReact.preambleCode = preambleCode;
|
290
|
-
function canSkipBabel(plugins, babelOptions) {
|
291
|
-
return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
|
292
|
-
}
|
293
|
-
const loadedPlugin = /* @__PURE__ */ new Map();
|
294
|
-
function loadPlugin(path) {
|
295
|
-
const cached = loadedPlugin.get(path);
|
296
|
-
if (cached) return cached;
|
297
|
-
const promise = import(path).then((module$1) => {
|
298
|
-
const value = module$1.default || module$1;
|
299
|
-
loadedPlugin.set(path, value);
|
300
|
-
return value;
|
301
|
-
});
|
302
|
-
loadedPlugin.set(path, promise);
|
303
|
-
return promise;
|
304
|
-
}
|
305
|
-
function createBabelOptions(rawOptions) {
|
306
|
-
var _babelOptions$parserO;
|
307
|
-
const babelOptions = {
|
308
|
-
babelrc: false,
|
309
|
-
configFile: false,
|
310
|
-
...rawOptions
|
311
|
-
};
|
312
|
-
babelOptions.plugins || (babelOptions.plugins = []);
|
313
|
-
babelOptions.presets || (babelOptions.presets = []);
|
314
|
-
babelOptions.overrides || (babelOptions.overrides = []);
|
315
|
-
babelOptions.parserOpts || (babelOptions.parserOpts = {});
|
316
|
-
(_babelOptions$parserO = babelOptions.parserOpts).plugins || (_babelOptions$parserO.plugins = []);
|
317
|
-
return babelOptions;
|
318
|
-
}
|
319
|
-
function defined(value) {
|
320
|
-
return value !== void 0;
|
321
|
-
}
|
322
|
-
function getReactCompilerPlugin(plugins) {
|
323
|
-
return plugins.find((p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler");
|
324
|
-
}
|
325
|
-
function getReactCompilerRuntimeModule(plugin) {
|
326
|
-
let moduleName = "react/compiler-runtime";
|
327
|
-
if (Array.isArray(plugin)) {
|
328
|
-
var _plugin$, _plugin$2, _plugin$3;
|
329
|
-
if (((_plugin$ = plugin[1]) === null || _plugin$ === void 0 ? void 0 : _plugin$.target) === "17" || ((_plugin$2 = plugin[1]) === null || _plugin$2 === void 0 ? void 0 : _plugin$2.target) === "18") moduleName = "react-compiler-runtime";
|
330
|
-
else if (typeof ((_plugin$3 = plugin[1]) === null || _plugin$3 === void 0 ? void 0 : _plugin$3.runtimeModule) === "string") {
|
331
|
-
var _plugin$4;
|
332
|
-
moduleName = (_plugin$4 = plugin[1]) === null || _plugin$4 === void 0 ? void 0 : _plugin$4.runtimeModule;
|
333
|
-
}
|
334
|
-
}
|
335
|
-
return moduleName;
|
336
|
-
}
|
337
|
-
function ensureArray(value) {
|
338
|
-
return Array.isArray(value) ? value : [value];
|
339
|
-
}
|
340
|
-
|
341
|
-
//#endregion
|
342
|
-
module.exports = viteReact;
|
343
|
-
module.exports.default = module.exports
|
package/dist/index.d.cts
DELETED
@@ -1,67 +0,0 @@
|
|
1
|
-
import { ParserOptions, TransformOptions } from "@babel/core";
|
2
|
-
import { Plugin, ResolvedConfig } from "vite";
|
3
|
-
|
4
|
-
//#region src/index.d.ts
|
5
|
-
interface Options {
|
6
|
-
include?: string | RegExp | Array<string | RegExp>;
|
7
|
-
exclude?: string | RegExp | Array<string | RegExp>;
|
8
|
-
/**
|
9
|
-
* Control where the JSX factory is imported from.
|
10
|
-
* https://esbuild.github.io/api/#jsx-import-source
|
11
|
-
* @default 'react'
|
12
|
-
*/
|
13
|
-
jsxImportSource?: string;
|
14
|
-
/**
|
15
|
-
* Note: Skipping React import with classic runtime is not supported from v4
|
16
|
-
* @default "automatic"
|
17
|
-
*/
|
18
|
-
jsxRuntime?: 'classic' | 'automatic';
|
19
|
-
/**
|
20
|
-
* Babel configuration applied in both dev and prod.
|
21
|
-
*/
|
22
|
-
babel?: BabelOptions | ((id: string, options: {
|
23
|
-
ssr?: boolean;
|
24
|
-
}) => BabelOptions);
|
25
|
-
/**
|
26
|
-
* React Fast Refresh runtime URL prefix.
|
27
|
-
* Useful in a module federation context to enable HMR by specifying
|
28
|
-
* the host application URL in the Vite config of a remote application.
|
29
|
-
* @example
|
30
|
-
* reactRefreshHost: 'http://localhost:3000'
|
31
|
-
*/
|
32
|
-
reactRefreshHost?: string;
|
33
|
-
/**
|
34
|
-
* If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
|
35
|
-
*/
|
36
|
-
disableOxcRecommendation?: boolean;
|
37
|
-
}
|
38
|
-
type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
|
39
|
-
/**
|
40
|
-
* The object type used by the `options` passed to plugins with
|
41
|
-
* an `api.reactBabel` method.
|
42
|
-
*/
|
43
|
-
interface ReactBabelOptions extends BabelOptions {
|
44
|
-
plugins: Extract<BabelOptions['plugins'], any[]>;
|
45
|
-
presets: Extract<BabelOptions['presets'], any[]>;
|
46
|
-
overrides: Extract<BabelOptions['overrides'], any[]>;
|
47
|
-
parserOpts: ParserOptions & {
|
48
|
-
plugins: Extract<ParserOptions['plugins'], any[]>;
|
49
|
-
};
|
50
|
-
}
|
51
|
-
type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
|
52
|
-
type ReactBabelHookContext = {
|
53
|
-
ssr: boolean;
|
54
|
-
id: string;
|
55
|
-
};
|
56
|
-
type ViteReactPluginApi = {
|
57
|
-
/**
|
58
|
-
* Manipulate the Babel options of `@vitejs/plugin-react`
|
59
|
-
*/
|
60
|
-
reactBabel?: ReactBabelHook;
|
61
|
-
};
|
62
|
-
declare function viteReact(opts?: Options): Plugin[];
|
63
|
-
declare namespace viteReact {
|
64
|
-
var preambleCode: string;
|
65
|
-
}
|
66
|
-
//#endregion
|
67
|
-
export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default };
|