From 0b3c2d358f7345af7d3139f9600aa03207b34619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E5=BE=B7=E9=9D=96?=
 <ludejing@ludejingdeMacBook-Pro.local>
Date: Thu, 19 Dec 2024 22:57:43 +0800
Subject: [PATCH 1/3] feat: add support for embedded options to hide dark mode
 toggle

---
 src/client/components/NavBar.vue |  6 +++++-
 src/node/context.ts              |  1 +
 src/node/options.ts              | 10 ++++++++++
 src/types.ts                     |  4 ++++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/client/components/NavBar.vue b/src/client/components/NavBar.vue
index 6fc1d64..bdc9466 100644
--- a/src/client/components/NavBar.vue
+++ b/src/client/components/NavBar.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import {
+  rpc,
   toggleDark,
 } from '../logic'
+
+const metadata = ref(await rpc.getMetadata())
+const hideDarkMode = metadata.value.embedded?.hideDarkMode === true
 </script>
 
 <template>
@@ -16,7 +20,7 @@ import {
       >
         <div i-carbon-logo-github />
       </a>
-      <button class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
+      <button v-if="!hideDarkMode" class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
         <span i-carbon-sun dark:i-carbon-moon />
       </button>
     </slot>
diff --git a/src/node/context.ts b/src/node/context.ts
index 381de26..79b71f8 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -36,6 +36,7 @@ export class InspectContext {
               }),
           ),
         })),
+      embedded: this.options.embedded ?? {},
     }
   }
 
diff --git a/src/node/options.ts b/src/node/options.ts
index 1faf385..158d962 100644
--- a/src/node/options.ts
+++ b/src/node/options.ts
@@ -63,4 +63,14 @@ export interface ViteInspectOptions {
    * @default true
    */
   removeVersionQuery?: boolean
+  /**
+   * Support embedding in other projects
+   *
+   * @default {}
+   * @example {
+   *   // hide "Toggle Dark Mode" in the inspector UI
+   *   hideDarkMode: true,
+   * }
+   */
+  embedded?: Record<string, string | boolean>
 }
