Add plugin hook filters

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }

examples/vite-3/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-3/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-4/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-4/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-5/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-5/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-6/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-6/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-7/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-7/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-7/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

examples/vite-8/src/App.tsx

@@ -1,5 +1,6 @@
 import { onCleanup, onMount } from "solid-js";
 import { CounterProvider, useCounter } from "./CounterContext";
+import { Label } from "./Label.jsx";
 
 const title = 'Count';
 
@@ -56,6 +57,7 @@ export default function App() {
 
  return (
  <CounterProvider>
+ <Label text="solid" />
  <Count />
  <Increment />
  <Decrement />

examples/vite-8/src/Label.jsx

@@ -0,0 +1,3 @@
+export function Label(props) {
+ return <span data-testid="label">{props.text}</span>;
+}

examples/vite-8/tests/App.test.tsx

@@ -8,6 +8,10 @@ import App from '../src/App.jsx';
 test('App', async () => {
  const root = page.elementLocator(render(() => <App />).baseElement);
 
+ // Label is a .jsx component — verifies the plugin processes .jsx files correctly
+ const label = root.getByTestId('label');
+ await expect.element(label).toHaveTextContent('solid');
+
  const count = root.getByText('Count:');
  await expect.element(count).toHaveTextContent('Count: 0');
 

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
  - '.'
  - "examples/*"
+allowBuilds:
+ cypress: set this to true or false
+ esbuild: set this to true or false
+ msw: set this to true or false
 catalog:
-"solid-js": ^1.9.4
+ "solid-js": ^1.9.4

src/index.ts

@@ -11,6 +11,7 @@ import { crawlFrameworkPkgs } from 'vitefu';
 const require = createRequire(import.meta.url);
 
 const runtimePublicPath = '/@solid-refresh';
+const runtimePublicPathFilter = /^\/@solid-refresh$/;
 const runtimeFilePath = require.resolve('solid-refresh/dist/solid-refresh.mjs');
 const runtimeCode = readFileSync(runtimeFilePath, 'utf-8');
 
@@ -332,103 +333,125 @@ export default function solidPlugin(options: Partial<Options> = {}): Plugin {
  needHmr = config.command === 'serve' && config.mode !== 'production' && options.hot !== false;
  },
 
- resolveId(id) {
- if (id === runtimePublicPath) return id;
+ resolveId: {
+ // Filter is used by Rolldown and newer Rollup/Vite versions (Vite >= 6.3.0) to skip
+ // unnecessary Rust-to-JS calls. The inner check is kept for backward compatibility
+ // with older versions that ignore hook filters and call the handler for every module.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return id;
+ },
  },
 
- load(id) {
- if (id === runtimePublicPath) return runtimeCode;
+ load: {
+ // Same backward-compatibility strategy as resolveId above.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: runtimePublicPathFilter },
+ handler(id) {
+ if (id === runtimePublicPath) return runtimeCode;
+ },
  },
 
- async transform(source, id, transformOptions) {
- const isSsr = this.environment
- ? this.environment.config.consumer === 'server'
- : Boolean(transformOptions?.ssr);
- const currentFileExtension = getExtension(id);
-
- const extensionsToWatch = options.extensions || [];
- const allExtensions = extensionsToWatch.map((extension) =>
- // An extension can be a string or a tuple [extension, options]
- typeof extension === 'string' ? extension : extension[0],
- );
-
- if (!filter(id)) {
- return null;
- }
+ transform: {
+ // Limit invocations to files that could contain Solid JSX. Custom extensions
+ // (options.extensions) cannot be represented as a static regex, so they are
+ // still handled by the inner extension check below — this filter covers the
+ // common case and is the source of the largest performance win.
+ // The inner checks (filter(id) / extension regex) are kept as-is so that the
+ // hook behaves correctly on older Vite/Rollup versions that ignore hook filters.
+ // @ts-ignore filter is not yet in Vite's type definitions but is supported at runtime
+ filter: { id: /\.[mc]?[tj]sx$/i },
+ async handler(source, id, transformOptions) {
+ const isSsr = this.environment
+ ? this.environment.config.consumer === 'server'
+ : Boolean(transformOptions?.ssr);
+ const currentFileExtension = getExtension(id);
+
+ const extensionsToWatch = options.extensions || [];
+ const allExtensions = extensionsToWatch.map((extension) =>
+ // An extension can be a string or a tuple [extension, options]
+ typeof extension === 'string' ? extension : extension[0],
+ );
+
+ if (!filter(id)) {
+ return null;
+ }
 
- id = id.replace(/\?.*$/, '');
+id = id.replace(/\?.*$/, '');
 
- if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
- return null;
- }
+if (!(/\.[mc]?[tj]sx$/i.test(id) || allExtensions.includes(currentFileExtension))) {
+return null;
+}
 
- const inNodeModules = /node_modules/.test(id);
+const inNodeModules = /node_modules/.test(id);
 
- let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
+let solidOptions: { generate: 'ssr' | 'dom'; hydratable: boolean };
 
- if (options.ssr) {
- if (isSsr) {
- solidOptions = { generate: 'ssr', hydratable: true };
+ if (options.ssr) {
+ if (isSsr) {
+ solidOptions = { generate: 'ssr', hydratable: true };
+ } else {
+ solidOptions = { generate: 'dom', hydratable: true };
+ }
  } else {
- solidOptions = { generate: 'dom', hydratable: true };
+ solidOptions = { generate: 'dom', hydratable: false };
  }
- } else {
- solidOptions = { generate: 'dom', hydratable: false };
- }
-
- // We need to know if the current file extension has a typescript options tied to it
- const shouldBeProcessedWithTypescript =
- /\.[mc]?tsx$/i.test(id) ||
- extensionsToWatch.some((extension) => {
- if (typeof extension === 'string') {
- return extension.includes('tsx');
- }
-
- const [extensionName, extensionOptions] = extension;
- if (extensionName !== currentFileExtension) return false;
 
- return extensionOptions.typescript;
- });
- const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
- 'jsx',
- ];
-
- if (shouldBeProcessedWithTypescript) {
- plugins.push('typescript');
- }
-
- const opts: babel.TransformOptions = {
- root: projectRoot,
- filename: id,
- sourceFileName: id,
- presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
- plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
- ast: false,
- sourceMaps: true,
- configFile: false,
- babelrc: false,
- parserOpts: {
- plugins,
- },
- };
-
- // Default value for babel user options
- let babelUserOptions: babel.TransformOptions = {};
+ // We need to know if the current file extension has a typescript options tied to it
+ const shouldBeProcessedWithTypescript =
+ /\.[mc]?tsx$/i.test(id) ||
+ extensionsToWatch.some((extension) => {
+ if (typeof extension === 'string') {
+ return extension.includes('tsx');
+ }
+
+ const [extensionName, extensionOptions] = extension;
+ if (extensionName !== currentFileExtension) return false;
+
+ return extensionOptions.typescript;
+ });
+ const plugins: NonNullable<NonNullable<babel.TransformOptions['parserOpts']>['plugins']> = [
+ 'jsx',
+ ];
+
+ if (shouldBeProcessedWithTypescript) {
+ plugins.push('typescript');
+ }
 
- if (options.babel) {
- if (typeof options.babel === 'function') {
- const babelOptions = options.babel(source, id, isSsr);
- babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
- } else {
- babelUserOptions = options.babel;
+ const opts: babel.TransformOptions = {
+ root: projectRoot,
+ filename: id,
+ sourceFileName: id,
+ presets: [[solid, { ...solidOptions, ...(options.solid || {}) }]],
+ plugins: needHmr && !isSsr && !inNodeModules ? [[solidRefresh, { bundler: 'vite' }]] : [],
+ ast: false,
+ sourceMaps: true,
+ configFile: false,
+ babelrc: false,
+ parserOpts: {
+ plugins,
+ },
+ };
+
+ // Default value for babel user options
+ let babelUserOptions: babel.TransformOptions = {};
+
+ if (options.babel) {
+ if (typeof options.babel === 'function') {
+ const babelOptions = options.babel(source, id, isSsr);
+ babelUserOptions = babelOptions instanceof Promise ? await babelOptions : babelOptions;
+ } else {
+ babelUserOptions = options.babel;
+ }
  }
- }
 
- const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
+const babelOptions = mergeAndConcat(babelUserOptions, opts) as babel.TransformOptions;
 
- const { code, map } = await babel.transformAsync(source, babelOptions);
+const { code, map } = await babel.transformAsync(source, babelOptions);
 
- return { code, map };
+ return { code, map };
+ },
  },
  };
 }