{"library":"react-refresh-typescript","title":"React Refresh Transformer for TypeScript","description":"react-refresh-typescript is a TypeScript transformer that integrates React Fast Refresh (Hot Module Replacement) into React applications. It specifically handles the necessary transformations for TypeScript codebases to enable live editing of React components without losing their state. The package is currently under on-demand maintenance, meaning updates typically occur when issues are opened to track upstream changes in `react-refresh`. It currently matches `react-refresh@0.19.*` (React 19). Its primary audience includes bundler plugin developers, such as those building integrations for webpack, Rollup, or esbuild. Key differentiators include its direct integration as a TypeScript custom transformer, which allows it to operate early in the compilation pipeline, and its support for Deno environments. This package is essential for enabling a smooth developer experience with hot reloading in TypeScript-based React projects.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-refresh-typescript"],"cli":null},"imports":["import refresh from 'react-refresh-typescript';","import type { Options } from 'react-refresh-typescript';","require('react-refresh-typescript')"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import refresh from 'react-refresh-typescript';\nimport ts from 'typescript';\n\nconst sourceCode = `\nconst App = () => {\n    const [count, setCount] = React.useState(0);\n    return (\n        <div>\n            <h1>Hello Fast Refresh!</h1>\n            <p>Count: {count}</p>\n            <button onClick={() => setCount(c => c + 1)}>Increment</button>\n        </div>\n    );\n};\nexport default App;\n`;\n\nconst { outputText } = ts.transpileModule(sourceCode, {\n    compilerOptions: {\n        target: ts.ScriptTarget.ESNext,\n        jsx: ts.JsxEmit.Preserve,\n        module: ts.ModuleKind.ESNext, // Required for Fast Refresh\n    },\n    fileName: 'app.tsx',\n    transformers: { before: [refresh()] },\n});\n\nconsole.log(outputText);","lang":"typescript","description":"Demonstrates how to use react-refresh-typescript with TypeScript's `transpileModule` API to transform React JSX code for Fast Refresh.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}