Skip to content

Commit ef55401

Browse files
authored
Remove filters (#97)
* remove filters * add pipeline operator as an alternative * Update 0000-remove-filters.md (#99) * Rename 0000-remove-filters.md to 0015-remove-filters.md
1 parent d9ae979 commit ef55401

File tree

1 file changed

+62
-0
lines changed

1 file changed

+62
-0
lines changed

active-rfcs/0015-remove-filters.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
- Start Date: 2019-11-12
2+
- Target Major Version: 3.x
3+
- Reference Issues: N/A
4+
- Implementation PR: N/A
5+
6+
# Summary
7+
8+
Remove support for [filters](https://vuejs.org/v2/guide/filters.html).
9+
10+
# Basic example
11+
12+
``` html
13+
<!-- before -->
14+
{{ msg | format }}
15+
16+
<!-- after -->
17+
{{ format(msg) }}
18+
```
19+
20+
# Motivation
21+
22+
- Filters' functionality can be easily replicated with method calls or computed properties so it provides primarily syntactical rather than practical value.
23+
24+
- Filters requires a custom micro syntax that breaks the assumption of expressions being "just JavaScript" - which adds to both learning and implementation costs. In fact, it conflicts with JavaScript's own bitwise or operator (`|`) and makes expression parsing more complicated.
25+
26+
- Filters also create extra complexity in template IDE support (again due to them not being really JavaScript).
27+
28+
# Drawbacks
29+
30+
- Filters read a bit nicer when chaining multiple filters vs. calling multiple functions:
31+
32+
``` js
33+
msg | uppercase | reverse | pluralize
34+
// vs
35+
pluralize(reverse(uppercase(msg)))
36+
```
37+
38+
However in practice we find chaining with a count beyond two to be fairly rare, so the readability loss seems acceptable.
39+
40+
- Individually importing or defining methods can be a bit more boilerplate-y than globally registered filters. However, global filters are not fundamentally different from registering specially named global helpers on `Vue.prototype`. Such global registration comes with trade-offs: they make the code dependency relationships less explicit, and also makes them difficult to provide type inference for.
41+
42+
# Alternatives
43+
44+
There is currently a stage 1 proposal for adding the [Pipeline Operator](https://github.com/tc39/proposal-pipeline-operator) to JavaScript, which provides largely similar syntactical convenience:
45+
46+
``` js
47+
let transformedMsg = msg |> uppercase |> reverse |> pluralize
48+
```
49+
50+
Considering there is a possibility of this proposal eventually landing, it is best for a framework like Vue to not provide a similar alternative (especially with syntax that conflicts with existing JavaScript).
51+
52+
That said, the proposal is still at stage 1 and hasn't received updates for quite a while, so it is not entirely clear whether it will end up landing, or whether it will land as it is designed right now. It is risky for Vue to adopt it as part of the official API, since we would be forced to introduce breaking changes if the spec ends up changing.
53+
54+
On the technical side, if we want to enable pipeline operators in Vue templates:
55+
56+
- Since template expressions are parsed using [Acorn](https://github.com/acornjs/acorn), we will need Acorn to support parsing pipeline operators. This should be possible via [Acorn plugins](https://github.com/acornjs/acorn#plugin-developments).
57+
58+
- Generated render function can be piped through Babel (with [appropriate plugins](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)) for actual transpilation.
59+
60+
# Adoption strategy
61+
62+
Filters can be supported in a 2.x compatibility build, with warnings to guide progressive migration.

0 commit comments

Comments
 (0)