Ajout de promotion et de commande

This commit is contained in:
Aubert Marvin
2026-04-25 15:28:39 +02:00
parent eddb103755
commit faa3d7718c
8428 changed files with 1126442 additions and 6 deletions
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+142
View File
@@ -0,0 +1,142 @@
# @vitejs/plugin-react [![npm](https://img.shields.io/npm/v/@vitejs/plugin-react.svg)](https://npmjs.com/package/@vitejs/plugin-react)
The default Vite plugin for React projects.
- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development (requires react >= 16.9)
- use the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
- use custom Babel plugins/presets
- small installation size
```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
```
## Options
### include/exclude
Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to `.mdx` files:
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from '@mdx-js/rollup'
export default defineConfig({
plugins: [
{ enforce: 'pre', ...mdx() },
react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
],
})
```
> `node_modules` are never processed by this plugin (but esbuild will)
### jsxImportSource
Control where the JSX factory is imported from. Default to `'react'`
```js
react({ jsxImportSource: '@emotion/react' })
```
### jsxRuntime
By default, the plugin uses the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). However, if you encounter any issues, you may opt out using the `jsxRuntime` option.
```js
react({ jsxRuntime: 'classic' })
```
### babel
The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each included file.
```js
react({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
})
```
Note: When not using plugins, only esbuild is used for production builds, resulting in faster builds.
#### Proposed syntax
If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them with the `babel.parserOpts.plugins` option:
```js
react({
babel: {
parserOpts: {
plugins: ['decorators-legacy'],
},
},
})
```
This option does not enable _code transformation_. That is handled by esbuild.
**Note:** TypeScript syntax is handled automatically.
Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
### reactRefreshHost
The `reactRefreshHost` option is only necessary in a module federation context. It enables HMR to work between a remote & host application. In your remote Vite config, you would add your host origin:
```js
react({ reactRefreshHost: 'http://localhost:3000' })
```
Under the hood, this simply updates the React Fash Refresh runtime URL from `/@react-refresh` to `http://localhost:3000/@react-refresh` to ensure there is only one Refresh runtime across the whole application. Note that if you define `base` option in the host application, you need to include it in the option, like: `http://localhost:3000/{base}`.
## Middleware mode
In [middleware mode](https://vite.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
```js
app.get('/', async (req, res, next) => {
try {
let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')
// Transform HTML using Vite plugins.
html = await viteServer.transformIndexHtml(req.url, html)
res.send(html)
} catch (e) {
return next(e)
}
})
```
Otherwise, you'll probably get this error:
```
Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
```
### disableOxcRecommendation
If set, disables the recommendation to use `@vitejs/plugin-react-oxc` (which is shown when `rolldown-vite` is detected and `babel` is not configured).
## Consistent components exports
For React refresh to work correctly, your file should only export React components. You can find a good explanation in the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
You can catch mistakes and get more detailed warning with this [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh).
+343
View File
@@ -0,0 +1,343 @@
//#region rolldown:runtime
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
const node_path = __toESM(require("node:path"));
const node_url = __toESM(require("node:url"));
const node_fs = __toESM(require("node:fs"));
const vite = __toESM(require("vite"));
const __rolldown_pluginutils = __toESM(require("@rolldown/pluginutils"));
//#region ../common/refresh-utils.ts
const runtimePublicPath = "/@react-refresh";
const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
const refreshContentRE = /\$RefreshReg\$\(/;
const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;`;
const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
const avoidSourceMapOption = Symbol();
function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
const hasRefresh = refreshContentRE.test(code);
const onlyReactComp = !hasRefresh && reactCompRE.test(code);
const normalizedMap = map === avoidSourceMapOption ? null : map;
if (!hasRefresh && !onlyReactComp) return {
code,
map: normalizedMap
};
const avoidSourceMap = map === avoidSourceMapOption;
const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
let newCode = code;
if (hasRefresh) {
const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
let prevRefreshSig;
if (import.meta.hot && !inWebWorker) {
if (!window.$RefreshReg$) {
throw new Error(
"${pluginName} can't detect preamble. Something is wrong."
);
}
prevRefreshReg = window.$RefreshReg$;
prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
`, avoidSourceMap);
newCode = `${refreshHead}${newCode}
if (import.meta.hot && !inWebWorker) {
window.$RefreshReg$ = prevRefreshReg;
window.$RefreshSig$ = prevRefreshSig;
}
`;
if (newMap) newMap.mappings = ";".repeat(16) + newMap.mappings;
}
const sharedHead = removeLineBreaksIfNeeded(`import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
`, avoidSourceMap);
newCode = `${sharedHead}${newCode}
if (import.meta.hot && !inWebWorker) {
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
import.meta.hot.accept((nextExports) => {
if (!nextExports) return;
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
});
});
}
`;
if (newMap) newMap.mappings = ";;;" + newMap.mappings;
return {
code: newCode,
map: newMap
};
}
function removeLineBreaksIfNeeded(code, enabled) {
return enabled ? code.replace(/\n/g, "") : code;
}
//#endregion
//#region ../common/warning.ts
const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
var _userConfig$build;
if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
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);
else defaultHandler(warning);
} } });
//#endregion
//#region src/index.ts
const _dirname = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
const refreshRuntimePath = (0, node_path.join)(_dirname, "refresh-runtime.js");
let babel;
async function loadBabel() {
if (!babel) babel = await import("@babel/core");
return babel;
}
const defaultIncludeRE = /\.[tj]sx?$/;
const tsRE = /\.tsx?$/;
function viteReact(opts = {}) {
var _opts$babel;
const include = opts.include ?? defaultIncludeRE;
const exclude = opts.exclude;
const filter = (0, vite.createFilter)(include, exclude);
const jsxImportSource = opts.jsxImportSource ?? "react";
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
let runningInVite = false;
let isProduction = true;
let projectRoot = process.cwd();
let skipFastRefresh = true;
let runPluginOverrides;
let staticBabelOptions;
const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
const viteBabel = {
name: "vite:react-babel",
enforce: "pre",
config() {
if (opts.jsxRuntime === "classic") if ("rolldownVersion" in vite) return { oxc: { jsx: {
runtime: "classic",
development: false
} } };
else return { esbuild: { jsx: "transform" } };
else return {
esbuild: {
jsx: "automatic",
jsxImportSource: opts.jsxImportSource
},
optimizeDeps: "rolldownVersion" in vite ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
};
},
configResolved(config) {
runningInVite = true;
projectRoot = config.root;
isProduction = config.isProduction;
skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
if ("jsxPure" in opts) config.logger.warnOnce("[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly.");
const hooks = config.plugins.map((plugin) => {
var _plugin$api;
return (_plugin$api = plugin.api) === null || _plugin$api === void 0 ? void 0 : _plugin$api.reactBabel;
}).filter(defined);
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");
if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
hooks.forEach((hook) => hook(babelOptions, context, config));
};
else if (typeof opts.babel !== "function") {
staticBabelOptions = createBabelOptions(opts.babel);
if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) delete viteBabel.transform;
}
},
options(options) {
if (!runningInVite) {
options.jsx = {
mode: opts.jsxRuntime,
importSource: opts.jsxImportSource
};
return options;
}
},
transform: {
filter: { id: {
include: (0, __rolldown_pluginutils.makeIdFiltersToMatchWithQuery)(include),
exclude: [...exclude ? (0, __rolldown_pluginutils.makeIdFiltersToMatchWithQuery)(ensureArray(exclude)) : [], /\/node_modules\//]
} },
async handler(code, id, options) {
if (id.includes("/node_modules/")) return;
const [filepath] = id.split("?");
if (!filter(filepath)) return;
const ssr = (options === null || options === void 0 ? void 0 : options.ssr) === true;
const babelOptions = (() => {
if (staticBabelOptions) return staticBabelOptions;
const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
runPluginOverrides === null || runPluginOverrides === void 0 || runPluginOverrides(newBabelOptions, {
id,
ssr
});
return newBabelOptions;
})();
const plugins = [...babelOptions.plugins];
const isJSX = filepath.endsWith("x");
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
if (opts.jsxRuntime === "classic" && isJSX) {
if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
}
if (canSkipBabel(plugins, babelOptions)) return;
const parserPlugins = [...babelOptions.parserOpts.plugins];
if (!filepath.endsWith(".ts")) parserPlugins.push("jsx");
if (tsRE.test(filepath)) parserPlugins.push("typescript");
const babel$1 = await loadBabel();
const result = await babel$1.transformAsync(code, {
...babelOptions,
root: projectRoot,
filename: id,
sourceFileName: filepath,
retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
parserOpts: {
...babelOptions.parserOpts,
sourceType: "module",
allowAwaitOutsideFunction: true,
plugins: parserPlugins
},
generatorOpts: {
...babelOptions.generatorOpts,
importAttributesKeyword: "with",
decoratorsBeforeExport: true
},
plugins,
sourceMaps: true
});
if (result) {
if (!useFastRefresh) return {
code: result.code,
map: result.map
};
return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react", id, opts.reactRefreshHost);
}
}
}
};
const dependencies = [
"react",
"react-dom",
jsxImportDevRuntime,
jsxImportRuntime
];
const staticBabelPlugins = typeof opts.babel === "object" ? ((_opts$babel = opts.babel) === null || _opts$babel === void 0 ? void 0 : _opts$babel.plugins) ?? [] : [];
const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
if (reactCompilerPlugin != null) {
const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
dependencies.push(reactCompilerRuntimeModule);
}
const viteReactRefresh = {
name: "vite:react-refresh",
enforce: "pre",
config: (userConfig) => ({
build: silenceUseClientWarning(userConfig),
optimizeDeps: { include: dependencies },
resolve: { dedupe: ["react", "react-dom"] }
}),
resolveId: {
filter: { id: (0, __rolldown_pluginutils.exactRegex)(runtimePublicPath) },
handler(id) {
if (id === runtimePublicPath) return id;
}
},
load: {
filter: { id: (0, __rolldown_pluginutils.exactRegex)(runtimePublicPath) },
handler(id) {
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");
}
},
transformIndexHtml(_, config) {
if (!skipFastRefresh) return [{
tag: "script",
attrs: { type: "module" },
children: getPreambleCode(config.server.config.base)
}];
}
};
return [viteBabel, viteReactRefresh];
}
viteReact.preambleCode = preambleCode;
function canSkipBabel(plugins, babelOptions) {
return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
}
const loadedPlugin = /* @__PURE__ */ new Map();
function loadPlugin(path) {
const cached = loadedPlugin.get(path);
if (cached) return cached;
const promise = import(path).then((module$1) => {
const value = module$1.default || module$1;
loadedPlugin.set(path, value);
return value;
});
loadedPlugin.set(path, promise);
return promise;
}
function createBabelOptions(rawOptions) {
var _babelOptions$parserO;
const babelOptions = {
babelrc: false,
configFile: false,
...rawOptions
};
babelOptions.plugins || (babelOptions.plugins = []);
babelOptions.presets || (babelOptions.presets = []);
babelOptions.overrides || (babelOptions.overrides = []);
babelOptions.parserOpts || (babelOptions.parserOpts = {});
(_babelOptions$parserO = babelOptions.parserOpts).plugins || (_babelOptions$parserO.plugins = []);
return babelOptions;
}
function defined(value) {
return value !== void 0;
}
function getReactCompilerPlugin(plugins) {
return plugins.find((p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler");
}
function getReactCompilerRuntimeModule(plugin) {
let moduleName = "react/compiler-runtime";
if (Array.isArray(plugin)) {
var _plugin$, _plugin$2, _plugin$3;
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";
else if (typeof ((_plugin$3 = plugin[1]) === null || _plugin$3 === void 0 ? void 0 : _plugin$3.runtimeModule) === "string") {
var _plugin$4;
moduleName = (_plugin$4 = plugin[1]) === null || _plugin$4 === void 0 ? void 0 : _plugin$4.runtimeModule;
}
}
return moduleName;
}
function ensureArray(value) {
return Array.isArray(value) ? value : [value];
}
//#endregion
module.exports = viteReact;
module.exports.default = module.exports
+67
View File
@@ -0,0 +1,67 @@
import { ParserOptions, TransformOptions } from "@babel/core";
import { Plugin, ResolvedConfig } from "vite";
//#region src/index.d.ts
interface Options {
include?: string | RegExp | Array<string | RegExp>;
exclude?: string | RegExp | Array<string | RegExp>;
/**
* Control where the JSX factory is imported from.
* https://esbuild.github.io/api/#jsx-import-source
* @default 'react'
*/
jsxImportSource?: string;
/**
* Note: Skipping React import with classic runtime is not supported from v4
* @default "automatic"
*/
jsxRuntime?: 'classic' | 'automatic';
/**
* Babel configuration applied in both dev and prod.
*/
babel?: BabelOptions | ((id: string, options: {
ssr?: boolean;
}) => BabelOptions);
/**
* React Fast Refresh runtime URL prefix.
* Useful in a module federation context to enable HMR by specifying
* the host application URL in the Vite config of a remote application.
* @example
* reactRefreshHost: 'http://localhost:3000'
*/
reactRefreshHost?: string;
/**
* If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
*/
disableOxcRecommendation?: boolean;
}
type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
/**
* The object type used by the `options` passed to plugins with
* an `api.reactBabel` method.
*/
interface ReactBabelOptions extends BabelOptions {
plugins: Extract<BabelOptions['plugins'], any[]>;
presets: Extract<BabelOptions['presets'], any[]>;
overrides: Extract<BabelOptions['overrides'], any[]>;
parserOpts: ParserOptions & {
plugins: Extract<ParserOptions['plugins'], any[]>;
};
}
type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
type ReactBabelHookContext = {
ssr: boolean;
id: string;
};
type ViteReactPluginApi = {
/**
* Manipulate the Babel options of `@vitejs/plugin-react`
*/
reactBabel?: ReactBabelHook;
};
declare function viteReact(opts?: Options): Plugin[];
declare namespace viteReact {
var preambleCode: string;
}
//#endregion
export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default };
+67
View File
@@ -0,0 +1,67 @@
import { Plugin, ResolvedConfig } from "vite";
import { ParserOptions, TransformOptions } from "@babel/core";
//#region src/index.d.ts
interface Options {
include?: string | RegExp | Array<string | RegExp>;
exclude?: string | RegExp | Array<string | RegExp>;
/**
* Control where the JSX factory is imported from.
* https://esbuild.github.io/api/#jsx-import-source
* @default 'react'
*/
jsxImportSource?: string;
/**
* Note: Skipping React import with classic runtime is not supported from v4
* @default "automatic"
*/
jsxRuntime?: 'classic' | 'automatic';
/**
* Babel configuration applied in both dev and prod.
*/
babel?: BabelOptions | ((id: string, options: {
ssr?: boolean;
}) => BabelOptions);
/**
* React Fast Refresh runtime URL prefix.
* Useful in a module federation context to enable HMR by specifying
* the host application URL in the Vite config of a remote application.
* @example
* reactRefreshHost: 'http://localhost:3000'
*/
reactRefreshHost?: string;
/**
* If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
*/
disableOxcRecommendation?: boolean;
}
type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
/**
* The object type used by the `options` passed to plugins with
* an `api.reactBabel` method.
*/
interface ReactBabelOptions extends BabelOptions {
plugins: Extract<BabelOptions['plugins'], any[]>;
presets: Extract<BabelOptions['presets'], any[]>;
overrides: Extract<BabelOptions['overrides'], any[]>;
parserOpts: ParserOptions & {
plugins: Extract<ParserOptions['plugins'], any[]>;
};
}
type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
type ReactBabelHookContext = {
ssr: boolean;
id: string;
};
type ViteReactPluginApi = {
/**
* Manipulate the Babel options of `@vitejs/plugin-react`
*/
reactBabel?: ReactBabelHook;
};
declare function viteReact(opts?: Options): Plugin[];
declare namespace viteReact {
var preambleCode: string;
}
//#endregion
export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default };
+320
View File
@@ -0,0 +1,320 @@
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import { readFileSync } from "node:fs";
import * as vite from "vite";
import { createFilter } from "vite";
import { exactRegex, makeIdFiltersToMatchWithQuery } from "@rolldown/pluginutils";
//#region ../common/refresh-utils.ts
const runtimePublicPath = "/@react-refresh";
const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
const refreshContentRE = /\$RefreshReg\$\(/;
const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;`;
const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
const avoidSourceMapOption = Symbol();
function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
const hasRefresh = refreshContentRE.test(code);
const onlyReactComp = !hasRefresh && reactCompRE.test(code);
const normalizedMap = map === avoidSourceMapOption ? null : map;
if (!hasRefresh && !onlyReactComp) return {
code,
map: normalizedMap
};
const avoidSourceMap = map === avoidSourceMapOption;
const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
let newCode = code;
if (hasRefresh) {
const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
let prevRefreshSig;
if (import.meta.hot && !inWebWorker) {
if (!window.$RefreshReg$) {
throw new Error(
"${pluginName} can't detect preamble. Something is wrong."
);
}
prevRefreshReg = window.$RefreshReg$;
prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
`, avoidSourceMap);
newCode = `${refreshHead}${newCode}
if (import.meta.hot && !inWebWorker) {
window.$RefreshReg$ = prevRefreshReg;
window.$RefreshSig$ = prevRefreshSig;
}
`;
if (newMap) newMap.mappings = ";".repeat(16) + newMap.mappings;
}
const sharedHead = removeLineBreaksIfNeeded(`import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
`, avoidSourceMap);
newCode = `${sharedHead}${newCode}
if (import.meta.hot && !inWebWorker) {
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
import.meta.hot.accept((nextExports) => {
if (!nextExports) return;
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
});
});
}
`;
if (newMap) newMap.mappings = ";;;" + newMap.mappings;
return {
code: newCode,
map: newMap
};
}
function removeLineBreaksIfNeeded(code, enabled) {
return enabled ? code.replace(/\n/g, "") : code;
}
//#endregion
//#region ../common/warning.ts
const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
var _userConfig$build;
if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
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);
else defaultHandler(warning);
} } });
//#endregion
//#region src/index.ts
const _dirname = dirname(fileURLToPath(import.meta.url));
const refreshRuntimePath = join(_dirname, "refresh-runtime.js");
let babel;
async function loadBabel() {
if (!babel) babel = await import("@babel/core");
return babel;
}
const defaultIncludeRE = /\.[tj]sx?$/;
const tsRE = /\.tsx?$/;
function viteReact(opts = {}) {
var _opts$babel;
const include = opts.include ?? defaultIncludeRE;
const exclude = opts.exclude;
const filter = createFilter(include, exclude);
const jsxImportSource = opts.jsxImportSource ?? "react";
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
let runningInVite = false;
let isProduction = true;
let projectRoot = process.cwd();
let skipFastRefresh = true;
let runPluginOverrides;
let staticBabelOptions;
const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
const viteBabel = {
name: "vite:react-babel",
enforce: "pre",
config() {
if (opts.jsxRuntime === "classic") if ("rolldownVersion" in vite) return { oxc: { jsx: {
runtime: "classic",
development: false
} } };
else return { esbuild: { jsx: "transform" } };
else return {
esbuild: {
jsx: "automatic",
jsxImportSource: opts.jsxImportSource
},
optimizeDeps: "rolldownVersion" in vite ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
};
},
configResolved(config) {
runningInVite = true;
projectRoot = config.root;
isProduction = config.isProduction;
skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
if ("jsxPure" in opts) config.logger.warnOnce("[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly.");
const hooks = config.plugins.map((plugin) => {
var _plugin$api;
return (_plugin$api = plugin.api) === null || _plugin$api === void 0 ? void 0 : _plugin$api.reactBabel;
}).filter(defined);
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");
if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
hooks.forEach((hook) => hook(babelOptions, context, config));
};
else if (typeof opts.babel !== "function") {
staticBabelOptions = createBabelOptions(opts.babel);
if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) delete viteBabel.transform;
}
},
options(options) {
if (!runningInVite) {
options.jsx = {
mode: opts.jsxRuntime,
importSource: opts.jsxImportSource
};
return options;
}
},
transform: {
filter: { id: {
include: makeIdFiltersToMatchWithQuery(include),
exclude: [...exclude ? makeIdFiltersToMatchWithQuery(ensureArray(exclude)) : [], /\/node_modules\//]
} },
async handler(code, id, options) {
if (id.includes("/node_modules/")) return;
const [filepath] = id.split("?");
if (!filter(filepath)) return;
const ssr = (options === null || options === void 0 ? void 0 : options.ssr) === true;
const babelOptions = (() => {
if (staticBabelOptions) return staticBabelOptions;
const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
runPluginOverrides === null || runPluginOverrides === void 0 || runPluginOverrides(newBabelOptions, {
id,
ssr
});
return newBabelOptions;
})();
const plugins = [...babelOptions.plugins];
const isJSX = filepath.endsWith("x");
const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
if (useFastRefresh) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
if (opts.jsxRuntime === "classic" && isJSX) {
if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
}
if (canSkipBabel(plugins, babelOptions)) return;
const parserPlugins = [...babelOptions.parserOpts.plugins];
if (!filepath.endsWith(".ts")) parserPlugins.push("jsx");
if (tsRE.test(filepath)) parserPlugins.push("typescript");
const babel$1 = await loadBabel();
const result = await babel$1.transformAsync(code, {
...babelOptions,
root: projectRoot,
filename: id,
sourceFileName: filepath,
retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
parserOpts: {
...babelOptions.parserOpts,
sourceType: "module",
allowAwaitOutsideFunction: true,
plugins: parserPlugins
},
generatorOpts: {
...babelOptions.generatorOpts,
importAttributesKeyword: "with",
decoratorsBeforeExport: true
},
plugins,
sourceMaps: true
});
if (result) {
if (!useFastRefresh) return {
code: result.code,
map: result.map
};
return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react", id, opts.reactRefreshHost);
}
}
}
};
const dependencies = [
"react",
"react-dom",
jsxImportDevRuntime,
jsxImportRuntime
];
const staticBabelPlugins = typeof opts.babel === "object" ? ((_opts$babel = opts.babel) === null || _opts$babel === void 0 ? void 0 : _opts$babel.plugins) ?? [] : [];
const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
if (reactCompilerPlugin != null) {
const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
dependencies.push(reactCompilerRuntimeModule);
}
const viteReactRefresh = {
name: "vite:react-refresh",
enforce: "pre",
config: (userConfig) => ({
build: silenceUseClientWarning(userConfig),
optimizeDeps: { include: dependencies },
resolve: { dedupe: ["react", "react-dom"] }
}),
resolveId: {
filter: { id: exactRegex(runtimePublicPath) },
handler(id) {
if (id === runtimePublicPath) return id;
}
},
load: {
filter: { id: exactRegex(runtimePublicPath) },
handler(id) {
if (id === runtimePublicPath) return readFileSync(refreshRuntimePath, "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react");
}
},
transformIndexHtml(_, config) {
if (!skipFastRefresh) return [{
tag: "script",
attrs: { type: "module" },
children: getPreambleCode(config.server.config.base)
}];
}
};
return [viteBabel, viteReactRefresh];
}
viteReact.preambleCode = preambleCode;
function canSkipBabel(plugins, babelOptions) {
return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
}
const loadedPlugin = /* @__PURE__ */ new Map();
function loadPlugin(path) {
const cached = loadedPlugin.get(path);
if (cached) return cached;
const promise = import(path).then((module) => {
const value = module.default || module;
loadedPlugin.set(path, value);
return value;
});
loadedPlugin.set(path, promise);
return promise;
}
function createBabelOptions(rawOptions) {
var _babelOptions$parserO;
const babelOptions = {
babelrc: false,
configFile: false,
...rawOptions
};
babelOptions.plugins || (babelOptions.plugins = []);
babelOptions.presets || (babelOptions.presets = []);
babelOptions.overrides || (babelOptions.overrides = []);
babelOptions.parserOpts || (babelOptions.parserOpts = {});
(_babelOptions$parserO = babelOptions.parserOpts).plugins || (_babelOptions$parserO.plugins = []);
return babelOptions;
}
function defined(value) {
return value !== void 0;
}
function getReactCompilerPlugin(plugins) {
return plugins.find((p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler");
}
function getReactCompilerRuntimeModule(plugin) {
let moduleName = "react/compiler-runtime";
if (Array.isArray(plugin)) {
var _plugin$, _plugin$2, _plugin$3;
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";
else if (typeof ((_plugin$3 = plugin[1]) === null || _plugin$3 === void 0 ? void 0 : _plugin$3.runtimeModule) === "string") {
var _plugin$4;
moduleName = (_plugin$4 = plugin[1]) === null || _plugin$4 === void 0 ? void 0 : _plugin$4.runtimeModule;
}
}
return moduleName;
}
function ensureArray(value) {
return Array.isArray(value) ? value : [value];
}
//#endregion
export { viteReact as default };
File diff suppressed because it is too large Load Diff
+70
View File
@@ -0,0 +1,70 @@
{
"name": "@vitejs/plugin-react",
"version": "4.7.0",
"license": "MIT",
"author": "Evan You",
"description": "The default Vite plugin for React projects",
"keywords": [
"vite",
"vite-plugin",
"react",
"babel",
"react-refresh",
"fast refresh"
],
"contributors": [
"Alec Larson",
"Arnaud Barré"
],
"files": [
"dist"
],
"type": "module",
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
}
},
"scripts": {
"dev": "tsdown --watch",
"build": "tsdown",
"prepublishOnly": "npm run build",
"test-unit": "vitest run"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vitejs/vite-plugin-react.git",
"directory": "packages/plugin-react"
},
"bugs": {
"url": "https://github.com/vitejs/vite-plugin-react/issues"
},
"homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
"dependencies": {
"@babel/core": "^7.28.0",
"@babel/plugin-transform-react-jsx-self": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@rolldown/pluginutils": "1.0.0-beta.27",
"@types/babel__core": "^7.20.5",
"react-refresh": "^0.17.0"
},
"peerDependencies": {
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
},
"devDependencies": {
"@vitejs/react-common": "workspace:*",
"babel-plugin-react-compiler": "19.1.0-rc.2",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"rolldown": "1.0.0-beta.27",
"tsdown": "^0.12.9",
"vitest": "^3.2.4"
}
}