Skip to content

Use plugin hook filters internally in plugin-rsc #957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Use plugin hook filters internally in plugin-rsc #957

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1bbac9
Initial plan
Copilot Oct 28, 2025
ebcc684
Use plugin hook filter internally
Copilot Oct 28, 2025
c2fc9a3
Make regex patterns more explicit for better readability
Copilot Oct 28, 2025
b1d3676
Update plugin-rsc to use plugin hook filters internally
Copilot Oct 28, 2025
9fc1401
Remove redundant isCSSRequest check in rsc:rsc-css-self-accept
Copilot Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 91 additions & 37 deletions packages/plugin-react-swc/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,34 +169,69 @@ const react = (_options?: Options): Plugin[] => {
]
}
},
async transform(code, _id, transformOptions) {
const id = _id.split('?')[0]
const refresh = !transformOptions?.ssr && !hmrDisabled
transform: options.parserConfig
? // When custom parserConfig is provided, we can't add a filter
// because the user controls which files are handled
async (code, _id, transformOptions) => {
const id = _id.split('?')[0]
const refresh = !transformOptions?.ssr && !hmrDisabled

const result = await transformWithOptions(
id,
code,
options.devTarget,
options,
viteCacheRoot,
{
refresh,
development: true,
runtime: 'automatic',
importSource: options.jsxImportSource,
},
)
if (!result) return
if (!refresh) return result
const result = await transformWithOptions(
id,
code,
options.devTarget,
options,
viteCacheRoot,
{
refresh,
development: true,
runtime: 'automatic',
importSource: options.jsxImportSource,
},
)
if (!result) return
if (!refresh) return result

const newCode = addRefreshWrapper(
result.code,
'@vitejs/plugin-react-swc',
id,
options.reactRefreshHost,
)
return { code: newCode ?? result.code, map: result.map }
},
const newCode = addRefreshWrapper(
result.code,
'@vitejs/plugin-react-swc',
id,
options.reactRefreshHost,
)
return { code: newCode ?? result.code, map: result.map }
}
: {
// Add filter for default extensions: .tsx, .ts, .mts, .jsx, .mdx
filter: { id: /\.(tsx|ts|mts|jsx|mdx)(?:$|\?)/ },
async handler(code, _id, transformOptions) {
const id = _id.split('?')[0]
const refresh = !transformOptions?.ssr && !hmrDisabled

const result = await transformWithOptions(
id,
code,
options.devTarget,
options,
viteCacheRoot,
{
refresh,
development: true,
runtime: 'automatic',
importSource: options.jsxImportSource,
},
)
if (!result) return
if (!refresh) return result

const newCode = addRefreshWrapper(
result.code,
'@vitejs/plugin-react-swc',
id,
options.reactRefreshHost,
)
return { code: newCode ?? result.code, map: result.map }
},
},
},
options.plugins || options.useAtYourOwnRisk_mutateSwcOptions
? {
Expand All @@ -209,18 +244,37 @@ const react = (_options?: Options): Plugin[] => {
configResolved(config) {
viteCacheRoot = config.cacheDir
},
transform: (code, _id) =>
transformWithOptions(
_id.split('?')[0],
code,
'esnext',
options,
viteCacheRoot,
{
runtime: 'automatic',
importSource: options.jsxImportSource,
transform: options.parserConfig
? // When custom parserConfig is provided, we can't add a filter
// because the user controls which files are handled
(code, _id) =>
transformWithOptions(
_id.split('?')[0],
code,
'esnext',
options,
viteCacheRoot,
{
runtime: 'automatic',
importSource: options.jsxImportSource,
},
)
: {
// Add filter for default extensions: .tsx, .ts, .mts, .jsx, .mdx
filter: { id: /\.(tsx|ts|mts|jsx|mdx)(?:$|\?)/ },
handler: (code, _id) =>
transformWithOptions(
_id.split('?')[0],
code,
'esnext',
options,
viteCacheRoot,
{
runtime: 'automatic',
importSource: options.jsxImportSource,
},
),
},
),
}
: {
name: 'vite:react-swc',
Expand Down
3 changes: 0 additions & 3 deletions packages/plugin-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { fileURLToPath } from 'node:url'
import { readFileSync } from 'node:fs'
import type * as babelCore from '@babel/core'
import type { ParserOptions, TransformOptions } from '@babel/core'
import { createFilter } from 'vite'
import * as vite from 'vite'
import type { Plugin, ResolvedConfig } from 'vite'
import {
Expand Down Expand Up @@ -107,7 +106,6 @@ const compilerAnnotationRE = /['"]use memo['"]/
export default function viteReact(opts: Options = {}): Plugin[] {
const include = opts.include ?? defaultIncludeRE
const exclude = opts.exclude ?? defaultExcludeRE
const filter = createFilter(include, exclude)

const jsxImportSource = opts.jsxImportSource ?? 'react'
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`
Expand Down Expand Up @@ -247,7 +245,6 @@ export default function viteReact(opts: Options = {}): Plugin[] {
},
async handler(code, id, options) {
const [filepath] = id.split('?')
if (!filter(filepath)) return

const ssr = options?.ssr === true
const babelOptions = (() => {
Expand Down
Loading