Merge pull request #6 from jinzhan/next

add Types & `context`

.babelrc

@@ -1,5 +1,17 @@
 {
     "presets": [
-        "@babel/env"
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "browsers": [
+                        "> 1%",
+                        "last 2 versions",
+                        "iOS >= 9",
+                        "android >= 5"
+                    ]
+                }
+            }
+        ]
     ]
 }

.gitignore

@@ -87,3 +87,4 @@ yarn.lock
 
 *.bak.js
 *.bak?.js
+types/test/*.js

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;
     }