react-refresh-typescript

This package is under on-demand maintenance. I'll update it with upstream if someone opens an issue.

This package currently matches the upstream runtime of react-refresh@0.19.* (Mon Oct 6 01:13:22 2025 +0200) (React 19). Please open an issue if you need this but the matching commit is too old.

This package implements the plugin to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state.

This package is primarily aimed at developers of bundler plugins. If you’re working on one, here is a rough guide for Fast Refresh integration using this package.

Minimal requirement

- TypeScript 4.0
- module (not target) set to es2015 or later (not work with CommonJS currently. If you really need it, please vote in #3)

Example (with ts-loader)

``js
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
getCustomTransformers: () => ({
before: [require('react-refresh-typescript')()]
}),
}
}
`

Example (with raw TypeScript transpileModule API)

`js
import refresh from 'react-refresh-typescript';
import ts from 'typescript';
const out = ts.transpileModule('const App = () => ', {
compilerOptions: {
target: ts.ScriptTarget.ESNext,
jsx: ts.JsxEmit.Preserve,
},
fileName: 'test.jsx',
transformers: {before: [refresh(options)]},
}).outputText,
`

Import from Deno

The entry point is src/deno.ts.

You must have an import map for deno that specify typescript as a peer dependency.

For example:

`json
{
"imports": {
"typescript": "https://esm.sh/typescript"
}
}
`

$3

If you don't want to set up an import map, you can import the core file and provide TypeScript via options.ts.

Options

`ts
export type Options = {
/* @default "$RefreshReg$" /
refreshReg?: string
/* @default "$RefreshSig$" /
refreshSig?: string
/* @default false /
emitFullSignatures?: boolean
/* Provide your own TypeScript instance. /
ts?: typeof import('typescript')
/* Provide your own hash function when emitFullSignatures is false /
hashSignature?: (signature: string) => string
}
``