cometkim / vite-plugin-relay-lite Goto Github PK

View Code? Open in Web Editor NEW

34.0 3.0 5.0 7.09 MB

Vite plugin for more convenient Relay experience.

License: MIT License

TypeScript 100.00%

graphql relay vite vite-plugin

vite-plugin-relay-lite's Introduction

vite-plugin-relay-lite

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

Use with caution.

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

yarn add -D vite graphql vite-plugin-relay-lite

# Assumes the project already have relay-compiler and its configuration

// 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.

{
  plugins: [
    relay({
      relayConfig: 'path/to/relay.js'
    })
  ]
}

Or pass config object.

{
  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.

{
  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.

{
  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, which was originally introduced from a gist by Samuel Cormier-Iijima

LICENSE

MIT

vite-plugin-relay-lite's People

Contributors

Stargazers

Watchers

Forkers

bglgwyng xiniha choongkyu emerzh bo-carrot

vite-plugin-relay-lite's Issues

Update Vite peer dependency to including ^3.0.0

Current package indicates "vite": "^2.0.0" as its peer dependency, but since it is working well and comprehensively tested in Vite 3.x as well, I suggest modifying it to "vite": "^2.0.0 || ^3.0.0".

As of now this package constantly showing unmet peer dependency warnings with Vite 3.x.

False positive matches on compileable files

We use /graphql as the endpoint of our GraphQL server. There was a file that used a tokenized string to build a URL path:

const path = `${server}/graphql`

Since the pattern matcher just looks for `graphql``, this file, which did not actually do any graphql calls, was getting picked up and causing errors.

The workaround solution was easy, const path = server + '/graphql' but I thought I'd let you know of the use case. Perhaps it's best to wrap the compile() call in a try/catch? If it don't compile, let the compiler yell about it and continue on?

Broken Tag detection

Hello @cometkim , while trying to update to v.0.6

I noticed an issue in the new query detection

we had a (ok, strange)

	const result = useFragment(
		spaceOrGroup.__typename === 'Space'
			? graphql`
					fragment SearchResult_space on Space {
						name
						thumbnailImage
						color
						spaceGroup {
							name
						}
					}
			  `
			: graphql`
					fragment SearchResult_spaceGroup on SpaceGroup {
						name
						color
						thumbnailImage
					}
			  `,
		spaceOrGroup,
	)

but those weren't recognized as needed ( with prod builds, ok with dev)
i'have extracted the fragments and now it's ok

Broken parsing with comments

Sorry @cometkim /o\

i've noticed some new issues here with dd801c5#diff-1abfb4d434506bafbdaf2c4b6274e292de3eb39ddf3845fc3b970fa5daf8fc00R30

i got :

// When creating a story from a space
const spaceFragment = graphql`
	fragment useStoryEditor_space on Space {
		id
		name
		...SpaceSquare_space
		spaceGroup {
			# Needed for the space pre-selection
			name
			id
		}
		actions {
			postStory
			postDraftStory
		}
		...StorySpaceDialog_space
	}
`

thus prefix looks like

prefix: '\n// When creating a story from a space\n\nconst spaceFragment = ',

and thus lead to unparsed query,
the remove comment part doesn't really work here.

I guess it's better to leave the ternary as it was than this .. (this seems more legit usage)

Support sourcemap

The plugin invalidate sourcemaps due to do not parse entire syntax. But it would be nice if you could find a way to get a valid sourcemap with minimal parsing.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency @types/node to v20.13.0

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

.github/workflows/release.yml

actions/checkout v4

actions/setup-node v4

cometkim/yarn-changeset-action v1

npm

package.json

cosmiconfig ^9.0.0

kleur ^4.1.5

magic-string ^0.30.1

@changesets/cli ^2.27.1

@types/common-tags ^1

@types/node ^20.0.0

common-tags ^1.8.2

graphql ^16.6.0

graphql-15 15.0.0

nanobundle ^2.0.0

typescript ^5.0.0

vite ^5.2.10

vitest ^1.5.0

graphql ^15.0.0 || ^16.0.0

vite ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0

node >= 18.0.0

yarn 4.2.2

Check this box to trigger a request for Renovate to run again on this repository

Few The definition of Fragment appears to have changed. Run `relay-compiler`

Hello @cometkim 👋

I notice a few errors like this:

The definition of 'SpaceGroup_spaceGroup' appears to have changed. Run relay-compiler
of course runing the compiler or the plugin doesn't change anything.

looking at the generated file, it seems that the file is well generated.

not sure where this could come from...

i noticed that it might be some sort of difference between the "hash" and the @generated SignedSource
and the plugin alterning between one and the other? but this is a wild guess and i'm really unsure...

if you have any precise idea ?

thanks 🙏

Should I still use `babel-plugin-relay/macro`?

Should I still use babel-plugin-relay/macro? Will the plugin replace it with its own version? Or should I do something different?