change sd-viewmodel to sd-component, allow direct use of Objects in Seed.component()

Author: yyx990803

src/compiler.js

@@ -211,7 +211,7 @@ CompilerProto.compile = function (node, root) {
             transClass = node.getAttribute(config.transClassAttr)
 
         // we need to check for any possbile special directives
-        // e.g. sd-repeat, sd-viewmodel & sd-partial
+        // e.g. sd-repeat, sd-component & sd-partial
         if (repeatExp) { // repeat block
 
             // repeat block cannot have sd-id at the same time.
@@ -224,7 +224,7 @@ CompilerProto.compile = function (node, root) {
         } else if (vmId && !root) { // child ViewModels
 
             node.removeAttribute(config.vmAttr)
-            var ChildVM = compiler.getOption('viewmodels', vmId)
+            var ChildVM = compiler.getOption('components', vmId)
             if (ChildVM) {
                 var child = new ChildVM({
                     el: node,

src/directives/repeat.js

@@ -96,7 +96,7 @@ module.exports = {
         ViewModel   = ViewModel || require('../viewmodel')
         var vmId    = el.getAttribute(config.vmAttr)
         if (vmId) el.removeAttribute(config.vmAttr)
-        self.ChildVM = self.compiler.getOption('viewmodels', vmId) || ViewModel
+        self.ChildVM = self.compiler.getOption('components', vmId) || ViewModel
 
         // extract transition information
         self.hasTransition = !!(

src/main.js

@@ -36,9 +36,11 @@ ViewModel.filter = function (id, fn) {
 /**
  *  Allows user to register/retrieve a ViewModel constructor
  */
-ViewModel.viewmodel = function (id, Ctor) {
-    if (!Ctor) return utils.viewmodels[id]
-    utils.viewmodels[id] = Ctor
+ViewModel.component = function (id, Ctor) {
+    if (!Ctor) return utils.components[id]
+    utils.components[id] = Ctor.prototype instanceof ViewModel
+        ? Ctor
+        : ViewModel.extend(Ctor)
     return this
 }
 
@@ -131,7 +133,7 @@ function inheritOptions (child, parent, topLevel) {
 function updatePrefix () {
     var prefix = config.prefix
     config.idAttr         = prefix + '-id'
-    config.vmAttr         = prefix + '-viewmodel'
+    config.vmAttr         = prefix + '-component'
     config.preAttr        = prefix + '-pre'
     config.textAttr       = prefix + '-text'
     config.repeatAttr     = prefix + '-repeat'

src/utils.js

@@ -17,7 +17,7 @@ var utils = module.exports = {
 
     // global storage for user-registered
     // vms, partials and transitions
-    viewmodels  : makeHash(),
+    components  : makeHash(),
     partials    : makeHash(),
     transitions : makeHash(),
 

test/functional/fixtures/encapsulation.html

@@ -11,14 +11,14 @@
             <div class="dir" sd-hola="dirMsg"></div>
             <div class="filter">{{filterMsg | nodigits}}</div>
             <div class="partial" sd-partial="partial-test"></div>
-            <div class="vm" sd-viewmodel="vm-test">{{vmMsg}}</div>
+            <div class="vm" sd-component="vm-test">{{vmMsg}}</div>
         </div>
         <script>
             var T = Seed.extend({
-                viewmodels: {
+                components: {
                     'vm-test': Seed.extend({
                         scope: {
-                            vmMsg: 'viewmodel works'
+                            vmMsg: 'component works'
                         }
                     })
                 },

test/functional/fixtures/nested-viewmodels.html

@@ -24,23 +24,23 @@
     <div id="grandpa" data-name="Andy" data-family="Johnson">
         <p class="ancestor">{{name}} {{family}}</p>
 
-        <div sd-viewmodel="man" data-name="Jack">
+        <div sd-component="man" data-name="Jack">
             <p class="jack">{{name}}, son of {{^name}}</p>
 
-            <div sd-viewmodel="man" data-name="Mike">
+            <div sd-component="man" data-name="Mike">
                 <p class="mike">{{name}}, son of {{^name}}</p>
 
-                <div sd-viewmodel="offspring" data-name="Tim" class="tim">
+                <div sd-component="offspring" data-name="Tim" class="tim">
                 </div>
 
-                <div sd-viewmodel="offspring" data-name="Tom" class="tom">
+                <div sd-component="offspring" data-name="Tom" class="tom">
                 </div>
             </div>
 
-            <div sd-viewmodel="man" data-name="Jason">
+            <div sd-component="man" data-name="Jason">
                 <p class="jason">{{name}}, son of {{^name}}</p>
 
-                <div sd-viewmodel="offspring" data-name="Andrew" class="andrew">
+                <div sd-component="offspring" data-name="Andrew" class="andrew">
                 </div>
             </div>
         </div>
@@ -68,8 +68,8 @@
         })
 
         Seed
-            .viewmodel('man', Man)
-            .viewmodel('offspring', Offspring)
+            .component('man', Man)
+            .component('offspring', Offspring)
 
         new Man({
             el: '#grandpa'

test/functional/fixtures/repeated-vms.html

@@ -7,13 +7,13 @@
         <script src="../../../dist/seed.js"></script>
     </head>
     <body>
-        <div class="item" sd-repeat="item:items" sd-viewmodel="item" sd-on="click:click">
+        <div class="item" sd-repeat="item:items" sd-component="item" sd-on="click:click">
             {{msg + ' ' + item.title}}
         </div>
         <script>
             Seed.config({ debug: true })
 
-            Seed.viewmodel('item', Seed.extend({
+            var Item = Seed.extend({
                 init: function () {
                     this.item.title += ' init'
                 },
@@ -25,7 +25,9 @@
                 scope: {
                     msg: 'msg'
                 }
-            }))
+            })
+
+            Seed.component('item', Item)
 
             new Seed({
                 el: 'body',

test/functional/specs/encapsulation.js

@@ -5,7 +5,7 @@ casper.test.begin('Component Encapsulation', 4, function (test) {
         test.assertSelectorHasText('.dir', 'directive works')
         test.assertSelectorHasText('.filter', 'filter works')
         test.assertSelectorHasText('.partial', 'partial works')
-        test.assertSelectorHasText('.vm', 'viewmodel works')
+        test.assertSelectorHasText('.vm', 'component works')
     })
     .run(function () {
         test.done()

test/unit/specs/api.js

@@ -101,30 +101,44 @@ describe('UNIT: API', function () {
 
     })
 
-    describe('viewmodel()', function () {
+    describe('component()', function () {
 
         var testId = 'api-vm-test',
-            Test = Seed.extend({
+            testId2 = testId + '2',
+            opts = {
                 className: 'hihi',
                 scope: { hi: 'ok' }
-            }),
+            },
+            Test = Seed.extend(opts),
             utils = require('seed/src/utils')
 
-        it('should register a VM constructor', function () {
-            Seed.viewmodel(testId, Test)
-            assert.strictEqual(utils.viewmodels[testId], Test)
+        it('should register a Component constructor', function () {
+            Seed.component(testId, Test)
+            assert.strictEqual(utils.components[testId], Test)
+        })
+
+        it('should also work with option objects', function () {
+            Seed.component(testId2, opts)
+            assert.ok(utils.components[testId2].prototype instanceof Seed)
         })
 
         it('should retrieve the VM if has only one arg', function () {
-            assert.strictEqual(Seed.viewmodel(testId), Test)
+            assert.strictEqual(Seed.component(testId), Test)
         })
 
-        it('should work with sd-viewmodel', function () {
-            mock(testId, '<div sd-viewmodel="' + testId + '">{{hi}}</div>')
+        it('should work with sd-component', function () {
+
+            mock(testId, '<div sd-component="' + testId + '">{{hi}}</div>')
             var t = new Seed({ el: '#' + testId }),
                 child = t.$el.querySelector('div')
             assert.strictEqual(child.className, 'hihi')
             assert.strictEqual(child.textContent, 'ok')
+
+            mock(testId2, '<div sd-component="' + testId2 + '">{{hi}}</div>')
+            var t2 = new Seed({ el: '#' + testId2 }),
+                child2 = t2.$el.querySelector('div')
+            assert.strictEqual(child2.className, 'hihi')
+            assert.strictEqual(child2.textContent, 'ok')
         })
 
     })
@@ -489,7 +503,7 @@ describe('UNIT: API', function () {
 
             })
 
-            describe('viewmodels', function () {
+            describe('components', function () {
 
                 it('should allow the VM to use private child VMs', function () {
                     var Child = Seed.extend({
@@ -498,11 +512,11 @@ describe('UNIT: API', function () {
                         }
                     })
                     var Parent = Seed.extend({
-                        template: '<p>{{name}}</p><div sd-viewmodel="child">{{name}}</div>',
+                        template: '<p>{{name}}</p><div sd-component="child">{{name}}</div>',
                         scope: {
                             name: 'dad'
                         },
-                        viewmodels: {
+                        components: {
                             child: Child
                         }
                     })

test/unit/specs/directives.js

@@ -560,8 +560,8 @@ describe('UNIT: Directives', function () {
                 }
             })
             var t = new Seed({
-                template: '<div sd-viewmodel="child" sd-id="hihi"></div>',
-                viewmodels: {
+                template: '<div sd-component="child" sd-id="hihi"></div>',
+                components: {
                     child: Child
                 }
             })

test/unit/specs/viewmodel.js

@@ -165,8 +165,8 @@ describe('UNIT: ViewModel', function () {
                 }
             })
             var Test = Seed.extend({
-                template: '<div sd-viewmodel="test"></div><div sd-viewmodel="test"></div>',
-                viewmodels: {
+                template: '<div sd-component="test"></div><div sd-component="test"></div>',
+                components: {
                     test: Child
                 }
             })
@@ -195,8 +195,8 @@ describe('UNIT: ViewModel', function () {
                 }
             })
             var Middle = Seed.extend({
-                template: '<div sd-viewmodel="bottom"></div>',
-                viewmodels: { bottom: Bottom },
+                template: '<div sd-component="bottom"></div>',
+                components: { bottom: Bottom },
                 init: function () {
                     this.$on('hello', function (m) {
                         assert.strictEqual(m, msg)
@@ -205,8 +205,8 @@ describe('UNIT: ViewModel', function () {
                 }
             })
             var Top = Seed.extend({
-                template: '<div sd-viewmodel="middle"></div>',
-                viewmodels: { middle: Middle },
+                template: '<div sd-component="middle"></div>',
+                components: { middle: Middle },
                 init: function () {
                     this.$on('hello', function (m) {
                         assert.strictEqual(m, msg)