SWC plugin for relay
npm install @swc/plugin-relay#### Setup
``sh`
npm install --save-dev @swc/plugin-relay @swc/core
The below shows how to configure @swc/plugin-relay and pass the options to Webpack:
Create an .swcrc.js file like the below:
`js
// .swcrc.js
module.exports = {
jsc: {
experimental: {
plugins: [
[
"@swc/plugin-relay",
{
rootDir: __dirname,
artifactDirectory: "src/__generated__",
language: "typescript",
eagerEsModules: true,
},
],
// Or if you want to use multiple projects
[
"@swc/plugin-relay",
{
projects: [
{
rootDir: path.resolve(__dirname, '../project1'),
},
{
rootDir: path.resolve(__dirname, '../project2'),
}
],
language: "typescript",
eagerEsModules: true,
},
],
],
},
parser: {
syntax: "typescript",
tsx: true,
},
transform: {
react: {
runtime: "automatic",
},
},
},
};
`
And then update your swc-loader Webpack config:
`js
const swcConfig = require("./.swcrc.js")
// ...
{
include: path.resolve("./src"),
test: /\.ts$/,
use: [
{
loader: "swc-loader",
options: swcConfig,
},
],
}
`
> Note: We're using a .swcrc.js file extension up above and importing the config directly because Relay needs access to __dirname, which can't be derived from the default JSON parsed from .swcrc.
#### Output import paths
By default, @swc/plugin-relay will transpile import paths based on the language option.outputFileExtension
You can use to change the file extension of the generated import paths.
`js`
plugins: [
[
"@swc/plugin-relay",
{
rootDir: __dirname,
artifactDirectory: "src/__generated__",
language: "typescript",
eagerEsModules: true,
outputFileExtension: "js",
},
],
],
In this example typescript graphql files will output transpiled import path of javascript ending with .js`.
${CHANGELOG}