From 4317b475b9cd17efa0278a9228cf25b04a63dbe8 Mon Sep 17 00:00:00 2001 From: Arlo Date: Tue, 16 Apr 2024 22:50:14 +0800 Subject: [PATCH] fix(vite): apply vite server base url (#335) --- docs/guide/vite-plugin.md | 2 ++ .../client/src/composables/open-in-editor.ts | 6 ++---- .../src/core/open-in-editor/index.ts | 7 ++++++- packages/devtools-kit/src/index.ts | 2 ++ packages/vite/package.json | 2 +- packages/vite/src/modules/get-config.ts | 3 --- packages/vite/src/overlay.js | 13 +++++++++---- packages/vite/src/vite.ts | 16 ++++++++-------- pnpm-lock.yaml | 8 ++++---- 9 files changed, 34 insertions(+), 25 deletions(-) diff --git a/docs/guide/vite-plugin.md b/docs/guide/vite-plugin.md index de6b9705..087b9792 100644 --- a/docs/guide/vite-plugin.md +++ b/docs/guide/vite-plugin.md @@ -59,6 +59,7 @@ interface VitePluginVueDevToolsOptions { /** * Customize openInEditor host (e.g. http://localhost:3000) * @default false + * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ openInEditorHost?: string | false @@ -66,6 +67,7 @@ interface VitePluginVueDevToolsOptions { * DevTools client host (e.g. http://localhost:3000) * useful for projects that use a reverse proxy * @default false + * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ clientHost?: string | false } diff --git a/packages/client/src/composables/open-in-editor.ts b/packages/client/src/composables/open-in-editor.ts index 720a2e11..4d922515 100644 --- a/packages/client/src/composables/open-in-editor.ts +++ b/packages/client/src/composables/open-in-editor.ts @@ -1,9 +1,7 @@ -import { openInEditor as _openInEditor, callViteServerAction } from '@vue/devtools-core' +import { openInEditor as _openInEditor } from '@vue/devtools-core' -const getOpenInEditorHost = callViteServerAction('get-open-in-editor-host') export const vueInspectorDetected = ref(false) export const openInEditor = async (file: string) => { - const openInEditorHost = await getOpenInEditorHost() - return openInEditorHost ? _openInEditor(file, openInEditorHost) : _openInEditor(file) + return _openInEditor(file) } diff --git a/packages/devtools-kit/src/core/open-in-editor/index.ts b/packages/devtools-kit/src/core/open-in-editor/index.ts index 8b0c74a1..9920a4c6 100644 --- a/packages/devtools-kit/src/core/open-in-editor/index.ts +++ b/packages/devtools-kit/src/core/open-in-editor/index.ts @@ -8,11 +8,16 @@ export interface OpenInEditorOptions { column?: number } +export function setOpenInEditorBaseUrl(url: string) { + target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url +} + export function openInEditor(options: OpenInEditorOptions = {}) { const { file, baseUrl = window.location.origin, line = 0, column = 0 } = options if (file) { if (devtoolsState.vitePluginDetected) { - target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column) + const _baseUrl = target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ ?? baseUrl + target.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column) } else { // @TODO: support other diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts index 0af10d18..0b83c0af 100644 --- a/packages/devtools-kit/src/index.ts +++ b/packages/devtools-kit/src/index.ts @@ -6,6 +6,7 @@ import { addCustomTab } from './core/custom-tab' import { addCustomCommand, removeCustomCommand } from './core/custom-command' import { toggleComponentInspectorEnabled } from './core/component-inspector' import { toggleHighPerfMode } from './core/high-perf-mode' +import { setOpenInEditorBaseUrl } from './core/open-in-editor' export type * from './core/custom-tab' export type * from './core/custom-command' @@ -50,4 +51,5 @@ export { setDevToolsEnv, toggleComponentInspectorEnabled, toggleHighPerfMode, + setOpenInEditorBaseUrl, } diff --git a/packages/vite/package.json b/packages/vite/package.json index f8d2b609..460bd00a 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -56,7 +56,7 @@ "execa": "^8.0.1", "sirv": "^2.0.4", "vite-plugin-inspect": "^0.8.3", - "vite-plugin-vue-inspector": "^4.0.2" + "vite-plugin-vue-inspector": "^5.0.0" }, "devDependencies": { "@types/node": "^20.12.5", diff --git a/packages/vite/src/modules/get-config.ts b/packages/vite/src/modules/get-config.ts index 3e0a84c1..386b81de 100644 --- a/packages/vite/src/modules/get-config.ts +++ b/packages/vite/src/modules/get-config.ts @@ -5,7 +5,4 @@ export function getViteConfig(config: ResolvedConfig, pluginOptions) { defineViteServerAction('get-vite-root', () => { return config.root }) - defineViteServerAction('get-open-in-editor-host', () => { - return pluginOptions.openInEditorHost - }) } diff --git a/packages/vite/src/overlay.js b/packages/vite/src/overlay.js index feecefa5..e95857ad 100644 --- a/packages/vite/src/overlay.js +++ b/packages/vite/src/overlay.js @@ -1,8 +1,12 @@ import vueDevToolsOptions from 'virtual:vue-devtools-options' import { initAppSeparateWindow, setDevToolsClientUrl } from '@vue/devtools-core' -import { addCustomTab, devtools, setDevToolsEnv, toggleComponentInspectorEnabled } from '@vue/devtools-kit' +import { addCustomTab, devtools, setDevToolsEnv, setOpenInEditorBaseUrl, toggleComponentInspectorEnabled } from '@vue/devtools-kit' -const overlayDir = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay` +function normalizeUrl(url) { + return new URL(`${vueDevToolsOptions.base || '/'}${url}`, import.meta.url).toString() +} + +const overlayDir = normalizeUrl(`@id/virtual:vue-devtools-path:overlay`) const body = document.getElementsByTagName('body')[0] const head = document.getElementsByTagName('head')[0] @@ -10,8 +14,9 @@ setDevToolsEnv({ vitePluginDetected: true, }) -const devtoolsClientUrl = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}__devtools__/` +const devtoolsClientUrl = normalizeUrl(`__devtools__/`) setDevToolsClientUrl(devtoolsClientUrl) +setOpenInEditorBaseUrl(normalizeUrl('').slice(0, -1)) toggleComponentInspectorEnabled(!!vueDevToolsOptions.componentInspector) @@ -24,7 +29,7 @@ addCustomTab({ icon: 'i-carbon-ibm-watson-discovery', view: { type: 'iframe', - src: `${window.location.origin}${vueDevToolsOptions.base || '/'}__inspect`, + src: normalizeUrl(`__inspect/`), }, category: 'advanced', }) diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index 140706d8..830ff722 100644 --- a/packages/vite/src/vite.ts +++ b/packages/vite/src/vite.ts @@ -44,6 +44,7 @@ export interface VitePluginVueDevToolsOptions { /** * Customize openInEditor host (e.g. http://localhost:3000) * @default false + * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ openInEditorHost?: string | false @@ -51,6 +52,7 @@ export interface VitePluginVueDevToolsOptions { * DevTools client host (e.g. http://localhost:3000) * useful for projects that use a reverse proxy * @default false + * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ clientHost?: string | false @@ -62,14 +64,12 @@ export interface VitePluginVueDevToolsOptions { componentInspector?: boolean | VitePluginInspectorOptions } -const defaultOptions: DeepRequired = { +const defaultOptions: VitePluginVueDevToolsOptions = { appendTo: '', - openInEditorHost: false, - clientHost: false, componentInspector: true, } -function mergeOptions(options: VitePluginVueDevToolsOptions): DeepRequired { +function mergeOptions(options: VitePluginVueDevToolsOptions): VitePluginVueDevToolsOptions { return Object.assign({}, defaultOptions, options) } @@ -137,12 +137,12 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt }, async load(id) { if (id === 'virtual:vue-devtools-options') - return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}` + return `export default ${JSON.stringify({ base: config.base, componentInspector: pluginOptions.componentInspector })}` }, transform(code, id) { - const { root, base } = config + const { root } = config - const projectPath = `${root}${base}` + const projectPath = `${root}` if (!id.startsWith(projectPath)) return @@ -150,6 +150,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt const { appendTo } = pluginOptions const [filename] = id.split('?', 2) + if (appendTo && ( (typeof appendTo === 'string' && filename.endsWith(appendTo)) @@ -197,7 +198,6 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt ...typeof pluginOptions.componentInspector === 'boolean' ? {} : pluginOptions.componentInspector, - openInEditorHost: pluginOptions.openInEditorHost, appendTo: pluginOptions.appendTo || 'manually', }) as PluginOption, plugin, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 59510cf6..abc0e833 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -795,8 +795,8 @@ importers: specifier: ^0.8.3 version: 0.8.3(rollup@3.28.1)(vite@5.2.8) vite-plugin-vue-inspector: - specifier: ^4.0.2 - version: 4.0.2(vite@5.2.8) + specifier: ^5.0.0 + version: 5.0.0(vite@5.2.8) devDependencies: '@types/node': specifier: ^20.12.5 @@ -14766,8 +14766,8 @@ packages: - rollup - supports-color - /vite-plugin-vue-inspector@4.0.2(vite@5.2.8): - resolution: {integrity: sha512-KPvLEuafPG13T7JJuQbSm5PwSxKFnVS965+MP1we2xGw9BPkkc/+LPix5MMWenpKWqtjr0ws8THrR+KuoDC8hg==} + /vite-plugin-vue-inspector@5.0.0(vite@5.2.8): + resolution: {integrity: sha512-InVRnJr8DwP8a32gp7vmz4WX6615DdMl9gdBEHfDC6tONZrgG1RkJ/wBx2UZlEfIMhJ5qT1WMOY42jOkVPi/RA==} peerDependencies: vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 dependencies: