@vitejs/plugin-react-swc 3.0.0 → 3.1.0-beta.2

package/README.md

@@ -24,7 +24,7 @@ export default defineConfig({
 
 ## Caveats
 
-This plugin is only used in development and aims to be kept simple to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
+This plugin has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
 
 - [useDefineForClassFields](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier) is always activated, as this matches the current ECMAScript spec
 - `jsx runtime` is always `automatic`
@@ -34,6 +34,32 @@ This plugin is only used in development and aims to be kept simple to enable goo
   - JS files are not transformed
   - tsconfig is not resolved, so properties other than the ones listed above behaves like TS defaults
 
+## Options
+
+### jsxImportSource
+
+Control where the JSX factory is imported from.
+
+```ts
+react({ jsxImportSource: "@emotion/react" });
+```
+
+### tsDecorators
+
+Enable TypeScript decorators. Requires `experimentalDecorators` in tsconfig.
+
+```ts
+react({ tsDecorators: true });
+```
+
+## plugins
+
+Use SWC plugins. Enable SWC at build time.
+
+```ts
+react({ plugins: [["@swc/plugin-styled-components", {}]] });
+```
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

package/index.cjs

@@ -1,96 +1,61 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default
-});
-module.exports = __toCommonJS(src_exports);
 var import_fs = require("fs");
 var import_path = require("path");
 var import_url = require("url");
 var import_core = require("@swc/core");
+var import_module = require("module");
 var import_meta = {};
 var runtimePublicPath = "/@react-refresh";
-var preambleCode = `import { injectIntoGlobalHook } from "${runtimePublicPath}";
+var preambleCode = `import { injectIntoGlobalHook } from "__PATH__";
 injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 var _dirname = typeof __dirname !== "undefined" ? __dirname : (0, import_path.dirname)((0, import_url.fileURLToPath)(import_meta.url));
