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

mimshwright commented 3 years ago

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:

npx tsdx create repro-913
Choose basic template
yarn add --dev @babel/plugin-proposal-pipeline-operator (tried this with and without adding peer dependency @babel/core)

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

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

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

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.

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

mimshwright commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

Well, now it all makes sense. Thank you!

jaredpalmer / tsdx