Skip to content

Port Relay Babel plugin to SWC #30805

@timneutkens

Description

@timneutkens

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    SWCRelated to minification/transpilation in Next.js.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions