move all API methods to Seed

Gruntfile.js

@@ -12,13 +12,13 @@ module.exports = function( grunt ) {
                 sourceUrls: true,
                 styles: false,
                 verbose: true,
-                standalone: true
+                standalone: 'Seed'
             },
             build: {
                 output: './dist/',
                 name: 'seed',
                 styles: false,
-                standalone: true
+                standalone: 'Seed'
             },
             test: {
                 output: './test/',

examples/encapsulation.html

@@ -8,7 +8,7 @@
         <div id="test" sd-hola="hi | nodigits"></div>
         <script src="../dist/seed.js"></script>
         <script>
-            var T = seed.ViewModel.extend({
+            var T = Seed.extend({
                 directives: {
                     hola: function (value) {
                         this.el.innerHTML = value + '<span style="color:#f00"> this part is added by the directive</span>'

examples/expression.html

@@ -11,8 +11,8 @@
         </div>
         <script src="../dist/seed.js"></script>
         <script>
-            seed.config({ debug: true })
-            var demo = new seed.ViewModel({
+            Seed.config({ debug: true })
+            var demo = new Seed({
                 el: '#demo',
                 data: {
                     one: 'Hello',

examples/nested-props.html

@@ -19,9 +19,9 @@
             <h1 sd-text="a.c"></h1>
         </div>
         <script>
-            seed.config({debug: true})
+            Seed.config({debug: true})
             var data = { c: 555 }
-            var Demo = seed.ViewModel.extend({
+            var Demo = Seed.extend({
                 init: function () {
                     this.msg = 'Yoyoyo'
                     this.a = data
@@ -51,7 +51,7 @@
                 }
             })
             var app = new Demo({ el: '#a' }),
-                app2 = new seed.ViewModel({
+                app2 = new Seed({
                     el: '#b',
                     data: {
                         a: data

examples/nested-viewmodels.html

@@ -57,9 +57,9 @@
     </script>
     <script src="../dist/seed.js"></script>
     <script>
-        seed.config({ debug: true })
+        Seed.config({ debug: true })
 
-        var Man = seed.ViewModel.extend({
+        var Man = Seed.extend({
             init: function () {
                 this.name = this.$el.dataset.name
                 var family = this.$el.dataset.family
@@ -73,8 +73,8 @@
             template: document.getElementById('sd-template-offspring').innerHTML
         })
 
-        seed.vm('man', Man)
-        seed.vm('offspring', Offspring)
+        Seed.vm('man', Man)
+        Seed.vm('offspring', Offspring)
 
         new Man({
             el: '#grandpa'

examples/repeated-items.html

@@ -27,7 +27,7 @@
         <script src="../dist/seed.js"></script>
         <script>
 
-            seed.config({debug: true})
+            Seed.config({debug: true})
 
             var items = [
                 { title: 'A'},
@@ -35,7 +35,7 @@
                 { title: 'C'}
             ]
 
-            var demo = new seed.ViewModel({
+            var demo = new Seed({
                 el: '#app',
                 data: {
                     items: items,

examples/share-data.html

@@ -18,25 +18,25 @@
             var shared = {
                 msg: 'hello'
             }
-            new seed.ViewModel({
+            new Seed({
                 el: '#a',
                 data: {
                     shared: shared
                 }
             })
-            new seed.ViewModel({
+            new Seed({
                 el: '#b',
                 data: {
                     shared: shared
                 }
             })
-            new seed.ViewModel({
+            new Seed({
                 el: '#c',
                 data: {
                     shared: shared
                 }
             })
-            new seed.ViewModel({
+            new Seed({
                 el: '#d',
                 data: {
                     shared: shared,

examples/simple.html

@@ -13,8 +13,8 @@
         <span sd-text="hello.msg | uppercase" sd-class="red:checked"></span>
         <h1 sd-if="checked">Now you see me</h1>
         <script>
-            seed.config({ debug: true })
-            var demo = new seed.ViewModel({
+            Seed.config({ debug: true })
+            var demo = new Seed({
                 el: 'body'
             })
             demo.hello = {

examples/template.html

@@ -16,7 +16,7 @@
         <script>
 
             // direct usage
-            var china  = new seed.ViewModel({
+            var china  = new Seed({
                 template: '#test'
             })
             document.body.appendChild(china.$el)
@@ -25,7 +25,7 @@
             china.hi = '你好'
 
             // extended usage
-            var Hawaii = seed.ViewModel.extend({
+            var Hawaii = Seed.extend({
                 template: '#test'
             })
             var hawaii = new Hawaii()

examples/todomvc/js/app.js

@@ -4,15 +4,18 @@ var filters = {
     completed: function (todo) { return todo.completed }
 }
 
-var Todos = seed.ViewModel.extend({
+var app = new Seed({
+
+    el: '#todoapp',
 
     init: function () {
-        this.todos = todoStorage.fetch()
         this.remaining = this.todos.filter(filters.active).length
         this.updateFilter()
     },
 
-    proto: {
+    data: {
+
+        todos: todoStorage.fetch(),
 
         updateFilter: function () {
             var filter = location.hash.slice(2)
@@ -79,7 +82,6 @@ var Todos = seed.ViewModel.extend({
     }
 })
 
-var app = new Todos({ el: '#todoapp' })
 window.addEventListener('hashchange', function () {
     app.updateFilter()
 })

src/main.js

@@ -3,13 +3,12 @@ var config      = require('./config'),
     directives  = require('./directives'),
     filters     = require('./filters'),
     textParser  = require('./text-parser'),
-    utils       = require('./utils'),
-    api         = {}
+    utils       = require('./utils')
 
 /*
  *  Set config options
  */
-api.config = function (opts) {
+ViewModel.config = function (opts) {
     if (opts) {
         utils.extend(config, opts)
         textParser.buildRegex()
@@ -19,7 +18,7 @@ api.config = function (opts) {
 /*
  *  Allows user to register/retrieve a directive definition
  */
-api.directive = function (id, fn) {
+ViewModel.directive = function (id, fn) {
     if (!fn) return directives[id]
     directives[id] = fn
 }
@@ -27,7 +26,7 @@ api.directive = function (id, fn) {
 /*
  *  Allows user to register/retrieve a filter function
  */
-api.filter = function (id, fn) {
+ViewModel.filter = function (id, fn) {
     if (!fn) return filters[id]
     filters[id] = fn
 }
@@ -35,7 +34,7 @@ api.filter = function (id, fn) {
 /*
  *  Allows user to register/retrieve a ViewModel constructor
  */
-api.vm = function (id, Ctor) {
+ViewModel.vm = function (id, Ctor) {
     if (!Ctor) return utils.vms[id]
     utils.vms[id] = Ctor
 }
@@ -43,7 +42,7 @@ api.vm = function (id, Ctor) {
 /*
  *  Allows user to register/retrieve a template partial
  */
-api.partial = function (id, partial) {
+ViewModel.partial = function (id, partial) {
     if (!partial) return utils.partials[id]
     utils.partials[id] = templateToFragment(partial)
 }
@@ -51,12 +50,11 @@ api.partial = function (id, partial) {
 /*
  *  Allows user to register/retrieve a transition definition object
  */
-api.transition = function (id, transition) {
+ViewModel.transition = function (id, transition) {
     if (!transition) return utils.transitions[id]
     utils.transitions[id] = transition
 }
 
-api.ViewModel = ViewModel
 ViewModel.extend = extend
 
 /*
@@ -154,4 +152,4 @@ function templateToFragment (template) {
     return frag
 }
 
-module.exports = api
+module.exports = ViewModel

test/.jshintrc

@@ -17,7 +17,7 @@
         "after": true,
         "assert": true,
         "mock": true,
-        "seed": true,
+        "Seed": true,
         "$": true
     }
 }

test/unit/runner.html

@@ -13,7 +13,7 @@
 		<script src="../seed.test.js"></script>
 		<script>
 			mocha.setup('bdd')
-			var seed = require('seed'),
+			var Seed = require('seed'),
 				assert = chai.assert
 
 			function mock (id, html, attrs) {

test/unit/specs/api.js

@@ -4,11 +4,11 @@ describe('UNIT: API', function () {
         
         it('should work when changing prefix', function () {
             var testId = 'config-1'
-            seed.config({
+            Seed.config({
                 prefix: 'test'
             })
             mock(testId, '<span test-text="test"></span>')
-            new seed.ViewModel({
+            new Seed({
                 el: '#' + testId,
                 data: { test: testId }
             })
@@ -17,14 +17,14 @@ describe('UNIT: API', function () {
 
         it('should work when changing interpolate tags', function () {
             var testId = 'config-2'
-            seed.config({
+            Seed.config({
                 interpolateTags: {
                     open: '<%',
                     close: '%>'
                 }
             })
             mock(testId, '<% test %>')
-            new seed.ViewModel({
+            new Seed({
                 el: '#' + testId,
                 data: { test: testId }
             })
@@ -32,7 +32,7 @@ describe('UNIT: API', function () {
         })
 
         after(function () {
-            seed.config({
+            Seed.config({
                 prefix: 'sd',
                 interpolateTags: {
                     open: '{{',
@@ -52,9 +52,9 @@ describe('UNIT: API', function () {
         it('should create custom filter', function () {
             var testId = 'filter-1',
                 msg = '12345'
-            seed.filter('reverse', reverse)
+            Seed.filter('reverse', reverse)
             mock(testId, '{{ test | reverse }}')
-            new seed.ViewModel({
+            new Seed({
                 el: '#' + testId,
                 data: { test: msg }
             })
@@ -62,7 +62,7 @@ describe('UNIT: API', function () {
         })
 
         it('should return filter function if only one arg is given', function () {
-            var f = seed.filter('reverse')
+            var f = Seed.filter('reverse')
             assert.strictEqual(f, reverse)
         })
 
@@ -75,11 +75,11 @@ describe('UNIT: API', function () {
         it('should create custom directive with set function only', function () {
             var testId = 'directive-1',
                 msg = 'wowow'
-            seed.directive('test', function (value) {
+            Seed.directive('test', function (value) {
                 this.el.setAttribute(testId, value + '123')
             })
             mock(testId, '<span sd-test="test"></span>')
-            new seed.ViewModel({
+            new Seed({
                 el: '#' + testId,
                 data: { test: msg }
             })
@@ -101,9 +101,9 @@ describe('UNIT: API', function () {
                     this.el.removeAttribute(testId + 'bind')
                 }
             }
-            seed.directive('test2', dirTest)
+            Seed.directive('test2', dirTest)
             mock(testId, '<span sd-test2="test"></span>')
-            var vm = new seed.ViewModel({
+            var vm = new Seed({
                     el: '#' + testId,
                     data: { test: msg }
                 }),
@@ -115,7 +115,7 @@ describe('UNIT: API', function () {
         })
 
         it('should return directive object/fn if only one arg is given', function () {
-            var dir = seed.directive('test2')
+            var dir = Seed.directive('test2')
             assert.strictEqual(dir, dirTest)
         })
 
@@ -124,24 +124,24 @@ describe('UNIT: API', function () {
     describe('vm()', function () {
 
         var testId = 'api-vm-test',
-            Test = seed.ViewModel.extend({
+            Test = Seed.extend({
                 className: 'hihi',
                 data: { hi: 'ok' }
             }),
             utils = require('seed/src/utils')
 
         it('should register a VM constructor', function () {
-            seed.vm(testId, Test)
+            Seed.vm(testId, Test)
             assert.strictEqual(utils.vms[testId], Test)
         })
 
         it('should retrieve the VM if has only one arg', function () {
-            assert.strictEqual(seed.vm(testId), Test)
+            assert.strictEqual(Seed.vm(testId), Test)
         })
 
         it('should work with sd-viewmodel', function () {
             mock(testId, '<div sd-viewmodel="' + testId + '">{{hi}}</div>')
-            var t = new seed.ViewModel({ el: '#' + testId }),
+            var t = new Seed({ el: '#' + testId }),
                 child = t.$el.querySelector('div')
             assert.strictEqual(child.className, 'hihi')
             assert.strictEqual(child.textContent, 'ok')
@@ -156,7 +156,7 @@ describe('UNIT: API', function () {
             utils = require('seed/src/utils')
 
         it('should register the partial as a dom fragment', function () {
-            seed.partial(testId, partial)
+            Seed.partial(testId, partial)
             var converted = utils.partials[testId]
             assert.ok(converted instanceof window.DocumentFragment)
             assert.strictEqual(converted.querySelector('.partial-test a').innerHTML, '{{hi}}')
@@ -164,14 +164,14 @@ describe('UNIT: API', function () {
         })
 
         it('should retrieve the partial if has only one arg', function () {
-            assert.strictEqual(utils.partials[testId], seed.partial(testId))
+            assert.strictEqual(utils.partials[testId], Seed.partial(testId))
         })
 
         it('should work with sd-partial as a directive', function () {
             var testId = 'api-partial-direcitve'
-            seed.partial(testId, partial)
+            Seed.partial(testId, partial)
             mock(testId, '<div class="directive" sd-partial="' + testId + '">hello</div>')
-            var t = new seed.ViewModel({
+            var t = new Seed({
                 el: '#' + testId,
                 data: { hi: 'hohoho' }
             })
@@ -181,9 +181,9 @@ describe('UNIT: API', function () {
 
         it('should work with sd-partial as an inline interpolation', function () {
             var testId = 'api-partial-inline'
-            seed.partial(testId, partial)
+            Seed.partial(testId, partial)
             mock(testId, '<div class="inline">{{>' + testId + '}}</div>')
-            var t = new seed.ViewModel({
+            var t = new Seed({
                 el: '#' + testId,
                 data: { hi: 'hohoho' }
             })
@@ -199,12 +199,12 @@ describe('UNIT: API', function () {
             utils = require('seed/src/utils')
 
         it('should register a transition object', function () {
-            seed.transition(testId, transition)
+            Seed.transition(testId, transition)
             assert.strictEqual(utils.transitions[testId], transition)
         })
 
         it('should retrieve the transition if has only one arg', function () {
-            assert.strictEqual(seed.transition(testId), transition)
+            assert.strictEqual(Seed.transition(testId), transition)
         })
 
         // it('should work with sd-transition', function () {
@@ -213,15 +213,15 @@ describe('UNIT: API', function () {
 
     })
 
-    describe('ViewModel.extend()', function () {
+    describe('extend()', function () {
         
-        it('should return a subclass of seed.ViewModel', function () {
-            var Test = seed.ViewModel.extend({})
-            assert.ok(Test.prototype instanceof seed.ViewModel)
+        it('should return a subclass of Seed', function () {
+            var Test = Seed.extend({})
+            assert.ok(Test.prototype instanceof Seed)
         })
 
         it('should allow further extensions', function () {
-            var Parent = seed.ViewModel.extend({
+            var Parent = Seed.extend({
                 data: {
                     test: 'hi'
                 }
@@ -255,7 +255,7 @@ describe('UNIT: API', function () {
                 
                 it('should be called on the instance when instantiating', function () {
                     var called = false,
-                        Test = seed.ViewModel.extend({ init: function () {
+                        Test = Seed.extend({ init: function () {
                             called = true
                         }})
                     new Test({ el: document.createElement('div') })
@@ -272,7 +272,7 @@ describe('UNIT: API', function () {
                         b: 2,
                         c: function () {}
                     }
-                    var Test = seed.ViewModel.extend({ proto: mixins })
+                    var Test = Seed.extend({ proto: mixins })
                     for (var key in mixins) {
                         assert.strictEqual(Test.prototype[key], mixins[key])
                     }
@@ -284,7 +284,7 @@ describe('UNIT: API', function () {
                 
                 it('should be copied to each instance', function () {
                     var testData = { a: 1 },
-                        Test = seed.ViewModel.extend({
+                        Test = Seed.extend({
                             data: {
                                 test: testData
                             }
@@ -303,13 +303,13 @@ describe('UNIT: API', function () {
                 
                 it('should not accept el as an extension option', function () {
                     var el = document.createElement('div'),
-                        Test = seed.ViewModel.extend({ el: el }),
+                        Test = Seed.extend({ el: el }),
                         t = new Test()
                     assert.notStrictEqual(t.$el, el)
                 })
 
                 it('should create el with options: tagName, id, className and attributes', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         tagName: 'p',
                         id: 'extend-test',
                         className: 'extend',
@@ -331,7 +331,7 @@ describe('UNIT: API', function () {
 
                 it('should ignore tagName when el is passed as an instance option', function () {
                     var el = document.createElement('div'),
-                        Test = seed.ViewModel.extend({
+                        Test = Seed.extend({
                             tagName: 'p',
                             id: 'extend-test',
                             className: 'extend',
@@ -361,7 +361,7 @@ describe('UNIT: API', function () {
                 var raw = '<span>{{hello}}</span><a>haha</a>'
                 
                 it('should take direct string template and work', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                             tagName: 'p',
                             template: raw,
                             data: {
@@ -383,7 +383,7 @@ describe('UNIT: API', function () {
                     tpl.type = 'text/template'
                     tpl.innerHTML = raw
                     document.getElementById('test').appendChild(tpl)
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         template: '#' + testId,
                         data: { hello: testId }
                     })
@@ -392,7 +392,7 @@ describe('UNIT: API', function () {
                 })
 
                 it('should be overwritable', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         template: '<div>this should not happen</div>'
                     })
                     var t = new Test({
@@ -409,7 +409,7 @@ describe('UNIT: API', function () {
             describe('directives', function () {
                 
                 it('should allow the VM to use private directives', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         directives: {
                             test: function (value) {
                                 this.el.innerHTML = value ? 'YES' : 'NO'
@@ -434,7 +434,7 @@ describe('UNIT: API', function () {
             describe('filters', function () {
                 
                 it('should allow the VM to use private filters', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         filters: {
                             test: function (value) {
                                 return value + '12345'
@@ -455,12 +455,12 @@ describe('UNIT: API', function () {
             describe('vms', function () {
 
                 it('should allow the VM to use private child VMs', function () {
-                    var Child = seed.ViewModel.extend({
+                    var Child = Seed.extend({
                         data: {
                             name: 'child'
                         }
                     })
-                    var Parent = seed.ViewModel.extend({
+                    var Parent = Seed.extend({
                         template: '<p>{{name}}</p><div sd-viewmodel="child">{{name}}</div>',
                         data: {
                             name: 'dad'
@@ -479,7 +479,7 @@ describe('UNIT: API', function () {
             describe('partials', function () {
                 
                 it('should allow the VM to use private partials', function () {
-                    var Test = seed.ViewModel.extend({
+                    var Test = Seed.extend({
                         attributes: {
                             'sd-partial': 'test'
                         },

test/unit/specs/directives.js

@@ -438,7 +438,7 @@ describe('UNIT: Directives', function () {
 })
 
 function mockDirective (dirName, tag, type) {
-    var dir = seed.directive(dirName),
+    var dir = Seed.directive(dirName),
         ret = {
             binding: { compiler: { vm: {} } },
             compiler: { vm: {} },

test/unit/specs/viewmodel.js

@@ -17,7 +17,7 @@ describe('UNIT: ViewModel', function () {
             }
         },
         arr = [1, 2, 3],
-        vm = new seed.ViewModel({
+        vm = new Seed({
             el: '#vm-test',
             data: {
                 a: data,
@@ -109,7 +109,7 @@ describe('UNIT: ViewModel', function () {
     describe('.$on', function () {
         
         it('should register listener on vm\'s compiler\'s emitter', function () {
-            var t = new seed.ViewModel(),
+            var t = new Seed(),
                 triggered = false,
                 msg = 'on test'
             t.$on('test', function (m) {
@@ -125,7 +125,7 @@ describe('UNIT: ViewModel', function () {
     describe('$off', function () {
         
         it('should turn off the listener', function () {
-            var t = new seed.ViewModel(),
+            var t = new Seed(),
                 triggered1 = false,
                 triggered2 = false,
                 f1 = function () {
@@ -149,7 +149,7 @@ describe('UNIT: ViewModel', function () {
         it('should notify all child VMs', function () {
             var triggered = 0,
                 msg = 'broadcast test'
-            var Child = seed.ViewModel.extend({
+            var Child = Seed.extend({
                 init: function () {
                     this.$on('hello', function (m) {
                         assert.strictEqual(m, msg)
@@ -157,7 +157,7 @@ describe('UNIT: ViewModel', function () {
                     })
                 }
             })
-            var Test = seed.ViewModel.extend({
+            var Test = Seed.extend({
                 template: '<div sd-viewmodel="test"></div><div sd-viewmodel="test"></div>',
                 vms: {
                     test: Child
@@ -176,7 +176,7 @@ describe('UNIT: ViewModel', function () {
             var topTriggered = false,
                 midTriggered = false,
                 msg = 'emit test'
-            var Bottom = seed.ViewModel.extend({
+            var Bottom = Seed.extend({
                 init: function () {
                     var self = this
                     setTimeout(function () {
@@ -187,7 +187,7 @@ describe('UNIT: ViewModel', function () {
                     }, 0)
                 }
             })
-            var Middle = seed.ViewModel.extend({
+            var Middle = Seed.extend({
                 template: '<div sd-viewmodel="bottom"></div>',
                 vms: { bottom: Bottom },
                 init: function () {
@@ -197,7 +197,7 @@ describe('UNIT: ViewModel', function () {
                     })
                 }
             })
-            var Top = seed.ViewModel.extend({
+            var Top = Seed.extend({
                 template: '<div sd-viewmodel="middle"></div>',
                 vms: { middle: Middle },
                 init: function () {