intact-react - npm Package Compare versions

Comparing version 1.1.10 to 1.1.11

dist/index.js

@@ -217,2 +217,16 @@ 'use strict';
 
+var miss = Intact.Vdt.miss;
+var h$2 = miss.h;
+miss.h = function createVNodeForReact(type) {
+    if (type && type.$$cid === 'IntactFunction') {
+        type = type.$$type;
+    }
+
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+    }
+
+    return h$2.call.apply(h$2, [this, type].concat(args));
+};
+
 var _Intact$utils$2 = Intact.utils;
@@ -246,5 +260,11 @@ var isStringOrNumber$1 = _Intact$utils$2.isStringOrNumber;
 
-    Ctor.$$cid = 'IntactFunction';
+    var ret = React.forwardRef(function (props, ref) {
+        if (ref) props = _extends({}, props, { forwardRef: ref });
+        return createElement(Ctor, props);
+    });
 
-    return Ctor;
+    ret.$$cid = 'IntactFunction';
+    ret.$$type = Ctor;
+
+    return ret;
 }
@@ -275,12 +295,12 @@
         // react can use comment node as parent so long as its text like bellow
-        this.placeholder = document.createComment(commentNodeValue);
+        var placeholder = this.placeholder = document.createComment(commentNodeValue);
         // we should append the placholder advanced,
         // because when a intact component update itself
         // the _render will update react element sync
-        if (this.parentDom) {
-            this.parentDom.appendChild(this.placeholder);
+        var parentDom = this.parentDom || this.parentVNode && this.parentVNode.dom;
+        if (parentDom) {
+            parentDom.appendChild(placeholder);
         }
-        // if the _render is sync, return the result directly
         this._render(nextVNode);
-        return this.placeholder;
+        return placeholder;
     };
@@ -297,3 +317,9 @@
         ReactDOM.render(null, placeholder, function () {
-            placeholder.parentNode.removeChild(placeholder);
+            var parentDom = placeholder.parentNode;
+            // get parentNode even if it has been removed
+            // hack for intact replace child
+            Object.defineProperty(placeholder, 'parentNode', {
+                value: parentDom
+            });
+            parentDom.removeChild(placeholder);
         });
@@ -466,2 +492,4 @@ placeholder._unmount = noop;
             _blocks[_key.substring(2)] = normalizeBlock(props[_key]);
