Переглянути джерело

[frontend] Update the web component wrapper to support the connectedCallback

Johan Ahlen 4 роки тому
батько
коміт
97b7981da7

+ 4 - 4
desktop/core/src/desktop/js/vue/webComponentWrap.ts

@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import { ComponentOptions, Component } from 'vue';
-import wrapper from './wrapper/index';
+import wrapper, { WebComponentOptions } from './wrapper/index';
 
 export interface HueComponentOptions<T extends Component> extends ComponentOptions<T> {
   hueBaseUrl?: string;
@@ -28,10 +28,10 @@ const isRegistered = function (tag: string): boolean {
 export const wrap = <T extends Component>(
   tag: string,
   component: { new (): T },
-  options?: ElementDefinitionOptions
+  options?: WebComponentOptions
 ): void => {
   if (!isRegistered(tag)) {
-    const customElement: CustomElementConstructor = wrapper(component);
-    window.customElements.define(tag, customElement, options);
+    const customElement: CustomElementConstructor = wrapper(component, options);
+    window.customElements.define(tag, customElement);
   }
 };

+ 11 - 3
desktop/core/src/desktop/js/vue/wrapper/index.ts

@@ -42,12 +42,17 @@ import {
   convertAttributeValue
 } from './utils';
 
+export interface WebComponentOptions {
+  connectedCallback?(): void;
+}
+
 /**
  * Vue 3 wrapper to convert a Vue component into Web Component. Supports reactive attributes, events & slots.
- * @param component: Component - Component object created using Vue's defineComponent function
- * @param eventNames: string[] - Event names to be fired in kabab case. Events must be added using addEventListener, inline events doesnt work as of now.
  */
-export default function wrap(component: Component): CustomElementConstructor {
+export default function wrap(
+  component: Component,
+  options?: WebComponentOptions
+): CustomElementConstructor {
   const componentObj: ComponentOptionsWithObjectProps = <ComponentOptionsWithObjectProps>component;
 
   let isInitialized = false;
@@ -199,6 +204,9 @@ export default function wrap(component: Component): CustomElementConstructor {
         // Call mounted on re-insert
         callHooks(this._component, 'mounted');
       }
+      if (options?.connectedCallback) {
+        options.connectedCallback.bind(this)();
+      }
     }
 
     disconnectedCallback() {