Merge pull request #424 from tobias-tengler/tte/fix-plugin

Support Vite 3 and latest babel-plugin-relay

.gitattributes

@@ -0,0 +1 @@
+*.graphql.ts eol=lf

.github/dependabot.yml

@@ -11,6 +11,11 @@ updates:
  interval: "daily"
 
  - package-ecosystem: "npm"
- directory: "/example"
+ directory: "/examples/vite-2"
+ schedule:
+ interval: "daily"
+
+ - package-ecosystem: "npm"
+ directory: "/examples/vite-3"
  schedule:
  interval: "daily"

.github/workflows/ci.yml

@@ -15,22 +15,24 @@ jobs:
  uses: actions/checkout@v2
  - name: Setup Node.js
  uses: actions/setup-node@v2
- # Note: This is disabled because it was causing issues with installation of the example application
- # - name: Use Node Modules Cache
- # uses: actions/cache@v2
- # with:
- # path: "**/node_modules"
- # key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: latest
  - name: Install Dependencies for Vite Plugin Relay
- run: yarn install --frozen-lockfile
+ run: pnpm i
  - name: Install Playwright
  run: npx playwright install --with-deps
  - name: Build Vite Plugin Relay
- run: yarn build
- - name: Install Dependencies for Example Site
- run: yarn --cwd ./example install --frozen-lockfile
- - name: Test Example Site
- run: yarn --cwd ./example test
+ run: pnpm build
+ - name: Install Dependencies for Vite 3 Example Site
+ run: pnpm --filter example-vite-3 i
+ - name: Test Vite 3 Example Site
+ run: pnpm --filter example-vite-3 test
+ - name: Install Dependencies for Vite 2 Example Site
+ run: pnpm --filter example-vite-2 i
+ - name: Test Vite 2 Example Site
+ run: pnpm --filter example-vite-2 test
 
  lint:
  runs-on: ubuntu-latest
@@ -39,12 +41,11 @@ jobs:
  uses: actions/checkout@v2
  - name: Setup Node.js
  uses: actions/setup-node@v2
- - name: Use Node Modules Cache
- uses: actions/cache@v2
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2.0.1
  with:
- path: "**/node_modules"
- key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+ version: latest
  - name: Install Dependencies for Vite Plugin Relay
- run: yarn install --frozen-lockfile
+ run: pnpm i
  - name: Lint
- run: yarn lint
+ run: pnpm lint

.github/workflows/release.yml

@@ -12,10 +12,14 @@ jobs:
  uses: actions/checkout@v2
  - name: Setup Node.js
  uses: actions/setup-node@v2
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: latest
  - name: Install Dependencies for Vite Plugin Relay
- run: yarn install --frozen-lockfile
+ run: pnpm i
  - name: Build Vite Plugin Relay
- run: yarn build
+ run: pnpm build
  - name: Publish to NPM
  run: |
  npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}

.gitignore

@@ -58,5 +58,4 @@ typings/
 .env.test
 
 # Build / generate output
-dist
-example/dist
+dist

.prettierignore

@@ -58,4 +58,8 @@ typings/
 .env.test
 
 # Build / generate output
-dist
+dist
+
+pnpm-lock.yaml
+
+__generated__

README.md

@@ -5,29 +5,25 @@
 
 Add relay support to your [Vite](https://vitejs.dev) projects.
 
-Created with the help of [@Brendonovich](https://github.com/Brendonovich) and thanks to [@kesne](https://github.com/kesne) for adding [pnpm](https://pnpm.io) support.
+❤️ Special thanks to:
+
+- [@Brendonovich](https://github.com/Brendonovich) for general help
+- [@kesne](https://github.com/kesne) for adding [pnpm](https://pnpm.io) support
+- [@tobias-tengler](https://github.com/tobias-tengler) for adding Vite 3 support
 
 ## Usage
 
-Add `vite-plugin-relay` and `relay` to your project.
+Follow Relay's guide on [how to add Relay to your project](https://relay.dev/docs/getting-started/installation-and-setup/).
 
-```bash
-yarn add react-relay relay-runtime
-yarn add -D relay-compiler relay-config vite-plugin-relay
-```
+> ⚠️ Note: Install `babel-plugin-relay` (>= 13.0.1) as devDependencies as instructed, but skip its configuration. `vite-plugin-relay` will invoke the babel plugin for you!
 
-Next setup NPM scripts in the `package.json`. One is required for Vite and the other for the Relay Compiler
+Add `vite-plugin-relay` to your `devDependencies`:
 
-```json
-"scripts": {
- "dev": "vite",
- "relay": "relay-compiler"
-},
+```bash
+yarn add vite-plugin-relay -D
 ```
 
-Next setup `relay.config.js` more information about this can be found in the [official relay docs](https://relay.dev/docs/getting-started/installation-and-setup/#set-up-relay-with-a-single-config-file).
-
-Finally add `vite-plugin-relay` to your Vite configuration (`vite.config.ts`).
+Add `vite-plugin-relay` to your Vite configuration (`vite.config.ts` or `vite.config.js`):
 
 ```typescript
 import { defineConfig } from "vite";
@@ -38,8 +34,28 @@ export default defineConfig({
 });
 ```
 
+Configure `relay-compiler` to output artifacts with `export default` syntax, by setting `eagerEsModules` to `true`:
+
+```json
+{
+ "relay": {
+ "src": "./src",
+ "schema": "./src/schema.graphql",
+ "language": "typescript",
+ "eagerEsModules": true,
+ "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"]
+ }
+}
+```
+
 Now your project is setup to use Relay with Vite!
 
+## How this plugin works
+
+Under the hood we are inovking the official `babel-plugin-relay`. This ensures that our plugin and `babel-plugin-relay` do not get out of sync over time and also reduces the maintainance costs of this project.
+
+Since v13 `babel-plugin-relay` automatically gets its configuration from either the `package.json`, `relay.config.js` or `relay.config.json`, so our plugin also doesn't have to expose a configuration API.
+
 ## Common Issues
 
 ### `Uncaught ReferenceError: global is not defined`
@@ -61,3 +77,15 @@ if (typeof (window as any).global === 'undefined') {
  (window as any).global = globalThis;
 }
 ```
+
+## Contributing
+
+```
+git clone ...
+pnpm i
+# If you have never run Playwright run `npx playwright install` to setup your system.
+cd examples/vite-3
+pnpm dev
+
+pnpm format # Do this before doing a commit
+```