@babel/plugin-proposal-pipe-operator in .babelrc causes TS error

[mimshwright]

Current Behavior

I've added @babel/plugin-proposal-pipeline-operator to my .babelrc file but it doesn't seem to be recognized.

Setup for Repro:

1. npx tsdx create repro-913
2. Choose basic template
3. yarn add --dev @babel/plugin-proposal-pipeline-operator (tried this with and without adding peer dependency @babel/core)
4. Add the following test code to src/index.ts

   const double = x => x*2;
   const increment = x => x+1;
   const doubleNext = x => x |> increment |> double

5. Create a file in the root folder called .babelrc and add the following plugin:

   {
     "plugins": [
       ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]
     ]
   }

6. npx tsdx build

Result is: syntax error TS1109: Expression expected.

I see the same result when using @babel/plugin-proposal-partial-application but when I try to use @babel/plugin-proposal-nullish-coalescing-operator it seems to work fine.

Expected behavior

Should load this plugin.

Suggested solution(s)

It sounds like there may be other issues affecting importing of .babelrc plugins. I'm wondering if perhaps there is a way to make the plugins more editable... perhaps an option to generate tsdx's config files in the main directory when the project is created? It could also have to do with this particular plugin requiring a "proposal" property be set and maybe that's not being merged correctly?

Other info

from package.json

"devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-partial-application": "^7.12.1",
    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",

Your environment

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 130.29 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 14.13.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 86.1.15.72
    Firefox: 72.0.1
    Safari: 14.0
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1
    typescript: ^4.0.3 => 4.0.3
  npmGlobalPackages:
    tsdx: 0.14.1

Note, I've tried this also on node v.12.19.0 with the same results.

[mimshwright]

@babel/plugin-proposal-nullish-coalescing-operator DOES work. I see that it's included in node_modules/tsdx/node_modules in my project and the other ones are not.

[agilgur5]

@mimshwright there are a few (passing) integration tests for custom Babel plugins, so would need a minimal reproduction to determine if this is really a TSDX issue.

This may be similar to #543, which points to a general Babel problem in that plugin order matters to Babel (which is something Rome aims to solve).

I'm wondering if perhaps there is a way to make the plugins more editable...

There are #634 and #383 around this topic. As those both mention, it's much, much easier said than done as it's a very breaking change and some of the plugins are configured by TSDX flags or Rollup output formats and so can't even be extracted to a preset either. There's a lot more work needed to get this done.
The end goal of #634 is that if you have a babelrc, TSDX will use that without regard to its own internal plugins (unless @tsdx/babel-preset is explicitly used). That would make plugin order fully configurable then.

[mimshwright]

@agilgur5 I've updated the issue with more details on how to reproduce. 👍

[mimshwright]

hmm. i wonder if ultimately babelPluginTsdx could be completely replaced with a babel-preset and you could just include that in a static .babelrc when you generate the project 🤔

[agilgur5]

@agilgur5 I've updated the issue with more details on how to reproduce. 👍

Thanks, this produces an error which is quite different from your original report of it "not being recognized"

Result is: syntax error TS1109: Expression expected.

Yea this makes more sense. Pretty sure this is because those proposals introduce new syntax which is not valid TypeScript. I don't believe you could type-check this with tsc either.

hmm. i wonder if ultimately babelPluginTsdx could be completely replaced with a babel-preset and you could just include that in a static .babelrc when you generate the project 🤔

I wrote about this in a good bit of detail with links in my first comment. But per my above paragraph, this seems unrelated to that.

[agilgur5]

@babel/plugin-proposal-nullish-coalescing-operator DOES work. I see that it's included in node_modules/tsdx/node_modules in my project and the other ones are not.

Those are two unrelated pieces. Nullish Coalescing is already supported by TypeScript. Since TSDX also uses @babel/preset-env (which depends on plugin-proposal-nullish-coalescing-operator), the Babel plugin is also present in TSDX's node_modules tree.
But as I said in my first comment there are (passing) integration tests for using custom Babel plugins. You just can't use a plugin that adds a new syntax that isn't valid TypeScript because then you're no longer writing TypeScript.

[mimshwright]

Well, now it all makes sense. Thank you!