# jotai-react-refresh-ts-plugin

> TypeScript Jotai React Refresh Plugin

Latest version **0.1.2** (published 2022-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install jotai-react-refresh-ts-plugin
pnpm add jotai-react-refresh-ts-plugin
yarn add jotai-react-refresh-ts-plugin
bun add jotai-react-refresh-ts-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-12-04 |
| First published | 2022-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dxd_sjtu@outlook.com |
| Maintainers | dxd_sjtu |

## Links

- npm: https://www.npmjs.com/package/jotai-react-refresh-ts-plugin
- Repository: https://github.com/ahungrynoob/jotai-react-refresh-ts-plugin
- Homepage: https://github.com/ahungrynoob/jotai-react-refresh-ts-plugin#readme
- Issues: https://github.com/ahungrynoob/jotai-react-refresh-ts-plugin/issues
- npm.io page: https://npm.io/package/jotai-react-refresh-ts-plugin

## Recent versions

- 0.1.2 (latest) — 2022-12-04
- 0.1.1 — 2022-12-04
- 0.1.0 — 2022-12-03

## README

# jotai-react-refresh-ts-plugin

[![CI](https://github.com/ahungrynoob/jotai-react-refresh-ts-plugin/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/ahungrynoob/jotai-react-refresh-ts-plugin/actions/workflows/ci.yml)
[![codecov](https://codecov.io/gh/ahungrynoob/jotai-react-refresh-ts-plugin/branch/main/graph/badge.svg)](https://codecov.io/gh/ahungrynoob/jotai-react-refresh-ts-plugin)
[![Downloads](https://img.shields.io/npm/dm/jotai-react-refresh-ts-plugin.svg?sanitize=true)](https://npmcharts.com/compare/jotai-react-refresh-ts-plugin?minimal=true)

This plugin adds support for React Refresh for Jotai atoms. This makes sure that state isn't reset, when developing using React Refresh.

## Install
```bash
npm install jotai-react-refresh-ts-plugin --save-dev
```

## Usage

With a `webpack` configuration file:

```js
const { join } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { createJotaiReactRefreshTransformer } = require('jotai-react-refresh-ts-plugin')

module.exports = {
  entry: './tests/fixtures/simple.tsx',

  output: {
    filename: '[name].[hash].js',
    path: join(process.cwd(), 'dist'),
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  },

  mode: 'development',

  devtool: 'cheap-module-source-map',

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              // <------------------- here
              createJotaiReactRefreshTransformer({
                // this can add debug label to your own custom atom
                customAtomNames: ['myCustomAtom']
              }),
            ],
          }),
          compilerOptions: {
            jsxFactory: 'jsx',
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader?minimize'],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: join(process.cwd(), 'tests', 'fixtures', 'index.html'),
    }),
  ],
}
```

---
_Source: https://npm.io/package/jotai-react-refresh-ts-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._