+var resolve = (0, import_module.createRequire)(
+  typeof __filename !== "undefined" ? __filename : import_meta.url
+).resolve;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
-var react = () => [
-  {
-    name: "vite:react-swc",
-    apply: "serve",
-    config: () => ({
-      esbuild: false,
-      optimizeDeps: { include: ["react/jsx-dev-runtime"] }
-    }),
-    resolveId: (id) => id === runtimePublicPath ? id : void 0,
-    load: (id) => id === runtimePublicPath ? (0, import_fs.readFileSync)((0, import_path.join)(_dirname, "refresh-runtime.js"), "utf-8") : void 0,
-    transformIndexHtml: () => [
-      { tag: "script", attrs: { type: "module" }, children: preambleCode }
-    ],
-    async transform(code, id, transformOptions) {
-      if (id.includes("node_modules"))
-        return;
-      const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true } : id.endsWith(".ts") ? { syntax: "typescript", tsx: false } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : void 0;
-      if (!parser)
-        return;
-      let result;
-      try {
-        result = await (0, import_core.transform)(code, {
-          filename: id,
-          swcrc: false,
-          configFile: false,
-          sourceMaps: true,
-          jsc: {
-            target: "es2020",
-            parser,
-            transform: {
-              useDefineForClassFields: true,
-              react: {
-                refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
-                development: true,
-                useBuiltins: true,
-                runtime: "automatic"
-              }
-            }
-          }
+var react = (_options) => {
+  const options = {
+    jsxImportSource: _options == null ? void 0 : _options.jsxImportSource,
+    tsDecorators: _options == null ? void 0 : _options.tsDecorators,
+    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0
+  };
+  return [
+    {
+      name: "vite:react-swc",
+      apply: "serve",
+      config: () => ({
+        esbuild: false,
+        optimizeDeps: { include: ["react/jsx-dev-runtime"] }
+      }),
+      resolveId: (id) => id === runtimePublicPath ? id : void 0,
+      load: (id) => id === runtimePublicPath ? (0, import_fs.readFileSync)((0, import_path.join)(_dirname, "refresh-runtime.js"), "utf-8") : void 0,
+      transformIndexHtml: (_, config) => [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children: preambleCode.replace(
+            "__PATH__",
+            config.server.config.base + runtimePublicPath.slice(1)
+          )
+        }
+      ],
+      async transform(code, _id, transformOptions) {
+        const id = _id.split("?")[0];
+        const result = await transformWithOptions(id, code, options, {
+          refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
+          development: true,
+          useBuiltins: true,
+          runtime: "automatic",
+          importSource: options == null ? void 0 : options.jsxImportSource
         });
-      } catch (e) {
-        const message = e.message;
-        const fileStartIndex = message.indexOf("\u256D\u2500[");
-        if (fileStartIndex !== -1) {
-          const match = message.slice(fileStartIndex).match(/:(\d+):(\d+)]/);
-          if (match) {
-            e.line = match[1];
-            e.column = match[2];
-          }
+        if (!result)
+          return;
+        if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
+          return result;
         }
-        throw e;
-      }
-      if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
-        return result;
-      }
-      result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
+        result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
   
   if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
   const prevRefreshReg = window.$RefreshReg$;
@@ -102,30 +67,83 @@ var react = () => [
   
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-  import.meta.hot.accept((nextExports) => {
-  if (!nextExports) return;
-  import(/* @vite-ignore */ import.meta.url).then((current) => {
-    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(current, nextExports);
-    if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+  import(/* @vite-ignore */ import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
   });
-});
   `;
-      const sourceMap = JSON.parse(result.map);
-      sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
-      return { code: result.code, map: sourceMap };
+        const sourceMap = JSON.parse(result.map);
+        sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
+        return { code: result.code, map: sourceMap };
+      }
+    },
+    options.plugins ? {
+      name: "vite:react-swc",
+      apply: "build",
+      transform: (code, _id) => transformWithOptions(_id.split("?")[0], code, options, {
+        useBuiltins: true,
+        runtime: "automatic",
+        importSource: options == null ? void 0 : options.jsxImportSource
+      })
+    } : {
+      name: "vite:react-swc",
+      apply: "build",
+      config: () => ({
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: options == null ? void 0 : options.jsxImportSource,
+          tsconfigRaw: {
+            compilerOptions: { useDefineForClassFields: true }
+          }
+        }
+      })
     }
-  },
-  {
-    name: "vite:react-swc",
-    apply: "build",
-    config: () => ({
-      esbuild: {
-        jsx: "automatic",
-        tsconfigRaw: { compilerOptions: { useDefineForClassFields: true } }
+  ];
+};
+var transformWithOptions = async (id, code, options, reactConfig) => {
+  if (id.includes("node_modules"))
+    return;
+  const decorators = (options == null ? void 0 : options.tsDecorators) ?? false;
+  const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : void 0;
+  if (!parser)
+    return;
+  let result;
+  try {
+    result = await (0, import_core.transform)(code, {
+      filename: id,
+      swcrc: false,
+      configFile: false,
+      sourceMaps: true,
+      jsc: {
+        target: "es2020",
+        parser,
+        experimental: { plugins: options.plugins },
+        transform: {
+          useDefineForClassFields: true,
+          react: reactConfig
+        }
       }
-    })
+    });
+  } catch (e) {
+    const message = e.message;
+    const fileStartIndex = message.indexOf("\u256D\u2500[");
+    if (fileStartIndex !== -1) {
+      const match = message.slice(fileStartIndex).match(/:(\d+):(\d+)]/);
+      if (match) {
+        e.line = match[1];
+        e.column = match[2];
+      }
+    }
+    throw e;
   }
-];
+  return result;
+};
 var src_default = react;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
+
+// <stdin>
+module.exports = src_default;
+module.exports.default = src_default;

package/index.d.ts

@@ -1,3 +1,20 @@
 import { PluginOption } from "vite";
-declare const react: () => PluginOption[];
+type Options = {
+    /**
+     * Control where the JSX factory is imported from.
+     * @default "react"
+     */
+    jsxImportSource?: string;
+    /**
+     * Enable TypeScript decorators. Requires experimentalDecorators in tsconfig.
+     * @default false
+     */
+    tsDecorators?: boolean;
+    /**
+     * Use SWC plugins. Enable SWC at build time.
+     * @default undefined
+     */
+    plugins?: [string, Record<string, any>][];
+};
+declare const react: (_options?: Options) => PluginOption[];
 export default react;

package/index.mjs

@@ -3,69 +3,58 @@ import { readFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import { transform } from "@swc/core";
+import { createRequire } from "module";
 var runtimePublicPath = "/@react-refresh";
-var preambleCode = `import { injectIntoGlobalHook } from "${runtimePublicPath}";
+var preambleCode = `import { injectIntoGlobalHook } from "__PATH__";
 injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 var _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+var resolve = createRequire(
+  typeof __filename !== "undefined" ? __filename : import.meta.url
+).resolve;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
-var react = () => [
-  {
-    name: "vite:react-swc",
-    apply: "serve",
-    config: () => ({
-      esbuild: false,
-      optimizeDeps: { include: ["react/jsx-dev-runtime"] }
-    }),
-    resolveId: (id) => id === runtimePublicPath ? id : void 0,
-    load: (id) => id === runtimePublicPath ? readFileSync(join(_dirname, "refresh-runtime.js"), "utf-8") : void 0,
-    transformIndexHtml: () => [
-      { tag: "script", attrs: { type: "module" }, children: preambleCode }
-    ],
-    async transform(code, id, transformOptions) {
-      if (id.includes("node_modules"))
-        return;
-      const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true } : id.endsWith(".ts") ? { syntax: "typescript", tsx: false } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : void 0;
-      if (!parser)
-        return;
-      let result;
-      try {
-        result = await transform(code, {
-          filename: id,
-          swcrc: false,
-          configFile: false,
-          sourceMaps: true,
-          jsc: {
-            target: "es2020",
-            parser,
-            transform: {
-              useDefineForClassFields: true,
-              react: {
-                refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
-                development: true,
-                useBuiltins: true,
-                runtime: "automatic"
-              }
-            }
-          }
+var react = (_options) => {
+  const options = {
+    jsxImportSource: _options == null ? void 0 : _options.jsxImportSource,
+    tsDecorators: _options == null ? void 0 : _options.tsDecorators,
+    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0
+  };
+  return [
+    {
+      name: "vite:react-swc",
+      apply: "serve",
+      config: () => ({
+        esbuild: false,
+        optimizeDeps: { include: ["react/jsx-dev-runtime"] }
+      }),
+      resolveId: (id) => id === runtimePublicPath ? id : void 0,
+      load: (id) => id === runtimePublicPath ? readFileSync(join(_dirname, "refresh-runtime.js"), "utf-8") : void 0,
+      transformIndexHtml: (_, config) => [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children: preambleCode.replace(
+            "__PATH__",
+            config.server.config.base + runtimePublicPath.slice(1)
+          )
+        }
+      ],
+      async transform(code, _id, transformOptions) {
+        const id = _id.split("?")[0];
+        const result = await transformWithOptions(id, code, options, {
+          refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
+          development: true,
+          useBuiltins: true,
+          runtime: "automatic",
+          importSource: options == null ? void 0 : options.jsxImportSource
         });
-      } catch (e) {
-        const message = e.message;
-        const fileStartIndex = message.indexOf("\u256D\u2500[");
-        if (fileStartIndex !== -1) {
-          const match = message.slice(fileStartIndex).match(/:(\d+):(\d+)]/);
-          if (match) {
-            e.line = match[1];
-            e.column = match[2];
-          }
+        if (!result)
+          return;
+        if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
+          return result;
         }
-        throw e;
-      }
-      if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
-        return result;
-      }
-      result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
+        result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
   
   if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
   const prevRefreshReg = window.$RefreshReg$;
@@ -77,30 +66,81 @@ var react = () => [
   
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-  import.meta.hot.accept((nextExports) => {
-  if (!nextExports) return;
-  import(/* @vite-ignore */ import.meta.url).then((current) => {
-    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(current, nextExports);
-    if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+  import(/* @vite-ignore */ import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
   });
-});
   `;
-      const sourceMap = JSON.parse(result.map);
-      sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
-      return { code: result.code, map: sourceMap };
+        const sourceMap = JSON.parse(result.map);
+        sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
+        return { code: result.code, map: sourceMap };
+      }
+    },
+    options.plugins ? {
+      name: "vite:react-swc",
+      apply: "build",
+      transform: (code, _id) => transformWithOptions(_id.split("?")[0], code, options, {
+        useBuiltins: true,
+        runtime: "automatic",
+        importSource: options == null ? void 0 : options.jsxImportSource
+      })
+    } : {
+      name: "vite:react-swc",
+      apply: "build",
+      config: () => ({
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: options == null ? void 0 : options.jsxImportSource,
+          tsconfigRaw: {
+            compilerOptions: { useDefineForClassFields: true }
+          }
+        }
+      })
     }
-  },
-  {
-    name: "vite:react-swc",
-    apply: "build",
-    config: () => ({
-      esbuild: {
-        jsx: "automatic",
-        tsconfigRaw: { compilerOptions: { useDefineForClassFields: true } }
+  ];
+};
+var transformWithOptions = async (id, code, options, reactConfig) => {
+  if (id.includes("node_modules"))
+    return;
+  const decorators = (options == null ? void 0 : options.tsDecorators) ?? false;
+  const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : void 0;
+  if (!parser)
+    return;
+  let result;
+  try {
+    result = await transform(code, {
+      filename: id,
+      swcrc: false,
+      configFile: false,
+      sourceMaps: true,
+      jsc: {
+        target: "es2020",
+        parser,
+        experimental: { plugins: options.plugins },
+        transform: {
+          useDefineForClassFields: true,
+          react: reactConfig
+        }
       }
-    })
+    });
+  } catch (e) {
+    const message = e.message;
+    const fileStartIndex = message.indexOf("\u256D\u2500[");
+    if (fileStartIndex !== -1) {
+      const match = message.slice(fileStartIndex).match(/:(\d+):(\d+)]/);
+      if (match) {
+        e.line = match[1];
+        e.column = match[2];
+      }
+    }
+    throw e;
   }
-];
+  return result;
+};
 var src_default = react;
 export {
   src_default as default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/plugin-react-swc",
   "description": "Speed up your Vite dev server with SWC",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.2",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "repository": "github:vitejs/vite-plugin-react-swc",
@@ -24,9 +24,9 @@
     "fast refresh"
   ],
   "peerDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^4"
   },
   "dependencies": {
-    "@swc/core": "^1.3.21"
+    "@swc/core": "^1.3.26"
   }
 }

