CR

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-### Add filter option
+### 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.
 

README.md

@@ -76,16 +76,20 @@ For production target, see https://vitejs.dev/config/build-options.html#build-ta
 react({ devTarget: "es2022" });
 ```
 
-### filter
+### parserConfig
 
-Override the default filtering (.ts, .tsx, .mts, .jsx, .mdx).
+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({
-  filter: (id) =>
-    id.endsWith(".res") ? { syntax: "ecmascript", jsx: true } : undefined,
+  parserConfig(id) {
+    if (id.endsWith(".res")) return { syntax: "ecmascript", jsx: true };
+    if (id.endsWith(".ts")) return { syntax: "typescript", tsx: false };
+  },
 });
 ```
 

src/index.ts

@@ -51,11 +51,12 @@ type Options = {
    */
   devTarget?: JscTarget;
   /**
-   * Override the default filtering (.ts, .tsx, .mts, .jsx, .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
+   * 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.
    */
-  filter?: (id: string) => ParserConfig | undefined;
+  parserConfig?: (id: string) => ParserConfig | undefined;
 };
 
 const isWebContainer = globalThis.process?.versions?.webcontainer;
@@ -69,7 +70,7 @@ const react = (_options?: Options): PluginOption[] => {
       ? _options?.plugins.map((el): typeof el => [resolve(el[0]), el[1]])
       : undefined,
     devTarget: _options?.devTarget ?? "es2020",
-    filter: _options?.filter,
+    parserConfig: _options?.parserConfig,
   };
 
   return [
@@ -211,8 +212,8 @@ const transformWithOptions = async (
   reactConfig: ReactConfig,
 ) => {
   const decorators = options?.tsDecorators ?? false;
-  const parser: ParserConfig | undefined = options.filter
-    ? options.filter(id)
+  const parser: ParserConfig | undefined = options.parserConfig
+    ? options.parserConfig(id)
     : id.endsWith(".tsx")
     ? { syntax: "typescript", tsx: true, decorators }
     : id.endsWith(".ts") || id.endsWith(".mts")