Merge pull request KNXCloud#39 from KNXCloud/fix-model

keuby · web-flow · commit ee7548ebc38c · 2022-09-28T14:41:59.000+08:00
fix(vue-simulator-renderer): 修复当组件根元素 teleport 时,无法正确获取组件 dom 实例
diff --git a/packages/utils/src/check.ts b/packages/utils/src/check.ts
@@ -3,8 +3,8 @@ export type ESModule = {
   default: any;
 };
 
-export function isNil<T>(val: T): val is NonNullable<T> {
-  return val !== null && val !== undefined;
+export function isNil<T>(val: T | null | undefined): val is null | undefined {
+  return val === null && val === undefined;
 }
 
 export function isObject(val: unknown): val is Record<string, unknown> {
diff --git a/packages/vue-simulator-renderer/src/utils/check-node.ts b/packages/vue-simulator-renderer/src/utils/check-node.ts
@@ -1,3 +1,5 @@
+import { isObject } from './check';
+
 export function isCommentNode(el: Element | Text | Comment | Node): el is Comment {
   return el.nodeType === 8;
 }
@@ -6,6 +8,14 @@ export function isTextNode(el: Element | Text | Comment | Node): el is Text {
   return el.nodeType === 3;
 }
 
+export function isDomNode(el: unknown): el is Element | Text {
+  return (
+    isObject(el) &&
+    'nodeType' in el &&
+    (el.nodeType === Node.ELEMENT_NODE || el.nodeType === Node.TEXT_NODE)
+  );
+}
+
 export function isEmptyNode(el: Element | Text | Comment | Node): boolean {
   return isCommentNode(el) || (isTextNode(el) && el.nodeValue === '');
 }
diff --git a/packages/vue-simulator-renderer/src/utils/comp-node.ts b/packages/vue-simulator-renderer/src/utils/comp-node.ts
@@ -31,7 +31,7 @@ export class ComponentRecord {
 }
 
 export function isVNodeHTMLElement(el: unknown): el is VNodeHTMLElement {
-  return isObject(el) && isNil(el.__vueParentComponent);
+  return isObject(el) && !isNil(el.__vueParentComponent);
 }
 
 export function isCompRootHTMLElement(
diff --git a/packages/vue-simulator-renderer/src/utils/find-dom-nodes.ts b/packages/vue-simulator-renderer/src/utils/find-dom-nodes.ts
@@ -1,18 +1,21 @@
-import { ComponentInternalInstance } from 'vue';
+import { ComponentInternalInstance, VNode, isVNode } from 'vue';
 import { ComponentInstance } from '../interface';
 import { isVNodeHTMLElement } from './comp-node';
-import { isEmptyNode } from './check-node';
+import { isDomNode, isEmptyNode } from './check-node';
+import { getClientRects } from './get-client-rects';
 
 export function findDOMNodes(instance: ComponentInstance) {
   const els: (Element | Text)[] = [];
 
   const el: Element | Text = instance.$el;
 
   if (isEmptyNode(el)) {
-    appendSiblingElement(els, instance.$, el, (node) => {
+    const internalInstance = instance.$;
+    appendSiblingElement(els, internalInstance, el, (node) => {
       return node.previousSibling;
     });
-    appendSiblingElement(els, instance.$, el, (node) => {
+    appendDescendantComponent(els, internalInstance);
+    appendSiblingElement(els, internalInstance, el, (node) => {
       return node.nextSibling;
     });
   } else {
@@ -46,6 +49,60 @@ function appendSiblingElement(
   }
 }
 
+function appendDescendantComponent(
+  target: (Element | Text)[],
+  instance: ComponentInternalInstance
+): boolean {
+  const subNode = instance.subTree;
+  const current = subNode.el as Element | Text;
+  if (isValidElement(current)) {
+    target.push(current);
+    return true;
+  }
+  if (Array.isArray(subNode.children) && subNode.children.length > 0) {
+    return appendDescendantChildren(target, subNode.children as VNode<Element | Text>[]);
+  } else if (subNode.component) {
+    return appendDescendantComponent(target, subNode.component);
+  }
+  return false;
+}
+
+function appendDescendantChildren(
+  target: (Element | Text)[],
+  children: VNode[]
+): boolean {
+  const validElements = children.map(({ el }) => el).filter(isValidElement);
+  if (validElements.length > 0) {
+    target.push(...validElements);
+    return true;
+  } else {
+    return (
+      children.length > 0 &&
+      children.some((item) => {
+        if (Array.isArray(item.children) && item.children.length > 0) {
+          return appendDescendantChildren(
+            target,
+            item.children.filter((child): child is VNode<Element | Text> =>
+              isVNode(child)
+            )
+          );
+        } else if (item.component) {
+          return appendDescendantComponent(target, item.component);
+        }
+        return false;
+      })
+    );
+  }
+}
+
+function isValidElement(el: unknown): el is Element | Text {
+  if (el && isDomNode(el) && !isEmptyNode(el)) {
+    const rect = getClientRects(el);
+    return rect.some((item) => item.width || item.height);
+  }
+  return false;
+}
+
 function isChildInstance(
   target: ComponentInternalInstance,
   source: ComponentInternalInstance | null

Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,8 @@ export type ESModule = {`
`3`	`3`	`default: any;`
`4`	`4`	`};`
`5`	`5`
`6`		`-export function isNil<T>(val: T): val is NonNullable<T> {`
`7`		`- return val !== null && val !== undefined;`
	`6`	`+export function isNil<T>(val: T \| null \| undefined): val is null \| undefined {`
	`7`	`+ return val === null && val === undefined;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`export function isObject(val: unknown): val is Record<string, unknown> {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { isObject } from './check';`
	`2`	`+`
`1`	`3`	`export function isCommentNode(el: Element \| Text \| Comment \| Node): el is Comment {`
`2`	`4`	`return el.nodeType === 8;`
`3`	`5`	`}`
`@@ -6,6 +8,14 @@ export function isTextNode(el: Element \| Text \| Comment \| Node): el is Text {`
`6`	`8`	`return el.nodeType === 3;`
`7`	`9`	`}`
`8`	`10`
	`11`	`+export function isDomNode(el: unknown): el is Element \| Text {`
	`12`	`+ return (`
	`13`	`+ isObject(el) &&`
	`14`	`+ 'nodeType' in el &&`
	`15`	`+ (el.nodeType === Node.ELEMENT_NODE \|\| el.nodeType === Node.TEXT_NODE)`
	`16`	`+ );`
	`17`	`+}`
	`18`	`+`
`9`	`19`	`export function isEmptyNode(el: Element \| Text \| Comment \| Node): boolean {`
`10`	`20`	`return isCommentNode(el) \|\| (isTextNode(el) && el.nodeValue === '');`
`11`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export class ComponentRecord {`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`export function isVNodeHTMLElement(el: unknown): el is VNodeHTMLElement {`
`34`		`- return isObject(el) && isNil(el.__vueParentComponent);`
	`34`	`+ return isObject(el) && !isNil(el.__vueParentComponent);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`export function isCompRootHTMLElement(`