Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Port Relay Babel plugin to SWC #30805

Closed
timneutkens opened this issue Nov 2, 2021 · 9 comments
Closed

Port Relay Babel plugin to SWC #30805

timneutkens opened this issue Nov 2, 2021 · 9 comments
Labels
SWC Related to minification/transpilation in Next.js.

Comments

@timneutkens
Copy link
Member

timneutkens commented Nov 2, 2021

@hanford has done a bunch of research into porting babel-plugin-relay. It comes down to this fairly simple transform: https://gist.github.com/hanford/10401629eb7d82d47b275f59356d86f5 so I think we can port it to SWC relatively easily without having to implement a GraphQL parser.

Message from @hanford:

All babel-plugin-relay does, is look for `graphql``` tagged template literals, performs a regex to extract the name of the operation and then generates appends ImportDefaultSpecifier with that name.

  • Before babel-plugin-relay running:

    function MyQueryRenderer () {
      return (
        <QueryRenderer
        	query={graphql`
    				query SearchUserQuery {
    					findUser {
    						name
    					}
    				}
    		`}
    	/>
      )
    }
  • After babel-plugin-relay runs:

    import graphql__a6767a3b from "dazzle-types/SearchUserQuery.graphql";
    
    function MyQueryRenderer () {
      return (
          <QueryRenderer
              query={graphql__a6767a3b}
          />
      );
    }

In addition to the babel plugin I created, I also have a JSCodeshift that I've been running on our frontend to then allow me to begin playing around with SWC.

The source for the JSCodeshift is below:

https://gist.github.com/hanford/003f07533f7bfc8af7fc90a838f0e963

@timneutkens timneutkens added kind: story SWC Related to minification/transpilation in Next.js. labels Nov 2, 2021
@timneutkens timneutkens changed the title Port Relay Babel plugin Port Relay Babel plugin to SWC Nov 2, 2021
@AndrewIngram
Copy link

AndrewIngram commented Nov 15, 2021

FYI the links above point to notion pages rather than gists

@AndrewIngram
Copy link

Something to bare in mind is that because the transforms generate an import declaration, any such plugin would need to be able to read a project's Relay configuration to determine where the artifactDirectory is. The default is a __generated__ directory that's a sibling to whatever module is being transformed, but it could also be a globally configured location.

@rrdelaney
Copy link

In JS-world artifactDirectory is pretty easy to get via the relay-config package:

> require('relay-config').loadConfig().artifactDirectory
'src/queries/__generated__'`

@tony
Copy link

tony commented Nov 26, 2021

The next stable release of relay v13 will be in rust (their checklist, compiler/)

In the next major Relay Release (v13) the new rust version of the compiler will be the only version.
- 2 weeks ago in Bye, JS Compiler, we love you!@4467ae8

Can relay being in rust benefit this effort in any way?

@timneutkens
Copy link
Member Author

Can relay being in rust benefit this effort in any way?

As far as I'm aware the answer is no because the compiler would already be run next to having the transform.

@wongmjane
Copy link
Contributor

fyi: relay-config has been removed

facebook/relay#3677

@aalises
Copy link

aalises commented Jan 3, 2022

🤸‍♂️ What's the status on this? waiting for it to finally move to SWC.

@tbezman
Copy link
Contributor

tbezman commented Jan 13, 2022

@aalises and other folks in this thread. I tried adding support for Relay in #33240 . Can y'all check it out and give feedback?

kodiakhq bot pushed a commit that referenced this issue Jan 26, 2022
## Feature

Implements feature requested in #30805. 

A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation. 

### How it works?
Finds all  `graphql` tagged template experssions and replaces them with `require`s to the file generated by Relay.

### Where I need help
- I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.
- Is there any performance overhead to many duplicate usages of `require`? I imagine there's a cache in place but I want to be sure.
- I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
  - I haven't added any docs since this is an experimental API.

## Documentation / Examples

You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.

### Usage
In your `next.config.js`
```js
module.exports = {
  experimental: {
    relay: {
      language: 'typescript', // or 'javascript`
      artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
    }
  }
}
```


Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022
## Feature

Implements feature requested in vercel#30805. 

A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation. 

### How it works?
Finds all  `graphql` tagged template experssions and replaces them with `require`s to the file generated by Relay.

### Where I need help
- I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.
- Is there any performance overhead to many duplicate usages of `require`? I imagine there's a cache in place but I want to be sure.
- I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
  - I haven't added any docs since this is an experimental API.

## Documentation / Examples

You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.

### Usage
In your `next.config.js`
```js
module.exports = {
  experimental: {
    relay: {
      language: 'typescript', // or 'javascript`
      artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
    }
  }
}
```


Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
SWC Related to minification/transpilation in Next.js.
Projects
None yet
Development

No branches or pull requests

7 participants