chore(devtool): adds devtool support to wc

Author: dvcol

package.json

@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@dvcol/web-extension-utils": "^2.3.4",
+    "@vue/devtools": "^7.0.15",
     "naive-ui": "^2.37.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.14",

pnpm-lock.yaml

@@ -1,13 +1,20 @@
 import { defineCustomElement, getCurrentInstance, h } from 'vue';
 
+import type { DevToolsHook, DevToolsHooks } from '@vue/devtools';
 import type { Component, ComponentInternalInstance } from 'vue';
 import type { InitVueAppOption } from '~/web/init-vue-app';
 
 import { initVueApp } from '~/web/init-vue-app';
 
 type ComponentInstance = ComponentInternalInstance & { provides: ComponentInternalInstance['appContext']['provides'] };
 
-export const createElementInstance = (component: Component, options: InitVueAppOption) => {
+declare global {
+  interface Window {
+    __VUE_DEVTOOLS_GLOBAL_HOOK__: DevToolsHook & { Vue: Component };
+  }
+}
+
+export const createElementInstance = (component: Component, { name, ...options }: InitVueAppOption & { name: string }) => {
   return defineCustomElement({
     setup(props) {
       const app = initVueApp(component, options);
@@ -16,6 +23,24 @@ export const createElementInstance = (component: Component, options: InitVueAppO
       if (inst) {
         Object.assign(inst.appContext, app._context);
         Object.assign(inst.provides, app._context.provides);
+
+        // Add support for Vue Devtools
+        if (import.meta.env.DEV && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+          app._container = document.querySelector(name);
+          app._instance = inst;
+
+          const types = {
+            Comment: Symbol('v-cmt'),
+            Fragment: Symbol('v-fgt'),
+            Static: Symbol('v-stc'),
+            Text: Symbol('v-txt'),
+          };
+
+          window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('app:init' as DevToolsHooks, app, app.version, types);
+          window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app;
+
+          console.info('Vue Devtools is enabled.');
+        }
       }
 
       return () => h(component, props);

src/services/tmdb-client/tmdb-client.service.ts

@@ -11,7 +11,7 @@ export const defineComponent = async (options: DefineOption = {}, component: Web
   } else {
     const [{ createElementInstance }, { lazyComponent }] = await Promise.all([import('~/web/create-wc'), import('~/utils/lazy.utils')]);
     const ContainerComponent = lazyComponent(() => import('~/components/web/ContainerComponent.ce.vue'));
-    const TraktExtensionWc = createElementInstance(ContainerComponent, options);
+    const TraktExtensionWc = createElementInstance(ContainerComponent, { name: component, ...options });
     customElements.define(component, TraktExtensionWc);
   }
 };