Skip to content

Commit c47852d

Browse files
author
User
committed
added Options/DOM API
1 parent 2814b94 commit c47852d

File tree

5 files changed

+178
-8
lines changed

5 files changed

+178
-8
lines changed

‎API.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const G_C = require('./apis/globalconfig')
22
const G_API = require('./apis/globalapi')
33
const O_D = require('./apis/optionsdata')
4+
const O_DOM = require('./apis/optionsdom')
45

56
const GlobalConfig = [
67
G_C.SILENT,
@@ -37,9 +38,17 @@ const OptionsData = [
3738
O_D.WATCH
3839
]
3940

41+
const OptionsDOM = [
42+
O_DOM.EL,
43+
O_DOM.TEMPLATE,
44+
O_DOM.RENDER,
45+
O_DOM.RENDER_ERROR
46+
]
47+
4048

4149
module.exports = {
4250
GlobalConfig,
4351
GlobalAPI,
44-
OptionsData
52+
OptionsData,
53+
OptionsDOM
4554
}

‎apis/optionsdata.js

Lines changed: 139 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const DATA = {
2525
When defining a ${chalk.bold('component')}, ${colorArgs('data')} must be declared as a function that returns the initial data object,
2626
because there will be many instances created using the same definition.
2727
If we still use a plain object for ${colorArgs('data')}, that same object will be ${chalk.bold('shared by reference')}
28-
across all instances created! By providing a ${colorArgs('data')} function, every time a new instance is created, we can simply call it to return a
29-
fresh copy of the initial data. If required, a deep clone of the original object can be obtained by passing
30-
${colorArgs('vm.$data')} through ${colorArgs('JSON.parse(JSON.stringify(...))')}.`,
28+
across all instances created! By providing a ${colorArgs('data')} function, every time a new instance is created, we can simply
29+
call it to return a fresh copy of the initial data. If required, a deep clone of the original object can be
30+
obtained by passing ${colorArgs('vm.$data')} through ${colorArgs('JSON.parse(JSON.stringify(...))')}.`,
3131
example: `
3232
${colorArgs('var')} data = { a: ${colorPrimitive('1')} }
3333
${colorComment('// direct instance creation')}
@@ -50,23 +50,156 @@ const DATA = {
5050
}
5151

5252
const PROPS = {
53+
category: 'Options/Data',
54+
name: 'props',
55+
type: 'Array<string> | Object',
56+
details: `A list/hash of attributes that are exposed to accept data from the parent component. It has a
57+
simple Array-based syntax and an alternative Object-based syntax that allows advanced
58+
configurations such as type checking, custom validation and default values.`,
59+
example: `
60+
${colorComment('// simple syntax')}
61+
Vue.component(${chalk.green("'props-demo-simple'")}, {
62+
props: [${chalk.green("'size'")}, ${chalk.green("'myMessage'")}]
63+
})
64+
${colorComment('// object syntax with validation')}
65+
Vue.component(${chalk.green("'props-demo-advanced'")}, {
66+
props: {
67+
${colorComment('// just type check')}
68+
height: ${chalk.green('Number')},
69+
${colorComment('// type check plus other validations')}
70+
age: {
71+
type: ${chalk.green('Number')},
72+
default: ${colorPrimitive('0')},
73+
required: ${colorPrimitive('true')},
74+
validator: ${chalk.blue('function')} (value) {
75+
${colorArgs('return')} value >= ${colorPrimitive('0')}
76+
}
77+
}
78+
}
79+
})
80+
`
5381

5482
}
5583

5684
const PROPS_DATA = {
57-
85+
category: 'Options/Data',
86+
name: 'propsData',
87+
type: '{ [key: string]: any}',
88+
restrictions: `only respected in instance creation via ${colorArgs('new')}.`,
89+
details: `Pass props to an instance during its creation.
90+
This is primarily intended to make unit testing easier.`,
91+
example: `
92+
${colorArgs('var')} Comp = Vue.extend({
93+
props: [${chalk.green("'msg'")}],
94+
template: ${chalk.green("'<div>{{ msg }}</div>'")}
95+
})
96+
${colorArgs('var')} vm = ${colorArgs('new')} Comp({
97+
propsData: {
98+
msg: ${chalk.green("'hello'")}
99+
}
100+
})
101+
`
58102
}
59103

60104
const COMPUTED = {
61-
105+
category: 'Options/Data',
106+
name: 'computed',
107+
type: '{ [key: string]: Function | {get: Function, set: Function } }',
108+
details: `Computed properties to be mixed into the Vue instance. All getters and setters have their
109+
${colorArgs('this')} context automatically bound to the Vue instance.
110+
Note that ${chalk.bold('you should not use an arrow function to define a computed property')}
111+
(e.g. ${colorArgs('aDouble: () => this.a * 2')}). The reason is arrow functions bind the parent context,
112+
so ${colorArgs('this')} will not be the Vue instance as you expect and ${colorArgs('this.a')} will be undefined.
113+
Computed properties are cached, and only re-computed on reactive dependency changes.
114+
Note that if a certain dependency is out of the instance’s scope (i.e. not reactive),
115+
the computed property will ${chalk.bold('not')} be updated.`,
116+
example: `
117+
${colorArgs('var')} vm = ${colorArgs('new')} Vue({
118+
data: { a: ${colorPrimitive('1')} },
119+
computed: {
120+
${colorComment('// get only, just need a function')}
121+
aDouble: ${chalk.blue('function')} () {
122+
${colorArgs('return this')}.a * ${colorPrimitive('2')}
123+
},
124+
${colorComment('// both get and set')}
125+
aPlus: {
126+
get: ${chalk.blue('function')} () {
127+
${colorArgs('return this')}.a + ${colorPrimitive('1')}
128+
},
129+
set: ${chalk.blue('function')} (v) {
130+
${colorArgs('this')}.a = v - ${colorPrimitive('1')}
131+
}
132+
}
133+
}
134+
})
135+
vm.aPlus ${colorComment('// -> 2')}
136+
vm.aPlus = ${colorPrimitive('3')}
137+
vm.a ${colorComment('// -> 2')}
138+
vm.aDouble ${colorComment('// -> 4')}
139+
140+
`
62141
}
63142

64143
const METHODS = {
65-
144+
category: 'Options/Data',
145+
name: 'methods',
146+
type: '{ [key: string]: Function }',
147+
details: `Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance,
148+
or use them in directive expressions. All methods will have their ${colorArgs('this')} context automatically
149+
bound to the Vue instance.
150+
Note that ${chalk.bold('you should not use an arrow function to define a method')} (e.g. ${colorArgs('plus: () => this.a++')}).
151+
The reason is arrow functions bind the parent context, so ${colorArgs('this')} will not be the Vue instance
152+
as you expect and ${colorArgs('this.a')} will be undefined.`,
153+
example: `
154+
${colorArgs('var')} vm = ${colorArgs('new')} Vue({
155+
data: { a: ${colorPrimitive('1')} },
156+
methods: {
157+
plus: ${chalk.blue('function')} () {
158+
${colorArgs('this')}.a++
159+
}
160+
}
161+
})
162+
vm.plus()
163+
vm.a ${colorComment('// 2')}
164+
165+
`
66166
}
67167

68168
const WATCH = {
169+
category: 'Options/Data',
170+
name: 'watch',
171+
type: '{ [key: string]: string | Function | Object }',
172+
details: `An object where keys are expressions to watch and values are the corresponding callbacks.
173+
The value can also be a string of a method name, or an Object
174+
that contains additional options. The Vue instance will call
175+
${colorArgs('$watch()')} for each entry in the object at instantiation.`,
176+
example: `
177+
${colorArgs('var')} vm = ${colorArgs('new')} Vue({
178+
data: {
179+
a: ${colorPrimitive('1')},
180+
b: ${colorPrimitive('2')},
181+
c: ${colorPrimitive('3')}
182+
},
183+
watch: {
184+
a: ${chalk.blue('function')} (val, oldVal) {
185+
${chalk.green('console')}.log(${chalk.green("'new: %s, old: %s'")}, val, oldVal)
186+
},
187+
${colorComment('// string method name')}
188+
b: ${chalk.green("'someMethod'")},
189+
${colorComment('// deep watcher')}
190+
c: {
191+
handler: ${chalk.blue('function')} (val, oldVal) { ${colorComment('/* ... */')} },
192+
deep: ${colorPrimitive('true')}
193+
}
194+
}
195+
})
196+
vm.a = ${colorPrimitive('2')} ${colorComment('// -> new: 2, old: 1')}
69197
198+
Note that ${chalk.bold('you should not use an arrow function to define a watcher')} (e.g.
199+
${colorArgs('searchQuery: newValue => this.updateAutocomplete(newValue)')}).
200+
The reason is arrow functions bind the parent context, so ${colorArgs('this')} will
201+
not be the Vue instance as you expect and ${colorArgs('this.updateAutocomplete')} will be undefined.
202+
`
70203
}
71204

72205

‎apis/optionsdom.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 EL = {}
9+
const TEMPLATE = {}
10+
const RENDER = {}
11+
const RENDER_ERROR = {}
12+
13+
14+
module.exports = {
15+
EL,
16+
TEMPLATE,
17+
RENDER,
18+
RENDER_ERROR
19+
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-help",
33
"version": "1.0.1",
4-
"description": "View Vue.js documentation in the terminal",
4+
"description": "Vue.js API in the terminal",
55
"main": "vue-help.js",
66
"scripts": {
77
"vue-help": "node vue-help.js",

‎vue-help.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const api = require('./API')
66
const gc = api.GlobalConfig
77
const ga = api.GlobalAPI
88
const od = api.OptionsData
9+
const odom = api.OptionsDOM
910

1011
V.delimiter('vue-help$').show()
1112

@@ -169,4 +170,12 @@ V.command('watch', 'Options/Data: #watch').action(function(args, callback){
169170
const w = od[5]
170171
this.log(O.logOptions(w))
171172
callback()
173+
})
174+
175+
// Options/DOM
176+
177+
V.command('el', 'Options/DOM: #el').action(function(args, callback){
178+
const w = odom[0]
179+
this.log(O.logOptions(w))
180+
callback()
172181
})

0 commit comments

Comments
 (0)