Open hash-bang opened 2 years ago
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: '',
// ...
}
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))
.
pipeline operation(|>)
of Vue SFC <template>
, the whole step will be:vue-template-compiler
to distinguish |>
from |
.The step 1
can be achieved easily like comment above.
But the step 2
, we have two solution:
|>
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?
Hi, I just publish beta@v1.0.9-beta-0
.
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
})
pipeline operator
for SFC <template>
, because the |>
operator conflict with to Vue.js Filter Syntax.|>
from |
.
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
... into the plugin stack but suspect there is more to the RegExp matching process to correctly detect the
|>
code structure.Happy to if you could point me in the right direction on where to start.
Current behaviour
Expected behavior
Compiles to native JS within template as the syntax breaking
vm._f(\"> app.filter.number\")
inline function.