fix: child element had be delete can't repeat delete

web-infra-dev · Aug 23, 2021 · e57e817 · e57e817
1 parent d98c4fb
commit e57e817
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/runtime/browser-vm/src/dynamicNode/index.ts b/packages/runtime/browser-vm/src/dynamicNode/index.ts
@@ -1,4 +1,4 @@
-import { warn } from '@garfish/utils';
+import { warn, __ELEMENT_DELETE_TAG__ } from '@garfish/utils';
 import { StyleManager } from '@garfish/loader';
 import { __domWrapper__ } from '../symbolTypes';
 import { sandboxMap, isInIframe } from '../utils';
@@ -11,7 +11,7 @@ const mountElementMethods = [
   'insertBefore',
   'insertAdjacentElement',
 ];
-const removeElementMethods = ['removeChild'];
+const removeChildElementMethods = ['removeChild'];
 
 function injector(current: Function, methodName: string) {
   return function () {
@@ -41,14 +41,19 @@ function injector(current: Function, methodName: string) {
   };
 }
 
-function injectorRemove(current: Function, methodName: string) {
+function injectorRemoveChild(current: Function, methodName: string) {
   return function () {
     const el = arguments[0];
     const sandbox = el && sandboxMap.get(el);
-    const originProcess = () => current.apply(this, arguments);
+    const originProcess = () => {
+      // Sandbox may have applied sub dom side effects to delete
+      // by removeChild deleted by the tag determine whether have been removed
+      if (el && el[__ELEMENT_DELETE_TAG__]) return el;
+      return current.apply(this, arguments);
+    };
     if (sandbox) {
       const processor = new DynamicNodeProcessor(el, sandbox, methodName);
-      return processor.remove(this, originProcess);
+      return processor.removeChild(this, originProcess);
     } else {
       return originProcess();
     }
@@ -82,7 +87,7 @@ export function makeElInjector() {
     if (!isInIframe()) handleOwnerDocument();
     const rewrite = (
       methods: Array<string>,
-      builder: typeof injector | typeof injectorRemove,
+      builder: typeof injector | typeof injectorRemoveChild,
     ) => {
       for (const name of methods) {
         const fn = window.Element.prototype[name];
@@ -96,7 +101,7 @@ export function makeElInjector() {
       }
     };
     rewrite(mountElementMethods, injector);
-    rewrite(removeElementMethods, injectorRemove);
+    rewrite(removeChildElementMethods, injectorRemoveChild);
   }
 
   injectHandlerParams();

diff --git a/packages/runtime/browser-vm/src/dynamicNode/processor.ts b/packages/runtime/browser-vm/src/dynamicNode/processor.ts
@@ -269,7 +269,7 @@ export class DynamicNodeProcessor {
     return originProcess();
   }
 
-  remove(context: Element, originProcess: Function) {
+  removeChild(context: Element, originProcess: Function) {
     if (this.is('style') || this.is('link') || this.is('script')) {
       const parentNode = this.findParentNodeInApp(
         context,

diff --git a/packages/runtime/utils/src/domApis.ts b/packages/runtime/utils/src/domApis.ts
@@ -1,3 +1,4 @@
+import { __ELEMENT_DELETE_TAG__ } from './garfish';
 import { makeMap } from './utils';
 
 export interface Text {
@@ -120,6 +121,7 @@ export class DOMApis {
     const parentNode = el && el.parentNode;
     if (parentNode) {
       parentNode.removeChild(el);
+      el[__ELEMENT_DELETE_TAG__] = true;
     }
   }
 

diff --git a/packages/runtime/utils/src/garfish.ts b/packages/runtime/utils/src/garfish.ts
@@ -1,3 +1,4 @@
 export const __GARFISH_FLAG__ = Symbol.for('__GARFISH_FLAG__');
 export const __MockBody__ = '__garfishmockbody__';
 export const __MockHead__ = '__garfishmockhead__';
+export const __ELEMENT_DELETE_TAG__ = '__ELEMENT_DELETE_TAG__';