fix: close #63, close #63, add logger.js (#64)

* fix: close #63, close #63, add logger.js * chore: add editor config * docs: fix issue number
tuax · Nov 19, 2018 · a443af3 · a443af3
1 parent 23ba9ae
commit a443af3
Show file tree

Hide file tree

Showing 15 changed files with 134 additions and 106 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/packages/tua-mp/examples/basic/utils/tua-mp.js b/packages/tua-mp/examples/basic/utils/tua-mp.js
@@ -117,6 +117,30 @@ var __dep__ = '__dep__';
 // 被框架占用的关键字，在 data 和 computed 中如果使用这些关键字，将会抛出错误
 var reservedKeys = ['$data', '$emit', '$computed', __TUA_PATH__];
 
+/**
+ * 统一的日志输出函数，在测试环境时不输出
+ * @param {String} type 输出类型 log|warn|error
+ * @param {any} out 具体的输出内容
+ */
+var logByType = function logByType(type) {
+    return function () {
+        var _console;
+
+        for (var _len = arguments.length, out = Array(_len), _key = 0; _key < _len; _key++) {
+            out[_key] = arguments[_key];
+        }
+
+        /* istanbul ignore next */
+        (_console = console)[type].apply(_console, ['[TUA-API]:'].concat(out));
+    };
+};
+
+var logger = {
+    log: logByType('log'),
+    warn: logByType('warn'),
+    error: logByType('error')
+};
+
 var isFn = function isFn(fn) {
     return typeof fn === 'function';
 };
@@ -142,6 +166,9 @@ var getPathByPrefix = function getPathByPrefix(prefix, key) {
     return prefix === '' ? key : prefix + '.' + key;
 };
 
