chore: add entry for settings and logs

Author: antfu

packages/core/playground/vite.config.ts

@@ -107,11 +107,11 @@ export default defineConfig({
           })
 
           ctx.docks.register({
-            id: 'devtools-tab',
+            id: 'shared-state',
             type: 'iframe',
             url: '/devtools/',
-            title: 'DevTools',
-            icon: 'ph:gear-duotone',
+            title: 'Shared State',
+            icon: 'ph:database-duotone',
           })
 
           ctx.docks.register({

packages/core/src/client/webcomponents/components/ViewBuiltinLogs.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Logs
+    // TODO:
+  </div>
+</template>

packages/core/src/client/webcomponents/components/ViewBuiltinSettings.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Settings
+    // TODO:
+  </div>
+</template>

packages/core/src/client/webcomponents/components/ViewEntry.vue

@@ -3,8 +3,9 @@ import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
 import type { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
+import { defineAsyncComponent } from 'vue'
 import ViewBuiltinClientAuthNotice from './ViewBuiltinClientAuthNotice.vue'
-import ViewBuiltinTerminals from './ViewBuiltinTerminals.vue'
+import ViewBuiltinSettings from './ViewBuiltinSettings.vue'
 import ViewCustomRenderer from './ViewCustomRenderer.vue'
 import ViewIframe from './ViewIframe.vue'
 import ViewLauncher from './ViewLauncher.vue'
@@ -16,48 +17,70 @@ defineProps<{
   iframeStyle?: CSSProperties
   divStyle?: CSSProperties
 }>()
+
+// Lazy load some less frequently used builtin views
+const ViewBuiltinTerminals = defineAsyncComponent(() => import('./ViewBuiltinTerminals.vue'))
+const ViewBuiltinLogs = defineAsyncComponent(() => import('./ViewBuiltinLogs.vue'))
 </script>
 
 <template>
-  <template v-if="entry.type === '~builtin'">
-    <ViewBuiltinTerminals
-      v-if="entry.id === '~terminals'"
+  <Suspense>
+    <template v-if="entry.type === '~builtin'">
+      <ViewBuiltinTerminals
+        v-if="entry.id === '~terminals'"
+        :context
+        :entry
+      />
+      <ViewBuiltinLogs
+        v-else-if="entry.id === '~logs'"
+        :context
+        :entry
+      />
+      <ViewBuiltinSettings
+        v-else-if="entry.id === '~settings'"
+        :context
+        :entry
+      />
+      <ViewBuiltinClientAuthNotice
+        v-else-if="entry.id === '~client-auth-notice'"
+        :context
+      />
+      <div v-else>
+        Unknown builtin entry: {{ entry }}
+      </div>
+    </template>
+
+    <!-- Entry for Actions -->
+    <template v-else-if="entry.type === 'action'" />
+
+    <!-- User-defined entries -->
+    <ViewIframe
+      v-else-if="entry.type === 'iframe'"
+      :context
+      :entry
+      :persisted-doms="persistedDoms"
+      :iframe-style="iframeStyle"
+    />
+    <ViewCustomRenderer
+      v-else-if="entry.type === 'custom-render'"
       :context
       :entry
+      :persisted-doms="persistedDoms"
+      :div-style="divStyle"
     />
-    <ViewBuiltinClientAuthNotice
-      v-else-if="entry.id === '~client-auth-notice'"
+    <ViewLauncher
+      v-else-if="entry.type === 'launcher'"
       :context
+      :entry
     />
     <div v-else>
-      Unknown builtin entry: {{ entry }}
+      Unknown entry: {{ entry }}
     </div>
-  </template>
-
-  <!-- Entry for Actions -->
-  <template v-else-if="entry.type === 'action'" />
 
-  <!-- User-defined entries -->
-  <ViewIframe
-    v-else-if="entry.type === 'iframe'"
-    :context
-    :entry
-    :persisted-doms="persistedDoms"
-    :iframe-style="iframeStyle"
-  />
-  <ViewCustomRenderer
-    v-else-if="entry.type === 'custom-render'"
-    :context
-    :entry
-    :persisted-doms="persistedDoms"
-    :div-style="divStyle"
-  />
-  <ViewLauncher
-    v-else-if="entry.type === 'launcher'"
-    :context
-    :entry
-  />
-  <div v-else>
-    Unknown entry: {{ entry }}
-  </div>
+    <template #fallback>
+      <div>
+        Loading...
+      </div>
+    </template>
+  </Suspense>
 </template>

packages/core/src/node/host-docks.ts

@@ -26,6 +26,19 @@ export class DevToolsDockHost implements DevToolsDockHostType {
           return context.terminals.sessions.size === 0
         },
       },
+      {
+        type: '~builtin',
+        id: '~logs',
+        title: 'Logs',
+        icon: 'ph:notification-duotone',
+        isHidden: true, // TODO: implement logs
+      },
+      {
+        type: '~builtin',
+        id: '~settings',
+        title: 'Settings',
+        icon: 'ph:gear-duotone',
+      },
     ]
 
     return [

packages/kit/src/types/docks.ts

@@ -96,7 +96,7 @@ export interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
 
 export interface DevToolsViewBuiltin extends DevToolsDockEntryBase {
   type: '~builtin'
-  id: '~terminals' | '~logs' | '~client-auth-notice'
+  id: '~terminals' | '~logs' | '~client-auth-notice' | '~settings'
 }
 
 export type DevToolsDockUserEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender | DevToolsViewLauncher