mesh-envoy-component - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/dist.js

@@ -1,1 +0,528 @@
-import{EMPTY_OBJ,ERROR_MSG,Lifecycle,NO_OP,isArray,isFunction,isNullOrUndef,isStringOrNumber,throwError}from"mesh-envoy-shared";var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),noOp=ERROR_MSG;"production"!==process.env.NODE_ENV&&(noOp="Envoy Error: Can only update a mounted or mounting component. This usually means you called setState() or forceUpdate() on an unmounted component. This is a no-op");var componentCallbackQueue=new Map;function queueStateChanges(e,t,n,o){for(var r in isFunction(t)&&(t=t(e.state,e.props,e.context)),t)e._pendingState[r]=t[r];e._pendingSetState||o&&e._blockRender?(Object.assign(e.state,e._pendingState),e._pendingState={}):o||e._blockRender?(e._pendingSetState=!0,applyState(e,!1,n)):addToQueue(e,!1,n)}function applyState(e,t,n){if(e._deferSetState&&!t||e._blockRender||e._unmounted)isNullOrUndef(n)||n();else{e._pendingSetState=!1;var o=e._pendingState,r=e.state,a=Object.assign({},r,o),i=e.props,l=e.context;e._pendingState={};var u=e._undateComponent(r,a,i,i,l,t,!0),c=!0;u===NO_OP?(u=e._lastInput,c=!1):isStringOrNumber(u)?u={text:u}:isArray(u)&&("production"!==process.env.NODE_ENV&&throwError("a valid Envoy VNode must be returned from a component render. You may have returned an array or an invalid object"),throwError());var s=e._lastInput,p=e._vNode;if(c){var d=e._lifecycle;d?d.listeners=[]:d=new Lifecycle,e._lifecycle=d;var b=e.getChildContext();b=isNullOrUndef(b)?l:Object.assign({},l,e._childContext,b),e._lastInput=e._patch(s,u,b),d.trigger(),e.excutePatchQueue(),e.componentDidUpdate(i,r)}if(u&&p){var h=p.elm=u.elm,f=e._componentToDOMNodeMap;f&&f.set(e,h)}isNullOrUndef(n)||n()}}function addToQueue(e,t,n){var o=componentCallbackQueue.get(e);o||(o=[],componentCallbackQueue.set(e,o),Promise.resolve().then(function(){componentCallbackQueue.delete(e),applyState(e,t,function(){for(var e=0,t=o.length;e<t;e++)o[e]()})})),n&&o.push(n)}var Component=function(){function e(t,n){classCallCheck(this,e),Object.defineProperty(this,"state",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"props",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"context",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"route",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"type",{enumerable:!0,writable:!0,value:"Component"}),Object.defineProperty(this,"_blockRender",{enumerable:!0,writable:!0,value:!1}),Object.defineProperty(this,"_ignoreSetState",{enumerable:!0,writable:!0,value:!1}),Object.defineProperty(this,"_blockSetState",{enumerable:!0,writable:!0,value:!0}),Object.defineProperty(this,"_deferSetState",{enumerable:!0,writable:!0,value:!1}),Object.defineProperty(this,"_pendingSetState",{enumerable:!0,writable:!0,value:!1}),Object.defineProperty(this,"_pendingState",{enumerable:!0,writable:!0,value:{}}),Object.defineProperty(this,"_lastInput",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"_vNode",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"_unmounted",{enumerable:!0,writable:!0,value:!1}),Object.defineProperty(this,"_lifecycle",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"_childContext",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"_childNodes",{enumerable:!0,writable:!0,value:null}),Object.defineProperty(this,"_componentToDOMNodeMap",{enumerable:!0,writable:!0,value:null}),this.props=t||{},this.context=n||{}}return createClass(e,[{key:"forceUpdate",value:function(e){this._unmounted||applyState(this,!0,e)}},{key:"setState",value:function(e,t){this._unmounted||(this._blockSetState?("production"!==process.env.NODE_ENV&&throwError("cannot update state via setState() in componentWillUpdate() or Constructor."),throwError()):this._ignoreSetState||queueStateChanges(this,e,t,!1))}},{key:"setStateSync",value:function(e){this._unmounted||(this._blockSetState?("production"!==process.env.NODE_ENV&&throwError("cannot update state via setStateSync() in componentWillUpdate() or Constructor."),throwError()):queueStateChanges(this,e,null,!0))}},{key:"render",value:function(e,t,n){}},{key:"componentWillMount",value:function(){}},{key:"componentDidUpdate",value:function(e,t,n){}},{key:"shouldComponentUpdate",value:function(e,t,n){return!0}},{key:"componentWillReceiveProps",value:function(e,t){}},{key:"componentWillUpdate",value:function(e,t,n){}},{key:"componentWillUnmount",value:function(){}},{key:"componentDidMount",value:function(){}},{key:"getChildContext",value:function(){}},{key:"excutePatchQueue",value:function(){}},{key:"_patch",value:function(){}},{key:"_undateComponent",value:function(e,t,n,o,r,a,i){if((this._unmounted&&("production"!==process.env.NODE_ENV&&throwError(noOp),throwError()),n!==o||o===EMPTY_OBJ||e!==t||a)&&(n===o&&o!==EMPTY_OBJ||(i||(this._blockRender=!0,this.componentWillReceiveProps(o,r),this._blockRender=!1),this._pendingSetState&&(t=Object.assign({},t,this._pendingState),this._pendingSetState=!1,this._pendingState={})),this.props=o,this.state=t,this.context=r,this.shouldComponentUpdate(o,t,r)||a))return this._blockSetState=!0,this.componentWillUpdate(o,t,r),this._blockSetState=!1,this.render(o,t,r);return NO_OP}}]),e}();export default Component;
+import { EMPTY_OBJ, ERROR_MSG, Lifecycle, NO_OP, isArray, isFunction, isNullOrUndef, isStringOrNumber, throwError } from 'mesh-envoy-shared';
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var noOp = ERROR_MSG;
+
+if (process.env.NODE_ENV !== 'production') {
+	noOp = 'Envoy Error: Can only update a mounted or mounting component. This usually means you called setState() or forceUpdate() on an unmounted component. This is a no-op';
+}
+
+var componentCallbackQueue = new Map();
+
+/**
+ * state 的更新队列
+ * 
+ * @param {any} component 
+ * @param {any} newState 
+ * @param {any} callback 
+ * @param {any} sync 
+ */
+function queueStateChanges(component, newState, callback, sync) {
+	if (isFunction(newState)) {
+		newState = newState(component.state, component.props, component.context);
+	}
+	for (var stateKey in newState) {
+		component._pendingState[stateKey] = newState[stateKey];
+	}
+
+	// 判断是否在更新 state 并且是不是需要直接更新
+	if (!component._pendingSetState && !(sync && component._blockRender)) {
+		if (sync || component._blockRender) {
+			// 直接更新
+			component._pendingSetState = true;
+			applyState(component, false, callback);
+		} else {
+			// 加入到更新队列
+			addToQueue(component, false, callback);
+		}
+	} else {
+		// 直接将 state 的值更新， 确保所有 pending state 全部更新
+		Object.assign(component.state, component._pendingState);
+		component._pendingState = {};
+	}
+}
+
+/**
+ * 实际更新 state 方法
+ * 
+ * @param {any} component 
+ * @param {any} force 
+ * @param {any} callback 
+ */
+function applyState(component, force, callback) {
+	if ((!component._deferSetState || force) && !component._blockRender && !component._unmounted) {
+		component._pendingSetState = false;
+		var pendingState = component._pendingState;
+		var prevState = component.state;
+		var nextState = Object.assign({}, prevState, pendingState);
+		var props = component.props;
+		var context = component.context;
+
+		component._pendingState = {};
+
+		// 根据旧 state 和 新 state 对比更新
+		var nextInput = component._undateComponent(prevState, nextState, props, props, context, force, true);
+		var didUpdate = true;
+
+		if (nextInput === NO_OP) {
+			// 没有变化操作
+			nextInput = component._lastInput;
+			didUpdate = false;
+		} else if (isStringOrNumber(nextInput)) {
+			// 变成了一个文本节点
+			nextInput = {
+				text: nextInput
+			};
+		} else if (isArray(nextInput)) {
+			if (process.env.NODE_ENV !== 'production') {
+				throwError('a valid Envoy VNode must be returned from a component render. You may have returned an array or an invalid object');
+			}
+			throwError();
+		}
+
+		var lastInput = component._lastInput;
+		var vNode = component._vNode;
+
+		if (didUpdate) {
+			// 更新生命周期时事件触发回调，暂时没用到
+			var subLifecycle = component._lifecycle;
+
+			if (!subLifecycle) {
+				subLifecycle = new Lifecycle();
+			} else {
+				subLifecycle.listeners = [];
+			}
+			component._lifecycle = subLifecycle;
+
+			// context 对象的更新，组件树共享的对象
+			var childContext = component.getChildContext();
+
+			if (isNullOrUndef(childContext)) {
+				childContext = context;
+			} else {
+				childContext = Object.assign({}, context, component._childContext, childContext);
+			}
+
+			// 将更新之后的 node 和之前 render 的 node 进行 patch ，push 到 patch 队列中
+			component._lastInput = component._patch(lastInput, nextInput, childContext);
+			subLifecycle.trigger();
+			// 执行 patch ，将更新推到客户端
+			component.excutePatchQueue();
+			component.componentDidUpdate(props, prevState);
+		}
+
+		// component 和 dom 的索引，没有实际用到，后来都是使用 ref 方法在 component 中获取到 node
+		if (nextInput && vNode) {
+			var dom = vNode.elm = nextInput.elm;
+			var componentToDOMNodeMap = component._componentToDOMNodeMap;
+			componentToDOMNodeMap && componentToDOMNodeMap.set(component, dom);
+		}
+
+		if (!isNullOrUndef(callback)) {
+			// 调用 setState 的 callback
+			callback();
+		}
+	} else if (!isNullOrUndef(callback)) {
+		// 调用 setState 的 callback
+		callback();
+	}
+}
+
+/**
+ *  执行 state 更新队列， 简单的宏任务队列，当 eventloop 空闲是优先执行
+ * 
+ * @param {any} component 
+ * @param {any} force 
+ * @param {any} callback 
+ */
+function addToQueue(component, force, callback) {
+	var queue = componentCallbackQueue.get(component);
+
+	if (!queue) {
+		queue = [];
+		componentCallbackQueue.set(component, queue);
+		Promise.resolve().then(function () {
+			componentCallbackQueue.delete(component);
+			applyState(component, force, function () {
+				for (var i = 0, len = queue.length; i < len; i++) {
+					queue[i]();
+				}
+			});
+		});
+	}
+
+	if (callback) {
+		queue.push(callback);
+	}
+}
+
+var Component = function () {
+	// 该 component 的 child nodes
+
+	// Component 操作的回调，暂时没用到
+
+	// 用于 vode 的 ref ，暂时没用
+
+	// 正在 pending 中的 state
+
+	// 用于 applySetState
+
+	// 忽略 setState
+	function Component(props, context) {
+		classCallCheck(this, Component);
+		Object.defineProperty(this, 'state', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, 'props', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, 'context', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, 'route', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, 'type', {
+			enumerable: true,
+			writable: true,
+			value: 'Component'
+		});
+		Object.defineProperty(this, '_blockRender', {
+			enumerable: true,
+			writable: true,
+			value: false
+		});
+		Object.defineProperty(this, '_ignoreSetState', {
+			enumerable: true,
+			writable: true,
+			value: false
+		});
+		Object.defineProperty(this, '_blockSetState', {
+			enumerable: true,
+			writable: true,
+			value: true
+		});
+		Object.defineProperty(this, '_deferSetState', {
+			enumerable: true,
+			writable: true,
+			value: false
+		});
+		Object.defineProperty(this, '_pendingSetState', {
+			enumerable: true,
+			writable: true,
+			value: false
+		});
+		Object.defineProperty(this, '_pendingState', {
+			enumerable: true,
+			writable: true,
+			value: {}
+		});
+		Object.defineProperty(this, '_lastInput', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, '_vNode', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, '_unmounted', {
+			enumerable: true,
+			writable: true,
+			value: false
+		});
+		Object.defineProperty(this, '_lifecycle', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, '_childContext', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, '_childNodes', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+		Object.defineProperty(this, '_componentToDOMNodeMap', {
+			enumerable: true,
+			writable: true,
+			value: null
+		});
+
+		this.props = props || {};
+		this.context = context || {};
+	}
+
+	/**
+  * 强制更新
+  * 
+  * @param {any} callback 
+  * @memberof Component
+  */
+
+	// compnent dom node ref, 暂时没用
+
+	// 该 component 子组件共享的 context object
+
+	// 标记这个 Component 是否已经被删了
+
+	// 上次输入的 node
+
+	// 标记是否在 setState
+
+	// 用于 componentWillUpdate
+
+	// 标记是否在 render
+
+
+	createClass(Component, [{
+		key: 'forceUpdate',
+		value: function forceUpdate(callback) {
+			if (this._unmounted) {
+				return;
+			}
+			applyState(this, true, callback);
+		}
+
+		/**
+   * 更新 state 方法
+   * 
+   * @param {any} newState 
+   * @param {any} callback 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'setState',
+		value: function setState(newState, callback) {
+			if (this._unmounted) {
+				return;
+			}
+			if (!this._blockSetState) {
+				if (!this._ignoreSetState) {
+					// 加入更新队列
+					queueStateChanges(this, newState, callback, false);
+				}
+			} else {
+				if (process.env.NODE_ENV !== 'production') {
+					throwError('cannot update state via setState() in componentWillUpdate() or Constructor.');
+				}
+				throwError();
+			}
+		}
+
+		/**
+   * 同步更新 state 方法
+   * 
+   * @param {any} newState 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'setStateSync',
+		value: function setStateSync(newState) {
+			if (this._unmounted) {
+				return;
+			}
+			if (!this._blockSetState) {
+				queueStateChanges(this, newState, null, true);
+			} else {
+				if (process.env.NODE_ENV !== 'production') {
+					throwError('cannot update state via setStateSync() in componentWillUpdate() or Constructor.');
+				}
+				throwError();
+			}
+		}
+
+		/* eslint-disable no-unused-vars  */
+
+	}, {
+		key: 'render',
+		value: function render(nextProps, nextState, nextContext) {}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentWillMount',
+		value: function componentWillMount() {}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentDidUpdate',
+		value: function componentDidUpdate(prevProps, prevState, prevContext) {}
+
+		/**
+   * 是否阻止更新
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'shouldComponentUpdate',
+		value: function shouldComponentUpdate(nextProps, nextState, context) {
+			return true;
+		}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentWillReceiveProps',
+		value: function componentWillReceiveProps(nextProps, context) {}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentWillUpdate',
+		value: function componentWillUpdate(nextProps, nextState, nextContext) {}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentWillUnmount',
+		value: function componentWillUnmount() {}
+
+		/**
+   * 生命周期
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'componentDidMount',
+		value: function componentDidMount() {}
+
+		/* eslint-enable no-unused-vars */
+
+		/**
+   *  获取 context 方法，由需要使用到 childContext 的库去接入，比如 mobx
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'getChildContext',
+		value: function getChildContext() {}
+
+		/**
+   * 有 mesh-envoy rendering 注入，发送给客户端
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: 'excutePatchQueue',
+		value: function excutePatchQueue() {}
+
+		/**
+   * 有 mesh-envoy rendering 注入, diff 方法
+   * 
+   * @memberof Component
+   */
+
+	}, {
+		key: '_patch',
+		value: function _patch() {}
+	}, {
+		key: '_undateComponent',
+		value: function _undateComponent(prevState, nextState, prevProps, nextProps, context, force, fromSetState) {
+			if (this._unmounted) {
+				if (process.env.NODE_ENV !== 'production') {
+					throwError(noOp);
+				}
+				throwError();
+			}
+			if (prevProps !== nextProps || nextProps === EMPTY_OBJ || prevState !== nextState || force) {
+				if (prevProps !== nextProps || nextProps === EMPTY_OBJ) {
+					if (!fromSetState) {
+						this._blockRender = true;
+						this.componentWillReceiveProps(nextProps, context);
+						this._blockRender = false;
+					}
+					if (this._pendingSetState) {
+						nextState = Object.assign({}, nextState, this._pendingState);
+						this._pendingSetState = false;
+						this._pendingState = {};
+					}
+				}
+
+				this.props = nextProps;
+				this.state = nextState;
+				this.context = context;
+
+				// 先判断是不是不需要更新
+				var shouldUpdate = this.shouldComponentUpdate(nextProps, nextState, context);
+
+				if (shouldUpdate || force) {
+					this._blockSetState = true;
+					this.componentWillUpdate(nextProps, nextState, context);
+					this._blockSetState = false;
+
+					var render = this.render(nextProps, nextState, context);
+
+					return render;
+				}
+			}
+
+			return NO_OP;
+		}
+	}]);
+	return Component;
+}();
+
+export default Component;

package.json

 {
 	"name": "mesh-envoy-component",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"description": "",
@@ -20,3 +20,3 @@ "main": "dist/dist.js",
 	"dependencies": {
-		"mesh-envoy": "^2.2.0",
+		"mesh-envoy": "^2.2.1",
 		"mesh-envoy-shared": "^2.2.0"
@@ -23,0 +23,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13565

increased by107.99%

Lines of code

454

increased by1963.64%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedmesh-envoy@^2.2.1