+var jsonParse = JSON.parse.bind(JSON);
+var stringify = JSON.stringify.bind(JSON);
+
 /**
  * 将 source 上的属性代理到 target 上
  * @param {Object} source 被代理对象
@@ -203,7 +230,7 @@ var setObjByPath = function setObjByPath(_ref) {
                 );
             }, 'this');
 
-            error('Property "' + cur + '" is not found in "' + parentStr + '": ' + 'Make sure that this property has initialized in the data option.');
+            logger.error('Property "' + cur + '" is not found in "' + parentStr + '": ' + 'Make sure that this property has initialized in the data option.');
         }
 
         if (idx === arr.length - 1) {
@@ -258,28 +285,6 @@ var assertType = function assertType(value, type) {
     return { valid: valid, expectedType: expectedType };
 };
 
-/**
- * 统一的日志输出函数，在测试环境时不输出
- * @param {String} type 输出类型 log|warn|error
- * @param {any} out 输出的内容
- */
-var logByType = function logByType(type) {
-    return function () {
-        var _console;
-
-        for (var _len = arguments.length, out = Array(_len), _key = 0; _key < _len; _key++) {
-            out[_key] = arguments[_key];
-        }
-
-        /* istanbul ignore next */
-        (_console = console)[type].apply(_console, ['[TUA-MP]:'].concat(out));
-    };
-};
-
-var log = logByType('log');
-var warn = logByType('warn');
-var error = logByType('error');
-
 // reserved keys
 var isReservedKeys = function isReservedKeys(str) {
     return reservedKeys.indexOf(str) !== -1;
@@ -358,7 +363,7 @@ var assertProp = function assertProp(_ref) {
     }
 
     if (!valid) {
-        warn('Invalid prop: type check failed for prop "' + name + '".' + (' Expected ' + expectedTypes.join(', ')) + (', got ' + toRawType(value) + '.'));
+        logger.warn('Invalid prop: type check failed for prop "' + name + '".' + (' Expected ' + expectedTypes.join(', ')) + (', got ' + toRawType(value) + '.'));
     }
 
     return valid;
@@ -373,19 +378,15 @@ var assertProp = function assertProp(_ref) {
 var getObserver = function getObserver(name) {
     return function (prop) {
         return function observer(value) {
-            var _this = this;
-
             // 触发 setter
-            Promise.resolve().then(function () {
-                _this[name] = value;
-            });
+            this[name] = value;
 
             var valid = assertProp({ prop: prop, name: name, value: value });
             var validator = prop.validator;
 
 
             if (validator && !validator(value)) {
-                warn('Invalid prop: custom validator check failed for prop "' + name + '".');
+                logger.warn('Invalid prop: custom validator check failed for prop "' + name + '".');
                 return false;
             }
 
@@ -491,7 +492,7 @@ var hackSetData = function hackSetData(vm) {
     });
 };
 
-var version = "0.8.1";
+var version = "0.8.2";
 
 /**
  * 根据 vm 生成 key
@@ -620,6 +621,10 @@ var VmStatus = function () {
                 // 更新数据
                 vm.updated ? setData.call(vm, newState, vm.updated) : setData.call(vm, newState);
 
+                // 干掉原生 setData 触发的 setter，不然会死循环
+                delete _this.newStateByVM[vmKey];
+                delete _this.oldStateByVM[vmKey];
+
                 // 触发 watch
                 Object.keys(newState).map(function (key) {
                     var newVal = newState[key];
@@ -1051,7 +1056,7 @@ var bindComputed = function bindComputed(vm, computed, asyncSetData) {
             },
             set: function set$$1() {
                 if (typeof computed[key].set === 'undefined') {
-                    warn('Computed property "' + key + '" was assigned to but it has no setter.');
+                    logger.warn('Computed property "' + key + '" was assigned to but it has no setter.');
                 } else {
                     var setVal = computed[key].set.bind(vm);
                     setVal.apply(undefined, arguments);
@@ -1264,6 +1269,6 @@ var TuaPage = function TuaPage(_ref) {
     }));
 };
 
-log('Version ' + version);
+logger.log('Version ' + version);
 
 export { TuaComp, TuaPage };
diff --git a/packages/tua-mp/package.json b/packages/tua-mp/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tua-mp",
-    "version": "0.8.1",
+    "version": "0.8.2",
     "description": "A progressive miniprogram framework for coding like Vue",
     "main": "examples/basic/utils/tua-mp.js",
     "files": [

diff --git a/packages/tua-mp/src/TuaComp.js b/packages/tua-mp/src/TuaComp.js
@@ -45,6 +45,13 @@ export const TuaComp = ({
     created (...options) {
         rest.beforeCreate && rest.beforeCreate.apply(this, options)
         rest.created && rest.created.apply(this, options)
+
+        if (process.env.NODE_ENV === 'test') {
+            this.$props = {
+                ...properties,
+                ...getPropertiesFromProps(props),
+            }
+        }
     },
     attached (...options) {
         rest.beforeMount && rest.beforeMount.apply(this, options)

diff --git a/packages/tua-mp/src/VmStatus.js b/packages/tua-mp/src/VmStatus.js
@@ -109,6 +109,10 @@ export default class VmStatus {
                     ? setData.call(vm, newState, vm.updated)
                     : setData.call(vm, newState)
 
+                // 干掉原生 setData 触发的 setter，不然会死循环
+                delete this.newStateByVM[vmKey]
+                delete this.oldStateByVM[vmKey]
+
                 // 触发 watch
                 Object.keys(newState)
                     .map((key) => {

diff --git a/packages/tua-mp/src/index.js b/packages/tua-mp/src/index.js
@@ -1,7 +1,7 @@
-import { log } from './utils/index'
+import { logger } from './utils/index'
 import { version } from '../package.json'
 
-log(`Version ${version}`)
+logger.log(`Version ${version}`)
 
 export * from './TuaComp'
 export * from './TuaPage'
diff --git a/packages/tua-mp/src/init.js b/packages/tua-mp/src/init.js
@@ -1,13 +1,11 @@
 import {
     isFn,
-    warn,
+    logger,
     proxyData,
     getValByPath,
 } from './utils/index'
-import {
-    COMMON_PROP,
-} from './constants'
 import Dep from './observer/dep'
+import { COMMON_PROP } from './constants'
 
 /**
  * 遍历观察 vm.data 中的所有属性，并将其直接挂到 vm 上
@@ -82,7 +80,7 @@ export const bindComputed = (vm, computed, asyncSetData) => {
             },
             set (...options) {
                 if (typeof computed[key].set === 'undefined') {
-                    warn(`Computed property "${key}" was assigned to but it has no setter.`)
+                    logger.warn(`Computed property "${key}" was assigned to but it has no setter.`)
                 } else {
                     const setVal = computed[key].set.bind(vm)
                     setVal(...options)

diff --git a/packages/tua-mp/src/utils/basic.js b/packages/tua-mp/src/utils/basic.js
@@ -5,6 +5,7 @@ import {
     reservedKeys,
     __TUA_PATH__,
 } from '../constants'
+import { logger } from './logger'
 
 export const isFn = fn => typeof fn === 'function'
 
@@ -19,8 +20,12 @@ export const isPlainObject = value =>
     _toString.call(value) === '[object Object]'
 
 // 根据路径前缀和 key 得到当前路径
-export const getPathByPrefix = (prefix, key) =>
-    prefix === '' ? key : `${prefix}.${key}`
+export const getPathByPrefix = (prefix, key) => prefix === ''
+    ? key
+    : `${prefix}.${key}`
+
+export const jsonParse = JSON.parse.bind(JSON)
+export const stringify = JSON.stringify.bind(JSON)
 
 /**
  * 将 source 上的属性代理到 target 上
@@ -79,7 +84,7 @@ export const setObjByPath = ({ obj, path, val, isCheckDef = false }) => pathStr2
                     'this'
                 )
 
-            error(
+            logger.error(
                 `Property "${cur}" is not found in "${parentStr}": ` +
                 `Make sure that this property has initialized in the data option.`
             )
@@ -138,23 +143,6 @@ export const assertType = (value, type) => {
     return { valid, expectedType }
 }
 
-/**
- * 统一的日志输出函数，在测试环境时不输出
- * @param {String} type 输出类型 log|warn|error
- * @param {any} out 输出的内容
- */
-const logByType = (type) => (...out) => {
-    /* istanbul ignore else */
-    if (process.env.NODE_ENV === 'test') return
-
-    /* istanbul ignore next */
-    console[type](`[TUA-MP]:`, ...out)
-}
-
-export const log = logByType('log')
-export const warn = logByType('warn')
-export const error = logByType('error')
-
 // reserved keys
 const isReservedKeys = str => reservedKeys.indexOf(str) !== -1
 const getObjHasReservedKeys = obj => Object.keys(obj).filter(isReservedKeys)

diff --git a/packages/tua-mp/src/utils/index.js b/packages/tua-mp/src/utils/index.js
@@ -1,4 +1,5 @@
 export * from './comp'
 export * from './basic'
 export * from './props'
+export * from './logger'
 export * from './hackSetData'
diff --git a/packages/tua-mp/src/utils/logger.js b/packages/tua-mp/src/utils/logger.js
@@ -0,0 +1,18 @@
+/**
+ * 统一的日志输出函数，在测试环境时不输出
+ * @param {String} type 输出类型 log|warn|error
+ * @param {any} out 具体的输出内容
+ */
+const logByType = (type) => (...out) => {
+    /* istanbul ignore else */
+    if (process.env.NODE_ENV === 'test') return
+
+    /* istanbul ignore next */
+    console[type](`[TUA-API]:`, ...out)
+}
+
+export const logger = {
+    log: logByType('log'),
+    warn: logByType('warn'),
+    error: logByType('error'),
+}
diff --git a/packages/tua-mp/src/utils/props.js b/packages/tua-mp/src/utils/props.js
@@ -1,9 +1,9 @@
 import {
     isFn,
-    warn,
     toRawType,
     assertType,
 } from './basic'
+import { logger } from './logger'
 import { TYPES } from '../constants'
 
 /**
@@ -39,7 +39,7 @@ export const assertProp = ({ prop, name, value }) => {
     }
 
     if (!valid) {
-        warn(
+        logger.warn(
             `Invalid prop: type check failed for prop "${name}".` +
             ` Expected ${expectedTypes.join(', ')}` +
             `, got ${toRawType(value)}.`
@@ -58,15 +58,13 @@ export const assertProp = ({ prop, name, value }) => {
 export const getObserver = (name) => (prop) => {
     return function observer (value) {
         // 触发 setter
-        Promise.resolve().then(() => {
-            this[name] = value
-        })
+        this[name] = value
 
         const valid = assertProp({ prop, name, value })
         const { validator } = prop
 
         if (validator && !validator(value)) {
-            warn(`Invalid prop: custom validator check failed for prop "${name}".`)
+            logger.warn(`Invalid prop: custom validator check failed for prop "${name}".`)
             return false
         }