@empjs/plugin-react 3.0.0-beta.30

package/README.md

@@ -0,0 +1,16 @@
+# @empjs/plugin-react
+## 安装 
+```
+pnpm add @empjs/plugin-react -D
+```
+## 使用 
+```js
+import pluginReact from '@empjs/plugin-react'
+import {defineConfig} from '@empjs/cli'
+export default defineConfig(({mode, env}) => {
+  return {
+    plugins: [pluginReact()],
+  }
+})
+
+```

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import type { GlobalStore } from '@empjs/cli';
+export type PluginReactType = {
+    /**
+     * 是否启动 热更 默认为 true
+     */
+    hmr?: boolean;
+    /**
+     * 是否启动 Svg React Component
+     * @default ?react
+     */
+    svgrQuery?: string;
+    /**
+     * React Runtime 手动切换jsx模式
+     * 当 external react时需要设置
+     * 本地安装时会自动判断 不需要设置
+     * @default undefined
+     */
+    reactRuntime?: string;
+};
+declare const _default: (o: PluginReactType) => {
+    name: string;
+    rsConfig(store: GlobalStore): Promise<void>;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,87 @@
+//
+export default (o) => {
+    return {
+        name: '@empjs/plugin-react',
+        async rsConfig(store) {
+            const { chain, deepAssign } = store;
+            o = deepAssign({ hmr: true, svgrQuery: 'react' }, o);
+            //
+            const reactVersion = store.pkg.dependencies.react || store.pkg.devDependencies.react;
+            if (!reactVersion) {
+                throw new Error('React must be installed!');
+            }
+            //
+            function getReactRuntime() {
+                if (!reactVersion)
+                    return o.reactRuntime;
+                return o.reactRuntime ? o.reactRuntime : store.vCompare(reactVersion, '17') > -1 ? 'automatic' : 'classic';
+            }
+            const reactRuntime = getReactRuntime();
+            /** ======================
+             * swc transform 配置
+             * =======================
+             */
+            const transform = {
+                react: {
+                    runtime: reactRuntime,
+                    development: store.isDev,
+                    refresh: store.isDev,
+                },
+            };
+            const resetTransform = (op) => {
+                op.jsc.transform = deepAssign(op.jsc.transform, transform);
+                return op;
+            };
+            //
+            chain.module.rule('javascript').use('swc').tap(resetTransform);
+            chain.module.rule('typescript').use('swc').tap(resetTransform);
+            /** ======================
+             * swc hmr 配置
+             * =======================
+             */
+            if (store.isDev && o.hmr) {
+                const { default: ReactRefresh } = await import('@rspack/plugin-react-refresh');
+                const op = {
+                // overlay: false,
+                };
+                if (store.empConfig.empShareLib.config.name) {
+                    op.library = store.empConfig.empShareLib.config.name;
+                }
+                store.chain.plugin('plugin-react-refresh').use(ReactRefresh, [op]);
+            }
+            /** ======================
+             * swc svgr 配置
+             * =======================
+             */
+            chain.module.rule('svg').delete('type');
+            //
+            const exp = new RegExp(`${o.svgrQuery}`);
+            store.chain.merge({
+                module: {
+                    rule: {
+                        svg: {
+                            test: /\.svg$/,
+                            oneOf: [
+                                {
+                                    issuer: /\.[jt]sx?$/,
+                                    resourceQuery: exp,
+                                    use: [
+                                        {
+                                            loader: store.importResolve('@svgr/webpack'),
+                                            options: {},
+                                        },
+                                    ],
+                                },
+                                {
+                                    resourceQuery: { not: [exp] },
+                                    type: 'asset/resource',
+                                },
+                            ],
+                        },
+                    },
+                },
+            });
+            //
+        },
+    };
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@empjs/plugin-react",
+  "version": "3.0.0-beta.30",
+  "description": "emp react plugin",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "maintainers": [
+    "xuhongbin",
+    "ckken"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/empjs/emp.git",
+    "directory": "packages/plugin-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue2"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "dev": "rimraf dist && pnpm run /^dev:.*/",
+    "dev:tsc": "tsc -w",
+    "dev:tsc-alias": "tsc-alias -w",
+    "build": "rimraf dist && pnpm run /^build:.*/",
+    "build:ts": "tsc && tsc-alias"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "author": "Ken",
+  "devDependencies": {
+    "@empjs/cli": "workspace:*",
+    "@types/react": "^18.2.30",
+    "rimraf": "^5.0.5",
+    "tsc-alias": "^1.8.8"
+  },
+  "dependencies": {
+    "react-refresh": "^0.14.0",
+    "@rspack/plugin-react-refresh": "0.5.9"
+  }
+}