feat(relay): Add outputFileExtension option

[JulienKode]

Description

Feature

In this PR we add outputFileExtension parameter in the config that can be:

• ts
• js
• undefined

When it's undefined we do the same behaviour as now which is controlled by language parameter
When it's configured we use the outputFileExtension parameter to specify which extension to use in the transpiled path import

Example of usage:

 [
          '@swc/plugin-relay',
          {
            rootDir: __dirname,
            artifactDirectory: './src/relay/__generated__',
            eagerEsModules: true,
            outputFileExtension: 'js'
          },
],

Initial issue

We are migrating from babel to swc and currently our babel plugin

The output in dist are javascript esm and instead of having this

import __stuffFragment1 from "../../../relay/__generated__/stuffFragment.graphql";
import { graphql } from "react-relay";
export const stuffFragment = __stuffFragment1;

we have this:

import __stuffFragment1 from "../../../relay/__generated__/stuffFragment.graphql.ts";
import { graphql } from "react-relay";
export const stuffFragment = __stuffFragment1;

Basically it add .ts at the end but our files are javascript transpiled files

• I know it's due to default fallback to ts language:

  plugins/packages/relay/src/lib.rs

  Line 42 in 91fabf8

  .map_or(RelayLanguageConfig::TypeScript, |v| v.try_into().unwrap());

• I know by default ts language add .ts at the end:

  plugins/packages/relay/transform/src/lib.rs

  Line 165 in 91fabf8

  format!("{}.graphql.ts", definition_name)

Is it a configuration issue on our side or a plugin issue that by default transpilation import path should not have extensions ? If it's a configuration issue sorry in advance I thought the inputs were the same as the babel plugin

If we consider it as a bug I'll obviously fix this PR and update test, otherwise I'll close it and change the config on my side

Swc config:

const config = {
  jsc: {
    baseUrl: 'src',
    parser: {
      syntax: 'typescript',
      tsx: true,
    },
    target: 'esnext',
    paths: {
      '@xxx/*': ['*'],
    },
    experimental: {
      plugins: [
        [
          '@swc/plugin-relay',
          {
            rootDir: __dirname,
            artifactDirectory: './src/relay/__generated__',
            eagerEsModules: true,
          },
        ],
      ],
    },
  },
  test: '(.ts|.tsx|.js|.jsx)',
};

previous babel config for relay:

  plugins: [
    [
      'relay',
      {
        artifactDirectory: './src/relay/__generated__',
      },
    ],

Note: We cannot put javascript language type as our input files are typescript

found by @narajaon