fix(lib): fix naive-ui style injection

Author: dvcol

package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@dvcol/web-extension-utils": "^2.3.4",
+    "naive-ui": "^2.34.4",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
@@ -95,7 +96,7 @@
     "jsdom": "^22.1.0",
     "jsonc-eslint-parser": "^2.1.0",
     "lint-staged": "^14.0.1",
-    "naive-ui": "^2.34.4",
+    "magic-string": "^0.30.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.2",
     "rimraf": "^5.0.1",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NButton, NButtonGroup } from 'naive-ui';
 import { RouterLink, RouterView } from 'vue-router';
 
 import HelloWorld from '~/components/HelloWorld.vue';
@@ -20,6 +21,12 @@ const store = useRouterStore();
         <RouterLink :to="`${store.baseName}/`">Home</RouterLink>
         <RouterLink :to="`${store.baseName}/about`">About</RouterLink>
       </nav>
+
+      <NButtonGroup class="buttons">
+        <RouterLink :to="`${store.baseName}/`"><NButton>Home</NButton></RouterLink>
+        <NButton ghost> One More </NButton>
+        <RouterLink :to="`${store.baseName}/about`"><NButton>About/NButton></NButton></RouterLink>
+      </NButtonGroup>
     </div>
   </header>
   <main>
@@ -32,6 +39,11 @@ header {
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  .buttons {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 main {

src/components/AppView.vue

@@ -2,6 +2,7 @@ import { dirname, relative } from 'path';
 import { fileURLToPath, URL } from 'url';
 
 import vue from '@vitejs/plugin-vue';
+import MagicString from 'magic-string';
 import { viteVueCE } from 'unplugin-vue-ce';
 
 import { defineConfig } from 'vite';
@@ -42,6 +43,24 @@ const getPlugins = (): PluginOption[] => [
   }),
   viteVueCE(),
 
+  // replace document query selector to inject naive-ui within shadow root instead of document head
+  {
+    name: 'chunk-transform',
+    enforce: 'post',
+    transform: (code, id) => {
+      if (id.includes('css-render') || id.includes('naive-ui')) {
+        const getReplacement = (fallback = 'document') => `(document.querySelector('wc-trakt-extension').shadowRoot ?? ${fallback})`;
+        const _code = new MagicString(code)
+          .replace(/document\.querySelector/g, `(${getReplacement()}).querySelector`)
+          .replace(/document\.head/g, `(${getReplacement('document.head')})`);
+        return {
+          code: _code.toString(),
+          map: _code.generateMap({ hires: true }),
+        };
+      }
+    },
+  },
+
   // rewrite assets to use relative path
   {
     name: 'assets-rewrite',
@@ -60,6 +79,8 @@ export default defineConfig(() => ({
   },
   define: {
     __DEV__: isDev,
+    __VUE_OPTIONS_API__: false,
+    __VUE_PROD_DEVTOOLS__: isDev,
   },
   plugins: getPlugins(),
   base: './',