Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cometkim/vite-plugin-relay-lite
Vite plugin for more convenient Relay experience.
https://github.com/cometkim/vite-plugin-relay-lite
graphql relay vite vite-plugin
Last synced: 19 days ago
JSON representation
Vite plugin for more convenient Relay experience.
- Host: GitHub
- URL: https://github.com/cometkim/vite-plugin-relay-lite
- Owner: cometkim
- License: mit
- Created: 2022-07-12T21:37:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T09:56:28.000Z (7 months ago)
- Last Synced: 2024-05-01T15:35:39.710Z (7 months ago)
- Topics: graphql, relay, vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 6.45 MB
- Stars: 34
- Watchers: 3
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-relay-lite
[](https://www.npmjs.com/package/vite-plugin-relay-lite)
[](https://www.npmjs.com/package/vite-plugin-relay-lite)
[](#license)
Vite plugin for more convenient Relay experience. **With no Babel dependencies!**
What this plugin does for you:
- Generates artifacts on code changes
- Transform codes without Babel plugin
- Respects project's Relay config file
> [!WARNING]
> This plugin uses naive RegExp match instead of performing correct parsing for JavaScript.
> So it can fail on syntax that goes beyond the scope of a regular language. (e.g. queries in multiline comments)
## Installation
```bash
yarn add -D vite graphql vite-plugin-relay-lite
# Assumes the project already have relay-compiler and its configuration
```
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import relay from 'vite-plugin-relay-lite';
export default defineConfig({
plugins: [
relay(),
],
});
```
## Customize Options
### Customize Relay Config
Plugin will automatically load the Relay config file.
You can use custom config file path.
```js
{
plugins: [
relay({
relayConfig: 'path/to/relay.js'
})
]
}
```
Or pass config object.
```js
{
plugins: [
relay({
relayConfig: {
// ...relay config
}
})
]
}
```
### ES Module Output
Plugin respects the `eagerEsModules` option in the Relay config, so the default output format is `commonjs`.
However, using CommonJS in Vite projects may require additional config to transpile, and it's not recommended to use. Consider to set `eagerEsModules` to `true` in your Relay config, or set `module: 'esmodule'` in plugin options as you require.
### Relay Compiler Integration
Plugin automatically runs `relay-compiler` before transform, so it should be installed in the project.
Or you can set the `codegen` option to `false` to disable it.
```js
{
plugins: [
relay({
codegen: false
})
]
}
```
Plugin respects the `codegenCommand` option in the Relay config, it uses `relay-compiler` if not set.
### (Experimental) Omit `graphql` tag imports
You can set `omitTagImport: true` to omit import/require statements for the `graphql` tag.
```js
{
plugins: [
relay({
omitTagImport: true
})
]
}
```
This might causes the Vite build to fail, allowing early detection of potential transform errors.
## Acknowledgements
The compilation has ported from [esbuild-plugin-relay](https://github.com/smartvokat/esbuild-plugin-relay), which was originally introduced from [a gist by Samuel Cormier-Iijima](https://gist.github.com/sciyoshi/34e5865f2523848f0d60b4cdd49382ee)
## LICENSE
MIT