intact-react - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

dist/index.cjs.dev.js

@@ -136,2 +136,5 @@ 'use strict';
 var bind = Function.prototype.bind;
+// retrieve from react definition
+var IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
+var IS_NON_DELEGATED = 2;
 Function.prototype.bind = function () {
@@ -159,4 +162,29 @@ var args = [];
         }
-        if (isReactListening) {
-            return bind.call.apply(bind, tslib.__spreadArray([this, null, domEventName, eventSystemFlags | 2, targetContainer], rest, false));
+        if (isReactListening && (eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) === 0 && (eventSystemFlags & IS_NON_DELEGATED) === 0) {
+            /**
+             * Because we only add listeners to the react root container, the comment root container in Wrapper will ignore doing this.
+             * But React will check the container (isMatchingRootContainer). it will always return false since the comment parentNode is not
+             * the targetContainer. Therefore, we fake the parentNode by returning the targetContainer to skip the check in React.
+             * Eventually we restore the value after calling the function.
+             */
+            var _fn_1 = this;
+            var fn = function (name, eventSystemFlags, targetContainer, event) {
+                var rest = [];
+                for (var _i = 4; _i < arguments.length; _i++) {
+                    rest[_i - 4] = arguments[_i];
+                }
+                var targetInst = getClosestInstanceFromNode(event.target);
+                var commentRoot = getCommentRoot(targetInst);
+                var containerInfo;
+                if (commentRoot) {
+                    containerInfo = commentRoot.stateNode.containerInfo;
+                    commentRoot.stateNode.containerInfo = targetContainer;
+                }
+                var ret = _fn_1.apply(void 0, tslib.__spreadArray([name, eventSystemFlags, targetContainer, event], rest, false));
+                if (commentRoot) {
+                    commentRoot.stateNode.containerInfo = containerInfo;
+                }
+                return ret;
+            };
+            return bind.call.apply(bind, tslib.__spreadArray([fn, null, domEventName, eventSystemFlags, targetContainer], rest, false));
         }
@@ -166,2 +194,32 @@ }
 };
+function getClosestInstanceFromNode(targetNode) {
+    var targetInst = targetNode[internalInstanceKey];
+    if (targetInst) {
+        // Don't return HostRoot or SuspenseComponent here.
+        return targetInst;
+    } // If the direct event target isn't a React owned DOM node, we need to look
+    // to see if one of its parents is a React owned DOM node.
+    var parentNode = targetNode.parentNode;
+    while (parentNode) {
+        targetInst = parentNode[internalInstanceKey];
+        if (targetInst) {
+            return targetInst;
+        }
+        targetNode = parentNode;
+        parentNode = targetNode.parentNode;
+    }
+    return null;
+}
+function getCommentRoot(targetInst) {
+    var node = targetInst;
+    while (true) {
+        if (node === null)
+            return;
+        var nodeTag = node.tag;
+        if (nodeTag === 3 /* HostRoot */) {
+            return node;
+        }
+        node = node.return;
+    }
+}
 
@@ -282,2 +340,11 @@ var Context = react.createContext(null);
                 instance.$lastInput.dom = dom;
+                // console.log(rootContainer);
+                // console.dir(container);
+                // debugger;
+                // getRootContainer(parentComponent);
+                // Object.defineProperty((container as any)._reactRootContainer._internalRoot, 'containerInfo', {
+                // get() {
+                // return getRootContainer(parentComponent); 
+                // }
+                // });
                 resolve();
@@ -339,2 +406,3 @@ });
         };
+        // let react don't add listeners to the root container
         parentElement[listeningMarker] = true;
@@ -341,0 +409,0 @@ parentElement._hasRewrite = true;

dist/index.cjs.prod.js

@@ -125,2 +125,5 @@ 'use strict';
 var bind = Function.prototype.bind;
+// retrieve from react definition
+var IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
+var IS_NON_DELEGATED = 2;
 Function.prototype.bind = function () {
@@ -148,4 +151,29 @@ var args = [];
         }
