Kaynağa Gözat

[ui] Vue 3 - Improved Web Component Wrapper to automatically infer the events fired from emits option

sreenaths 4 yıl önce
ebeveyn
işleme
271cd3812e

+ 2 - 3
desktop/core/src/desktop/js/vue/webComponentWrap.ts

@@ -28,11 +28,10 @@ const isRegistered = function (tag: string): boolean {
 export const wrap = <T extends Component>(
 export const wrap = <T extends Component>(
   tag: string,
   tag: string,
   component: { new (): T },
   component: { new (): T },
-  options?: ElementDefinitionOptions,
-  eventNames?: string[]
+  options?: ElementDefinitionOptions
 ): void => {
 ): void => {
   if (!isRegistered(tag)) {
   if (!isRegistered(tag)) {
-    const customElement: CustomElementConstructor = wrapper(component, eventNames);
+    const customElement: CustomElementConstructor = wrapper(component);
     window.customElements.define(tag, customElement, options);
     window.customElements.define(tag, customElement, options);
   }
   }
 };
 };

+ 14 - 13
desktop/core/src/desktop/js/vue/wrapper/index.ts

@@ -47,10 +47,7 @@ import {
  * @param component: Component - Component object created using Vue's defineComponent function
  * @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.
  * @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,
-  eventNames: string[] = []
-): CustomElementConstructor {
+export default function wrap(component: Component): CustomElementConstructor {
   const componentObj: ComponentOptionsWithObjectProps = <ComponentOptionsWithObjectProps>component;
   const componentObj: ComponentOptionsWithObjectProps = <ComponentOptionsWithObjectProps>component;
 
 
   let isInitialized = false;
   let isInitialized = false;
@@ -91,7 +88,7 @@ export default function wrap(
     constructor() {
     constructor() {
       super();
       super();
 
 
-      const eventProxies = this.createEventProxies(eventNames);
+      const eventProxies = this.createEventProxies(<string[]>componentObj.emits);
 
 
       this._props = {};
       this._props = {};
       this._slotChildren = [];
       this._slotChildren = [];
@@ -140,15 +137,19 @@ export default function wrap(
       });
       });
     }
     }
 
 
-    createEventProxies(eventNames: string[]): { [name: string]: (...args: unknown[]) => void } {
+    createEventProxies(
+      eventNames: string[] | undefined
+    ): { [name: string]: (...args: unknown[]) => void } {
       const eventProxies: { [name: string]: (...args: unknown[]) => void } = {};
       const eventProxies: { [name: string]: (...args: unknown[]) => void } = {};
 
 
-      eventNames.forEach(name => {
-        const handlerName = toHandlerKey(camelize(name));
-        eventProxies[handlerName] = (...args: unknown[]): void => {
-          this.dispatchEvent(createCustomEvent(name, args));
-        };
-      });
+      if (eventNames) {
+        eventNames.forEach(name => {
+          const handlerName = toHandlerKey(camelize(name));
+          eventProxies[handlerName] = (...args: unknown[]): void => {
+            this.dispatchEvent(createCustomEvent(name, args));
+          };
+        });
+      }
 
 
       return eventProxies;
       return eventProxies;
     }
     }
@@ -158,7 +159,7 @@ export default function wrap(
       let value = undefined;
       let value = undefined;
 
 
       if (this.hasOwnProperty(key)) {
       if (this.hasOwnProperty(key)) {
-        value = this[key];
+        value = (<KeyHash>this)[key];
       } else if (this.hasAttribute(key)) {
       } else if (this.hasAttribute(key)) {
         value = this.getAttribute(key);
         value = this.getAttribute(key);
       }
       }