diff --git a/src/types.ts b/src/types.ts
index 3da9991..c921976 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,6 +98,10 @@ export interface InstanceInfo {
 
 export interface Metadata {
   instances: InstanceInfo[]
+  /**
+   * Support embedding in other projects
+   */
+  embedded?: Record<string, string | boolean>
 }
 
 export interface RpcFunctions {

From 4ad4c9f3fcb98cc81e6fdee3bce50486d8b76609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E5=BE=B7=E9=9D=96?=
 <ludejing@ludejingdeMacBook-Pro.local>
Date: Fri, 20 Dec 2024 00:27:57 +0800
Subject: [PATCH 2/3] feat: enhance embedded options to include hideDarkMode
 property

---
 src/node/options.ts | 16 +++++++++++-----
 src/types.ts        |  9 ++++++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/node/options.ts b/src/node/options.ts
index 158d962..fd1d10d 100644
--- a/src/node/options.ts
+++ b/src/node/options.ts
@@ -51,26 +51,32 @@ export interface ViteInspectOptions {
    * @default false
    */
   silent?: boolean
+
   /**
    * Automatically open inspect page
    *
    * @default false
    */
   open?: boolean
+
   /**
    * Remove version query `?v=xxx` and treat them as the same module
    *
    * @default true
    */
   removeVersionQuery?: boolean
+
   /**
    * Support embedding in other projects
    *
    * @default {}
-   * @example {
-   *   // hide "Toggle Dark Mode" in the inspector UI
-   *   hideDarkMode: true,
-   * }
    */
-  embedded?: Record<string, string | boolean>
+  embedded?: {
+    /**
+     * hide dark mode toggle button in inspector UI
+     */
+    hideDarkMode?: boolean
+
+    [key: string]: any
+  }
 }
diff --git a/src/types.ts b/src/types.ts
index c921976..746c04c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -101,7 +101,14 @@ export interface Metadata {
   /**
    * Support embedding in other projects
    */
-  embedded?: Record<string, string | boolean>
+  embedded: {
+    /**
+     * hide dark mode toggle button in inspector UI
+     */
+    hideDarkMode?: boolean
+
+    [key: string]: any
+  }
 }
 
 export interface RpcFunctions {

From c1baad722acb09fda82f72d9961138ef63f095aa Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Fri, 20 Dec 2024 12:22:35 +0800
Subject: [PATCH 3/3] chore: update

---
 src/client/components/NavBar.vue | 33 ++++++++++++++++----------------
 src/client/vite.config.ts        |  4 +++-
 src/node/context.ts              |  2 +-
 src/node/options.ts              | 13 +++----------
 src/types.ts                     | 12 +-----------
 5 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/client/components/NavBar.vue b/src/client/components/NavBar.vue
index bdc9466..50556f2 100644
--- a/src/client/components/NavBar.vue
+++ b/src/client/components/NavBar.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import {
-  rpc,
-  toggleDark,
-} from '../logic'
+import { toggleDark } from '../logic'
+import { usePayloadStore } from '../stores/payload'
 
-const metadata = ref(await rpc.getMetadata())
-const hideDarkMode = metadata.value.embedded?.hideDarkMode === true
+const payload = usePayloadStore()
 </script>
 
 <template>
   <nav h-54px flex="~ none gap-2" border="b main" pl-4 pr-4 font-light children:my-auto>
     <slot />
     <slot name="actions">
-      <div mx1 h-full w-0 border="r main" />
-      <a
-        text-lg icon-btn
-        href="https://github.com/antfu/vite-plugin-inspect"
-        target="_blank"
-      >
-        <div i-carbon-logo-github />
-      </a>
-      <button v-if="!hideDarkMode" class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
-        <span i-carbon-sun dark:i-carbon-moon />
-      </button>
+      <template v-if="!payload.metadata.embedded">
+        <div mx1 h-full w-0 border="r main" />
+        <a
+          text-lg icon-btn
+          href="https://github.com/antfu/vite-plugin-inspect"
+          target="_blank"
+        >
+          <div i-carbon-logo-github />
+        </a>
+        <button class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
+          <span i-carbon-sun dark:i-carbon-moon />
+        </button>
+      </template>
     </slot>
   </nav>
 </template>
diff --git a/src/client/vite.config.ts b/src/client/vite.config.ts
index 963749c..25e2ced 100644
--- a/src/client/vite.config.ts
+++ b/src/client/vite.config.ts
@@ -63,7 +63,9 @@ export default defineConfig({
       dts: join(__dirname, 'components.d.ts'),
     }),
     Unocss(),
-    Inspect(),
+    Inspect({
+      // embedded: true,
+    }),
     AutoImport({
       dts: join(__dirname, 'auto-imports.d.ts'),
       imports: [
diff --git a/src/node/context.ts b/src/node/context.ts
index 79b71f8..d959e9b 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -36,7 +36,7 @@ export class InspectContext {
               }),
           ),
         })),
-      embedded: this.options.embedded ?? {},
+      embedded: this.options.embedded,
     }
   }
 
diff --git a/src/node/options.ts b/src/node/options.ts
index fd1d10d..9aa5f70 100644
--- a/src/node/options.ts
+++ b/src/node/options.ts
@@ -67,16 +67,9 @@ export interface ViteInspectOptions {
   removeVersionQuery?: boolean
 
   /**
-   * Support embedding in other projects
+   * Enable embedded mode
    *
-   * @default {}
+   * @default false
    */
-  embedded?: {
-    /**
-     * hide dark mode toggle button in inspector UI
-     */
-    hideDarkMode?: boolean
-
-    [key: string]: any
-  }
+  embedded?: boolean
 }
diff --git a/src/types.ts b/src/types.ts
index 746c04c..aa7e831 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,17 +98,7 @@ export interface InstanceInfo {
 
 export interface Metadata {
   instances: InstanceInfo[]
-  /**
-   * Support embedding in other projects
-   */
-  embedded: {
-    /**
-     * hide dark mode toggle button in inspector UI
-     */
-    hideDarkMode?: boolean
-
-    [key: string]: any
-  }
+  embedded?: boolean
 }
 
 export interface RpcFunctions {