+        } else if (_key === 'forwardRef') {
+            _props.ref = props[_key];
         } else {
@@ -547,2 +575,5 @@ _props[_key] = props[_key];
 
+var internalInstanceKey = void 0;
+var internalEventHandlersKey = void 0;
+
 var IntactReact = function (_Intact) {
@@ -714,7 +745,16 @@ inherits(IntactReact, _Intact);
         var dom = this.init(null, this.vNode);
-        var parentElement = this._placeholder.parentElement;
+        var placeholder = this._placeholder;
+        var parentElement = placeholder.parentElement;
         this.parentDom = parentElement;
-        parentElement.replaceChild(dom, this._placeholder);
+
+        // for unmountComponentAtNode
+        dom[internalInstanceKey] = placeholder[internalInstanceKey];
+        dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
+        Object.defineProperty(placeholder, 'parentNode', {
+            value: parentElement
+        });
+
+        parentElement.replaceChild(dom, placeholder);
         // persist the placeholder to let parentNode to remove the real dom
-        this._placeholder._realElement = dom;
+        placeholder._realElement = dom;
         if (!parentElement._hasRewrite) {
@@ -756,2 +796,7 @@ var removeChild = parentElement.removeChild;
         this._placeholder = element;
+        if (!internalInstanceKey) {
+            var keys = Object.keys(element);
+            internalInstanceKey = keys[0];
+            internalEventHandlersKey = keys[1];
+        }
     };
@@ -758,0 +803,0 @@

dist/intact.react.js

@@ -219,2 +219,16 @@ (function (global, factory) {
 
+var miss = Intact.Vdt.miss;
+var h$2 = miss.h;
+miss.h = function createVNodeForReact(type) {
+    if (type && type.$$cid === 'IntactFunction') {
+        type = type.$$type;
+    }
+
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+    }
+
+    return h$2.call.apply(h$2, [this, type].concat(args));
+};
+
 var _Intact$utils$2 = Intact.utils;
@@ -248,5 +262,11 @@ var isStringOrNumber$1 = _Intact$utils$2.isStringOrNumber;
 
-    Ctor.$$cid = 'IntactFunction';
+    var ret = React.forwardRef(function (props, ref) {
+        if (ref) props = _extends({}, props, { forwardRef: ref });
+        return createElement(Ctor, props);
+    });
 
-    return Ctor;
+    ret.$$cid = 'IntactFunction';
+    ret.$$type = Ctor;
+
+    return ret;
 }
@@ -277,12 +297,12 @@
         // react can use comment node as parent so long as its text like bellow
-        this.placeholder = document.createComment(commentNodeValue);
+        var placeholder = this.placeholder = document.createComment(commentNodeValue);
         // we should append the placholder advanced,
         // because when a intact component update itself
         // the _render will update react element sync
-        if (this.parentDom) {
-            this.parentDom.appendChild(this.placeholder);
+        var parentDom = this.parentDom || this.parentVNode && this.parentVNode.dom;
+        if (parentDom) {
+            parentDom.appendChild(placeholder);
         }
-        // if the _render is sync, return the result directly
         this._render(nextVNode);
-        return this.placeholder;
+        return placeholder;
     };
@@ -299,3 +319,9 @@
         ReactDOM.render(null, placeholder, function () {
-            placeholder.parentNode.removeChild(placeholder);
+            var parentDom = placeholder.parentNode;
+            // get parentNode even if it has been removed
+            // hack for intact replace child
+            Object.defineProperty(placeholder, 'parentNode', {
+                value: parentDom
+            });
+            parentDom.removeChild(placeholder);
         });
@@ -468,2 +494,4 @@ placeholder._unmount = noop;
             _blocks[_key.substring(2)] = normalizeBlock(props[_key]);
+        } else if (_key === 'forwardRef') {
+            _props.ref = props[_key];
         } else {
@@ -549,2 +577,5 @@ _props[_key] = props[_key];
 
+var internalInstanceKey = void 0;
+var internalEventHandlersKey = void 0;
+
 var IntactReact = function (_Intact) {
@@ -716,7 +747,16 @@ inherits(IntactReact, _Intact);
         var dom = this.init(null, this.vNode);
-        var parentElement = this._placeholder.parentElement;
+        var placeholder = this._placeholder;
+        var parentElement = placeholder.parentElement;
         this.parentDom = parentElement;
-        parentElement.replaceChild(dom, this._placeholder);
+
+        // for unmountComponentAtNode
+        dom[internalInstanceKey] = placeholder[internalInstanceKey];
+        dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
+        Object.defineProperty(placeholder, 'parentNode', {
+            value: parentElement
+        });
+
+        parentElement.replaceChild(dom, placeholder);
         // persist the placeholder to let parentNode to remove the real dom
-        this._placeholder._realElement = dom;
+        placeholder._realElement = dom;
         if (!parentElement._hasRewrite) {
@@ -758,2 +798,7 @@ var removeChild = parentElement.removeChild;
         this._placeholder = element;
+        if (!internalInstanceKey) {
+            var keys = Object.keys(element);
+            internalInstanceKey = keys[0];
+            internalEventHandlersKey = keys[1];
+        }
     };
@@ -760,0 +805,0 @@

dist/intact.react.min.js

@@ -1,1 +0,1 @@
-(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?module.exports=e(require("react"),require("intact/dist"),require("react-dom")):typeof define==="function"&&define.amd?define(["react","intact/dist","react-dom"],e):t.Intact=e(t.React,t.Intact,t.ReactDOM)})(this,function(t,e,r){"use strict";t=t&&t.hasOwnProperty("default")?t["default"]:t;e=e&&e.hasOwnProperty("default")?e["default"]:e;r=r&&r.hasOwnProperty("default")?r["default"]:r;var n=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol==="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};var i=function(t,e){if(!(t instanceof e)){throw new TypeError("Cannot call a class as a function")}};var o=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||false;n.configurable=true;if("value"in n)n.writable=true;Object.defineProperty(t,n.key,n)}}return function(e,r,n){if(r)t(e.prototype,r);if(n)t(e,n);return e}}();var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r){if(Object.prototype.hasOwnProperty.call(r,n)){t[n]=r[n]}}}return t};var s=function(t,e){if(typeof e!=="function"&&e!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof e)}t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:false,writable:true,configurable:true}});if(e)Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e};var u=function(t,e){if(!t){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return e&&(typeof e==="object"||typeof e==="function")?e:t};var p=function(){function t(e){var r=this;i(this,t);this.resolved=false;this.callbacks=[];e.call(this,function(){return r.resolve()})}t.prototype.resolve=function t(){this.resolved=true;var e=void 0;while(e=this.callbacks.shift()){e()}};t.prototype.then=function t(e){this.callbacks.push(e);if(this.resolved){this.resolve()}};return t}();p.all=function(t){var e=0;var r=void 0;var n=false;var i=false;t.forEach(function(t){return t.then(s)});if(t._hasRewrite){console.error("last promises has not been done")}var o=t.push;t.push=function(e){e.then(s);o.call(t,e)};t._hasRewrite=true;function a(){t.length=0;t.push=o;t._hasRewrite=false;r()}function s(){e++;if(t.length===e){n=true;if(i){return console.error("promise has done")}if(r){i=true;a()}}}return{then:function e(i){r=i;if(!t.length||n){a()}}}};var c=t.createElement;function l(t,e,r){var n=t.$$cid==="IntactReact";var i=t.propTypes;if(n&&i){t.propTypes=undefined}var o=c.apply(this,arguments);if(n&&i){t.propTypes=i}return o}t.createElement=l;var f=r.findDOMNode;r.findDOMNode=function(t){if(t instanceof L){return t.element}return f.call(r,t)};var h=e.utils;var d=h.isStringOrNumber;var _=h.isArray;var v=h.noop;function y(t){function e(e,r){if(r){var n=t(P(e,r,{instance:r.__parent}),true);if(_(n)){return n.map(function(t){return m(t)})}return m(n)}else{return t(e)}}e.contextTypes={_context:v,__parent:v};e.$$cid="IntactFunction";return e}function m(t){if(d(t)){return t}else if(t){return l(t.tag,t.props,t.props.children||t.children)}}var g=/_ev[A-Z]/;var b=" react-mount-point-unstable ";var C=function(){function t(){i(this,t)}t.prototype.init=function t(e,r){this.destroyed=true;this.placeholder=document.createComment(b);if(this.parentDom){this.parentDom.appendChild(this.placeholder)}this._render(r);return this.placeholder};t.prototype.update=function t(e,r){this._render(r);return this.placeholder};t.prototype.destroy=function t(e,n,i){var o=this.placeholder;r.render(null,o,function(){o.parentNode.removeChild(o)});o._unmount=v;if(o._realElement){o._realElement._unmount=v}};t.prototype._render=function t(e){var n=this._addProps(e);var i=this.placeholder;var o=e.props._parentRef.instance;if(o){if(!o._reactInternalFiber){o=o.get("_parentRef").instance}}else{var a=e.parentVNode;while(a){var s=a.children;if(s&&s._reactInternalFiber!==undefined){o=s;break}a=a.parentVNode}}var u=new p(function(t){r.unstable_renderSubtreeIntoContainer(o,n,i,function(){var e=this&&this.nodeType===3?this:r.findDOMNode(this);i._realElement=e;t()})});o.__promises.push(u)};t.prototype._addProps=function t(e){this.vdt={vNode:e};var r=e.props;var n=void 0;var i=void 0;for(var o in r){if(o==="reactVNode"||o==="_parentRef")continue;if(g.test(o))continue;if(!n){n=a({},r.reactVNode);i=n.props=a({},n.props)}var s=r[o];if(o.substr(0,3)==="ev-"){i[x[o]]=s}else{i[o]=s}}return n||r.reactVNode};return t}();var x={"ev-click":"onClick","ev-mouseenter":"onMouseEnter","ev-mouseleave":"onMouseLeave"};var N=e.Vdt.miss;var w=N.h;var R=N.VNode;var O=N.Types;var T=e.utils;var M=T.isFunction;var Q=T.isArray;var E=T.isStringOrNumber;var V=T.set;var I=T.get;function j(e,r){if(e==null)return e;if(E(e)){return new R(O.Text,null,null,e)}if(e instanceof R){if(M(e.tag)){e.props._parentRef=r}return e}var n=void 0;if((n=e.type)&&(n=n.$$cid)&&(n==="IntactReact"||n==="IntactFunction")){return w(e.type,P(a({},e.props,{_parentRef:r}),{_context:e._owner&&e._owner.stateNode},r,e.key),null,null,e.key,S(e.ref))}if(e.type===t.Fragment){return k(e.props.children,r)}return w(C,{reactVNode:e,_parentRef:r},null,e.props.className)}function k(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(Q(t)){var r=[];t.forEach(function(t){if(Q(t)){r.push.apply(r,k(t,e))}else{r.push(j(t,e))}});return r}return j(t,e)}function P(t,e,r,n){if(!t)return;var i={};var o=i._blocks={};var a=void 0;for(var s in t){if(s==="children"){i.children=k(t.children,r)}else if(a=F(s)){i[a]=t[s]}else if(s.substring(0,2)==="b-"){o[s.substring(2)]=D(t[s])}else{i[s]=t[s]}}i._context=$(e);if(n!=null){i.key=n}return i}function S(t){return(typeof t==="undefined"?"undefined":n(t))==="object"&&t!==null?function(e){t.current=e}:t}function $(t){var e=t._context;return{data:{get:function t(r){if(r!=null){return I(e.state||{},r)}else{return e.state||{}}},set:function t(r,n){var i=a({},e.state);V(i,r,n);e.setState(i)}}}}function D(t){if(M(t)){return function(e){for(var r=arguments.length,n=Array(r>1?r-1:0),i=1;i<r;i++){n[i-1]=arguments[i]}return k(t.apply(this,n),{instance:this.data})}}else{return function(){return k(t,{instance:this.data})}}}function F(t){var e=t[0],r=t[1],n=t[2];if(!n)return;var i=void 0;if(e==="o"&&r==="n"){if(n==="$"){return"ev-$"+t.substring(3).replace(/\-/g,":")}else if((i=n.charCodeAt(0))&&i>=65&&i<=90){return"ev-"+t.substring(2).toLowerCase().replace(/\-/g,":")}}}var A=e.utils;var G=A.isObject;var U=A.extend;var q=e.Vdt.miss.h;var L=function(e){s(r,e);function r(t,n){i(this,r);if(n){var o={};var a=P(t,n,o);var s=u(this,e.call(this,a));o.instance=s;s.__promises=n.__promises||[];s.mountedQueue=n.__parent&&n.__parent.mountedQueue;s.vNode=q(s.constructor,a);s.vNode.children=s;s._props=s.props;delete s.props;s._isReact=true}else{var s=u(this,e.call(this,t))}var p=void 0;Object.defineProperty(s,"element",{get:function t(){if(!this.__isUpdating&&p&&p.nodeType===8&&p.nodeValue===b){return p._realElement||p}return p},set:function t(e){p=e},configurable:true,enumerable:true});return u(s)}r.prototype.getChildContext=function t(){return{__parent:this,__promises:this.__promises}};r.prototype.get=function t(){for(var r=arguments.length,n=Array(r),i=0;i<r;i++){n[i]=arguments[i]}if(this._isReact){var o;var a=this.props;this.props=this._props;var s=(o=e.prototype.get).call.apply(o,[this].concat(n));this.props=a;return s}else{var u;return(u=e.prototype.get).call.apply(u,[this].concat(n))}};r.prototype.set=function t(){for(var r=arguments.length,n=Array(r),i=0;i<r;i++){n[i]=arguments[i]}if(this._isReact){var o;var a=this.props;this.props=this._props;var s=(o=e.prototype.set).call.apply(o,[this].concat(n));this.props=a;return s}else{var u;return(u=e.prototype.set).call.apply(u,[this].concat(n))}};r.prototype.init=function t(r,n){this.refs=this.vdt.widgets||{};this.__pushGetChildContext(n);var i=e.prototype.init.call(this,r,n);this.__popGetChildContext();return i};r.prototype.update=function t(r,n,i){var o=this;var t=function t(){var a=o.__isUpdating;o.__isUpdating=true;if(!a){o.__pushGetChildContext(n||o.vNode)}var s=e.prototype.update.call(o,r,n,i);if(!a){o.__popGetChildContext()}o.__isUpdating=a;return s};if(!this._isReact)return t();this.__initMountedQueue();var a=t();this.__triggerMountedQueue();return a};r.prototype.__pushGetChildContext=function t(e){var r=e&&e.props._parentRef;var n=r&&r.instance;if(n){var i=this;this.__getChildContext=n.getChildContext;n.getChildContext=function(){var t=i.__getChildContext.call(this);return a({},t,{__parent:i})}}this.__parentInstance=n};r.prototype.__popGetChildContext=function t(){if(this.__parentInstance){this.__parentInstance.getChildContext=this.__getChildContext}};r.prototype.componentDidMount=function t(){var e=this;this.__initMountedQueue();this.inited=true;this.parentVNode=this.vNode.parentVNode=this.context.__parent&&this.context.__parent.vNode;var r=this.init(null,this.vNode);var n=this._placeholder.parentElement;this.parentDom=n;n.replaceChild(r,this._placeholder);this._placeholder._realElement=r;if(!n._hasRewrite){var i=n.removeChild;n.removeChild=function(t){i.call(this,t._realElement||t)};n._hasRewrite=true}this.mountedQueue.push(function(){e.mount()});this.__triggerMountedQueue()};r.prototype.componentWillUnmount=function t(){this.destroy()};r.prototype.componentDidUpdate=function t(){this.__initMountedQueue();var e=q(this.constructor,P(this.props,this.context,{instance:this}));var r=this.vNode;e.children=this;this.vNode=e;this.parentVNode=e.parentVNode=this.context.__parent&&this.context.__parent.vNode;this.update(r,e);this.__triggerMountedQueue()};r.prototype.__ref=function t(e){this._placeholder=e};r.prototype.render=function e(){return t.createElement("i",{ref:this.__ref})};r.prototype.__initMountedQueue=function t(){this.__oldTriggerFlag=this._shouldTrigger;this._shouldTrigger=false;if(!this.mountedQueue||this.mountedQueue.done){var e=void 0;if((e=this.context)&&(e=e.__parent)&&(e=e.mountedQueue)){if(!e.done){this.mountedQueue=e;return}}this._shouldTrigger=true;this._initMountedQueue()}};r.prototype.__triggerMountedQueue=function t(){var e=this;if(this._shouldTrigger){p.all(this.__promises).then(function(){e._triggerMountedQueue()})}this._shouldTrigger=this.__oldTriggerFlag};o(r,[{key:"isMounted",get:function t(){return this.mounted}}]);return r}(e);L.functionalWrapper=y;L.normalize=k;L.$$cid="IntactReact";L.prototype.isReactComponent={};L.contextTypes={_context:v,__parent:v,__promises:v};L.childContextTypes={__parent:v,__promises:v};if(!Object.setPrototypeOf){U(L,e);if(!L.template){L.template=e.template}}return L});
+(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?module.exports=e(require("react"),require("intact/dist"),require("react-dom")):typeof define==="function"&&define.amd?define(["react","intact/dist","react-dom"],e):t.Intact=e(t.React,t.Intact,t.ReactDOM)})(this,function(t,e,r){"use strict";t=t&&t.hasOwnProperty("default")?t["default"]:t;e=e&&e.hasOwnProperty("default")?e["default"]:e;r=r&&r.hasOwnProperty("default")?r["default"]:r;var n=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol==="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};var i=function(t,e){if(!(t instanceof e)){throw new TypeError("Cannot call a class as a function")}};var o=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||false;n.configurable=true;if("value"in n)n.writable=true;Object.defineProperty(t,n.key,n)}}return function(e,r,n){if(r)t(e.prototype,r);if(n)t(e,n);return e}}();var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r){if(Object.prototype.hasOwnProperty.call(r,n)){t[n]=r[n]}}}return t};var s=function(t,e){if(typeof e!=="function"&&e!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof e)}t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:false,writable:true,configurable:true}});if(e)Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e};var u=function(t,e){if(!t){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return e&&(typeof e==="object"||typeof e==="function")?e:t};var p=function(){function t(e){var r=this;i(this,t);this.resolved=false;this.callbacks=[];e.call(this,function(){return r.resolve()})}t.prototype.resolve=function t(){this.resolved=true;var e=void 0;while(e=this.callbacks.shift()){e()}};t.prototype.then=function t(e){this.callbacks.push(e);if(this.resolved){this.resolve()}};return t}();p.all=function(t){var e=0;var r=void 0;var n=false;var i=false;t.forEach(function(t){return t.then(s)});if(t._hasRewrite){console.error("last promises has not been done")}var o=t.push;t.push=function(e){e.then(s);o.call(t,e)};t._hasRewrite=true;function a(){t.length=0;t.push=o;t._hasRewrite=false;r()}function s(){e++;if(t.length===e){n=true;if(i){return console.error("promise has done")}if(r){i=true;a()}}}return{then:function e(i){r=i;if(!t.length||n){a()}}}};var c=t.createElement;function l(t,e,r){var n=t.$$cid==="IntactReact";var i=t.propTypes;if(n&&i){t.propTypes=undefined}var o=c.apply(this,arguments);if(n&&i){t.propTypes=i}return o}t.createElement=l;var f=r.findDOMNode;r.findDOMNode=function(t){if(t instanceof B){return t.element}return f.call(r,t)};var h=e.Vdt.miss;var d=h.h;h.h=function t(e){if(e&&e.$$cid==="IntactFunction"){e=e.$$type}for(var r=arguments.length,n=Array(r>1?r-1:0),i=1;i<r;i++){n[i-1]=arguments[i]}return d.call.apply(d,[this,e].concat(n))};var v=e.utils;var _=v.isStringOrNumber;var y=v.isArray;var m=v.noop;function g(e){function r(t,r){if(r){var n=e(S(t,r,{instance:r.__parent}),true);if(y(n)){return n.map(function(t){return b(t)})}return b(n)}else{return e(t)}}r.contextTypes={_context:m,__parent:m};var n=t.forwardRef(function(t,e){if(e)t=a({},t,{forwardRef:e});return l(r,t)});n.$$cid="IntactFunction";n.$$type=r;return n}function b(t){if(_(t)){return t}else if(t){return l(t.tag,t.props,t.props.children||t.children)}}var C=/_ev[A-Z]/;var N=" react-mount-point-unstable ";var x=function(){function t(){i(this,t)}t.prototype.init=function t(e,r){this.destroyed=true;var n=this.placeholder=document.createComment(N);var i=this.parentDom||this.parentVNode&&this.parentVNode.dom;if(i){i.appendChild(n)}this._render(r);return n};t.prototype.update=function t(e,r){this._render(r);return this.placeholder};t.prototype.destroy=function t(e,n,i){var o=this.placeholder;r.render(null,o,function(){var t=o.parentNode;Object.defineProperty(o,"parentNode",{value:t});t.removeChild(o)});o._unmount=m;if(o._realElement){o._realElement._unmount=m}};t.prototype._render=function t(e){var n=this._addProps(e);var i=this.placeholder;var o=e.props._parentRef.instance;if(o){if(!o._reactInternalFiber){o=o.get("_parentRef").instance}}else{var a=e.parentVNode;while(a){var s=a.children;if(s&&s._reactInternalFiber!==undefined){o=s;break}a=a.parentVNode}}var u=new p(function(t){r.unstable_renderSubtreeIntoContainer(o,n,i,function(){var e=this&&this.nodeType===3?this:r.findDOMNode(this);i._realElement=e;t()})});o.__promises.push(u)};t.prototype._addProps=function t(e){this.vdt={vNode:e};var r=e.props;var n=void 0;var i=void 0;for(var o in r){if(o==="reactVNode"||o==="_parentRef")continue;if(C.test(o))continue;if(!n){n=a({},r.reactVNode);i=n.props=a({},n.props)}var s=r[o];if(o.substr(0,3)==="ev-"){i[w[o]]=s}else{i[o]=s}}return n||r.reactVNode};return t}();var w={"ev-click":"onClick","ev-mouseenter":"onMouseEnter","ev-mouseleave":"onMouseLeave"};var R=e.Vdt.miss;var O=R.h;var T=R.VNode;var M=R.Types;var Q=e.utils;var V=Q.isFunction;var E=Q.isArray;var $=Q.isStringOrNumber;var j=Q.set;var I=Q.get;function k(e,r){if(e==null)return e;if($(e)){return new T(M.Text,null,null,e)}if(e instanceof T){if(V(e.tag)){e.props._parentRef=r}return e}var n=void 0;if((n=e.type)&&(n=n.$$cid)&&(n==="IntactReact"||n==="IntactFunction")){return O(e.type,S(a({},e.props,{_parentRef:r}),{_context:e._owner&&e._owner.stateNode},r,e.key),null,null,e.key,F(e.ref))}if(e.type===t.Fragment){return P(e.props.children,r)}return O(x,{reactVNode:e,_parentRef:r},null,e.props.className)}function P(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(E(t)){var r=[];t.forEach(function(t){if(E(t)){r.push.apply(r,P(t,e))}else{r.push(k(t,e))}});return r}return k(t,e)}function S(t,e,r,n){if(!t)return;var i={};var o=i._blocks={};var a=void 0;for(var s in t){if(s==="children"){i.children=P(t.children,r)}else if(a=G(s)){i[a]=t[s]}else if(s.substring(0,2)==="b-"){o[s.substring(2)]=D(t[s])}else if(s==="forwardRef"){i.ref=t[s]}else{i[s]=t[s]}}i._context=A(e);if(n!=null){i.key=n}return i}function F(t){return(typeof t==="undefined"?"undefined":n(t))==="object"&&t!==null?function(e){t.current=e}:t}function A(t){var e=t._context;return{data:{get:function t(r){if(r!=null){return I(e.state||{},r)}else{return e.state||{}}},set:function t(r,n){var i=a({},e.state);j(i,r,n);e.setState(i)}}}}function D(t){if(V(t)){return function(e){for(var r=arguments.length,n=Array(r>1?r-1:0),i=1;i<r;i++){n[i-1]=arguments[i]}return P(t.apply(this,n),{instance:this.data})}}else{return function(){return P(t,{instance:this.data})}}}function G(t){var e=t[0],r=t[1],n=t[2];if(!n)return;var i=void 0;if(e==="o"&&r==="n"){if(n==="$"){return"ev-$"+t.substring(3).replace(/\-/g,":")}else if((i=n.charCodeAt(0))&&i>=65&&i<=90){return"ev-"+t.substring(2).toLowerCase().replace(/\-/g,":")}}}var U=e.utils;var q=U.isObject;var L=U.extend;var W=e.Vdt.miss.h;var z=void 0;var Z=void 0;var B=function(e){s(r,e);function r(t,n){i(this,r);if(n){var o={};var a=S(t,n,o);var s=u(this,e.call(this,a));o.instance=s;s.__promises=n.__promises||[];s.mountedQueue=n.__parent&&n.__parent.mountedQueue;s.vNode=W(s.constructor,a);s.vNode.children=s;s._props=s.props;delete s.props;s._isReact=true}else{var s=u(this,e.call(this,t))}var p=void 0;Object.defineProperty(s,"element",{get:function t(){if(!this.__isUpdating&&p&&p.nodeType===8&&p.nodeValue===N){return p._realElement||p}return p},set:function t(e){p=e},configurable:true,enumerable:true});return u(s)}r.prototype.getChildContext=function t(){return{__parent:this,__promises:this.__promises}};r.prototype.get=function t(){for(var r=arguments.length,n=Array(r),i=0;i<r;i++){n[i]=arguments[i]}if(this._isReact){var o;var a=this.props;this.props=this._props;var s=(o=e.prototype.get).call.apply(o,[this].concat(n));this.props=a;return s}else{var u;return(u=e.prototype.get).call.apply(u,[this].concat(n))}};r.prototype.set=function t(){for(var r=arguments.length,n=Array(r),i=0;i<r;i++){n[i]=arguments[i]}if(this._isReact){var o;var a=this.props;this.props=this._props;var s=(o=e.prototype.set).call.apply(o,[this].concat(n));this.props=a;return s}else{var u;return(u=e.prototype.set).call.apply(u,[this].concat(n))}};r.prototype.init=function t(r,n){this.refs=this.vdt.widgets||{};this.__pushGetChildContext(n);var i=e.prototype.init.call(this,r,n);this.__popGetChildContext();return i};r.prototype.update=function t(r,n,i){var o=this;var t=function t(){var a=o.__isUpdating;o.__isUpdating=true;if(!a){o.__pushGetChildContext(n||o.vNode)}var s=e.prototype.update.call(o,r,n,i);if(!a){o.__popGetChildContext()}o.__isUpdating=a;return s};if(!this._isReact)return t();this.__initMountedQueue();var a=t();this.__triggerMountedQueue();return a};r.prototype.__pushGetChildContext=function t(e){var r=e&&e.props._parentRef;var n=r&&r.instance;if(n){var i=this;this.__getChildContext=n.getChildContext;n.getChildContext=function(){var t=i.__getChildContext.call(this);return a({},t,{__parent:i})}}this.__parentInstance=n};r.prototype.__popGetChildContext=function t(){if(this.__parentInstance){this.__parentInstance.getChildContext=this.__getChildContext}};r.prototype.componentDidMount=function t(){var e=this;this.__initMountedQueue();this.inited=true;this.parentVNode=this.vNode.parentVNode=this.context.__parent&&this.context.__parent.vNode;var r=this.init(null,this.vNode);var n=this._placeholder;var i=n.parentElement;this.parentDom=i;r[z]=n[z];r[Z]=n[Z];Object.defineProperty(n,"parentNode",{value:i});i.replaceChild(r,n);n._realElement=r;if(!i._hasRewrite){var o=i.removeChild;i.removeChild=function(t){o.call(this,t._realElement||t)};i._hasRewrite=true}this.mountedQueue.push(function(){e.mount()});this.__triggerMountedQueue()};r.prototype.componentWillUnmount=function t(){this.destroy()};r.prototype.componentDidUpdate=function t(){this.__initMountedQueue();var e=W(this.constructor,S(this.props,this.context,{instance:this}));var r=this.vNode;e.children=this;this.vNode=e;this.parentVNode=e.parentVNode=this.context.__parent&&this.context.__parent.vNode;this.update(r,e);this.__triggerMountedQueue()};r.prototype.__ref=function t(e){this._placeholder=e;if(!z){var r=Object.keys(e);z=r[0];Z=r[1]}};r.prototype.render=function e(){return t.createElement("i",{ref:this.__ref})};r.prototype.__initMountedQueue=function t(){this.__oldTriggerFlag=this._shouldTrigger;this._shouldTrigger=false;if(!this.mountedQueue||this.mountedQueue.done){var e=void 0;if((e=this.context)&&(e=e.__parent)&&(e=e.mountedQueue)){if(!e.done){this.mountedQueue=e;return}}this._shouldTrigger=true;this._initMountedQueue()}};r.prototype.__triggerMountedQueue=function t(){var e=this;if(this._shouldTrigger){p.all(this.__promises).then(function(){e._triggerMountedQueue()})}this._shouldTrigger=this.__oldTriggerFlag};o(r,[{key:"isMounted",get:function t(){return this.mounted}}]);return r}(e);B.functionalWrapper=g;B.normalize=P;B.$$cid="IntactReact";B.prototype.isReactComponent={};B.contextTypes={_context:m,__parent:m,__promises:m};B.childContextTypes={__parent:m,__promises:m};if(!Object.setPrototypeOf){L(B,e);if(!B.template){B.template=e.template}}return B});

package.json

 {
   "name": "intact-react",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "A compatibility layer for running intact component in react v16",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/createElement.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import Intact from 'intact/dist';
 import IntactReact from './IntactReact';
@@ -32,1 +33,10 @@
 };
+
+const miss = Intact.Vdt.miss;
+const h = miss.h;
+miss.h = function createVNodeForReact(type, ...args) {
+    if (type && type.$$cid === 'IntactFunction') {
+        type = type.$$type;
+    }
+    return h.call(this, type, ...args);
+};

src/functionalWrapper.js

 import Intact from 'intact/dist';
 import {normalizeProps} from './normalize';
 import createElement from './createElement';
+import React from 'react';
 
@@ -31,5 +32,11 @@ const {isStringOrNumber, isArray, noop} = Intact.utils;
 
-    Ctor.$$cid = 'IntactFunction';
+    const ret = React.forwardRef((props, ref) => {
+        if (ref) props = {...props, forwardRef: ref};
+        return createElement(Ctor, props);
+    });
 
-    return Ctor;
+    ret.$$cid = 'IntactFunction';
+    ret.$$type = Ctor;
+
+    return ret;
 }
@@ -36,0 +43,0 @@

src/IntactReact.js

@@ -12,2 +12,5 @@ import React from 'react';
 
+let internalInstanceKey;
+let internalEventHandlersKey;
+
 class IntactReact extends Intact {
@@ -157,7 +160,16 @@ static functionalWrapper = functionalWrapper;
         const dom = this.init(null, this.vNode);
-        const parentElement = this._placeholder.parentElement;
+        const placeholder = this._placeholder;
+        const parentElement = placeholder.parentElement;
         this.parentDom = parentElement;
-        parentElement.replaceChild(dom, this._placeholder);
+
+        // for unmountComponentAtNode
+        dom[internalInstanceKey] = placeholder[internalInstanceKey];
+        dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
+        Object.defineProperty(placeholder, 'parentNode', {
+            value: parentElement,
+        });
+
+        parentElement.replaceChild(dom, placeholder);
         // persist the placeholder to let parentNode to remove the real dom
-        this._placeholder._realElement = dom;
+        placeholder._realElement = dom;
         if (!parentElement._hasRewrite) {
@@ -206,2 +218,7 @@ const removeChild = parentElement.removeChild;
         this._placeholder = element;
+        if (!internalInstanceKey) {
+            const keys = Object.keys(element);
+            internalInstanceKey = keys[0];
+            internalEventHandlersKey = keys[1];
+        }
     }
@@ -208,0 +225,0 @@

src/normalize.js

@@ -83,2 +83,4 @@ import Intact from 'intact/dist';
             _blocks[key.substring(2)] = normalizeBlock(props[key]); 
+        } else if (key === 'forwardRef') {
+            _props.ref = props[key];
         } else {
@@ -85,0 +87,0 @@ _props[key] = props[key];

src/Wrapper.js

@@ -15,12 +15,12 @@ import ReactDOM from 'react-dom';
         // react can use comment node as parent so long as its text like bellow
-        this.placeholder = document.createComment(commentNodeValue);
+        const placeholder = this.placeholder = document.createComment(commentNodeValue);
         // we should append the placholder advanced,
         // because when a intact component update itself
         // the _render will update react element sync
-        if (this.parentDom) {
-            this.parentDom.appendChild(this.placeholder);
+        const parentDom = this.parentDom || this.parentVNode && this.parentVNode.dom;
+        if (parentDom) {
+            parentDom.appendChild(placeholder);
         }
-        // if the _render is sync, return the result directly
         this._render(nextVNode);
-        return this.placeholder;
+        return placeholder;
     }
@@ -37,3 +37,9 @@
         ReactDOM.render(null, placeholder, () => {
-            placeholder.parentNode.removeChild(placeholder);
+            const parentDom = placeholder.parentNode;
+            // get parentNode even if it has been removed
+            // hack for intact replace child
+            Object.defineProperty(placeholder, 'parentNode', {
+                value: parentDom
+            });
+            parentDom.removeChild(placeholder);
         });
@@ -40,0 +46,0 @@ placeholder._unmount = noop;

test/index.js

@@ -211,2 +211,12 @@ import Intact from '../index';
 
+        it('render intact functional component with forwardRef', () => {
+            const h = Intact.Vdt.miss.h;
+            const Component = Intact.functionalWrapper(function(props) {
+                return h(ChildrenIntactComponent, props); 
+            });
+            let instance;
+            render(<Component ref={i => instance = i}>test</Component>);
+            expect(instance).be.instanceof(ChildrenIntactComponent);
+        });
+
         it('render block to intact functional component', () => {
@@ -483,4 +493,31 @@ const h = Intact.Vdt.miss.h;
         });
+
+        it('update react children with wrapper element', () => {
+            const C = createIntactComponent(`
+                <div>{self.get('wrapper') ? 
+                    <div>{self.get('children')}</div> : 
+                    self.get('children')
+                }</div>
+            `, {defaults() { return {wrapper: true}}});
+            let c;
+            const instance = renderApp(function() {
+                return <C ref={i => c = i}><div>test</div></C>
+            });
+            c.set('wrapper', false);
+            expect(container.innerHTML).to.eql('<div><div>test</div></div>');
+            c.set('wrapper', true);
+            expect(container.innerHTML).to.eql('<div><div><div>test</div></div></div>');
+        });
     });
 
+    describe('Destroy', () => {
+        it('should unmount intact component which returned by react component directly', () => {
+            const instance = renderApp(function() {
+                return <ChildrenIntactComponent>test</ChildrenIntactComponent>
+            });
+            ReactDOM.unmountComponentAtNode(container);
+            expect(container.innerHTML).to.eql('');
+        });
+    });
+
     it('validate props in intact instead of react', () => {
@@ -487,0 +524,0 @@ const error = console.error;

No alert changes

Improved metrics

Total package byte prevSize

136815

increased by5.03%

Lines of code

3157

increased by4.88%

No dependency changes