Merge branch 'main' into perf/data-inspector-lazy-jora

Author: antfu

packages/devframe/package.json

@@ -48,6 +48,7 @@
     "./utils/colors": "./dist/utils/colors.mjs",
     "./utils/crypto-token": "./dist/utils/crypto-token.mjs",
     "./utils/events": "./dist/utils/events.mjs",
+    "./utils/get-port": "./dist/utils/get-port.mjs",
     "./utils/hash": "./dist/utils/hash.mjs",
     "./utils/launch-editor": "./dist/utils/launch-editor.mjs",
     "./utils/nanoid": "./dist/utils/nanoid.mjs",

packages/devframe/src/utils/get-port.ts

@@ -0,0 +1,6 @@
+// Re-exported so plugins and other `devframe/*` consumers can resolve a
+// free port without taking their own dependency on `get-port-please` — it
+// travels as a `devframe` devDependency instead, bundled into this
+// package's node build (see `tsdown.config.ts`'s `deps.onlyBundle`).
+export { getPort } from 'get-port-please'
+export type { GetPortInput, GetPortOptions } from 'get-port-please'

packages/devframe/src/utils/remote-assets.test.ts

@@ -1,7 +1,7 @@
 import type { AddressInfo } from 'node:net'
 import type { MockInstance } from 'vitest'
 import type { RemoteAssets, RemoteAssetsErrorMessage, RemoteAssetsStore } from '../types/remote-assets'
-import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, realpathSync, writeFileSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
@@ -12,8 +12,11 @@ import { DEVFRAME_REMOTE_ASSETS_ERROR_MESSAGE_TYPE } from '../constants'
 import { resolveStaticAssetsSource } from './remote-assets'
 import { serveStaticHandler } from './serve-static'
 
+// `realpathSync` because module resolution reports realpaths, while the system
+// temp dir is a symlink on macOS (`/var` → `/private/var`) — a path built from
+// the raw `mkdtempSync` result would never match a resolved one.
 function makeTmp(): string {
-  return mkdtempSync(join(tmpdir(), 'devframe-remote-assets-'))
+  return realpathSync(mkdtempSync(join(tmpdir(), 'devframe-remote-assets-')))
 }
 
 /** A fake CDN over a flat `filePath -> contents` map, answering the jsDelivr listing API + per-file URLs. */

packages/devframe/tsdown.config.ts

