Skip to content

Commit 70d5280

Browse files
committed
remove v-component
1 parent ee2b99e commit 70d5280

File tree

19 files changed

+195
-237
lines changed

19 files changed

+195
-237
lines changed

examples/svg/index.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010

1111
<!-- template for the polygraph component. -->
1212
<script type="text/x-template" id="polygraph-template">
13-
<polygon v-attr="points:points"></polygon>
14-
<circle cx="100" cy="100" r="80"></circle>
15-
<text v-repeat="stats" v-component="axis-label"></text>
13+
<g>
14+
<polygon v-attr="points:points"></polygon>
15+
<circle cx="100" cy="100" r="80"></circle>
16+
<axis-label v-repeat="stats"></axis-label>
17+
</g>
1618
</script>
1719

1820
<!-- template for the axis label component. -->
@@ -24,7 +26,7 @@
2426
<div id="demo">
2527
<!-- Use the component -->
2628
<svg width="200" height="200">
27-
<g v-component="polygraph" stats="{{stats}}"></g>
29+
<polygraph stats="{{stats}}"></polygraph>
2830
</svg>
2931
<!-- controls -->
3032
<div v-repeat="stats">

examples/svg/svg.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var stats = [
1212
Vue.component('polygraph', {
1313
props: ['stats'],
1414
template: '#polygraph-template',
15+
replace: true,
1516
computed: {
1617
// a computed property for the polygon's points
1718
points: function () {

examples/tree/index.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,28 @@
2626

2727
<!-- item template -->
2828
<script type="text/x-template" id="item-template">
29-
<div v-class="bold: isFolder"
30-
v-on="click: toggle, dblclick: changeType">
31-
{{model.name}}
32-
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
33-
</div>
34-
<ul v-show="open" v-if="isFolder">
35-
<li class="item"
36-
v-repeat="model: model.children"
37-
v-component="item">
38-
</li>
39-
<li v-on="click: addChild">+</li>
40-
</ul>
29+
<li>
30+
<div v-class="bold: isFolder"
31+
v-on="click: toggle, dblclick: changeType">
32+
{{model.name}}
33+
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
34+
</div>
35+
<ul v-show="open" v-if="isFolder">
36+
<item class="item"
37+
v-repeat="model: model.children">
38+
</item>
39+
<li v-on="click: addChild">+</li>
40+
</ul>
41+
</li>
4142
</script>
4243

4344
<p>(You can double click on an item to turn it into a folder.)</p>
4445

4546
<!-- the demo root element -->
4647
<ul id="demo">
47-
<li class="item"
48-
v-component="item"
48+
<item class="item"
4949
model="{{treeData}}">
50-
</li>
50+
</item>
5151
</ul>
5252

5353
<!-- demo code -->

examples/tree/tree.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ var data = {
3232
Vue.component('item', {
3333
props: ['model'],
3434
template: '#item-template',
35+
replace: true,
3536
data: function () {
3637
return {
3738
open: false

src/compiler/compile.js

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ var templateParser = require('../parsers/template')
66

77
// internal directives
88
var propDef = require('../directives/prop')
9-
// var componentDef = require('../directives/component')
9+
var componentDef = require('../directives/component')
1010

1111
module.exports = compile
1212

@@ -192,24 +192,19 @@ function compileElement (el, options) {
192192
}
193193
return compile(el, options._parent.$options, true, true)
194194
}
195-
var linkFn, tag, component
196-
// check custom element component, but only on non-root
197-
if (!el.__vue__) {
198-
tag = el.tagName.toLowerCase()
199-
component =
200-
tag.indexOf('-') > 0 &&
201-
options.components[tag]
202-
if (component) {
203-
el.setAttribute(config.prefix + 'component', tag)
204-
}
205-
}
206-
if (component || el.hasAttributes()) {
207-
// check terminal direcitves
195+
var linkFn
196+
var hasAttrs = el.hasAttributes()
197+
// check terminal direcitves (repeat & if)
198+
if (hasAttrs) {
208199
linkFn = checkTerminalDirectives(el, options)
209-
// if not terminal, build normal link function
210-
if (!linkFn) {
211-
linkFn = compileDirectives(el, options)
212-
}
200+
}
201+
// check component
202+
if (!linkFn) {
203+
linkFn = checkComponent(el, options)
204+
}
205+
// normal directives
206+
if (!linkFn && hasAttrs) {
207+
linkFn = compileDirectives(el, options)
213208
}
214209
// if the element is a textarea, we need to interpolate
215210
// its content on initial render.
@@ -449,6 +444,28 @@ function makePropsLinkFn (props) {
449444
}
450445
}
451446

447+
/**
448+
* Check if an element is a component. If yes, return
449+
* a component link function.
450+
*
451+
* @param {Element} el
452+
* @param {Object} options
453+
* @return {Function|undefined}
454+
*/
455+
456+
function checkComponent (el, options) {
457+
var componentId = _.checkComponent(el, options)
458+
if (componentId) {
459+
var componentLinkFn = function (vm, el, host) {
460+
vm._bindDir('component', el, {
461+
expression: componentId
462+
}, componentDef, host)
463+
}
464+
componentLinkFn.terminal = true
465+
return componentLinkFn
466+
}
467+
}
468+
452469
/**
453470
* Check an element for terminal directives in fixed order.
454471
* If it finds one, return a terminal link function.

src/compiler/transclude.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,19 @@ function transcludeTemplate (el, options) {
7373
_.warn('Invalid template option: ' + template)
7474
} else {
7575
var rawContent = options._content || _.extractContent(el)
76+
var replacer = frag.firstChild
7677
if (options.replace) {
7778
if (
7879
frag.childNodes.length > 1 ||
80+
replacer.nodeType !== 1 ||
7981
// when root node has v-repeat, the instance ends up
8082
// having multiple top-level nodes, thus becoming a
8183
// block instance. (#835)
82-
frag.firstChild.hasAttribute(config.prefix + 'repeat')
84+
replacer.hasAttribute(config.prefix + 'repeat')
8385
) {
8486
transcludeContent(frag, rawContent)
8587
return frag
8688
} else {
87-
var replacer = frag.firstChild
8889
options._replacerAttrs = extractAttrs(replacer)
8990
mergeAttrs(el, replacer)
9091
transcludeContent(replacer, rawContent)
@@ -199,7 +200,6 @@ function insertContentAt (outlet, contents) {
199200

200201
function extractAttrs (el) {
201202
var attrs = el.attributes
202-
if (!attrs) return
203203
var res = {}
204204
var i = attrs.length
205205
while (i--) {

src/config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ module.exports = {
7171

7272
_terminalDirectives: [
7373
'repeat',
74-
'if',
75-
'component'
74+
'if'
7675
]
7776

7877
}

src/directives/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ exports.events = require('./events')
2323

2424
// internal directives that should not be used directly
2525
// but we still want to expose them for advanced usage.
26-
exports.component = require('./component')
26+
exports._component = require('./component')
2727
exports._prop = require('./prop')

src/directives/repeat.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ module.exports = {
9292

9393
checkComponent: function () {
9494
this.componentState = UNRESOLVED
95-
var id = _.attr(this.el, 'component')
9695
var options = this.vm.$options
96+
var id = _.checkComponent(this.el, options)
9797
if (!id) {
9898
// default constructor
9999
this.Ctor = _.Vue

src/util/index.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,26 @@ extend(exports, lang)
55
extend(exports, require('./env'))
66
extend(exports, require('./dom'))
77
extend(exports, require('./filter'))
8-
extend(exports, require('./debug'))
8+
extend(exports, require('./debug'))
9+
10+
/**
11+
* Check if an element is a component, if yes return its
12+
* component id.
13+
*
14+
* @param {Element} el
15+
* @param {Object} options
16+
* @return {String|undefined}
17+
*/
18+
19+
exports.checkComponent = function (el, options) {
20+
var tag = el.tagName.toLowerCase()
21+
if (options.components[tag]) {
22+
return tag
23+
}
24+
// dynamic syntax
25+
if (tag === 'component') {
26+
var exp = el.getAttribute('type')
27+
el.removeAttribute('type')
28+
return exp
29+
}
30+
}

0 commit comments

Comments
 (0)