update this with context

example/computed.js

@@ -13,7 +13,7 @@ const wrapper = document.createElement('div');
 document.body.appendChild(wrapper);
 
 
-const App =  defineComponent(() => {
+const App =  defineComponent(context => {
     template(`
         <div>            
             <div><strong>Computed Function</strong></div>
@@ -34,9 +34,9 @@ const App =  defineComponent(() => {
         return info.get('first') + ' ' + info.get('last');
     });
 
-    // 虽然不推荐用this，但是内部的this还是支持的
-    const msg = computed('msg', function () {
-        return this.data.get('name') + '(' + info.get('email') + ')';
+    // 使用 context 替代内部的 this
+    const msg = computed('msg',  () => {
+        return context.data.get('name')  + '(' + info.get('email') + ')';
     });
 
     const more = computed('more', function () {

example/messages.js

@@ -17,7 +17,7 @@ const wrapper = document.createElement('div');
 document.body.appendChild(wrapper);
 
 
-const Select = defineComponent(() => {
+const Select = defineComponent(context => {
     template('<ul><slot></slot></ul>');
     const value = data('value', '');
     messages({
@@ -26,41 +26,41 @@ const Select = defineComponent(() => {
         },
 
         'UI:select-item-attached': function (arg) {
-            this.items.push(arg.target);
+            context.items.push(arg.target);
             arg.target.data.set('selectValue', value.get());
         },
 
         'UI:select-item-detached': function (arg) {
-            let len = this.items.length;
+            let len = context.items.length;
             while (len--) {
-                if (this.items[len] === arg.target) {
-                    this.items.splice(len, 1);
+                if (context.items[len] === arg.target) {
+                    context.items.splice(len, 1);
                 }
             }
         }
     });
 
     onInited(function () {
-        this.items = [];
+        context.items = [];
     });
 }, san);
 
 
-let SelectItem = defineComponent(() => {
+let SelectItem = defineComponent(context => {
     template('<li on-click="select"><slot></slot></li>');
     const value = data('value', '');
     method({
         select: function () {
-            this.dispatch('UI:select-item-selected', value.get());
+            context.dispatch('UI:select-item-selected', value.get());
         }
     });
 
     onAttached(function () {
-        this.dispatch('UI:select-item-attached');
+        context.dispatch('UI:select-item-attached');
     });
 
     onDetached(function () {
-        this.dispatch('UI:select-item-detached');
+        context.dispatch('UI:select-item-detached');
     });
 }, san);
 

example/watch.js

@@ -12,7 +12,7 @@ import {
 const wrapper = document.createElement('div');
 document.body.appendChild(wrapper);
 
-const App =  defineComponent(() => {
+const App =  defineComponent(context => {
     template(`
         <div>
             <div><strong>Watch Function</strong></div>
@@ -39,7 +39,7 @@ const App =  defineComponent(() => {
     const nameData = data('name', 'myName');
 
     method('rename', function () {
-        this.data.set('name', 'jinz~' + Math.random());
+        context.data.set('name', 'jinz~' + Math.random());
         // info.set('name', 'jinz~' + Math.random());
     });
 

index.js

@@ -133,9 +133,8 @@ export function defineComponent(creator, san) {
         context = this.__scContext;
         contexts.push(context);
 
-        // 重新赋值，改变下 this
         let creatorAsInstance = defineContext.creator;
-        creatorAsInstance();
+        creatorAsInstance(this);
 
         contexts.pop();
         context = contexts[contexts.length - 1];
@@ -360,11 +359,11 @@ class DataProxy {
  * @returns {Object} 返回一个带有包装有 this.data 相关数据操作API的对象
  */
 export function data(key, value) {
-    if (typeof key !== 'string') {
+    if (context.creator) {
         return;
     }
 
-    if (context.creator) {
+    if (typeof key !== 'string') {
         return;
     }
 
@@ -392,11 +391,11 @@ class ComputedProxy {
 }
 
 export function computed(name, fn) {
-    if (typeof name !== 'string') {
+    if (context.creator) {
         return;
     }
 
-    if (context.creator) {
+    if (typeof name !== 'string') {
         return;
     }
 

test/computed.spec.js

@@ -1,5 +1,5 @@
 describe('[Computed]: ', () => {
-    it("computed", function (done) {
+    it('computed', function (done) {
         let MyComponent = defineComponent(() => {
             template('<div><span title="{{name}}">{{name}}</span></div>');
 
@@ -21,11 +21,11 @@ describe('[Computed]: ', () => {
         let span = wrap.getElementsByTagName('span')[0];
         expect(span.title).toBe('first last');
 
-        myComponent.data.set('last', 'xxx')
+        myComponent.data.set('last', 'baidu')
 
         san.nextTick(function () {
             let span = wrap.getElementsByTagName('span')[0];
-            expect(span.title).toBe('first xxx');
+            expect(span.title).toBe('first baidu');
 
             myComponent.dispose();
             document.body.removeChild(wrap);
@@ -34,7 +34,7 @@ describe('[Computed]: ', () => {
 
     });
 
-    it("static computed property", function (done) {
+    it('static computed property', function (done) {
         let MyComponent = defineComponent(() => {
             template('<div><span title="{{name}}">{{name}}</span></div>');
             data('first', 'first');
@@ -56,19 +56,19 @@ describe('[Computed]: ', () => {
         let span = wrap.getElementsByTagName('span')[0];
         expect(span.title).toBe('first last');
 
-        myComponent.data.set('last', 'xxx')
+        myComponent.data.set('last', 'baidu');
 
         san.nextTick(function () {
             let span = wrap.getElementsByTagName('span')[0];
-            expect(span.title).toBe('first xxx');
+            expect(span.title).toBe('first baidu');
             myComponent.dispose();
             document.body.removeChild(wrap);
             done();
         });
 
     });
 
-    it("computed has computed dependency, computed item change", function (done) {
+    it('computed has computed dependency, computed item change', function (done) {
         let MyComponent = defineComponent(() => {
             template('<div><span title="{{msg}}">{{msg}}</span></div>');
 
@@ -82,7 +82,7 @@ describe('[Computed]: ', () => {
                 return info.get('first') + ' ' + info.get('last');
             });
 
-            const msg = computed('msg', function () {
+            computed('msg', function () {
                 return name.get() + '(' + info.get('email') + ')'
             });
         });
@@ -97,11 +97,11 @@ describe('[Computed]: ', () => {
         let span = wrap.getElementsByTagName('span')[0];
         expect(span.title).toBe('first last(name@name.com)');
 
-        myComponent.data.set('info.last', 'xxx')
+        myComponent.data.set('info.last', 'xiaodu')
 
         san.nextTick(function () {
             let span = wrap.getElementsByTagName('span')[0];
-            expect(span.title).toBe('first xxx(name@name.com)');
+            expect(span.title).toBe('first xiaodu(name@name.com)');
 
             myComponent.dispose();
             document.body.removeChild(wrap);
@@ -110,7 +110,7 @@ describe('[Computed]: ', () => {
 
     });
 
-    it("computed has computed dependency, normal data change", function (done) {
+    it('computed has computed dependency, normal data change', function (done) {
         let MyComponent = defineComponent(() => {
             template('<div><span title="{{msg}}">{{msg}}</span></div>');
 
@@ -124,7 +124,7 @@ describe('[Computed]: ', () => {
                 return info.get('first') + ' ' + info.get('last');
             });
 
-            const msg = computed('msg', function () {
+            computed('msg', function () {
                 return name.get() + '(' + info.get('email') + ')'
             });
         });
@@ -151,7 +151,7 @@ describe('[Computed]: ', () => {
 
     });
 
-    it("computed item compute once when init", function () {
+    it('computed item compute once when init', function () {
         let nameCount = 0;
         let welcomeCount = 0;
         let MyComponent = defineComponent(() => {

test/data.spec.js

@@ -1,11 +1,11 @@
 describe('[data]: ', () => {
     it("data set in inited should not update view", function (done) {
         let up = false;
-        let MyComponent = defineComponent(() => {
+        let MyComponent = defineComponent(context => {
             template('<a><span title="{{name}}-{{email}}">{{name}}</span></a>');
 
             onInited(function () {
-                this.data.set('name', 'errorrik');
+                context.data.set('name', 'errorrik');
             });
 
             data('name', 'erik',);

test/lifeCycle.spec.js

@@ -178,23 +178,23 @@ describe('[life cycle]: ', () => {
     it("life cycle and event", function () {
         let phases = {};
 
-        let Label = defineComponent(() => {
+        let Label = defineComponent(context => {
             template('<span>test</span>');
 
             onInited(function () {
-                this.fire('phase', 'inited');
+                context.fire('phase', 'inited');
             });
 
             onCreated(function () {
-                this.fire('phase', 'created');
+                context.fire('phase', 'created');
             });
 
             onAttached(function () {
-                this.fire('phase', 'attached');
+                context.fire('phase', 'attached');
             });
 
             onDetached(function () {
-                this.fire('phase', 'detached');
+                context.fire('phase', 'detached');
             });
         });
 
@@ -229,15 +229,15 @@ describe('[life cycle]: ', () => {
     });
 
     it("life cycle construct", function () {
-        let MyComponent = defineComponent(() => {
+        let MyComponent = defineComponent(context => {
             template('<a><span title="{{email}}">{{name}}</span></a>');
 
             onConstruct(function (options) {
                 expect(options.from).toBe('err');
-                expect(typeof this.template).toBe('string');
-                expect(this.data).toBeUndefined();
-                expect(this.scope).toBeUndefined();
-                expect(this.owner).toBeUndefined();
+                expect(typeof context.template).toBe('string');
+                expect(context.data).toBeUndefined();
+                expect(context.scope).toBeUndefined();
+                expect(context.owner).toBeUndefined();
             });
         });
 
@@ -330,7 +330,7 @@ describe('[life cycle]: ', () => {
 
     it("owner and child component life cycle, and el is ready when attached", function () {
         let uState = {};
-        let U = defineComponent(() => {
+        let U = defineComponent(context => {
             template('<u><slot></slot></u>'),
 
             onCompiled(function () {
@@ -342,12 +342,12 @@ describe('[life cycle]: ', () => {
             });
 
             onCreated(function () {
-                expect(this.el.tagName).toBe('U');
+                expect(context.el.tagName).toBe('U');
                 uState.created = 1;
             });
 
             onAttached(function () {
-                expect(this.el.tagName).toBe('U');
+                expect(context.el.tagName).toBe('U');
                 uState.attached = 1;
             });
 
@@ -361,7 +361,7 @@ describe('[life cycle]: ', () => {
         });
 
         let mainState = {};
-        let MyComponent = defineComponent(() => {
+        let MyComponent = defineComponent(context => {
             components({
                 'ui-u': U
             });
@@ -377,12 +377,12 @@ describe('[life cycle]: ', () => {
             })
 
             onCreated(function () {
-                expect(this.el.tagName).toBe('B');
+                expect(context.el.tagName).toBe('B');
                 mainState.created = 1;
             })
 
             onAttached(function () {
-                expect(this.el.tagName).toBe('B');
+                expect(context.el.tagName).toBe('B');
                 mainState.attached = 1;
             });