@tarojs/plugin-framework-react 3.8.0-canary.0 → 4.0.0-alpha.2

package/dist/index.js

@@ -10,25 +10,137 @@ var walk = require('acorn-walk');
 var path = require('node:path');
 
 function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
 var acorn__namespace = /*#__PURE__*/_interopNamespaceDefault(acorn);
 var walk__namespace = /*#__PURE__*/_interopNamespaceDefault(walk);
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function apiLoader (str) {
+    return `import {
+  useAddToFavorites,
+  useDidHide,
+  useDidShow,
+  useError,
+  useLaunch,
+  useLoad,
+  useOptionMenuClick,
+  usePageNotFound,
+  usePageScroll,
+  usePullDownRefresh,
+  usePullIntercept,
+  useReachBottom,
+  useReady,
+  useResize,
+  useRouter,
+  useSaveExitState,
+  useShareAppMessage,
+  useShareTimeline,
+  useTabItemTap,
+  useTitleClick,
+  useScope,
+  useUnhandledRejection,
+  useUnload
+} from '@tarojs/plugin-framework-react/dist/runtime'
+${str}
+
+taro.useAddToFavorites = useAddToFavorites
+taro.useDidHide = useDidHide
+taro.useDidShow = useDidShow
+taro.useError = useError
+taro.useLaunch = useLaunch
+taro.useLoad = useLoad
+taro.useOptionMenuClick = useOptionMenuClick
+taro.usePageNotFound = usePageNotFound
+taro.usePageScroll = usePageScroll
+taro.usePullDownRefresh = usePullDownRefresh
+taro.usePullIntercept = usePullIntercept
+taro.useReachBottom = useReachBottom
+taro.useReady = useReady
+taro.useResize = useResize
+taro.useRouter = useRouter
+taro.useSaveExitState = useSaveExitState
+taro.useShareAppMessage = useShareAppMessage
+taro.useShareTimeline = useShareTimeline
+taro.useTabItemTap = useTabItemTap
+taro.useTitleClick = useTitleClick
+taro.useScope = useScope
+taro.useUnhandledRejection = useUnhandledRejection
+taro.useUnload = useUnload
+
+export {
+  useAddToFavorites,
+  useDidHide,
+  useDidShow,
+  useError,
+  useLaunch,
+  useLoad,
+  useOptionMenuClick,
+  usePageNotFound,
+  usePageScroll,
+  usePullDownRefresh,
+  usePullIntercept,
+  useReachBottom,
+  useReady,
+  useResize,
+  useRouter,
+  useSaveExitState,
+  useShareAppMessage,
+  useShareTimeline,
+  useTabItemTap,
+  useTitleClick,
+  useScope,
+  useUnhandledRejection,
+  useUnload
+}
+`;
+}
+
 function addConfig(source) {
     const configsMap = {
         enableShareAppMessage: ['onShareAppMessage', 'useShareAppMessage'],
@@ -86,9 +198,9 @@ import Nerv from 'nervjs';
 `,
     mockAppStatement: `
 class App extends Nerv.Component {
-render () {
-  return this.props.children
-}
+  render () {
+    return this.props.children
+  }
 }
 `,
     frameworkArgs: 'Nerv, Nerv, config',
@@ -120,7 +232,7 @@ class App extends React.Component {
     if (framework === 'nerv') {
         Object.assign(loaderMeta, nervMeta);
     }
-    if (shared.isWebPlatform()) {
+    if (process.env.TARO_PLATFORM === 'web') {
         if (framework === 'react') {
             const react = require('react');
             const majorVersion = Number((react.version || '18').split('.')[0]);
@@ -135,39 +247,277 @@ class App extends React.Component {
     return loaderMeta;
 }
 
+function h5iVitePlugin(ctx, framework) {
+    return [
+        injectLoaderMeta$2(ctx, framework),
+        setTaroApi(),
+        esbuildExclude(framework)
+    ];
+}
+function injectLoaderMeta$2(ctx, framework) {
+    function customizer(object = '', sources = '') {
+        if ([object, sources].every(e => typeof e === 'string'))
+            return object + sources;
+    }
+    const { runnerUtils } = ctx;
+    const { getViteH5CompilerContext } = runnerUtils;
+    return {
+        name: 'taro-react:loader-meta',
+        buildStart() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const viteCompilerContext = yield getViteH5CompilerContext(this);
+                if (viteCompilerContext) {
+                    viteCompilerContext.loaderMeta = lodash.mergeWith(getLoaderMeta(framework), viteCompilerContext.loaderMeta, customizer);
+                }
+            });
+        }
+    };
+}
+function setTaroApi() {
+    // dev 环境通过 esbuild 来做； pro 环境通过 rollup load 钩子来做；因为生产环境不会走 esbuild
+    return {
+        name: 'taro-react:process-import-taro',
+        enforce: 'pre',
+        config: () => ({
+            optimizeDeps: {
+                esbuildOptions: {
+                    plugins: [
+                        {
+                            name: 'taro:react-api',
+                            setup(build) {
+                                build.onLoad({ filter: helper.REG_TARO_H5_RUNTIME_API }, (args) => __awaiter(this, void 0, void 0, function* () {
+                                    const input = yield helper.fs.readFile(args.path, 'utf8');
+                                    return {
+                                        contents: apiLoader(input + '\n' + 'const taro = Taro__default\n')
+                                    };
+                                }));
+                            },
+                        }
+                    ]
+                }
+            },
+        }),
+        load(id) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (process.env.NODE_ENV === 'production' && helper.REG_TARO_H5_RUNTIME_API.test(id)) {
+                    try {
+                        const input = yield helper.fs.readFile(id, 'utf8');
+                        return apiLoader(input + '\n' + 'const taro = Taro__default\n');
+                    }
+                    catch (_) {
+                        return null;
+                    }
+                }
+            });
+        }
+    };
+}
+// todo 后面看看能否把 preact 改为虚拟模块
+function esbuildExclude(framework) {
+    if (framework !== 'preact')
+        return null;
+    return {
+        name: 'taro-react:esvuild-exclude',
+        enforce: 'pre',
+        config: () => ({
+            optimizeDeps: {
+                exclude: ['react', 'preact']
+            }
+        })
+    };
+}
+
+function harmonyVitePlugin(ctx, framework) {
+    return [
+        injectLoaderMeta$1(ctx, framework),
+        aliasPlugin$1(ctx, framework),
+    ];
+}
+function injectLoaderMeta$1(ctx, framework) {
+    return {
+        name: 'taro-react:loader-meta',
+        buildStart() {
+            const { runnerUtils } = ctx;
+            const { getViteHarmonyCompilerContext } = runnerUtils;
+            const viteCompilerContext = getViteHarmonyCompilerContext(this);
+            if (viteCompilerContext) {
+                viteCompilerContext.loaderMeta = getLoaderMeta(framework);
+            }
+        }
+    };
+}
+function aliasPlugin$1(ctx, framework) {
+    if (framework === 'react') {
+        return {
+            name: 'taro-react:alias',
+            config(config) {
+                var _a;
+                const alias = [
+                    { find: /react-dom$/, replacement: '@tarojs/react' }
+                ];
+                const isProd = config.mode === 'production';
+                // TODO：harmony 目前会导致部分包用 production 版本，部分用 development 版本，导致许多 api 报错
+                const isHarmony = ctx.runOpts.options.platform === 'harmony';
+                if (!isProd && ((_a = ctx.initialConfig.harmony) === null || _a === void 0 ? void 0 : _a.debugReact) !== true && !isHarmony) {
+                    // 不是生产环境，且没有设置 debugReact，则使用压缩版本的 react 依赖，减少体积
+                    alias.push({ find: /react-reconciler$/, replacement: 'react-reconciler/cjs/react-reconciler.production.min.js' });
+                    alias.push({ find: /react$/, replacement: 'react/cjs/react.production.min.js' });
+                    alias.push({ find: /scheduler$/, replacement: 'scheduler/cjs/scheduler.production.min.js' });
+                    alias.push({ find: /react\/jsx-runtime$/, replacement: 'react/cjs/react-jsx-runtime.production.min.js' });
+                    // 在React18中，使用了exports字段约定了模块暴露路径，其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
+                    // Why writeJson？ prebundle will load package.json via readFile to check exports property.
+                    const reactPkgPath = require.resolve('react/package.json', { paths: [process.cwd()] });
+                    if (reactPkgPath) {
+                        const reactPkg = require('react/package.json');
+                        const reactVersion = (reactPkg.version || '');
+                        if ((/^[~^]?18/).test(reactVersion) && reactPkg.exports) {
+                            reactPkg.exports = Object.assign(reactPkg.exports, {
+                                './cjs/': './cjs/'
+                            });
+                            helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
+                        }
+                    }
+                }
+                return {
+                    resolve: {
+                        alias
+                    }
+                };
+            }
+        };
+    }
+    return [];
+}
+
+function miniVitePlugin(ctx, framework) {
+    return [
+        injectLoaderMeta(ctx, framework),
+        aliasPlugin(ctx, framework),
+    ];
+}
+function injectLoaderMeta(ctx, framework) {
+    return {
+        name: 'taro-react:loader-meta',
+        buildStart() {
+            const { runnerUtils } = ctx;
+            const { getViteMiniCompilerContext } = runnerUtils;
+            const viteCompilerContext = getViteMiniCompilerContext(this);
+            if (viteCompilerContext) {
+                viteCompilerContext.loaderMeta = getLoaderMeta(framework);
+            }
+        }
+    };
+}
+function aliasPlugin(ctx, framework) {
+    if (framework === 'react') {
+        return {
+            name: 'taro-react:alias',
+            config(config) {
+                var _a;
+                const alias = [
+                    { find: /react-dom$/, replacement: '@tarojs/react' }
+                ];
+                const isProd = config.mode === 'production';
+                // TODO：harmony 目前会导致部分包用 production 版本，部分用 development 版本，导致许多 api 报错
+                const isHarmony = ctx.runOpts.options.platform === 'harmony';
+                if (!isProd && ((_a = ctx.initialConfig.mini) === null || _a === void 0 ? void 0 : _a.debugReact) !== true && !isHarmony) {
+                    // 不是生产环境，且没有设置 debugReact，则使用压缩版本的 react 依赖，减少体积
+                    alias.push({ find: /react-reconciler$/, replacement: 'react-reconciler/cjs/react-reconciler.production.min.js' });
+                    alias.push({ find: /^(?!.*mobx-react$).*react$/, replacement: 'react/cjs/react.production.min.js' });
+                    alias.push({ find: /scheduler$/, replacement: 'scheduler/cjs/scheduler.production.min.js' });
+                    alias.push({ find: /react\/jsx-runtime$/, replacement: 'react/cjs/react-jsx-runtime.production.min.js' });
+                    // 在React18中，使用了exports字段约定了模块暴露路径，其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
+                    // Why writeJson？ prebundle will load package.json via readFile to check exports property.
+                    const reactPkgPath = require.resolve('react/package.json', { paths: [process.cwd()] });
+                    if (reactPkgPath) {
+                        const reactPkg = require('react/package.json');
+                        const reactVersion = (reactPkg.version || '');
+                        if ((/^[~^]?18/).test(reactVersion) && reactPkg.exports) {
+                            reactPkg.exports = Object.assign(reactPkg.exports, {
+                                './cjs/': './cjs/'
+                            });
+                            helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
+                        }
+                    }
+                }
+                return {
+                    resolve: {
+                        alias
+                    }
+                };
+            }
+        };
+    }
+    return [];
+}
+
 function modifyH5WebpackChain(ctx, framework, chain) {
     var _a;
-    setLoader$1(framework, chain);
+    setLoader$2(framework, chain);
     setPlugin(ctx, framework, chain);
     const { isBuildNativeComp = false } = ((_a = ctx.runOpts) === null || _a === void 0 ? void 0 : _a.options) || {};
     const externals = {};
     if (isBuildNativeComp) {
         // Note: 该模式不支持 prebundle 优化，不必再处理
-        externals.react = 'React';
-        externals['react-dom'] = 'ReactDOM';
+        externals.react = {
+            commonjs: 'react',
+            commonjs2: 'react',
+            amd: 'react',
+            root: 'React'
+        };
+        externals['react-dom'] = {
+            commonjs: 'react-dom',
+            commonjs2: 'react-dom',
+            amd: 'react-dom',
+            root: 'ReactDOM'
+        };
         if (framework === 'preact') {
             externals.preact = 'preact';
         }
+        chain.merge({
+            externalsType: 'umd'
+        });
     }
     chain.merge({
         externals,
         module: {
             rule: {
-                'process-import-taro': {
-                    test: /taro-h5[\\/]dist[\\/]api[\\/]taro/,
+                'process-import-taro-h5': {
+                    test: helper.REG_TARO_H5,
+                    loader: require.resolve('./api-loader'),
+                },
+            },
+        },
+    });
+    chain.merge({
+        externals,
+        module: {
+            rule: {
+                'process-import-taro-harmony-hybrid': {
+                    test: /taro-platform-harmony-hybrid[\\/]dist[\\/]api[\\/]apis[\\/]taro/,
+                    loader: require.resolve('./api-loader')
+                }
+            }
+        },
+    });
+    chain.merge({
+        externals,
+        module: {
+            rule: {
+                'process-import-taro-harmony-hybrid': {
+                    test: /taro-platform-harmony-hybrid[\\/]dist[\\/]api[\\/]apis[\\/]taro/,
                     loader: require.resolve('./api-loader')
                 }
             }
         },
     });
 }
-function setLoader$1(framework, chain) {
+function setLoader$2(framework, chain) {
     function customizer(object = '', sources = '') {
-        if ([object, sources].every(e => typeof e === 'string'))
+        if ([object, sources].every((e) => typeof e === 'string'))
             return object + sources;
     }
-    chain.plugin('mainPlugin')
-        .tap(args => {
+    chain.plugin('mainPlugin').tap((args) => {
         args[0].loaderMeta = lodash.mergeWith(getLoaderMeta(framework), args[0].loaderMeta, customizer);
         return args;
     });
@@ -180,20 +530,58 @@ function setPlugin(ctx, framework, chain) {
     if (!isProd && ((_b = (_a = config.h5) === null || _a === void 0 ? void 0 : _a.devServer) === null || _b === void 0 ? void 0 : _b.hot) !== false) {
         // 默认开启 fast-refresh
         if (framework === 'react') {
-            chain
-                .plugin('fastRefreshPlugin')
-                .use(require('@pmmmwh/react-refresh-webpack-plugin'));
+            chain.plugin('fastRefreshPlugin').use(require('@pmmmwh/react-refresh-webpack-plugin'));
         }
         else if (framework === 'preact') {
-            chain
-                .plugin('hotModuleReplacementPlugin')
-                .use(require('webpack').HotModuleReplacementPlugin);
-            chain
-                .plugin('fastRefreshPlugin')
-                .use(require('@prefresh/webpack'));
+            chain.plugin('hotModuleReplacementPlugin').use(require('webpack').HotModuleReplacementPlugin);
+            chain.plugin('fastRefreshPlugin').use(require('@prefresh/webpack'));
+        }
+    }
+}
+
+function modifyHarmonyWebpackChain(ctx, framework, chain) {
+    setAlias$2(ctx, framework, chain);
+    setLoader$1(framework, chain);
+}
+function setAlias$2(ctx, framework, chain) {
+    var _a;
+    const config = ctx.initialConfig;
+    const alias = chain.resolve.alias;
+    if (framework === 'react') {
+        alias.set('react-dom$', '@tarojs/react');
+        alias.set('react-dom/client$', '@tarojs/react');
+        const webpackConfig = chain.toConfig();
+        const isProd = webpackConfig.mode === 'production';
+        if (!isProd && ((_a = config.harmony) === null || _a === void 0 ? void 0 : _a.debugReact) !== true) {
+            // 不是生产环境，且没有设置 debugReact，则使用压缩版本的 react 依赖，减少体积
+            // 兼容pnpm workspace
+            const reactModulePath = require.resolve('react', { paths: [process.cwd()] });
+            const newFilePath = path.join(path.dirname(reactModulePath), 'cjs', 'react.production.min.js');
+            alias.set('react-reconciler$', 'react-reconciler/cjs/react-reconciler.production.min.js');
+            alias.set('react$', newFilePath);
+            alias.set('react/jsx-runtime$', 'react/cjs/react-jsx-runtime.production.min.js');
+            // 在React18中，使用了exports字段约定了模块暴露路径，其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
+            // Why writeJson？ prebundle will load package.json via readFile to check exports property.
+            const reactPkgPath = require.resolve('react/package.json', { paths: [process.cwd()] });
+            if (reactPkgPath) {
+                const reactPkg = require('react/package.json');
+                const reactVersion = reactPkg.version || '';
+                if (/^[~^]?18/.test(reactVersion) && reactPkg.exports) {
+                    reactPkg.exports = Object.assign(reactPkg.exports, {
+                        './cjs/': './cjs/',
+                    });
+                    helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
+                }
+            }
         }
     }
 }
+function setLoader$1(framework, chain) {
+    chain.plugin('mainPlugin').tap((args) => {
+        args[0].loaderMeta = getLoaderMeta(framework);
+        return args;
+    });
+}
 
 function modifyMiniWebpackChain(ctx, framework, chain) {
     setAlias$1(ctx, framework, chain);
@@ -205,6 +593,7 @@ function setAlias$1(ctx, framework, chain) {
     const alias = chain.resolve.alias;
     if (framework === 'react') {
         alias.set('react-dom$', '@tarojs/react');
+        alias.set('react-dom/client$', '@tarojs/react');
         const webpackConfig = chain.toConfig();
         const isProd = webpackConfig.mode === 'production';
         if (!isProd && ((_a = config.mini) === null || _a === void 0 ? void 0 : _a.debugReact) !== true) {
@@ -213,7 +602,7 @@ function setAlias$1(ctx, framework, chain) {
             const reactModulePath = require.resolve('react', { paths: [process.cwd()] });
             const newFilePath = path.join(path.dirname(reactModulePath), 'cjs', 'react.production.min.js');
             alias.set('react-reconciler$', 'react-reconciler/cjs/react-reconciler.production.min.js');
-            alias.set('react$', newFilePath);
+            alias.set(/^(?!.*mobx-react$).*react$/, newFilePath);
             alias.set('react/jsx-runtime$', 'react/cjs/react-jsx-runtime.production.min.js');
             // 在React18中，使用了exports字段约定了模块暴露路径，其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
             // Why writeJson？ prebundle will load package.json via readFile to check exports property.
@@ -238,24 +627,29 @@ function setLoader(framework, chain) {
     });
 }
 
+function isReactLike(framework = 'react') {
+    return ['react', 'preact', 'nerv', 'solid'].includes(framework);
+}
 var index = (ctx) => {
-    const { framework } = ctx.initialConfig;
-    if (framework !== 'react' && framework !== 'nerv' && framework !== 'preact')
+    const { framework = 'react' } = ctx.initialConfig;
+    if (!isReactLike(framework))
         return;
     ctx.modifyWebpackChain(({ chain }) => {
         // 通用
         setAlias(framework, chain);
-        chain
-            .plugin('definePlugin')
-            .tap(args => {
+        chain.plugin('definePlugin').tap((args) => {
             const config = args[0];
             config.__TARO_FRAMEWORK__ = `"${framework}"`;
             return args;
         });
-        if (shared.isWebPlatform()) {
+        if (process.env.TARO_PLATFORM === 'web') {
             // H5
             modifyH5WebpackChain(ctx, framework, chain);
         }
+        else if (process.env.TARO_PLATFORM === 'harmony' || process.env.TARO_ENV === 'harmony') {
+            // 鸿蒙
+            modifyHarmonyWebpackChain(ctx, framework, chain);
+        }
         else {
             // 小程序
             modifyMiniWebpackChain(ctx, framework, chain);
@@ -266,18 +660,13 @@ var index = (ctx) => {
             return;
         if (shared.isString(opts.compiler)) {
             opts.compiler = {
-                type: opts.compiler
+                type: opts.compiler,
             };
         }
         const { compiler } = opts;
         if (compiler.type === 'webpack5') {
             // 提供给 webpack5 依赖预编译收集器的第三方依赖
-            const deps = [
-                'react',
-                'react-dom',
-                'react/jsx-runtime',
-                '@tarojs/plugin-framework-react/dist/runtime'
-            ];
+            const deps = ['react', 'react-dom', 'react/jsx-runtime', '@tarojs/plugin-framework-react/dist/runtime'];
             compiler.prebundle || (compiler.prebundle = {});
             const prebundleOptions = compiler.prebundle;
             prebundleOptions.include || (prebundleOptions.include = []);
@@ -289,19 +678,42 @@ var index = (ctx) => {
             const taroReactPlugin = {
                 name: 'taroReactPlugin',
                 setup(build) {
-                    build.onLoad({ filter: /taro-h5[\\/]dist[\\/]api[\\/]taro/ }, ({ path }) => {
+                    build.onLoad({ filter: helper.REG_TARO_H5 }, ({ path }) => {
+                        const content = helper.fs.readFileSync(path).toString();
+                        return {
+                            contents: require('./api-loader')(content),
+                        };
+                    });
+                    build.onLoad({ filter: /taro-platform-harmony-hybrid[\\/]dist[\\/]api[\\/]apis[\\/]taro/ }, ({ path }) => {
                         const content = helper.fs.readFileSync(path).toString();
                         return {
                             contents: require('./api-loader')(content)
                         };
                     });
-                }
+                },
             };
             prebundleOptions.esbuild || (prebundleOptions.esbuild = {});
             const esbuildConfig = prebundleOptions.esbuild;
             esbuildConfig.plugins || (esbuildConfig.plugins = []);
             esbuildConfig.plugins.push(taroReactPlugin);
         }
+        else if (compiler.type === 'vite') {
+            compiler.vitePlugins || (compiler.vitePlugins = []);
+            compiler.vitePlugins.push(viteCommonPlugin(framework));
+            compiler.vitePlugins.push(VitePresetPlugin(framework));
+            if (process.env.TARO_PLATFORM === 'web') {
+                // H5
+                compiler.vitePlugins.push(h5iVitePlugin(ctx, framework));
+            }
+            else if (process.env.TARO_PLATFORM === 'harmony' || process.env.TARO_ENV === 'harmony') {
+                // 鸿蒙
+                compiler.vitePlugins.push(harmonyVitePlugin(ctx, framework));
+            }
+            else {
+                // 小程序
+                compiler.vitePlugins.push(miniVitePlugin(ctx, framework));
+            }
+        }
     });
 };
 function setAlias(framework, chain) {
@@ -319,6 +731,56 @@ function setAlias(framework, chain) {
             break;
     }
 }
+function VitePresetPlugin(framework) {
+    return framework === 'preact'
+        ? require('@preact/preset-vite').preact({
+            babel: {
+                plugins: [
+                    ['@babel/plugin-proposal-decorators', { legacy: true }],
+                    ['@babel/plugin-proposal-class-properties', { loose: true }],
+                ],
+            },
+        })
+        : require('@vitejs/plugin-react').default({
+            babel: {
+                plugins: [
+                    ['@babel/plugin-proposal-decorators', { legacy: true }],
+                    ['@babel/plugin-proposal-class-properties', { loose: true }],
+                ],
+            },
+        });
+}
+function viteCommonPlugin(framework) {
+    return {
+        name: 'taro-react:common',
+        config() {
+            const alias = framework === 'preact'
+                ? [
+                    { find: 'react', replacement: 'preact/compat' },
+                    { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+                    { find: 'react-dom', replacement: 'preact/compat' },
+                    { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
+                ]
+                : [];
+            return {
+                optimizeDeps: {
+                    esbuildOptions: {
+                        define: {
+                            __TARO_FRAMEWORK__: `"${framework}"`
+                        }
+                    }
+                },
+                define: {
+                    __TARO_FRAMEWORK__: `"${framework}"`,
+                },
+                resolve: {
+                    alias,
+                },
+            };
+        },
+    };
+}
 
 exports.default = index;
+exports.isReactLike = isReactLike;
 //# sourceMappingURL=index.js.map