-        if (isReactListening) {
-            return bind.call.apply(bind, tslib.__spreadArray([this, null, domEventName, eventSystemFlags | 2, targetContainer], rest, false));
+        if (isReactListening && (eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) === 0 && (eventSystemFlags & IS_NON_DELEGATED) === 0) {
+            /**
+             * Because we only add listeners to the react root container, the comment root container in Wrapper will ignore doing this.
+             * But React will check the container (isMatchingRootContainer). it will always return false since the comment parentNode is not
+             * the targetContainer. Therefore, we fake the parentNode by returning the targetContainer to skip the check in React.
+             * Eventually we restore the value after calling the function.
+             */
+            var _fn_1 = this;
+            var fn = function (name, eventSystemFlags, targetContainer, event) {
+                var rest = [];
+                for (var _i = 4; _i < arguments.length; _i++) {
+                    rest[_i - 4] = arguments[_i];
+                }
+                var targetInst = getClosestInstanceFromNode(event.target);
+                var commentRoot = getCommentRoot(targetInst);
+                var containerInfo;
+                if (commentRoot) {
+                    containerInfo = commentRoot.stateNode.containerInfo;
+                    commentRoot.stateNode.containerInfo = targetContainer;
+                }
+                var ret = _fn_1.apply(void 0, tslib.__spreadArray([name, eventSystemFlags, targetContainer, event], rest, false));
+                if (commentRoot) {
+                    commentRoot.stateNode.containerInfo = containerInfo;
+                }
+                return ret;
+            };
+            return bind.call.apply(bind, tslib.__spreadArray([fn, null, domEventName, eventSystemFlags, targetContainer], rest, false));
         }
@@ -155,2 +183,32 @@ }
 };
+function getClosestInstanceFromNode(targetNode) {
+    var targetInst = targetNode[internalInstanceKey];
+    if (targetInst) {
+        // Don't return HostRoot or SuspenseComponent here.
+        return targetInst;
+    } // If the direct event target isn't a React owned DOM node, we need to look
+    // to see if one of its parents is a React owned DOM node.
+    var parentNode = targetNode.parentNode;
+    while (parentNode) {
+        targetInst = parentNode[internalInstanceKey];
+        if (targetInst) {
+            return targetInst;
+        }
+        targetNode = parentNode;
+        parentNode = targetNode.parentNode;
+    }
+    return null;
+}
+function getCommentRoot(targetInst) {
+    var node = targetInst;
+    while (true) {
+        if (node === null)
+            return;
+        var nodeTag = node.tag;
+        if (nodeTag === 3 /* HostRoot */) {
+            return node;
+        }
+        node = node.return;
+    }
+}
 
@@ -271,2 +329,11 @@ var Context = react.createContext(null);
                 instance.$lastInput.dom = dom;
+                // console.log(rootContainer);
+                // console.dir(container);
+                // debugger;
+                // getRootContainer(parentComponent);
+                // Object.defineProperty((container as any)._reactRootContainer._internalRoot, 'containerInfo', {
+                // get() {
+                // return getRootContainer(parentComponent); 
+                // }
+                // });
                 resolve();
@@ -322,2 +389,3 @@ });
         };
+        // let react don't add listeners to the root container
         parentElement[listeningMarker] = true;
@@ -324,0 +392,0 @@ parentElement._hasRewrite = true;

dist/index.esm.js

@@ -133,2 +133,5 @@ import { __spreadArray, __assign, __extends } from 'tslib';
 var bind = Function.prototype.bind;
+// retrieve from react definition
+var IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
+var IS_NON_DELEGATED = 2;
 Function.prototype.bind = function () {
@@ -156,4 +159,29 @@ var args = [];
         }
