fix: can not replace react element with intact element in intact comp…

…onent, close ksc-fe/kpc#196
ksc-fe · Jan 17, 2019 · cf38a64 · cf38a64
1 parent 53c5f04
commit cf38a64
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 28 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -270,16 +270,16 @@ var Wrapper = function () {
         // let the component destroy by itself
         this.destroyed = true;
         // 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;
     };
 
     Wrapper.prototype.update = function update(lastVNode, nextVNode) {
@@ -291,7 +291,13 @@ var Wrapper = function () {
         var placeholder = this.placeholder;
         // let react remove it, intact never remove it
         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);
         });
         placeholder._unmount = noop;
         if (placeholder._realElement) {
@@ -716,9 +722,7 @@ var IntactReact = function (_Intact) {
         dom[internalInstanceKey] = placeholder[internalInstanceKey];
         dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
         Object.defineProperty(placeholder, 'parentNode', {
-            get: function get$$1() {
-                return parentElement;
-            }
+            value: parentElement
         });
 
         parentElement.replaceChild(dom, placeholder);

diff --git a/dist/intact.react.js b/dist/intact.react.js
@@ -272,16 +272,16 @@ var Wrapper = function () {
         // let the component destroy by itself
         this.destroyed = true;
         // 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;
     };
 
     Wrapper.prototype.update = function update(lastVNode, nextVNode) {
@@ -293,7 +293,13 @@ var Wrapper = function () {
         var placeholder = this.placeholder;
         // let react remove it, intact never remove it
         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);
         });
         placeholder._unmount = noop;
         if (placeholder._realElement) {
@@ -718,9 +724,7 @@ var IntactReact = function (_Intact) {
         dom[internalInstanceKey] = placeholder[internalInstanceKey];
         dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
         Object.defineProperty(placeholder, 'parentNode', {
-            get: function get$$1() {
-                return parentElement;
-            }
+            value: parentElement
         });
 
         parentElement.replaceChild(dom, placeholder);

diff --git a/dist/intact.react.min.js b/dist/intact.react.min.js
diff --git a/src/IntactReact.js b/src/IntactReact.js
@@ -164,9 +164,7 @@ class IntactReact extends Intact {
         dom[internalInstanceKey] = placeholder[internalInstanceKey];
         dom[internalEventHandlersKey] = placeholder[internalEventHandlersKey];
         Object.defineProperty(placeholder, 'parentNode', {
-            get() {
-                return parentElement;
-            }
+            value: parentElement,
         });
 
         parentElement.replaceChild(dom, placeholder);

diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -12,16 +12,16 @@ export default class Wrapper {
         // let the component destroy by itself
         this.destroyed = true; 
         // 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;
     }
 
     update(lastVNode, nextVNode) {
@@ -33,7 +33,13 @@ export default class Wrapper {
         const placeholder = this.placeholder;
         // let react remove it, intact never remove it
         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);
         });
         placeholder._unmount = noop;
         if (placeholder._realElement) {

diff --git a/test/index.js b/test/index.js
@@ -479,6 +479,23 @@ describe('Unit test', function() {
             instance.setState({count: 2});
             expect(container.innerHTML).to.eql('<div><div>2</div></div>');
         });
+
+        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', () => {