Use named export instead of default export for better esm/cjs interop…

… & add support for jsx automatic runtime [publish]

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.2.0
+
+Breaking: Use named export instead of default export for better esm/cjs interop.
+
+To migrate, replace your import by `import { swcReactRefresh } from "vite-plugin-swc-react-refresh";`
+
+The JSX automatic runtime is also now supported if you bump esbuild to at least [0.14.51](https://github.com/evanw/esbuild/releases/tag/v0.14.51).
+
+To use it, update your config from `esbuild: { jsxInject: 'import React from "react"' },` to `esbuild: { runtime: "automatic" },`
+
 ## 0.1.2
 
 - Add vite as peer dependency

README.md

@@ -3,8 +3,7 @@
 Use the versatility of [swc](https://swc.rs/) for development and the maturity of [esbuild](https://esbuild.github.io/) for production.
 
 - ✅ A fast Fast Refresh (~20x faster than Babel)
-- ✅ Skip `import React`
-- ❌ Not compatible with [automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). See [this section](#jsx-runtime)
+- ✅ Compatible with [automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
 - ❌ Don't check for consistent components exports. See [this section](#consistent-components-exports)
 
 ## Installation
@@ -15,19 +14,29 @@ npm i -D vite-plugin-swc-react-refresh
 
 ## Usage
 
+With the automatic JSX runtime (requires esbuild => [0.14.51](https://github.com/evanw/esbuild/releases/tag/v0.14.51)):
+
 ```ts
 import { defineConfig } from "vite";
-import swcReactRefresh from "vite-plugin-swc-react-refresh";
+import { swcReactRefresh } from "vite-plugin-swc-react-refresh";
 
 export default defineConfig({
   plugins: [swcReactRefresh()],
-  esbuild: { jsxInject: `import React from "react"` },
+  esbuild: { runtime: "automatic" },
 });
 ```
 
-## JSX Runtime
+Without the automatic JSX runtime, but still omitting the `React` default import:
+
+```ts
+import { defineConfig } from "vite";
+import { swcReactRefresh } from "vite-plugin-swc-react-refresh";
 
-This plugin is only used in development, and esbuild (which doesn't support the automatic JSX runtime) will be used by Vite for bundling. However, you can omit the default React import with the `esbuild.jsxInject` Vite option.
+export default defineConfig({
+  plugins: [swcReactRefresh()],
+  esbuild: { jsxInject: `import React from "react"` },
+});
+```
 
 ## Consistent components exports
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-swc-react-refresh",
   "description": "Use the versatility of swc for development and the maturity of esbuild for production",
-  "version": "0.1.2",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "main": "src/swc-react-refresh.js",
@@ -36,6 +36,6 @@
     "@types/node": "^18.0.6",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.2"
+    "vite": "^3.0.5"
   }
 }

src/swc-react-refresh.ts

@@ -13,12 +13,16 @@ window.$RefreshSig$ = () => (type) => type;`;
 const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/;
 
 let define: { [key: string]: string } | undefined;
+let automaticRuntime = false;
 
-export default (): PluginOption => ({
+export const swcReactRefresh = (): PluginOption => ({
   name: "react-refresh",
   apply: "serve",
   config: (config) => {
-    if (config.esbuild) define = config.esbuild.define;
+    if (config.esbuild) {
+      define = config.esbuild.define;
+      automaticRuntime = config.esbuild.jsx === "automatic";
+    }
     config.esbuild = false;
   },
   resolveId: (id) => (id === runtimePublicPath ? id : undefined),
@@ -41,7 +45,12 @@ export default (): PluginOption => ({
       jsc: {
         target: "es2020",
         transform: {
-          react: { refresh: true, development: true, useBuiltins: true },
+          react: {
+            refresh: true,
+            development: true,
+            useBuiltins: true,
+            runtime: automaticRuntime ? "automatic" : undefined,
+          },
           optimizer: { globals: { vars: define } },
         },
       },