Эх сурвалжийг харах

vue3-webcomponent-wrapper fix remount issue

Michael Geers 2 жил өмнө
parent
commit
e806bfe4af

+ 28 - 33
desktop/core/src/desktop/js/vue/wrapper/index.ts

@@ -36,7 +36,6 @@ import {
   toVNodes,
   camelize,
   hyphenate,
-  callHooks,
   setInitialProps,
   createCustomEvent,
   convertAttributeValue
@@ -85,7 +84,7 @@ export default function wrap(
   }
 
   class CustomElement extends HTMLElement {
-    _wrapper: App;
+    _wrapper?: App;
     _component?: ComponentPublicInstance;
 
     _props!: KeyHash;
@@ -95,27 +94,9 @@ export default function wrap(
     constructor() {
       super();
 
-      const eventProxies = this.createEventProxies(<string[]>componentObj.emits);
-
       this._props = {};
       this._slotChildren = [];
 
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const self = this;
-      this._wrapper = createApp({
-        render() {
-          const props = Object.assign({}, self._props, eventProxies);
-          delete props.dataVApp;
-          return h(componentObj, props, () => self._slotChildren);
-        },
-        mounted() {
-          self._mounted = true;
-        },
-        unmounted() {
-          self._mounted = false;
-        }
-      });
-
       // Use MutationObserver to react to future attribute & slot content change
       const observer = new MutationObserver(mutations => {
         let hasChildrenChange = false;
@@ -191,28 +172,42 @@ export default function wrap(
     }
 
     connectedCallback() {
-      if (!this._component || !this._mounted) {
-        if (isInitialized) {
-          // initialize attributes
-          this.syncInitialAttributes();
+      if (isInitialized) {
+        // initialize attributes
+        this.syncInitialAttributes();
+      }
+
+      const eventProxies = this.createEventProxies(<string[]>componentObj.emits);
+
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      this._wrapper = createApp({
+        render() {
+          const props = Object.assign({}, self._props, eventProxies);
+          delete props.dataVApp;
+          return h(componentObj, props, () => self._slotChildren);
+        },
+        mounted() {
+          self._mounted = true;
+        },
+        unmounted() {
+          self._mounted = false;
         }
+      });
 
-        // initialize children
-        this.syncSlots();
+      // initialize children
+      this.syncSlots();
+
+      // Mount the component
+      this._component = this._wrapper.mount(this);
 
-        // Mount the component
-        this._component = this._wrapper.mount(this);
-      } else {
-        // Call mounted on re-insert
-        callHooks(this._component, 'mounted');
-      }
       if (options?.connectedCallback) {
         options.connectedCallback.bind(this)();
       }
     }
 
     disconnectedCallback() {
-      this._wrapper.unmount();
+      this._wrapper?.unmount();
     }
   }
 

+ 1 - 13
desktop/core/src/desktop/js/vue/wrapper/utils.ts

@@ -1,4 +1,4 @@
-import { ComponentPublicInstance, VNode } from 'vue';
+import { VNode } from 'vue';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type KeyHash = { [key: string]: any };
@@ -21,18 +21,6 @@ export function setInitialProps(propsList: string[]): KeyHash {
   return res;
 }
 
-export function callHooks(vm: ComponentPublicInstance | undefined, hook: string): void {
-  if (vm) {
-    let hooks = vm.$options[hook] || [];
-    if (!Array.isArray(hooks)) {
-      hooks = [hooks];
-    }
-    hooks.forEach((hook: () => void): void => {
-      hook.call(vm);
-    });
-  }
-}
-
 export function createCustomEvent(name: string, args: unknown[]): CustomEvent {
   return new CustomEvent(name, {
     bubbles: false,