diff --git a/CHANGELOG.md b/CHANGELOG.md index 1498011..eb712ef 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index fc02c4e..8fd6191 100644 --- a/README.md +++ b/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 }; + }, }); ``` diff --git a/src/index.ts b/src/index.ts index b65bcfd..3c55eb1 100644 --- a/src/index.ts +++ b/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")