package/refresh-runtime.js

@@ -111,7 +111,9 @@ function performReactRefresh() {
     });
     let update = {
       updatedFamilies,
+      // Families that will re-render preserving state
       staleFamilies
+      // Families that will be remounted
     };
     helpersByRendererID.forEach(function(helpers) {
       helpers.setRefreshHandler(resolveFamily);
@@ -375,6 +377,16 @@ function isLikelyComponentType(type) {
     }
   }
 }
+function registerExportsForReactRefresh(filename, moduleExports) {
+  for (const key in moduleExports) {
+    if (key === "__esModule")
+      continue;
+    const exportValue = moduleExports[key];
+    if (isLikelyComponentType(exportValue)) {
+      register(exportValue, filename + " " + key);
+    }
+  }
+}
 function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
   if (!predicateOnExport(prevExports, (key) => !!nextExports[key])) {
     return "Could not Fast Refresh (export removed)";
@@ -409,9 +421,12 @@ function predicateOnExport(moduleExports, predicate) {
   }
   return true;
 }
+var refresh_runtime_default = { injectIntoGlobalHook };
 export {
   createSignatureFunctionForTransform,
+  refresh_runtime_default as default,
   getRefreshReg,
   injectIntoGlobalHook,
+  registerExportsForReactRefresh,
   validateRefreshBoundaryAndEnqueueUpdate
 };