[ui] Vue 3 - Improved webComponentWrap to prevent re-registering of web-components
-import { createApp, ComponentOptions, Component } from 'vue';
-// import wrapper from './wrapper/index';
-
-// Dummy till wrapper is fixed ---
-import { CreateAppFunction } from '@vue/runtime-core';
-function wrapper(createApp: CreateAppFunction<Element>, component: Component): CustomElementConstructor {
- return null;
-}
-// Dummy till wrapper is fixed ---
+import { ComponentOptions, Component } from 'vue';
+import wrapper from './wrapper/index';
export interface HueComponentOptions<T extends Component> extends ComponentOptions<T> {
hueBaseUrl?: string;
}
+const isRegistered = function(tag: string): boolean {
+ return document.createElement(tag).constructor !== HTMLElement;
+}
+
export const wrap = <T extends Component>(
tag: string,
component: { new (): T },
options?: ElementDefinitionOptions
): void => {
- const customElement: CustomElementConstructor = wrapper(createApp, component);
+ if(!isRegistered(tag)) {
+ const customElement: CustomElementConstructor = wrapper(component);
window.customElements.define(tag, customElement, options);
+ }
};
