[Feature] Pipeline operator support

[hash-bang]

Are there any plans to add support for the Babel pipeline operator proposal?

We have a (pretty huge) Vue@2 project and would like a way to support these as we migrate to Vue@3.

I had a look at the source and tried appending

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

... into the plugin stack but suspect there is more to the RegExp matching process to correctly detect the |> code structure.

• [X] Would you like to work on a fix?

Happy to if you could point me in the right direction on where to start.

Current behaviour

<!-- In a template: -->
There are
{{myBigNumber |> app.filter.number}}
issues pending,
{{myBigNumber |> v => app.filter.number(v, {comma: ','})}}
of these are closed

Expected behavior

Compiles to native JS within template as the syntax breaking vm._f(\"> app.filter.number\") inline function.

[JuniorTour]

Sounds great! I think your requirement is babel option customization. I'm also planning to support this feature.

---

The usage may be:

// vue.cconfig.js
.tap(options => {
  options.babelOptions = {
    plugins: [
      ["@babel/plugin-proposal-pipeline-operator", { 	"proposal": "fsharp" }]
    ]
  }
  options.compiler = require('vue-template-babel-compiler')
    return options
  })

How do you think of this?

If you have interest to make an Pull Request, I'm happy to publish a beta version for you.

You can achieve this by change: https://github.com/JuniorTour/vue-template-babel-compiler/blob/75eef4d8aaa53a8d7a7ce45cc43284fcbddae899/src/renderCompiler.js#L15-L18

to:

import merge from 'a-npm-pkg'

const output = babel.transformSync(code, merge(
  options.babelOptions,
  {
    filename: '',
    // ...
  }

[JuniorTour]

Besides, even if we add @babel/plugin-proposal-pipeline-operator plugin, there will still be an error: [Vue warn]: Failed to resolve filter: > filterNumber.

Because the vue-template-compiler(not this repo, the official compiler) will compile: {{myBigNumber |> filterNumber}} to Vue.js Filter Syntax: _vm._s(_vm._f("> filterNumber")(_vm.myBigNumber)).

---

So in order to support pipeline operation(|>) of Vue SFC <template>, the whole step will be:

1. Support babel option customization (comment above).
2. Modify vue-template-compiler to distinguish |> from |.

The step 1 can be achieved easily like comment above.

But the step 2, we have two solution:

1. Make a pull request to the official compiler, wait for merge.
2. Copy the official compiler source code to this repo, and modify its logic to to distinguish |> from |.

I prefer the 2. Copy the official compiler source code solution, it is more flexible.

But it will be a heavy workload.

I'm still thinking about it, What's your opinion?

[JuniorTour]

Hi, I just publish [email protected].

Install it by:

yarn add vue-template-babel-compiler@beta -D
// or
npm install vue-template-babel-compiler@beta -D

This version will allow us to customize babel options for this compiler.

You can refer to Usage.md#1-babel-options-customization for usage.

For this pipeline operator plugin case, you can option like this:

// vue.cconfig.js
.tap(options => {
  options.compilerOptions.babelOptions = {
    plugins: [
      ["@babel/plugin-proposal-pipeline-operator", { 	"proposal": "fsharp" }]
    ]
  }
  options.compiler = require('vue-template-babel-compiler')
  return options
})

But this will still NOT allow to use pipeline operator for SFC <template>, because the |> operator conflict with to Vue.js Filter Syntax.

We need Modify vue-template-compiler to distinguish |> from |.