Skip to content

Commit 9a8de2c

Browse files
authored
Merge pull request #23 from wmde/parseMethodCallsAsFilters
Bug: T321595
2 parents 211d1ca + f0b6adc commit 9a8de2c

File tree

9 files changed

+135
-13
lines changed

9 files changed

+135
-13
lines changed

README.md

+6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ in the [Wikibase Lexeme extension](https://www.mediawiki.org/wiki/Extension:Wiki
77
It intentionally covers only a subset of Vue Template syntax that is used by the Wikibase
88
Lexeme extension. It is not going to cover all elements of Vue Template language.
99

10+
## Migration notes
11+
12+
For the purpose of migrating to Vue 3, very basic support for the method syntax was added as an alternative to filters.
13+
In order to keep the interface stable, method callbacks should also be provided as the third parameter when calling
14+
`Templating::render()`.
15+
1016
## Installation
1117

1218
The recommended way of installing the library is using [Composer](https://getcomposer.org),

src/FilterExpressionParsing/FilterCall.php

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
namespace WMDE\VueJsTemplating\FilterExpressionParsing;
44

5+
/**
6+
* This represents both calls to a filter and calls to a method.
7+
*/
58
class FilterCall {
69

710
/**

src/FilterExpressionParsing/FilterParser.php

+7
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ class FilterParser {
2222
*/
2323
// phpcs:ignore Generic.Metrics.CyclomaticComplexity
2424
public function parse( $exp ) {
25+
/**
26+
* matching `directionality(gloss.language)` and `message('wikibase-edit')`
27+
*/
28+
if ( preg_match( '/^\s*(\w+?)\(\s*([\w.\-\']+?)\s*\)\s*$/', $exp, $matches ) ) {
29+
return new ParseResult( [ $matches[2] ], [ new FilterCall( $matches[1], [] ) ] );
30+
}
31+
2532
$inSingle = false;
2633
$inDouble = false;
2734
$inTemplateString = false;

src/Templating.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ class Templating {
77
/**
88
* @param string $template
99
* @param array $data
10-
* @param callable[] $filters
10+
* @param callable[] $filtersAndMethods
1111
*
1212
* @return string
1313
*/
14-
public function render( $template, array $data, array $filters = [] ) {
15-
$component = new Component( $template, $filters );
14+
public function render( $template, array $data, array $filtersAndMethods = [] ) {
15+
$component = new Component( $template, $filtersAndMethods );
1616
return $component->render( $data );
1717
}
1818

tests/integration/fixture/gloss_widget.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<input v-else="" class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
1010
</td>
1111
<td class="wikibase-lexeme-sense-gloss-value">
12-
<span v-if="!inEditMode" :dir="gloss.language|directionality" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
12+
<span v-if="!inEditMode" :dir="directionality(gloss.language)" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
1313
<input v-else="" class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving">
1414
</td>
1515
</tr>
@@ -19,16 +19,16 @@
1919
<td>
2020
</td>
2121
<td>
22-
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-on:click="add" :disabled="isSaving">+ {{'wikibase-add'|message}}</button>
22+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-on:click="add" :disabled="isSaving">+ {{message('wikibase-add')}}</button>
2323
</td>
2424
</tr>
2525
</tfoot>
2626
</table>
2727
</div>
2828
<div class="wikibase-lexeme-sense-glosses-controls">
29-
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="!inEditMode" v-on:click="edit" :disabled="isSaving">{{'wikibase-edit'|message}}</button>
30-
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="save" :disabled="isSaving">{{'wikibase-save'|message}}</button>
31-
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="cancel" :disabled="isSaving">{{'wikibase-cancel'|message}}</button>
29+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="!inEditMode" v-on:click="edit" :disabled="isSaving">{{message('wikibase-edit')}}</button>
30+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="save" :disabled="isSaving">{{message('wikibase-save')}}</button>
31+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="cancel" :disabled="isSaving">{{message('wikibase-cancel')}}</button>
3232
</div>
3333
</div>
3434
</template>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template id="template" type="text/x-template">
2+
<div class="wikibase-lexeme-sense-glosses">
3+
<div class="wikibase-lexeme-sense-glosses-list">
4+
<table class="wikibase-lexeme-sense-glosses-table">
5+
<tbody>
6+
<tr v-for="gloss in glosses" class="wikibase-lexeme-sense-gloss">
7+
<td class="wikibase-lexeme-sense-gloss-language">
8+
<span v-if="!inEditMode">{{gloss.language}}</span>
9+
<input v-else="" class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
10+
</td>
11+
<td class="wikibase-lexeme-sense-gloss-value">
12+
<span v-if="!inEditMode" :dir="gloss.language|directionality" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
13+
<input v-else="" class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving">
14+
</td>
15+
</tr>
16+
</tbody>
17+
<tfoot v-if="inEditMode">
18+
<tr>
19+
<td>
20+
</td>
21+
<td>
22+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-on:click="add" :disabled="isSaving">+ {{'wikibase-add'|message}}</button>
23+
</td>
24+
</tr>
25+
</tfoot>
26+
</table>
27+
</div>
28+
<div class="wikibase-lexeme-sense-glosses-controls">
29+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="!inEditMode" v-on:click="edit" :disabled="isSaving">{{'wikibase-edit'|message}}</button>
30+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="save" :disabled="isSaving">{{'wikibase-save'|message}}</button>
31+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="cancel" :disabled="isSaving">{{'wikibase-cancel'|message}}</button>
32+
</div>
33+
</div>
34+
</template>
35+
<script id="data" type="application/json">
36+
{
37+
"senseId": "S1",
38+
"inEditMode":false,
39+
"isSaving":false,
40+
"glosses": [
41+
{"value": "english gloss", "language":"en"},
42+
{"value": "french gloss", "language":"fr"}
43+
]
44+
}
45+
</script>
46+
<div id="result">
47+
<!-- generated by `npm run-script populate-fixtures` -->
48+
<div class="wikibase-lexeme-sense-glosses"><div class="wikibase-lexeme-sense-glosses-list"><table class="wikibase-lexeme-sense-glosses-table"><tbody><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>en</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="en">english gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>fr</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="fr">french gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr></tbody> <!----></table></div> <div class="wikibase-lexeme-sense-glosses-controls"><button type="button" class="wikibase-lexeme-sense-glosses-control">wikibase-edit</button> <!----> <!----></div></div>
49+
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template id="template" type="text/x-template">
2+
<div class="wikibase-lexeme-sense-glosses">
3+
<div class="wikibase-lexeme-sense-glosses-list">
4+
<table class="wikibase-lexeme-sense-glosses-table">
5+
<tbody>
6+
<tr v-for="gloss in glosses" class="wikibase-lexeme-sense-gloss">
7+
<td class="wikibase-lexeme-sense-gloss-language">
8+
<span v-if="!inEditMode">{{gloss.language}}</span>
9+
<input v-else="" class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
10+
</td>
11+
<td class="wikibase-lexeme-sense-gloss-value">
12+
<span v-if="!inEditMode" :dir="gloss.language|directionality" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
13+
<input v-else="" class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving">
14+
</td>
15+
</tr>
16+
</tbody>
17+
<tfoot v-if="inEditMode">
18+
<tr>
19+
<td>
20+
</td>
21+
<td>
22+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-on:click="add" :disabled="isSaving">+ {{'wikibase-add'|message}}</button>
23+
</td>
24+
</tr>
25+
</tfoot>
26+
</table>
27+
</div>
28+
<div class="wikibase-lexeme-sense-glosses-controls">
29+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="!inEditMode" v-on:click="edit" :disabled="isSaving">{{'wikibase-edit'|message}}</button>
30+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="save" :disabled="isSaving">{{'wikibase-save'|message}}</button>
31+
<button type="button" class="wikibase-lexeme-sense-glosses-control" v-if="inEditMode" v-on:click="cancel" :disabled="isSaving">{{'wikibase-cancel'|message}}</button>
32+
</div>
33+
</div>
34+
</template>
35+
<script id="data" type="application/json">
36+
{
37+
"senseId": "S1",
38+
"inEditMode":false,
39+
"isSaving":false,
40+
"glosses": [
41+
{"value": "english gloss", "language":"en"},
42+
{"value": "french gloss", "language":"fr"}
43+
]
44+
}
45+
</script>
46+
<div id="result">
47+
<!-- generated by `npm run-script populate-fixtures` -->
48+
<div class="wikibase-lexeme-sense-glosses"><div class="wikibase-lexeme-sense-glosses-list"><table class="wikibase-lexeme-sense-glosses-table"><tbody><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>en</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="en">english gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>fr</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="fr">french gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr></tbody> <!----></table></div> <div class="wikibase-lexeme-sense-glosses-controls"><button type="button" class="wikibase-lexeme-sense-glosses-control">wikibase-edit</button> <!----> <!----></div></div>
49+
</div>

tests/integration/fixture/lemma_widget.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@
1313
<li v-for="lemma in lemmas" class="lemma-widget_lemma-edit-box">
1414
<input size="1" class="lemma-widget_lemma-value-input" v-model="lemma.value" :disabled="isSaving">
1515
<input size="1" class="lemma-widget_lemma-language-input" v-model="lemma.language" :disabled="isSaving">
16-
<button class="lemma-widget_lemma-remove" v-on:click="remove(lemma)" :disabled="isSaving" :title="'wikibase-remove'|message">
16+
<button class="lemma-widget_lemma-remove" v-on:click="remove(lemma)" :disabled="isSaving" :title="message('wikibase-remove')">
1717
×
1818
</button>
1919
</li>
2020
<li>
21-
<button type="button" class="lemma-widget_add" v-on:click="add" :disabled="isSaving" :title="'wikibase-add'|message">+</button>
21+
<button type="button" class="lemma-widget_add" v-on:click="add" :disabled="isSaving" :title="message('wikibase-add')">+</button>
2222
</li>
2323
</ul>
2424
</div>
2525
</div>
2626
<div class="lemma-widget_controls">
27-
<button type="button" class="lemma-widget_control" v-if="!inEditMode" :disabled="isSaving" v-on:click="edit">{{'wikibase-edit'|message}}</button>
28-
<button type="button" class="lemma-widget_control" v-if="inEditMode" :disabled="isSaving" v-on:click="save">{{'wikibase-save'|message}}</button>
29-
<button type="button" class="lemma-widget_control" v-if="inEditMode" :disabled="isSaving" v-on:click="cancel">{{'wikibase-cancel'|message}}</button>
27+
<button type="button" class="lemma-widget_control" v-if="!inEditMode" :disabled="isSaving" v-on:click="edit">{{message('wikibase-edit')}}</button>
28+
<button type="button" class="lemma-widget_control" v-if="inEditMode" :disabled="isSaving" v-on:click="save">{{message('wikibase-save')}}</button>
29+
<button type="button" class="lemma-widget_control" v-if="inEditMode" :disabled="isSaving" v-on:click="cancel">{{message('wikibase-cancel')}}</button>
3030
</div>
3131
</div>
3232
</template>

tests/php/FilterExpressionParsing/FilterParserTest.php

+8
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ public function provideParseCases() {
6969
'{prop1:var1, prop2:var2}',
7070
new ParseResult( [ '{prop1:var1, prop2:var2}' ], [] )
7171
],
72+
'method call with single argument' => [
73+
'filter(var1)',
74+
new ParseResult( [ 'var1' ], [ new FilterCall( 'filter', [] ) ] )
75+
],
76+
'method call with single argument and a bit of spacing' => [
77+
' filter( var1 ) ',
78+
new ParseResult( [ 'var1' ], [ new FilterCall( 'filter', [] ) ] )
79+
],
7280
'variable with filter having no arguments' => [
7381
'var1|filter',
7482
new ParseResult( [ 'var1' ], [ new FilterCall( 'filter', [] ) ] )

0 commit comments

Comments
 (0)