-        if (isReactListening) {
-            return bind.call.apply(bind, __spreadArray([this, null, domEventName, eventSystemFlags | 2, targetContainer], rest, false));
+        if (isReactListening && (eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) === 0 && (eventSystemFlags & IS_NON_DELEGATED) === 0) {
+            /**
+             * Because we only add listeners to the react root container, the comment root container in Wrapper will ignore doing this.
+             * But React will check the container (isMatchingRootContainer). it will always return false since the comment parentNode is not
+             * the targetContainer. Therefore, we fake the parentNode by returning the targetContainer to skip the check in React.
+             * Eventually we restore the value after calling the function.
+             */
+            var _fn_1 = this;
+            var fn = function (name, eventSystemFlags, targetContainer, event) {
+                var rest = [];
+                for (var _i = 4; _i < arguments.length; _i++) {
+                    rest[_i - 4] = arguments[_i];
+                }
+                var targetInst = getClosestInstanceFromNode(event.target);
+                var commentRoot = getCommentRoot(targetInst);
+                var containerInfo;
+                if (commentRoot) {
+                    containerInfo = commentRoot.stateNode.containerInfo;
+                    commentRoot.stateNode.containerInfo = targetContainer;
+                }
+                var ret = _fn_1.apply(void 0, __spreadArray([name, eventSystemFlags, targetContainer, event], rest, false));
+                if (commentRoot) {
+                    commentRoot.stateNode.containerInfo = containerInfo;
+                }
+                return ret;
+            };
+            return bind.call.apply(bind, __spreadArray([fn, null, domEventName, eventSystemFlags, targetContainer], rest, false));
         }
@@ -163,2 +191,32 @@ }
 };
+function getClosestInstanceFromNode(targetNode) {
+    var targetInst = targetNode[internalInstanceKey];
+    if (targetInst) {
+        // Don't return HostRoot or SuspenseComponent here.
+        return targetInst;
+    } // If the direct event target isn't a React owned DOM node, we need to look
+    // to see if one of its parents is a React owned DOM node.
+    var parentNode = targetNode.parentNode;
+    while (parentNode) {
+        targetInst = parentNode[internalInstanceKey];
+        if (targetInst) {
+            return targetInst;
+        }
+        targetNode = parentNode;
+        parentNode = targetNode.parentNode;
+    }
+    return null;
+}
+function getCommentRoot(targetInst) {
+    var node = targetInst;
+    while (true) {
+        if (node === null)
+            return;
+        var nodeTag = node.tag;
+        if (nodeTag === 3 /* HostRoot */) {
+            return node;
+        }
+        node = node.return;
+    }
+}
 
@@ -279,2 +337,11 @@ var Context = createContext(null);
                 instance.$lastInput.dom = dom;
+                // console.log(rootContainer);
+                // console.dir(container);
+                // debugger;
+                // getRootContainer(parentComponent);
+                // Object.defineProperty((container as any)._reactRootContainer._internalRoot, 'containerInfo', {
+                // get() {
+                // return getRootContainer(parentComponent); 
+                // }
+                // });
                 resolve();
@@ -336,2 +403,3 @@ });
         };
+        // let react don't add listeners to the root container
         parentElement[listeningMarker] = true;
@@ -338,0 +406,0 @@ parentElement._hasRewrite = true;

dist/packages/intact/src/core/component.d.ts

@@ -26,2 +26,3 @@ import { ComponentClass, Props, VNodeComponentClass, IntactDom, VNode, TypeDefs } from 'misstime';
     $provides: Record<InjectionKey, any> | null;
+    $uid: number;
     $inited: boolean;
@@ -28,0 +29,0 @@ $rendered: boolean;

package.json

 {
   "name": "intact-react",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A compatibility layer for running intact component in React@17",
@@ -32,5 +32,5 @@ "main": "index.js",
   "dependencies": {
-    "intact": "^3.0.4",
+    "intact": "^3.0.5",
     "tslib": "^2.3.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

993113

increased by2.03%

Lines of code

23570

increased by1.8%

Dependency changes

• Updatedintact@^3.0.5