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
+```