feat: add parserConfig option (#186)

Author: ArnaudBarre

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Add parserConfig option
+
+This will unlock to use the plugin in some use cases where the original source code is not in TS. Using this option to keep using JSX inside `.js` files is highly discouraged and can be removed in any future version.
+
 ## 3.5.0
 
 ### Update peer dependency range to target Vite 5

README.md

@@ -56,15 +56,15 @@ Enable TypeScript decorators. Requires `experimentalDecorators` in tsconfig.
 react({ tsDecorators: true });
 ```
 
-## plugins
+### plugins
 
 Use SWC plugins. Enable SWC at build time.
 
 ```ts
 react({ plugins: [["@swc/plugin-styled-components", {}]] });
 ```
 
-## devTarget
+### devTarget
 
 Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
 
@@ -76,6 +76,23 @@ For production target, see https://vitejs.dev/config/build-options.html#build-ta
 react({ devTarget: "es2022" });
 ```
 
+### parserConfig
+
+Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
+
+This requires to redefine the config for any file you want to be included (ts, mdx, ...).
+
+If you want to trigger fast refresh on compiled JS, use `jsx: true`. Exclusion of node_modules should be handled by the function if needed. Using this option to use JSX inside `.js` files is highly discouraged and can be removed in any future version.
+
+```ts
+react({
+  parserConfig(id) {
+    if (id.endsWith(".res")) return { syntax: "ecmascript", jsx: true };
+    if (id.endsWith(".ts")) return { syntax: "typescript", tsx: false };
+  },
+});
+```
+
 ## 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).

src/index.ts

@@ -50,6 +50,13 @@ type Options = {
    * @default "es2020"
    */
   devTarget?: JscTarget;
+  /**
+   * Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
+   * This requires to redefine the config for any file you want to be included.
+   * If you want to trigger fast refresh on compiled JS, use `jsx: true`.
+   * Exclusion of node_modules should be handled by the function if needed.
+   */
+  parserConfig?: (id: string) => ParserConfig | undefined;
 };
 
 const isWebContainer = globalThis.process?.versions?.webcontainer;
@@ -63,6 +70,7 @@ const react = (_options?: Options): PluginOption[] => {
       ? _options?.plugins.map((el): typeof el => [resolve(el[0]), el[1]])
       : undefined,
     devTarget: _options?.devTarget ?? "es2020",
+    parserConfig: _options?.parserConfig,
   };
 
   return [
@@ -204,7 +212,9 @@ const transformWithOptions = async (
   reactConfig: ReactConfig,
 ) => {
   const decorators = options?.tsDecorators ?? false;
-  const parser: ParserConfig | undefined = id.endsWith(".tsx")
+  const parser: ParserConfig | undefined = options.parserConfig
+    ? options.parserConfig(id)
+    : id.endsWith(".tsx")
     ? { syntax: "typescript", tsx: true, decorators }
     : id.endsWith(".ts") || id.endsWith(".mts")
     ? { syntax: "typescript", tsx: false, decorators }