Skip to content

Commit 6ac1ff1

Browse files
KocalKocal
authored
feat: Added @vue-event tag for $emit events (#174)
The same than #168, but with 2/3 minors modif. Close #160.
1 parent 501e558 commit 6ac1ff1

File tree

15 files changed

+278
-18
lines changed

15 files changed

+278
-18
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"_isVueDoc",
3030
"_vueProps",
3131
"_vueData",
32-
"_vueComputed"
32+
"_vueComputed",
33+
"_vueEvent"
3334
]
3435
}]
3536
}

‎README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Update your .vue files with one of the following tags:
4242
- `@vue-prop`
4343
- `@vue-data`
4444
- `@vue-computed`
45+
- `@vue-event`
4546

4647
All of those tags work the same way than [`@param` tag](http://usejsdoc.org/tags-param.html).
4748

@@ -56,6 +57,8 @@ All of those tags work the same way than [`@param` tag](http://usejsdoc.org/tags
5657
* @vue-prop {Number} [step=1] - Step
5758
* @vue-data {Number} counter - Current counter's value
5859
* @vue-computed {String} message
60+
* @vue-event {Number} increment - Emit counter's value after increment
61+
* @vue-event {Number} decrement - Emit counter's value after decrement
5962
*/
6063
export default {
6164
props: {
@@ -77,6 +80,16 @@ All of those tags work the same way than [`@param` tag](http://usejsdoc.org/tags
7780
message() {
7881
return `Current value is ${this.counter}`;
7982
}
83+
},
84+
methods: {
85+
increment() {
86+
this.counter += 1;
87+
this.$emit('increment', this.counter);
88+
},
89+
decrement() {
90+
this.counter -= 1;
91+
this.$emit('decrement', this.counter);
92+
}
8093
}
8194
}
8295
</script>

‎__tests__/core/renderer.test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ describe('code.renderer', () => {
99
it('should call ejs render method', () => {
1010
const cb = () => {};
1111

12-
renderer('my-template', { props: ['props'], data: ['data'], computed: ['computed'] }, cb);
12+
renderer('my-template', {
13+
props: ['props'], data: ['data'], computed: ['computed'], event: ['event'],
14+
}, cb);
1315

1416
expect(ejs.renderFile).toHaveBeenCalledTimes(1);
1517
expect(ejs.renderFile).toHaveBeenCalledWith(
@@ -18,6 +20,7 @@ describe('code.renderer', () => {
1820
props: ['props'],
1921
data: ['data'],
2022
computed: ['computed'],
23+
event: ['event'],
2124
// an helper function, it should be under keys "utils" or "helpers" btw
2225
renderType: expect.any(Function),
2326
},

‎cypress/integration/templates/default.spec.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,28 +144,61 @@ describe('Template: default', () => {
144144
});
145145
});
146146

147+
it('should renders event correctly', () => {
148+
const events = [
149+
{ name: '<code>increment</code>', type: 'Number', description: "Emit counter's value after increment" },
150+
{ name: '<code>decrement</code>', type: 'Number', description: "Emit counter's value after decrement" },
151+
];
152+
153+
cy.get('[data-jsdoc-vuejs="section-event"]').contains('Events');
154+
cy.get('[data-jsdoc-vuejs="table-event"]').as('table-event');
155+
156+
cy
157+
.get('@table-event')
158+
.find('> thead > tr > th')
159+
.contains('Name')
160+
.next().contains('Payload Type')
161+
.next().contains('Description');
162+
163+
cy
164+
.get('@table-event')
165+
.find('> tbody > tr')
166+
.then(($rows) => {
167+
expect($rows).to.have.length(2);
168+
169+
events.forEach((event, i) => {
170+
const $row = $rows.eq(i);
171+
const $children = $row.children();
172+
173+
expect($children.eq(0).html()).to.eq(event.name);
174+
expect($children.eq(1).html()).to.eq(event.type);
175+
expect($children.eq(2).html()).to.eq(event.description);
176+
});
177+
});
178+
});
179+
147180
it('should render methods properly', () => {
148181
cy.contains('h3', 'Methods').should('have.attr', 'class', 'subsection-title');
149182

150183
cy.get('#decrement')
151184
.contains('decrement()')
152185
.next('.description')
153186
.next('.details')
154-
.contains('a[href="better-components_BetterCounter.vue.html#line53"]', 'line 53');
187+
.contains('a[href="better-components_BetterCounter.vue.html#line56"]', 'line 56');
155188

156189
cy.get('#increment')
157190
.contains('increment()')
158191
.next('.description')
159192
.next('.details')
160-
.contains('a[href="better-components_BetterCounter.vue.html#line46"]', 'line 46');
193+
.contains('a[href="better-components_BetterCounter.vue.html#line48"]', 'line 48');
161194

162195
cy.get('#showDialog')
163196
.contains('showDialog(counter)')
164197
.next('.description')
165198
.next('h5')
166199
.next('.params')
167200
.next('.details')
168-
.contains('a[href="better-components_BetterCounter.vue.html#line61"]', 'line 61');
201+
.contains('a[href="better-components_BetterCounter.vue.html#line65"]', 'line 65');
169202

170203
cy.contains('created()').should('not.exist');
171204
});

‎cypress/integration/templates/docstrap.spec.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,28 +144,61 @@ describe('Template: docstrap', () => {
144144
});
145145
});
146146

147+
it('should renders event correctly', () => {
148+
const events = [
149+
{ name: '<code>increment</code>', type: 'Number', description: "Emit counter's value after increment" },
150+
{ name: '<code>decrement</code>', type: 'Number', description: "Emit counter's value after decrement" },
151+
];
152+
153+
cy.get('[data-jsdoc-vuejs="section-event"]').contains('Events');
154+
cy.get('[data-jsdoc-vuejs="table-event"]').as('table-event');
155+
156+
cy
157+
.get('@table-event')
158+
.find('> thead > tr > th')
159+
.contains('Name')
160+
.next().contains('Payload Type')
161+
.next().contains('Description');
162+
163+
cy
164+
.get('@table-event')
165+
.find('> tbody > tr')
166+
.then(($rows) => {
167+
expect($rows).to.have.length(2);
168+
169+
events.forEach((event, i) => {
170+
const $row = $rows.eq(i);
171+
const $children = $row.children();
172+
173+
expect($children.eq(0).html()).to.eq(event.name);
174+
expect($children.eq(1).html()).to.eq(event.type);
175+
expect($children.eq(2).html()).to.eq(event.description);
176+
});
177+
});
178+
});
179+
147180
it('should render methods properly', () => {
148181
cy.contains('h3', 'Methods').should('have.attr', 'class', 'subsection-title');
149182
cy.get('#decrement')
150183
.contains('decrement()')
151184
.parent()
152185
.next('dd')
153186
.find('.details')
154-
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-53"]', 'line 53');
187+
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-56"]', 'line 56');
155188

156189
cy.get('#increment')
157190
.contains('increment()')
158191
.parent()
159192
.next('dd')
160193
.find('.details')
161-
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-46"]', 'line 46');
194+
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-48"]', 'line 48');
162195

163196
cy.get('#showDialog')
164197
.contains('showDialog(counter)')
165198
.parent()
166199
.next('dd')
167200
.find('.details')
168-
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-61"]', 'line 61');
201+
.contains('a[href="better-components_BetterCounter.vue.html#sunlight-1-line-65"]', 'line 65');
169202

170203
cy.contains('created()').should('not.exist');
171204
});

‎cypress/integration/templates/minami.spec.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,25 +146,58 @@ describe('Template: minami', () => {
146146
});
147147
});
148148

149+
it('should renders event correctly', () => {
150+
const events = [
151+
{ name: '<code>increment</code>', type: 'Number', description: "Emit counter's value after increment" },
152+
{ name: '<code>decrement</code>', type: 'Number', description: "Emit counter's value after decrement" },
153+
];
154+
155+
cy.get('[data-jsdoc-vuejs="section-event"]').contains('Events');
156+
cy.get('[data-jsdoc-vuejs="table-event"]').as('table-event');
157+
158+
cy
159+
.get('@table-event')
160+
.find('> thead > tr > th')
161+
.contains('Name')
162+
.next().contains('Payload Type')
163+
.next().contains('Description');
164+
165+
cy
166+
.get('@table-event')
167+
.find('> tbody > tr')
168+
.then(($rows) => {
169+
expect($rows).to.have.length(2);
170+
171+
events.forEach((event, i) => {
172+
const $row = $rows.eq(i);
173+
const $children = $row.children();
174+
175+
expect($children.eq(0).html()).to.eq(event.name);
176+
expect($children.eq(1).html()).to.eq(event.type);
177+
expect($children.eq(2).html()).to.eq(event.description);
178+
});
179+
});
180+
});
181+
149182
it('should render methods properly', () => {
150183
cy.contains('h3', 'Methods').should('have.attr', 'class', 'subsection-title');
151184
cy.get('#decrement')
152185
.contains('decrement()')
153186
.next('.description')
154187
.next('.details')
155-
.contains('a[href="better-components_BetterCounter.vue.html#line53"]', 'line 53');
188+
.contains('a[href="better-components_BetterCounter.vue.html#line56"]', 'line 56');
156189

157190
cy.get('#increment')
158191
.contains('increment()')
159192
.next('.description')
160193
.next('.details')
161-
.contains('a[href="better-components_BetterCounter.vue.html#line46"]', 'line 46');
194+
.contains('a[href="better-components_BetterCounter.vue.html#line48"]', 'line 48');
162195

163196
cy.get('#showDialog')
164197
.contains('showDialog(counter)')
165198
.next('.description')
166199
.next('.details')
167-
.contains('a[href="better-components_BetterCounter.vue.html#line61"]', 'line 61');
200+
.contains('a[href="better-components_BetterCounter.vue.html#line65"]', 'line 65');
168201

169202
cy.contains('created()').should('not.exist');
170203
});

‎cypress/integration/templates/tui.spec.js

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,19 +148,52 @@ describe('Template: tui', () => {
148148
});
149149
});
150150

151+
it('should renders event correctly', () => {
152+
const events = [
153+
{ name: '<code>increment</code>', type: '<span class="param-type">Number</span>', description: "Emit counter's value after increment" },
154+
{ name: '<code>decrement</code>', type: '<span class="param-type">Number</span>', description: "Emit counter's value after decrement" },
155+
];
156+
157+
cy.get('[data-jsdoc-vuejs="section-event"]').contains('Events');
158+
cy.get('[data-jsdoc-vuejs="table-event"]').as('table-event');
159+
160+
cy
161+
.get('@table-event')
162+
.find('> thead > tr > th')
163+
.contains('Name')
164+
.next().contains('Payload Type')
165+
.next().contains('Description');
166+
167+
cy
168+
.get('@table-event')
169+
.find('> tbody > tr')
170+
.then(($rows) => {
171+
expect($rows).to.have.length(2);
172+
173+
events.forEach((event, i) => {
174+
const $row = $rows.eq(i);
175+
const $children = $row.children();
176+
177+
expect($children.eq(0).html()).to.eq(event.name);
178+
expect($children.eq(1).html()).to.eq(event.type);
179+
expect($children.eq(2).html()).to.eq(event.description);
180+
});
181+
});
182+
});
183+
151184
it('should render methods properly', () => {
152185
cy.contains('h3', 'Methods').should('have.attr', 'class', 'subsection-title');
153186
cy.get('#decrement')
154187
.contains('decrement()')
155-
.contains('a[href="better-components_BetterCounter.vue.html#line53"]', 'line 53');
188+
.contains('a[href="better-components_BetterCounter.vue.html#line56"]', 'line 56');
156189

157190
cy.get('#increment')
158191
.contains('increment()')
159-
.contains('a[href="better-components_BetterCounter.vue.html#line46"]', 'line 46');
192+
.contains('a[href="better-components_BetterCounter.vue.html#line48"]', 'line 48');
160193

161194
cy.get('#showDialog')
162195
.contains('showDialog(counter)')
163-
.contains('a[href="better-components_BetterCounter.vue.html#line61"]', 'line 61');
196+
.contains('a[href="better-components_BetterCounter.vue.html#line65"]', 'line 65');
164197

165198
cy.contains('created()').should('not.exist');
166199
});

‎example/src/better-components/BetterCounter.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
* @vue-computed {Array.<String>} fooList - A list of foo
2020
* @vue-computed {Array.<String>} barList - A list of bar
2121
* @vue-computed {String} message A message
22+
* @vue-event {Number} increment - Emit counter's value after increment
23+
* @vue-event {Number} decrement - Emit counter's value after decrement
2224
*/
2325
export default {
2426
props: {
@@ -41,17 +43,19 @@
4143
},
4244
methods: {
4345
/**
44-
* Increment counter.
46+
* Increment counter and emit event 'increment'
4547
*/
4648
increment() {
4749
this.counter += this.step;
50+
this.$emit('increment', this.counter);
4851
},
4952
5053
/**
51-
* Decrement counter.
54+
* Decrement counter and emit event 'decrement'
5255
*/
5356
decrement() {
5457
this.counter -= this.step;
58+
this.$emit('decrement', this.counter);
5559
},
5660
5761
/**

‎index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const { isSingleFileComponent, isJSComponent } = require('./lib/core/issers');
77
const vueDataTag = require('./lib/tags/vue-data');
88
const vuePropTag = require('./lib/tags/vue-prop');
99
const vueComputedTag = require('./lib/tags/vue-computed');
10+
const vueEventTag = require('./lib/tags/vue-event');
1011

1112
// Used to compute good line number for Vue methods
1213
const exportDefaultLines = {};
@@ -22,7 +23,6 @@ exports.handlers = {
2223
newDoclet(e) {
2324
const fileIsSingleFileComponent = isSingleFileComponent(e.doclet);
2425
const fileIsJSComponent = isJSComponent(e.doclet);
25-
2626
if (!fileIsSingleFileComponent && !fileIsJSComponent) {
2727
return;
2828
}
@@ -53,6 +53,7 @@ exports.handlers = {
5353
props: e.doclet._vueProps || [],
5454
data: e.doclet._vueData || [],
5555
computed: e.doclet._vueComputed || [],
56+
event: e.doclet._vueEvent || [],
5657
};
5758

5859
render(template, data, (err, str) => {
@@ -84,4 +85,5 @@ exports.defineTags = function defineTags(dictionary) {
8485
dictionary.defineTag(vueDataTag.name, vueDataTag.options);
8586
dictionary.defineTag(vuePropTag.name, vuePropTag.options);
8687
dictionary.defineTag(vueComputedTag.name, vueComputedTag.options);
88+
dictionary.defineTag(vueEventTag.name, vueEventTag.options);
8789
};

‎lib/core/renderer.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
const ejs = require('ejs');
22
const renderType = require('../templates/utils/renderType');
33

4-
module.exports = function render(template, { props, data, computed }, cb) {
4+
module.exports = function render(template, {
5+
props, data, computed, event,
6+
}, cb) {
57
ejs.renderFile(
68
template,
79
{
810
renderType,
911
props,
1012
data,
1113
computed,
14+
event,
1215
},
1316
cb,
1417
);

0 commit comments

Comments
 (0)