From eebb022ef7342d8ba21c8410e197fdbea76ac94e Mon Sep 17 00:00:00 2001 From: Hare Prananda Date: Sun, 30 Jul 2023 16:23:01 +0800 Subject: [PATCH 1/4] fix class component unable to hot reload --- packages/plugin-react/package.json | 4 ++-- packages/plugin-react/src/index.ts | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json index c3ddeb9..8af055c 100644 --- a/packages/plugin-react/package.json +++ b/packages/plugin-react/package.json @@ -1,6 +1,6 @@ { - "name": "@vitejs/plugin-react", - "version": "4.0.3", + "name": "@hareprnd/vite-plugin-react", + "version": "0.1.0", "license": "MIT", "author": "Evan You", "contributors": [ diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index 82901d7..09a6f89 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -211,6 +211,11 @@ export default function viteReact(opts: Options = {}): PluginOption[] { parserPlugins.push('typescript') } + // eslint-disable-next-line regexp/no-unused-capturing-group + if (/(ts|js)x$/.test(id) && !isProduction) { + code = `const Vite____ = () => {};` + code + } + const result = await babel.transformAsync(code, { ...babelOptions, root: projectRoot, From 7aebc03bd0efa46e2e86ed2383a05b508fdacd1b Mon Sep 17 00:00:00 2001 From: Hare Prananda Date: Sun, 30 Jul 2023 17:30:34 +0800 Subject: [PATCH 2/4] remove changelog steps on publish --- .github/workflows/publish.yml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index a420a1b..0d06a98 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -32,7 +32,3 @@ jobs: run: pnpm run ci-publish ${{ github.ref_name }} env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - - - uses: ArnaudBarre/github-release@v1 - with: - path: packages/plugin-react/CHANGELOG.md From 87362b4ac61c7df8c3a7150fbdc8d71eed1cd331 Mon Sep 17 00:00:00 2001 From: Hare Prananda Date: Sun, 30 Jul 2023 17:33:49 +0800 Subject: [PATCH 3/4] release: plugin-react@0.1.0 --- packages/plugin-react/README.md | 125 ++------------------------------ 1 file changed, 5 insertions(+), 120 deletions(-) diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md index 4c66419..6774c59 100644 --- a/packages/plugin-react/README.md +++ b/packages/plugin-react/README.md @@ -1,128 +1,13 @@ -# @vitejs/plugin-react [![npm](https://img.shields.io/npm/v/@vitejs/plugin-react.svg)](https://npmjs.com/package/@vitejs/plugin-react) +# Vite Plugin React Class HMR Fix -The default Vite plugin for React projects. +Forked from https://github.com/vitejs/vite-plugin-react -- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development -- 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'], - }, - }, -}) +npm install @hareprnd/vite-plugin-react ``` -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). - -## Middleware mode - -In [middleware mode](https://vitejs.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: +or ``` -Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. +yarn add @hareprnd/vite-plugin-react ``` - -## 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). From 4487796bfc4f555b3d48adb7f0d12a438326915c Mon Sep 17 00:00:00 2001 From: Hare Prananda Date: Sun, 30 Jul 2023 19:44:26 +0800 Subject: [PATCH 4/4] release: plugin-react@0.1.1 --- packages/plugin-react/README.md | 12 ++++++++++++ packages/plugin-react/package.json | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md index 6774c59..7c89f8b 100644 --- a/packages/plugin-react/README.md +++ b/packages/plugin-react/README.md @@ -11,3 +11,15 @@ or ``` yarn add @hareprnd/vite-plugin-react ``` + +## Usage + +This package usage direction is just the same as the forked source in https://www.npmjs.com/package/@vitejs/plugin-react , the only different thing is: + +``` +// import react from '@vitejs/plugin-react' + +// change the code above to: + +import react from '@hareprnd/vite-plugin-react' +``` diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json index 8af055c..9096977 100644 --- a/packages/plugin-react/package.json +++ b/packages/plugin-react/package.json @@ -1,6 +1,6 @@ { "name": "@hareprnd/vite-plugin-react", - "version": "0.1.0", + "version": "0.1.1", "license": "MIT", "author": "Evan You", "contributors": [