├── .gitignore
├── .indo.json
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── demo
├── index.html
├── package.json
├── packages
│ ├── react-one
│ │ ├── index.d.ts
│ │ ├── index.jsx
│ │ └── package.json
│ └── react-two
│ │ ├── index.tsx
│ │ ├── package.json
│ │ └── tsconfig.json
├── pnpm-lock.yaml
├── src
│ ├── Root.tsx
│ ├── deps.tsx
│ ├── main.tsx
│ └── styles.css
├── tsconfig.json
└── vite.config.ts
├── package.json
├── pnpm-lock.yaml
├── src
├── babel.d.ts
├── babelRestoreJsx.ts
└── plugin.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | vendor
3 | dist
4 |
--------------------------------------------------------------------------------
/.indo.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "[markdown]": {
3 | "editor.wordWrap": "on",
4 | "editor.quickSuggestions": false,
5 | "editor.formatOnSave": false
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Alec Larson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### ⚠️ Deprecated: Use [`@vitejs/plugin-react`](https://www.npmjs.com/package/@vitejs/plugin-react) instead.
2 |
3 | # vite-react-jsx
4 |
5 | [](https://www.npmjs.com/package/vite-react-jsx)
6 | [](https://github.com/prettier/prettier)
7 | [](https://paypal.me/alecdotbiz)
8 |
9 | > React 17's automatic JSX runtime for your entire bundle
10 |
11 |
12 |
13 | ### Features
14 |
15 | - Replaces `React.createElement` calls in your **entire** bundle (even for **pre-minified**, compiled React components from `node_modules`) with [the automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17
16 | - Injects `import React` statements in server mode, but not for modules where React is already imported
17 | - Deduplicates `react` and `react-dom` imports by setting `resolve.dedupe` for you
18 |
19 |
20 |
21 | ### FAQ
22 |
23 | - **What are the benefits of using the new JSX runtime?**
24 | 1) You don't need to `import React` manually anymore.
25 | 2) Better performance now and in the future. The [Motivations](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation) section in the RFC explains the specifics of performance issues with `React.createElement`.
26 | 3) In the future, you won't need `React.forwardRef` anymore.
27 | 4) Depending on your setup, slightly smaller bundle sizes (according to the React team).
28 | 5) Faster parsing of JavaScript by web browser (`.createElement` cannot be minified).
29 |
30 | - **How much does this affect Vite's performance?**
31 | In serve mode, the performance effects are unnoticeable, since Babel is only used when bundling.
32 | Otherwise, you'll see ~40% longer build times in the `./demo` folder, but this % largely depends on how many kB of JavaScript need to be parsed and transformed by Babel.
33 |
34 | - **Do I need React 17+ to use the new JSX runtime?**
35 | No. Support for the new runtime was backported to React 16.14.0, React 15.7.0, and React 0.14.10.
36 |
37 |
38 |
39 | ### Usage
40 |
41 | ```ts
42 | import reactJsx from 'vite-react-jsx'
43 |
44 | export default {
45 | plugins: [
46 | reactJsx(),
47 | ]
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "vite build",
7 | "test": "sirv dist"
8 | },
9 | "dependencies": {
10 | "react": "17.0.2",
11 | "react-dom": "17.0.2",
12 | "react-dropzone": "11.3.2",
13 | "react-one": "link:./packages/react-one",
14 | "react-switch": "6.0.0",
15 | "react-two": "link:./packages/react-two"
16 | },
17 | "devDependencies": {
18 | "@types/react": "17.0.6",
19 | "@types/react-dom": "17.0.5",
20 | "@vitejs/plugin-react-refresh": "^1.3.3",
21 | "sirv-cli": "^1.0.8",
22 | "vite": "link:../node_modules/vite",
23 | "vite-react-jsx": "link:.."
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/demo/packages/react-one/index.d.ts:
--------------------------------------------------------------------------------
1 | declare const One: () => JSX.Element
2 | export default One
3 |
--------------------------------------------------------------------------------
/demo/packages/react-one/index.jsx:
--------------------------------------------------------------------------------
1 | export default () =>