@@ -102,6 +102,7 @@ const serverEntries = {
   'node/auth': 'src/node/auth/index.ts',
   'node/hub-internals': 'src/node/hub-internals/index.ts',
   'internal/index': 'src/internal/index.ts',
+  'utils/get-port': 'src/utils/get-port.ts',
   'utils/launch-editor': 'src/utils/launch-editor.ts',
   'utils/nostics': 'src/utils/nostics.ts',
   'utils/open': 'src/utils/open.ts',

packages/hub-ui/src/client/components/dock/Dock.vue

@@ -86,7 +86,7 @@ const isRpcTrusted = useIsRpcTrusted(context, (isTrusted) => {
   else if (!isTrusted) {
     // On revocation: close current tab and panel
     context.docks.switchEntry(null)
-    context.panel.store.open = false
+    context.panel.session.open = false
   }
 })
 
@@ -183,7 +183,7 @@ const isMinimized = computed(() => {
   // @ts-expect-error compatibility
   const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
   return !context.panel.isDragging
-    && !context.panel.store.open
+    && !context.panel.session.open
     && !isHovering.value
     && !isTouchDevice
     && context.panel.store.inactiveTimeout
@@ -218,8 +218,8 @@ whenever(isMinimized, () => {
 })
 
 onMounted(() => {
-  if (context.panel.store.open && !isRpcTrusted.value)
-    context.panel.store.open = false
+  if (context.panel.session.open && !isRpcTrusted.value)
+    context.panel.session.open = false
   if (isRpcTrusted.value)
     bringUp()
   recalculateCounter.value++

packages/hub-ui/src/client/components/dock/DockEdge.stories.ts

@@ -38,7 +38,8 @@ function edgeStory(position: 'top' | 'right' | 'bottom' | 'left', open = true) {
         {
           entries: categorizedEntries,
           selectedId: open ? 'overview' : null,
-          panel: { mode: 'edge', position, open, height: 40, width: 30 },
+          panel: { mode: 'edge', position, height: 40, width: 30 },
+          session: { open },
         },
         ctx => [
           h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),
@@ -75,7 +76,8 @@ export const CollapsedIdle: Story = {
       {
         entries: categorizedEntries,
         selectedId: null,
-        panel: { mode: 'edge', position: 'bottom', open: false, inactiveTimeout: 0 },
+        panel: { mode: 'edge', position: 'bottom', inactiveTimeout: 0 },
+        session: { open: false },
         settings: { autoCollapseEdgeToolbar: true },
       },
       ctx => [
@@ -93,7 +95,7 @@ export const WithGroup: Story = {
       {
         entries: groupedEntries,
         selectedId: 'nuxt:overview',
-        panel: { mode: 'edge', position: 'bottom', open: true, height: 45 },
+        panel: { mode: 'edge', position: 'bottom', height: 45 },
       },
       ctx => [
         h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),

packages/hub-ui/src/client/components/dock/DockEdge.vue

@@ -37,7 +37,7 @@ const selectedEntry = computed(() => context.docks.selected)
 const activeGroup = computed(() => getEntryGroup(context.docks.entries, selectedEntry.value))
 const hasPanelContent = computed(() => {
   const entry = selectedEntry.value
-  return context.panel.store.open
+  return context.panel.session.open
     && !!entry
     && entry.type !== 'action'
 })

packages/hub-ui/src/client/components/dock/DockEmbedded.stories.ts

@@ -69,7 +69,7 @@ export const FloatReducedOverlap: Story = {
 export const Edge: Story = {
   render: () => ({
     setup: () => mountWithContext(
-      { entries: blankEntries, selectedId: 'overview', panel: { mode: 'edge', position: 'bottom', open: true, height: 45 } },
+      { entries: blankEntries, selectedId: 'overview', panel: { mode: 'edge', position: 'bottom', height: 45 } },
       ctx => h(DockEmbedded, { context: ctx }),
     ),
   }),

packages/hub-ui/src/client/components/dock/DockEmbedded.vue

@@ -33,7 +33,7 @@ useEventListener(window, 'mousedown', (e: MouseEvent) => {
     return
   if (isDockPopupOpen.value)
     return
-  if (!props.context.panel.store.open || props.context.panel.isDragging || props.context.panel.isResizing)
+  if (!props.context.panel.session.open || props.context.panel.isDragging || props.context.panel.isResizing)
     return
 
   const matched = e.composedPath().find((_el) => {

packages/hub-ui/src/client/components/views/ViewIframe.vue

@@ -224,19 +224,37 @@ let onIframeLoad: (() => void) | undefined
 
 onMounted(() => {
   const existed = props.panes.has(paneKey.value)
+  // Restore the address-bar route persisted before the last reload: the dock
+  // that was selected then boots deep-linked to where the developer left it,
+  // instead of the entry's default url. `consumeBootRoute` hands the saved URL
+  // back only for that dock, and only once, so a later switch can't reuse it.
+  const bootUrl = props.context.panel.consumeBootRoute?.(props.entry.id) ?? props.entry.url
+  if (!existed && bootUrl !== currentUrl.value) {
+    currentUrl.value = bootUrl
+    editingUrl.value = bootUrl
+  }
   // `src` is only assigned when the pane is first created, so re-mounting an
   // existing iframe (tab switch) preserves its navigation/scroll/JS state. For
   // a shared frame this is also the boot deep-link: the first member (or the
   // anchor) to become visible seeds the src, and every later switch soft-navs.
   const pane = props.panes.ensure(paneKey.value, {
-    src: props.entry.url,
+    src: bootUrl,
     style: { boxShadow: 'none', outline: 'none' },
   })
   const iframe = pane.iframe
 
   if (existed)
     updateCurrentUrl()
 
+  // Persist this dock's live route while it is the selected one, so the next
+  // reload can restore it. Only the selected dock writes, so switching docks
+  // never overwrites another's saved route.
+  const panelSession = props.context.panel.session
+  watchEffect(() => {
+    if (props.context.docks.selectedId === props.entry.id)
+      panelSession.selectedDockRoute = currentUrl.value
+  })
+
   // Listen for iframe load events
   onIframeLoad = () => {
     isIframeLoading.value = false