open-index/open-npm huggingface dataset:
npm package: @popperjs/test
Description: This package is a list of scripts used by Popper.js and Tooltip.js to test them.
Author: Federico Zivolo
Latest version: 1.0.1

# Popper.js scripts

This package is a list of scripts used by Popper.js and Tooltip.js to compile
their sources and publish them on npm, NuGet and so on.

It's not intended to be used outside of Popper.js repository.
npm package: @poppies/egg-poppy-api-framework
Author: Alex.Zhang
Latest version: 1.0.2

# valueWebApi



## QuickStart

```bash
$ npm install
$ npm test
```

publish your framework to npm, then change app's dependencies:

```js
// {app_root}/index.js
require('valueWebApi').startCluster({
  baseDir: __dirname,
  // port: 7001, // default to 7001
});

```

## Questions & Suggestions

Please open an issue [here](https://github.com/eggjs/egg/issues).
npm package: @poppinss/application
Description: AdonisJs application class to read app related data
Author: virk,poppinss
Latest version: 1.0.10
Deprecated: Use @adonisjs/application instead

<div align="center">
  <img src="https://res.cloudinary.com/adonisjs/image/upload/q_100/v1557762307/poppinss_iftxlt.jpg" width="600px">
</div>

# Adonis application
[![circleci-image]][circleci-url] [![npm-image]][npm-url] ![][typescript-image] [![license-image]][license-url]

The application class for AdonisJs to know more about the environment and project structure of your AdonisJs applications.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of contents

- [Usage](#usage)
- [rcParser](#rcparser)
- [API Docs](#api-docs)
- [Maintainers](#maintainers)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Usage
Ideally you shouldn't be installing this module directly, since it is part of AdonisJs by default. However, installing module directly is helpful when testing AdonisJs specific addons.

```sh
npm i @poppinss/application

# Yarn
yarn add @poppinss/application
```

and then use it as follows:

```ts
import { Application } from '@poppinss/application'
import { Ioc } from '@adonisjs/fold'

const app = new Application(
  __dirname,
  new Ioc(),
  require('./adonisrc.json'),
  require('./package.json'),
)
```

The constructor takes 4 arguments, which you can fake during tests.

| Argument position | Description |
|------------------|------------------|
| `1 (appRoot)` | The application root |
| `2 (ioc)` | Instance of IoC container |
| `3 (rcContents)` | Contents of `.adonisrc.json` file. You can also provide an empty object |
| `4 (pkgFile)` | Pass the contents of `package.json` file. Required to pull the app name, version and so on |

## rcParser
The application instance will parse the contents of `.adonisrc.json` file. However, if you need the parser, you can access and use it as follows.

```ts
import { rcParser } from '@poppinss/application'
rcParser.parse(require('.adonisrc.json'))
```

## API Docs
Following are the autogenerated files via Typedoc

* [API](docs/README.md)

[circleci-image]: https://img.shields.io/circleci/project/github/poppinss/application/master.svg?style=for-the-badge&logo=circleci
[circleci-url]: https://circleci.com/gh/poppinss/application "circleci"

[npm-image]: https://img.shields.io/npm/v/@poppinss/application.svg?style=for-the-badge&logo=npm
[npm-url]: https://npmjs.org/package/@poppinss/application "npm"

[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript

[license-url]: LICENSE.md
[license-image]: https://img.shields.io/aur/license/pac.svg?style=for-the-badge

## Maintainers
[Harminder virk](https://github.com/thetutlage)
npm package: @poppinss/co-body
Description: Request body parser used by AdonisJS. Forked from co-body
Latest version: 1.2.0

# co-body

[![NPM version][npm-image]][npm-url]
[![build status][gh-workflow-image]][gh-workflow-url]
[![npm download][download-image]][download-url]

[npm-image]: https://img.shields.io/npm/v/co-body.svg?style=for-the-badge
[npm-url]: https://npmjs.org/package/co-body

[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/thetutlage/co-body/test.yml?style=for-the-badge
[gh-workflow-url]: https://github.com/thetutlage/co-body/actions/workflows/test.yml "Github action"

[download-image]: https://img.shields.io/npm/dm/@poppinss/co-body.svg?style=for-the-badge
[download-url]: https://npmjs.org/package/@poppinss/co-body

  Parse request bodies with generators inspired by [Raynos/body](https://github.com/Raynos/body).

## Installation

```bash
$ npm install co-body
```

## Options

  - `limit` number or string representing the request size limit (1mb for json and 56kb for form-urlencoded)
  - `strict` when set to `true`, JSON parser will only accept arrays and objects; when `false` will accept anything `JSON.parse` accepts. Defaults to `true`. (also `strict` mode will always return object).
  - `queryString` an object of options when parsing query strings and form data. See [qs](https://github.com/hapijs/qs) for more information.
  - `returnRawBody` when set to `true`, the return value of `co-body` will be an object with two properties: `{ parsed: /* parsed value */, raw: /* raw body */}`.
  - `jsonTypes` is used to determine what media type **co-body** will parse as **json**, this option is passed directly to the [type-is](https://github.com/jshttp/type-is) library.
  - `formTypes` is used to determine what media type **co-body** will parse as **form**, this option is passed directly to the [type-is](https://github.com/jshttp/type-is) library.
  - `textTypes` is used to determine what media type **co-body** will parse as **text**, this option is passed directly to the [type-is](https://github.com/jshttp/type-is) library.

more options available via [raw-body](https://github.com/stream-utils/raw-body#getrawbodystream-options-callback):

## Example

```js
// application/json
var body = await parse.json(req);

// explicit limit
var body = await parse.json(req, { limit: '10kb' });

// application/x-www-form-urlencoded
var body = await parse.form(req);

// text/plain
var body = await parse.text(req);

// either
var body = await parse(req);

// custom type
var body = await parse(req, { textTypes: ['text', 'html'] });
```

## Koa

  This lib also supports `ctx.req` in Koa (or other libraries),
  so that you may simply use `this` instead of `this.req`.

```js
// application/json
var body = await parse.json(this);

// application/x-www-form-urlencoded
var body = await parse.form(this);

// text/plain
var body = await parse.text(this);

// either
var body = await parse(this);
```

# License

  MIT
npm package: @poppinss/exception
Description: Utility to create custom exceptions
Author: Harminder Virk
Latest version: 1.2.3

# @poppinss/exception

> Create custom exceptions with error code, status, and the help description.

<br />

[![gh-workflow-image]][gh-workflow-url] [![npm-image]][npm-url] ![][typescript-image] [![license-image]][license-url]

## Introduction

The `@poppinss/exception` package provides with a base `Exception` class that can be used to create custom errors with support for defining the **error status**, **error code**, and **help description**.

```ts
import { Exception } from '@poppinss/exception'

class ResourceNotFound extends Exception {
  static code = 'E_RESOURCE_NOT_FOUND'
  static status = 404
  static message = 'Unable to find resource'
}

throw new ResourceNotFound()
```

### Anonymous error classes

You can also create an anonymous exception class using the `createError` method. The return value is a class constructor that accepts an array of values to use for message interpolation.

The interpolation of error message is performed using the [`util.format`](https://nodejs.org/api/util.html#utilformatformat-args) method.

```ts
import { createError } from '@poppinss/exception'

const E_RESOURCE_NOT_FOUND = createError<[number]>(
  'Unable to find resource with id %d',
  'E_RESOURCE_NOT_FOUND'
)

const id = 1
throw new E_RESOURCE_NOT_FOUND([id])
```

## Contributing

One of the primary goals of poppinss is to have a vibrant community of users and contributors who believes in the principles of the framework.

We encourage you to read the [contribution guide](https://github.com/poppinss/.github/blob/main/docs/CONTRIBUTING.md) before contributing to the framework.

## Code of Conduct

In order to ensure that the poppinss community is welcoming to all, please review and abide by the [Code of Conduct](https://github.com/poppinss/.github/blob/main/docs/CODE_OF_CONDUCT.md).

## License

Poppinss exception is open-sourced software licensed under the [MIT license](LICENSE.md).

[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/poppinss/exception/checks.yml?style=for-the-badge
[gh-workflow-url]: https://github.com/poppinss/exception/actions/workflows/checks.yml 'Github action'
[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
[typescript-url]: "typescript"
[npm-image]: https://img.shields.io/npm/v/@poppinss/exception.svg?style=for-the-badge&logo=npm
[npm-url]: https://npmjs.org/package/@poppinss/exception 'npm'
[license-image]: https://img.shields.io/npm/l/@poppinss/exception?color=blueviolet&style=for-the-badge
[license-url]: LICENSE.md 'license'
npm package: @poppinss/inspect
Description: Stringify Javascript values to a string or pretty print HTML
Latest version: 1.0.1

# object-inspect
> Fork of [object-inspect](https://github.com/inspect-js/object-inspect) to add support for newlines, indentation and slight modifications to the output.

Convert Javascript datatypes to their string representation. Handles every in-built data type including.

- Objects
- Arrays
- BigInt
- Symbols
- Map/WeakMap
- Set/WeakSet
- Date
- RegExp
- Object literals
- Classes
- String
- Boolean
- Number
- Null
- Undefined
- Error
- Buffer

> **This module will be re-written from scratch soon. So please, do not send any PR's for improvements. However, feel free to report issues and they will be picked up during re-write**.

## Installation

Install the package from npm registry as follows

```sh
npm install @poppinss/object-inspect
```

## Usage

```js
const { inspect } = require('@poppinss/inspect')
inspect({ foo: 'bar', bar: 'baz' })
```

## Pretty print to HTML

```js
const { stringify } = require('@poppinss/inspect')
stringify.html({ foo: 'bar', bar: 'baz' })
```

## Credits

To the original [object-inspect](https://github.com/inspect-js/object-inspect) package. 90% of the code is still the same, we have just made opinionated changes to suit it better to our needs.

I didn't created a PR for the original package, since the modifications are very specific to serve our use case.

# License
MIT
npm package: @poppinss/object-builder
Description: A convenience class to create an object with dynamic properties
Author: Harminder Virk
Latest version: 1.1.0

# @poppinss/object-builder

<br />

[![gh-workflow-image]][gh-workflow-url] [![npm-image]][npm-url] ![][typescript-image] [![license-image]][license-url]

## Installation

Install the package from the npm package registry.

```sh
# Npm
npm i @poppinss/object-builder

# Yarn
yarn add @poppinss/object-builder

# Pnpm
pnpm add @poppinss/object-builder
```

## Usage

The `ObjectBuilder` is a convenience class to create an object with dynamic properties. Consider the following example, where we wrap our code inside conditionals before adding the property `b` to the `startingObject`.

```ts
const startingObject = {
  a: 1
  // Add "b", if it exists
  ...(b ? { b } : {})
}

// OR
if (b) {
  startingObject.b = b
}
```

Instead of writing conditionals, you can consider using the Object builder fluent API.

```ts
import { ObjectBuilder } from '@poppinss/object-builder'
const builder = new ObjectBuilder({ a: 1 })

const plainObject = builder.add('b', b).toObject()
```

By default, only the `undefined` values are ignored. However, you can also ignore `null` values.

```ts
import { ObjectBuilder } from '@poppinss/object-builder'

const ignoreNullValues = true
const builder = new ObjectBuilder({ a: 1 }, ignoreNullValues)
```

Following are the available methods on the `ObjectBuilder` class.

```ts
builder.remove(key)
builder.has(key)
builder.get(key)
builder.add(key)

builder.toObject() // get plain object
```

## Contributing

One of the primary goals of Poppinss is to have a vibrant community of users and contributors who believes in the principles of the framework.

We encourage you to read the [contribution guide](https://github.com/poppinss/.github/blob/main/docs/CONTRIBUTING.md) before contributing to the framework.

## Code of Conduct

In order to ensure that the Poppinss community is welcoming to all, please review and abide by the [Code of Conduct](https://github.com/poppinss/.github/blob/main/docs/CODE_OF_CONDUCT.md).

## License

Poppinss object builder is open-sourced software licensed under the [MIT license](LICENSE.md).

[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/poppinss/object-builder/checks.yml?style=for-the-badge
[gh-workflow-url]: https://github.com/poppinss/object-builder/actions/workflows/checks.yml 'Github action'
[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
[typescript-url]: "typescript"
[npm-image]: https://img.shields.io/npm/v/@poppinss/object-builder.svg?style=for-the-badge&logo=npm
[npm-url]: https://npmjs.org/package/@poppinss/object-builder 'npm'
[license-image]: https://img.shields.io/npm/l/@poppinss/object-builder?color=blueviolet&style=for-the-badge
[license-url]: LICENSE.md 'license'
npm package: @popproject/pop-react-elasticsearch
Description: UI components for React + Elasticsearch. Create search applications using declarative components, documentation [available here](https://react-elasticsearch.raph.site/).
Author: rap2hpoutre
Latest version: 2.1.11

# React Elasticsearch

## Introduction

UI components for React + Elasticsearch. Create search applications using declarative components, documentation [available here](https://react-elasticsearch.raph.site/).

```jsx
const MySearchComponent = () => (
  <Elasticsearch url="http://example.org/search">
    <SearchBox id="mainSearch" />
    <Facet id="actors" fields={["actors"]} />
    <Facet id="releasedYear" fields={["releasedYear"]} />
    <Results
      id="results"
      items={data =>
        // Map on result hits and display whatever you want.
        data.map(item => <MyCardItem key={item._id} source={item._source} />)
      }
    />
  </Elasticsearch>
);
```

## Install

```
npm i react-elasticsearch
```

## Develop

You can test components with storybook.

```
npm run storybook
```

## Build & publish

```
npm build
npm publish
```
npm package: @poppy-ui/angular
Description: Angular specific wrapper for @poppy-ui/core
Author: Sukaato
Latest version: 0.5.6

# ComponentLibrary

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build component-library
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/component-library
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @poppy-ui/docs
Description: Pre-packaged API documentation for the Poppy docs.
Author: Sukaato
Latest version: 0.5.6

# @poppy-ui/docs

This package publishes the JSON data used to build the [Poppy API documentation](https://poppy-ui.com/docs/api).

## License

* [MIT](https://raw.githubusercontent.com/CheeseGrinder/poppy-ui/main/LICENSE)
npm package: @poppy-ui/react
Description: React specific wrapper for @poppy-ui/core
Latest version: 0.5.6

<p align="center">
  <a href="#">
    <img alt="Poppy" src="https://github.com/CheeseGrinder/poppy-ui/blob/main/.github/assets/logo.png?raw=true" width="60" />
  </a>
</p>

<h1 align="center">
  Poppy UI - React
</h1>

Poppy UI integration for React apps.

## Install
```sh
npm install @poppy-ui/react
```
*if the command fails, check the section [how to use](../../readme.md#how-to-use) in the root readme*

## Configuration
The configuration is minimal and easy
The configuration is minimal and easy
```tsx
// main.ts
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';

import poppyReact from '@poppy-ui/react';
import '@poppy-ui/react/css/core.css';
import '@poppy-ui/react/css/themes/light.always.css';

poppyReact();

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);
```

And your done, happy coding 🎉

## Contributing

See our [Contributing Guide](https://github.com/CheeseGrinder/poppy-ui/blob/main/docs/CONTRIBUTING.md).
npm package: @poppy-ui/vue
Description: Vue specific wrapper for @poppy-ui/core
Author: Sukaato
Latest version: 0.5.6

<p align="center">
  <a href="#">
    <img alt="Poppy" src="https://github.com/CheeseGrinder/poppy-ui/blob/main/.github/assets/logo.png?raw=true" width="60" />
  </a>
</p>

<h1 align="center">
  Poppy UI - Vue
</h1>

Poppy UI integration for Vue 3 apps.

## Install
```sh
npm install @poppy-ui/vue
```
*if the command fails, check the section [how to use](../../readme.md#how-to-use) in the root readme*

## Configuration
The configuration is minimal and easy
```ts
// main.ts
import poppyVue from '@poppy-ui/vue';
import { createApp } from 'vue';
import App from './App.vue';

import '@poppy-ui/vue/css/core.css';
import '@poppy-ui/vue/css/themes/light.always.css';

createApp(App)
  .use(poppyVue)
  .mount('#app');
```

And your done, happy coding 🎉

## Contributing

See our [Contributing Guide](https://github.com/CheeseGrinder/poppy-ui/blob/main/docs/CONTRIBUTING.md).
npm package: @poprank/opensea
Description: PopRank's OpenSea wrappers + transformers
Author: PopRank
Latest version: 1.0.10

# OpenSea

Hello, welcome to PopRank's OpenSea package! In this package, we have logic that gets NFT info from OpenSea, and logic that then transforms these OpenSea objects into NFTs of our own PopRank types.

Additionally, we have an example section, where you can put in a collection's slug, and then we'll pull every NFT for that collection from OpenSea, transform it, calculate rarity, and print it to an html file so you can see the end result!

Please join us in our [Discord](https://discord.com/invite/9R5RzdUbXb) too, we'd love to chat with you


## Example

In order to run the example, you need to have Node / NPM installed. To run a typescript file, we suggest installing `npx` such that you can run `npx ts-node <filename>.ts`.

There are numerous how-to's online about this that can explain it better than we can.

If you have an API key and want to use it, add a `.env` file in the `/example` folder that looks like below. Note that the API key is optional in this case, as OpenSea's /assets endpoint isn't api-key gated, specifying a key will just help with the rate limiting.
```
OPENSEA_KEY=<key>
```

Now just go to our `/example` folder, run `npx ts-node example.ts`, and voila! It'll take some time to get all NFTs if it's for a 1k+ collection, so we recommend grabbing a cup of tea.

Once it's finished running, it'll save the output in case you want to use the results multiple times without having to make hundreds of requests to OS.

We then transform it into our shape and save the result. If you want to calculate the rarity of the newly-transformed NFTs, you can go to our [@poprank/rankings](https://www.npmjs.com/package/@poprank/rankings) package, drop the JSON file there, and use our `example.ts`.
npm package: @poprank/rankings
Description: PopRank's NFT rarity and aesthetic ranking logic
Author: PopRank
Latest version: 1.1.22

# Rankings

This package holds PopRank's NFT rankings logic. Curious as to how we calculate our rarity and aesthetics scores? Well, we believe it should be transparent, so it's all laid out publicly here!

For a more hands-on example which involves pulling NFTs from OpenSea via their API and then calculating their rarity, check out the example in our [@poprank/opensea package](https://www.npmjs.com/package/@poprank/opensea)

Please join us in our [Discord](https://discord.com/invite/9R5RzdUbXb) too, we'd love to chat with you.

[Rarity Punks](https://raritypunks.io/) outlined the base of our "Trait Sum" [rarity calculation](https://storage.googleapis.com/raritypunks.appspot.com/assets/rarity.pdf), we're thankful for their stellar work and recommend you check them out!

Install via npm / yarn:

```
yarn add @poprank/rankings
```

## Example

In order to run the example, you need to have Node / NPM installed. To run a typescript file, we suggest installing `npx` such that you can run `npx ts-node <filename>.ts`.

There are numerous how-to's online about this that can explain it better than we can.

By default, our `example.ts` will use our saved collection we use for tests, in the rarity/ folder, which is an array of our `NftBase` type - NFTs with traits attached to them, but no rarity / trait counts calculated yet.

The example will calculate the rarity for the collection, saving the final rankings both in its JSON form, and a simple HTML file that'll show you visually the top 100 ranked NFTs!

You can make whatever edits you wish to our rarity algorithm and re-run the example.ts to see how it impacts the end result! We'd love to hear what you come up with :)
npm package: @poprank/sdk
Description: PopRank API client and types
Author: PopRank
Latest version: 1.0.24

<p align="center">
  <a href="https://discord.gg/9R5RzdUbXb">
    <img src="https://poprank.io/android-chrome-192x192.png" alt="PopRank" />
  </a>
</p>
<p align="center">
  <a href="https://discord.gg/9R5RzdUbXb">
    <img src="https://img.shields.io/badge/-Join%20PopRank%20Discord-%235865F2?logo=discord&logoColor=white" alt="Join PopRank Discord">
  </a>
  &nbsp;
  <a href="https://twitter.com/_poprank">
    <img src="https://img.shields.io/badge/-Follow%20PopRank%20Twitter-%2300acee?logo=twitter&logoColor=white"
      alt="Follow PopRank Twitter">
  </a>
</p>

# PopRank SDK: API Client & Types

The PopRank SDK contains the building blocks needed to interact with and build on top of PopRank. In fact, the PopRank team uses the SDK to power https://poprank.io, [`@poprank/rankings`](https://github.com/poprank/rankings), [`@poprank/opensea`](https://github.com/poprank/opensea), and various other offerings.

The SDK is comprised of two main sections: [`client`](https://github.com/poprank/sdk/blob/main/src/client.ts) and [`types`](https://github.com/poprank/sdk/tree/main/src/types).

## Getting Started

### Installation

Install the NPM package.

```
yarn add @poprank/sdk
```

### Client Setup

Import, configure, and instantiate the PopRank API client.
```
import { ClientConfig, PopRankClient } from '@poprank/sdk';

const config: ClientConfig = { // optional
    timeout: 10_000
};

const client = new PopRankClient(config);
```

_Note:_ `ClientConfig` is a pass-through import of `axios`'s `AxiosRequestConfig`. View all config options [here](https://axios-http.com/docs/req_config).

### Make API Calls

Make calls to the PopRank API with the newly instantiated PopRank API client.

```
const nft = await client.getNFT('thewickedcraniums', 420);
```

All client methods can be found [here](https://github.com/poprank/sdk/blob/main/src/client.ts). For in-depth documentation on all the PopRank endpoints, see our [API documentation](https://poprank.readme.io/reference/api-overview).

### Reference PopRank Models

You can also directly reference PopRank types/models, like so.

```
const nft: Nft = {
    collection: 'thewickedcraniums',
    id: '420',
    rating: 1196,
    ...
}
```

All types are found within the [types directory](https://github.com/poprank/sdk/tree/main/src/types).

## Support


As always, don't hesitate to reach out to the PopRank team on [Twitter](https://twitter.com/_poprank) or [Discord](https://discord.gg/9R5RzdUbXb) if you have any questions!
npm package: @poprize/plugin-vite
Description: Poprize react with SWC
Author: Jonatas Borges
Latest version: 1.2.2

# @poprize/plugin-vite [![npm](https://img.shields.io/npm/v/@poprize/plugin-vite)](https://www.npmjs.com/package/@poprize/plugin-vite)

Speed up your Vite dev server with [SWC](https://swc.rs/)

- ✅ A fast Fast Refresh (~20x faster than Babel)
- ✅ Enable [automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

## Installation

```sh
yarn @poprize/plugin-vite --dev
```

## Usage

```ts
import { defineConfig } from "vite";
import react from "@poprize/plugin-vite";

export default defineConfig({
  plugins: [react()],
});
```

## Caveats

This plugin is only used in development and aims to be kept simple to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:

- [useDefineForClassFields](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier) is always activated, as this matches the current ECMAScript spec
- `jsx runtime` is always `automatic`
- In development:
  - esbuild is disabled, so the [esbuild configuration](https://vitejs.dev/config/shared-options.html#esbuild) has no effect
  - `target` is `es2020`
  - JS files are not transformed
  - tsconfig is not resolved, so properties other than the ones listed above behaves like TS defaults

## Changing the JSX import source

You can use the jsxImportSource option like this:

```ts
import { defineConfig } from "vite";
import react from "@poprize/plugin-vite";

export default defineConfig({
  plugins: [react({ jsxImportSource: "@emotion/react" })],
});
```

## Consistent components exports

For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.

You can catch mistakes and get more detailed warning with this [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh).

## Migrating from `vite-plugin-swc-react-refresh`

The documentation for the previous version of the plugin is available in the [v2 branch](https://github.com/vitejs/vite-plugin-react-swc/tree/v2)

To migrate, see this [changelog](https://github.com/vitejs/vite-plugin-react-swc/releases/tag/v3.0.0-beta.0)