README.md

react-refresh-typescript

This package currently matches the upstream runtime of react-refresh@0.17.* (Mon Dec 23 18:11:04 2024 -0500) (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)

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

Example (with raw TypeScript transpileModule API)

import refresh from 'react-refresh-typescript';
import ts from 'typescript';
const out = ts.transpileModule('const App = () => <Something />', {
    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:

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

Without import-map

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

Options

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
}