Skip to content

Commit cc83921

Browse files
author
User
committed
added Options/Misc APIs
1 parent d15fa12 commit cc83921

File tree

4 files changed

+170
-1
lines changed

4 files changed

+170
-1
lines changed

‎API.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const O_DOM = require('./apis/optionsdom')
55
const O_LH = require('./apis/optionslifecyclehooks')
66
const O_A = require('./apis/optionsassets')
77
const O_C = require('./apis/optionscomposition')
8+
const O_M = require('./apis/optionsmisc')
89

910
const GlobalConfig = [
1011
G_C.SILENT,
@@ -75,6 +76,16 @@ const OptionsComposition = [
7576
O_C.PROVIDE_INJECT
7677
]
7778

79+
const OptionsMisc = [
80+
O_M.NAME,
81+
O_M.DELIMITERS,
82+
O_M.FUNCTIONAL,
83+
O_M.MODEL,
84+
O_M.INHERIT_ATTRS,
85+
O_M.COMMENTS
86+
87+
]
88+
7889

7990
module.exports = {
8091
GlobalConfig,
@@ -83,5 +94,6 @@ module.exports = {
8394
OptionsDOM,
8495
OptionsLifecycleHooks,
8596
OptionsAssets,
86-
OptionsComposition
97+
OptionsComposition,
98+
OptionsMisc
8799
}

‎apis/optionsmisc.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
const chalk = require('chalk')
2+
const custom = require('../customcolors')
3+
const colorComment = custom.colorComment
4+
const colorPrimitive = custom.colorPrimitive
5+
const colorError = custom.colorError
6+
const colorArgs = custom.colorArgs
7+
8+
const NAME = {
9+
category: 'Options/Misc',
10+
name: 'name',
11+
type: 'string',
12+
restrictions: 'only respected when used as a component option',
13+
details: `Allow the component to recursively invoke itself in its template.
14+
Note that when a component is registered globally with ${colorArgs('Vue.component()')},
15+
the global ID is automatically set as its name.
16+
Another benefit of specifying a ${colorArgs('name')} option is debugging.
17+
Named components result in more helpful warning messages.
18+
Also, when inspecting an app in the ${chalk.green('vue-devtools')}, unnamed components
19+
will show up as ${colorArgs('<AnonymousComponent>')}, which isn’t very informative.
20+
By providing the ${colorArgs('name')} option, you will get a much more informative
21+
component tree.
22+
`
23+
24+
}
25+
const DELIMITERS = {
26+
category: 'Options/Misc',
27+
name: 'delimiters',
28+
type: 'Array<string>',
29+
def: '["{{", "}}"]',
30+
details: `Change the plain text interpolation delimiters.
31+
${chalk.bold('This option is only available in the full build')}.`,
32+
example: `
33+
${colorArgs('new')} Vue({
34+
delimiters: [${chalk.green("'${'")}, ${chalk.green("'}'")}]
35+
})
36+
${colorComment('// Delimiters changed to ES6 template string style')}
37+
`
38+
39+
}
40+
const FUNCTIONAL = {
41+
category: 'Option/Misc',
42+
name: 'functional',
43+
type: 'boolean',
44+
details: `Causes a component to be stateless (no ${colorArgs('data')} and instanceless (no ${colorArgs('this')} context).
45+
They are simply a ${colorArgs('render')} function that returns virtual nodes making them much cheaper to render.`
46+
}
47+
const MODEL = {
48+
category: 'Options/Misc',
49+
name: 'model',
50+
type: '{ prop?: string, event?: string }',
51+
details: `Allows a custom component to customize the prop and event used when it’s used with ${colorArgs('v-model')}.
52+
By default, ${colorArgs('v-model')} on a component uses ${colorArgs('value')} as the prop and input as the event,
53+
but some input types such as checkboxes and radio buttons may want to use the ${colorArgs('value')}
54+
prop for a different purpose. Using the ${colorArgs('model')} option can avoid the conflict in such cases.
55+
`,
56+
example: `
57+
Vue.component(${chalk.green("'my-checkbox'")}, {
58+
model: {
59+
prop: ${chalk.green("'checked'")},
60+
event: ${chalk.green("'change'")}
61+
},
62+
props: {
63+
${colorComment(`// this allows using the 'value' prop for a different purpose`)}
64+
value: ${chalk.green("String")},
65+
${colorComment(`// use 'checked' as the prop which take the place of 'value'`)}
66+
checked: {
67+
type: ${chalk.green("Number")},
68+
default: ${colorPrimitive("0")}
69+
}
70+
},
71+
${colorComment('// ...')}
72+
})
73+
74+
${chalk.blue('<my-checkbox v-model=')}${chalk.green('"foo"')} ${chalk.blue('value=')}${chalk.green('"foo"')}${chalk.blue('></my-checkbox>')}
75+
76+
The above will be equivalent to:
77+
78+
${chalk.blue('<my-checkbox')}
79+
:checked=${chalk.green('"foo"')}
80+
@change=${chalk.green('"val => { foo = val }"')}
81+
value=${chalk.green('"some value"')} >
82+
${chalk.blue('</my-checkbox>')}
83+
84+
`
85+
}
86+
const INHERIT_ATTRS = {
87+
category: 'Options/Misc',
88+
name: 'inheritAttrs',
89+
type: 'boolean',
90+
def: 'true',
91+
details: `By default, parent scope attribute bindings that are not recognized as props will “fallthrough”
92+
and be applied to the root element of the child component as normal HTML attributes.
93+
When authoring a component that wraps a target element or another component,
94+
this may not always be the desired behavior. By setting ${colorArgs('inheritAttrs')} to ${colorArgs('false')},
95+
this default behavior can be disabled. The attributes are available via the ${colorArgs('$attrs')} instance property
96+
(also new in 2.4) and can be explicitly bound to a non-root element using ${colorArgs('v-bind')}.
97+
98+
`
99+
}
100+
const COMMENTS = {
101+
category: 'Options/Misc',
102+
name: 'comments',
103+
type: 'boolean',
104+
def: 'false',
105+
details: `When set to ${colorArgs('true')}, will preserve and render HTML comments found in templates.
106+
The default behavior is discarding them.`
107+
}
108+
109+
110+
module.exports = {
111+
NAME,
112+
DELIMITERS,
113+
FUNCTIONAL,
114+
MODEL,
115+
INHERIT_ATTRS,
116+
COMMENTS
117+
}

‎logfunctions/logoptions.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
${chalk.green('Category:')} ${obj.category}
99
${chalk.green('Name:')} ${obj.name + '\n'}
1010
* Type: ${args(obj.type)}
11+
${obj.def ? `* Default: ${args(obj.def)}` : ``}
1112
${obj.restrictions ? `* Restrictions: ${obj.restrictions}` : ''}
1213
* Details: ${obj.details}
1314
${obj.example ? `* Example: ${obj.example}` : ''}

‎vue-help.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const odom = api.OptionsDOM
1010
const olh = api.OptionsLifecycleHooks
1111
const oa = api.OptionsAssets
1212
const oc = api.OptionsComposition
13+
const om = api.OptionsMisc
1314

1415
V.delimiter('vue-help$').show()
1516

@@ -319,4 +320,42 @@ V.command('inject', 'Options/Composition: #provide/inject').action(function(args
319320
const w = oc[3]
320321
this.log(O.logOptions(w))
321322
callback()
323+
})
324+
325+
// Options/Misc
326+
327+
V.command('name', 'Options/Misc: #name').action(function(args, callback){
328+
const w = om[0]
329+
this.log(O.logOptions(w))
330+
callback()
331+
})
332+
333+
V.command('delimiters', 'Options/Misc: #delimiters').action(function(args, callback){
334+
const w = om[1]
335+
this.log(O.logOptions(w))
336+
callback()
337+
})
338+
339+
V.command('functional', 'Options/Misc: #functional').action(function(args, callback){
340+
const w = om[2]
341+
this.log(O.logOptions(w))
342+
callback()
343+
})
344+
345+
V.command('model', 'Options/Misc: #model').action(function(args, callback){
346+
const w = om[3]
347+
this.log(O.logOptions(w))
348+
callback()
349+
})
350+
351+
V.command('inheritAttrs', 'Options/Misc: #inheritAttrs').action(function(args, callback){
352+
const w = om[4]
353+
this.log(O.logOptions(w))
354+
callback()
355+
})
356+
357+
V.command('comments', 'Options/Misc: #comments').action(function(args, callback){
358+
const w = om[5]
359+
this.log(O.logOptions(w))
360+
callback()
322361
})

0 commit comments

Comments
 (0)