From 910cf041b5960771e91a62e689f125d6e9ba5097 Mon Sep 17 00:00:00 2001 From: johnsoncodehk Date: Sat, 18 Jun 2022 22:29:02 +0800 Subject: [PATCH 1/3] refactor: remove outdate preview code --- .../src/features/preview.ts | 92 ++----------------- packages/preview/bin/nuxi/plugin.ts | 54 ----------- packages/preview/bin/vite.js | 55 ----------- 3 files changed, 7 insertions(+), 194 deletions(-) diff --git a/extensions/vscode-vue-language-features/src/features/preview.ts b/extensions/vscode-vue-language-features/src/features/preview.ts index 1338b7cc2..67ba6f27f 100644 --- a/extensions/vscode-vue-language-features/src/features/preview.ts +++ b/extensions/vscode-vue-language-features/src/features/preview.ts @@ -86,8 +86,7 @@ export async function register(context: vscode.ExtensionContext) { const port = await openPreview(PreviewType.ComponentPreview, editor.document.fileName, editor.document.getText(), state.mode, panel); if (port !== undefined) { - const previewQuery = createQuery(editor.document); - updatePreviewPanel(panel, state.fileName, previewQuery, port, state.mode); + updatePreviewPanel(panel, state.fileName, port, state.mode); } } } @@ -329,42 +328,14 @@ export async function register(context: vscode.ExtensionContext) { } else if (previewType === PreviewType.ComponentPreview) { - // const disposable_1 = vscode.window.onDidChangeActiveTextEditor(async e => { - // if (e && e.document.languageId === 'vue' && e.document.fileName !== lastPreviewFile) { - // _panel.dispose(); - // vscode.commands.executeCommand('volar.action.preview'); - - // // TODO: not working - // // const newQuery = createQuery(e.document.getText()); - // // const url = `http://localhost:${port}/__preview${newQuery}#${e.document.fileName}`; - // // previewPanel?.webview.postMessage({ sender: 'volar', command: 'updateUrl', data: url }); - - // // lastPreviewFile = e.document.fileName; - // // lastPreviewQuery = newQuery; - // } - // }); - let previewQuery = createQuery({ - getText: () => fileText, - fileName, - version: -1, - } as vscode.TextDocument); - - panelContext.push(vscode.workspace.onDidChangeTextDocument(e => { - if (e.document.fileName === fileName) { - const newPreviewQuery = createQuery(e.document); - if (newPreviewQuery !== previewQuery) { - const url = `http://localhost:${port}/__preview${newPreviewQuery}#${e.document.fileName}`; - panel.webview.postMessage({ sender: 'volar', command: 'updateUrl', data: url }); - - previewQuery = newPreviewQuery; - } - } + panelContext.push(vscode.workspace.onDidSaveTextDocument(e => { + vscode.commands.executeCommand('workbench.action.webview.reloadWebviewAction'); })); panelContext.push(vscode.workspace.onDidChangeConfiguration(() => { - updatePreviewPanel(panel, fileName, previewQuery, port, mode); + updatePreviewPanel(panel, fileName, port, mode); })); - updatePreviewPanel(panel, fileName, previewQuery, port, mode); + updatePreviewPanel(panel, fileName, port, mode); } return port; @@ -475,59 +446,10 @@ export async function register(context: vscode.ExtensionContext) { return configFile; } - function createQuery(document: vscode.TextDocument) { - - const sfc = getSfc(document); - let query = ''; - let fileName = document.fileName; - - for (const customBlock of sfc.descriptor.customBlocks) { - if (customBlock.type === 'preview') { - const previewTagStart = document.getText().substring(0, customBlock.loc.start.offset).lastIndexOf('').ast; - const props: Record = {}; - for (const previewNode of previewGen.children) { - if (previewNode.type === NodeTypes.ELEMENT) { - for (const prop of previewNode.props) { - if (prop.type === NodeTypes.ATTRIBUTE) { - if (prop.value) { - props[prop.name] = JSON.stringify(prop.value.content); - } - else { - props[prop.name] = JSON.stringify(true); - } - } - else if (prop.type === NodeTypes.DIRECTIVE) { - if (prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION && prop.exp?.type == NodeTypes.SIMPLE_EXPRESSION) { - props[prop.arg.content] = prop.exp.content; - } - } - } - } - } - const keys = Object.keys(props); - for (let i = 0; i < keys.length; i++) { - query += i === 0 ? '?' : '&'; - const key = keys[i]; - const value = props[key]; - query += key; - query += '='; - query += encodeURIComponent(value); - } - } - else if (customBlock.type === 'preview-target' && typeof customBlock.attrs.path === 'string') { - fileName = path.resolve(path.dirname(fileName), customBlock.attrs.path); - } - } - - return query; - } - - function updatePreviewPanel(previewPanel: vscode.WebviewPanel, fileName: string, query: string, port: number, mode: 'vite' | 'nuxt') { + function updatePreviewPanel(previewPanel: vscode.WebviewPanel, fileName: string, port: number, mode: 'vite' | 'nuxt') { const bgPath = vscode.Uri.file(path.join(context.extensionPath, 'images', 'preview-bg.png')); const bgSrc = previewPanel.webview.asWebviewUri(bgPath); - const url = `http://localhost:${port}/__preview${query}#${fileName}`; + const url = `http://localhost:${port}/__preview#${fileName}`; previewPanel.title = 'Preview ' + path.basename(fileName); previewPanel.webview.html = getWebviewContent(url, { fileName, mode }, bgSrc.toString()); } diff --git a/packages/preview/bin/nuxi/plugin.ts b/packages/preview/bin/nuxi/plugin.ts index 8257d9486..6010350e5 100644 --- a/packages/preview/bin/nuxi/plugin.ts +++ b/packages/preview/bin/nuxi/plugin.ts @@ -320,58 +320,4 @@ export default app => { } } } - - // function installPreview() { - // if (location.pathname === '/__preview') { - // const preview = defineComponent({ - // setup() { - // window.addEventListener('message', event => { - // if (event.data?.command === 'updateUrl') { - // url.value = new URL(event.data.data); - // _file.value = url.value.hash.slice(1); - // } - // }); - // const url = ref(new URL(location.href)); - // const _file = ref(url.value.hash.slice(1)); - // const file = computed(() => { - // // fix windows path for vite - // let path = _file.value.replace(/\\/g, '/'); - // if (path.indexOf(':') >= 0) { - // path = path.split(':')[1]; - // } - // return path; - // }); - // const target = computed(() => defineAsyncComponent(() => import(file.value))); // TODO: responsive not working - // const props = computed(() => { - // const _props: Record = {}; - // url.value.searchParams.forEach((value, key) => { - // eval('_props[key] = ' + value); - // }); - // return _props; - // }); - // return () => h(Suspense, undefined, [ - // h(target.value, props.value) - // ]); - // }, - // }); - // // TODO: fix preview not working if preview component is root component - // (app._component as any).setup = preview.setup; - - // app.config.warnHandler = (msg) => { - // window.parent.postMessage({ - // command: 'warn', - // data: msg, - // }, '*'); - // console.warn(msg); - // }; - // app.config.errorHandler = (msg) => { - // window.parent.postMessage({ - // command: 'error', - // data: msg, - // }, '*'); - // console.error(msg); - // }; - // // TODO: post emit - // } - // } }; diff --git a/packages/preview/bin/vite.js b/packages/preview/bin/vite.js index 8a687762d..59d42277c 100755 --- a/packages/preview/bin/vite.js +++ b/packages/preview/bin/vite.js @@ -12,7 +12,6 @@ const installCode = ` function __createAppProxy(...args) { const app = createApp(...args); - app.use(installPreview); const ws = new WebSocket('ws://localhost:56789'); const finderApis = installGoToCode(); @@ -316,59 +315,6 @@ function __createAppProxy(...args) { } } } - function installPreview(app) { - if (location.pathname === '/__preview') { - var preview = defineComponent({ - setup: function () { - window.addEventListener('message', function (event) { - var _a; - if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.command) === 'updateUrl') { - url.value = new URL(event.data.data); - _file.value = url.value.hash.slice(1); - } - }); - var url = ref(new URL(location.href)); - var _file = ref(url.value.hash.slice(1)); - var file = computed(function () { - // fix windows path for vite - var path = _file.value.replace(/\\\\\\\\/g, '/'); - if (path.indexOf(':') >= 0) { - path = path.split(':')[1]; - } - return path; - }); - var target = computed(function () { return defineAsyncComponent(function () { return import(file.value); }); }); // TODO: responsive not working - var props = computed(function () { - var _props = {}; - url.value.searchParams.forEach(function (value, key) { - eval('_props[key] = ' + value); - }); - return _props; - }); - return function () { return h(Suspense, undefined, [ - h(target.value, props.value) - ]); }; - }, - }); - // TODO: fix preview not working is preview component is root component - app._component.setup = preview.setup; - app.config.warnHandler = function (msg) { - window.parent.postMessage({ - command: 'warn', - data: msg, - }, '*'); - console.warn(msg); - }; - app.config.errorHandler = function (msg) { - window.parent.postMessage({ - command: 'error', - data: msg, - }, '*'); - console.error(msg); - }; - // TODO: post emit - } - } } `; const replaceCode = `async function doTransform(...args) { @@ -413,7 +359,6 @@ function __proxyExport(rawOptions = {}) { return __originalExport(rawOptions); - function addEvent(node, name, exp) { node.props.push({ type: 7, From 0f20259c6c75a750455c14f2b6e3101df0bf1c16 Mon Sep 17 00:00:00 2001 From: johnsoncodehk Date: Sat, 18 Jun 2022 22:34:38 +0800 Subject: [PATCH 2/3] chore: remove `@vue/compiler-dom` in vscode-vue-language-features --- .../vscode-vue-language-features/package.json | 1 - .../src/features/preview.ts | 1 - pnpm-lock.yaml | 164 +++++++++--------- 3 files changed, 81 insertions(+), 85 deletions(-) diff --git a/extensions/vscode-vue-language-features/package.json b/extensions/vscode-vue-language-features/package.json index d2372bff9..05d2656a6 100644 --- a/extensions/vscode-vue-language-features/package.json +++ b/extensions/vscode-vue-language-features/package.json @@ -794,7 +794,6 @@ "@volar/preview": "0.37.9", "@volar/shared": "0.37.9", "@volar/vue-language-server": "0.37.9", - "@vue/compiler-dom": "^3.2.37", "@vue/compiler-sfc": "^3.2.37", "@vue/reactivity": "^3.2.37", "esbuild": "latest", diff --git a/extensions/vscode-vue-language-features/src/features/preview.ts b/extensions/vscode-vue-language-features/src/features/preview.ts index 67ba6f27f..b21165320 100644 --- a/extensions/vscode-vue-language-features/src/features/preview.ts +++ b/extensions/vscode-vue-language-features/src/features/preview.ts @@ -1,5 +1,4 @@ import * as vscode from 'vscode'; -import { compile, NodeTypes } from '@vue/compiler-dom'; import * as path from 'path'; import * as fs from '../utils/fs'; import * as shared from '@volar/shared'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db4f9f547..23b97b190 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: '@lerna-lite/cli': 1.5.1 '@types/node': 18.0.0 '@vscode/test-web': 0.0.24 - typescript: 4.7.3 + typescript: 4.7.4 vite: 2.9.12 vitest: 0.15.1 @@ -33,7 +33,7 @@ importers: '@types/vscode': 1.67.0 '@volar/alpine-language-server': link:../../packages/alpine-language-server '@volar/shared': link:../../packages/shared - esbuild: 0.14.44 + esbuild: 0.14.45 path-browserify: 1.0.1 punycode: 2.1.1 vsce: 2.9.1 @@ -49,7 +49,7 @@ importers: dependencies: '@volar/typescript-plugin-forward': file:extensions/vscode-typescript-vue-plugin/typescript-plugin-forward devDependencies: - esbuild: 0.14.44 + esbuild: 0.14.45 typescript-vue-plugin: link:../../packages/typescript-vue-plugin vsce: 2.9.1 @@ -59,7 +59,6 @@ importers: '@volar/preview': 0.37.9 '@volar/shared': 0.37.9 '@volar/vue-language-server': 0.37.9 - '@vue/compiler-dom': ^3.2.37 '@vue/compiler-sfc': ^3.2.37 '@vue/reactivity': ^3.2.37 esbuild: latest @@ -74,11 +73,10 @@ importers: '@volar/preview': link:../../packages/preview '@volar/shared': link:../../packages/shared '@volar/vue-language-server': link:../../packages/vue-language-server - '@vue/compiler-dom': 3.2.37 '@vue/compiler-sfc': 3.2.37 '@vue/reactivity': 3.2.37 - esbuild: 0.14.44 - esbuild-plugin-copy: 1.3.0_esbuild@0.14.44 + esbuild: 0.14.45 + esbuild-plugin-copy: 1.3.0_esbuild@0.14.45 path-browserify: 1.0.1 punycode: 2.1.1 vsce: 2.9.1 @@ -110,7 +108,7 @@ importers: '@volar/vue-language-service-types': link:../vue-language-service-types devDependencies: '@types/semver': 7.3.9 - typescript: 4.7.3 + typescript: 4.7.4 packages/alpine-typescript: specifiers: @@ -119,7 +117,7 @@ importers: dependencies: '@volar/vue-typescript': link:../vue-typescript devDependencies: - typescript: 4.7.3 + typescript: 4.7.4 packages/code-gen: specifiers: @@ -172,7 +170,7 @@ importers: vscode-languageserver-textdocument: 1.0.5 vscode-uri: 3.0.3 devDependencies: - typescript: 4.7.3 + typescript: 4.7.4 packages/source-map: specifiers: {} @@ -194,7 +192,7 @@ importers: semver: 7.3.7 devDependencies: '@types/semver': 7.3.9 - typescript: 4.7.3 + typescript: 4.7.4 packages/typescript-language-service: specifiers: @@ -215,7 +213,7 @@ importers: vscode-nls: 5.0.1 devDependencies: '@types/semver': 7.3.9 - typescript: 4.7.3 + typescript: 4.7.4 packages/typescript-vue-plugin: specifiers: @@ -226,7 +224,7 @@ importers: '@volar/typescript-faster': link:../typescript-faster '@volar/vue-typescript': link:../vue-typescript devDependencies: - typescript: 4.7.3 + typescript: 4.7.4 packages/vue-code-gen: specifiers: @@ -243,7 +241,7 @@ importers: '@vue/compiler-dom': 3.2.37 '@vue/shared': 3.2.37 devDependencies: - typescript: 4.7.3 + typescript: 4.7.4 packages/vue-language-server: specifiers: @@ -322,7 +320,7 @@ importers: vscode-languageserver-textdocument: 1.0.5 devDependencies: '@types/semver': 7.3.9 - typescript: 4.7.3 + typescript: 4.7.4 packages/vue-language-service-types: specifiers: @@ -361,7 +359,7 @@ importers: '@vue/reactivity': 3.2.37 devDependencies: '@volar/pug-language-service': link:../pug-language-service - typescript: 4.7.3 + typescript: 4.7.4 packages: @@ -2022,8 +2020,8 @@ packages: is-arrayish: 0.2.1 dev: true - /esbuild-android-64/0.14.44: - resolution: {integrity: sha512-dFPHBXmx385zuJULAD/Cmq/LyPRXiAWbf9ylZtY0wJ8iVyWfKYaCYxeJx8OAZUuj46ZwNa7MzW2GBAQLOeiemg==} + /esbuild-android-64/0.14.45: + resolution: {integrity: sha512-krVmwL2uXQN1A+Ci4u2MR+Y0IAvQK0u3no5TsgguHVhTy138szjuohScCGjkpvLCpGLk7P4kFP1LKuntvJ0d4A==} engines: {node: '>=12'} cpu: [x64] os: [android] @@ -2031,8 +2029,8 @@ packages: dev: true optional: true - /esbuild-android-arm64/0.14.44: - resolution: {integrity: sha512-qqaqqyxHXjZ/0ddKU3I3Nb7lAvVM69ELMhb8+91FyomAUmQPlHtxe+TTiWxXGHE72XEzcgTEGq4VauqLNkN22g==} + /esbuild-android-arm64/0.14.45: + resolution: {integrity: sha512-62POGdzAjM+XOXEM5MmFW6k9Pjdjg1hTrXKKBbPE700LFF36B+1Jv9QkskT5UadbTk4cdH9BQ7bGiRPYY0p/Dw==} engines: {node: '>=12'} cpu: [arm64] os: [android] @@ -2040,8 +2038,8 @@ packages: dev: true optional: true - /esbuild-darwin-64/0.14.44: - resolution: {integrity: sha512-RBmtGKGY06+AW6IOJ1LE/dEeF7HH34C1/Ces9FSitU4bIbIpL4KEuQpTFoxwb4ry5s2hyw7vbPhhtyOd18FH9g==} + /esbuild-darwin-64/0.14.45: + resolution: {integrity: sha512-dbkVUAnGx5IeZesWnIhnvxy7dSvgUQvfy0TVLzd9XVP3oI/VsKs8UNsfPrxI5HiN4SINv7oPAbxWceMpB7IqNA==} engines: {node: '>=12'} cpu: [x64] os: [darwin] @@ -2049,8 +2047,8 @@ packages: dev: true optional: true - /esbuild-darwin-arm64/0.14.44: - resolution: {integrity: sha512-Bmhx5Cfo4Hdb7WyyyDupTB8HPmnFZ8baLfPlzLdYvF6OzsIbV+CY+m/AWf0OQvY40BlkzCLJ/7Lfwbb71Tngmg==} + /esbuild-darwin-arm64/0.14.45: + resolution: {integrity: sha512-O6Bz7nnOae5rvbh2Ueo8ibSr7+/eLjsbPdgeMsAZri+LkOa7nsVPnhmocpO3Hy/LWfagTtHy1O9HRPIaArPmTg==} engines: {node: '>=12'} cpu: [arm64] os: [darwin] @@ -2058,8 +2056,8 @@ packages: dev: true optional: true - /esbuild-freebsd-64/0.14.44: - resolution: {integrity: sha512-O4HpWa5ZgxbNPQTF7URicLzYa+TidGlmGT/RAC3GjbGEQQYkd0R1Slyh69Yrmb2qmcOcPAgWHbNo1UhK4WmZ4w==} + /esbuild-freebsd-64/0.14.45: + resolution: {integrity: sha512-y1X2nr3XSWnDC7MRcy21EVAT0TiCtdefOntJ+SQcZnPBTURzX77f99S8lDF2KswukChkiacpd2Wd4VZieo7w7Q==} engines: {node: '>=12'} cpu: [x64] os: [freebsd] @@ -2067,8 +2065,8 @@ packages: dev: true optional: true - /esbuild-freebsd-arm64/0.14.44: - resolution: {integrity: sha512-f0/jkAKccnDY7mg1F9l/AMzEm+VXWXK6c3IrOEmd13jyKfpTZKTIlt+yI04THPDCDZTzXHTRUBLozqp+m8Mg5Q==} + /esbuild-freebsd-arm64/0.14.45: + resolution: {integrity: sha512-r3ZNejkx1BKXQ6sYOP6C5rTwgiUajyAh03wygLWZtl+SLyygvAnu+OouqtveesufjBDgujp4wZXP/n8PVqXkqg==} engines: {node: '>=12'} cpu: [arm64] os: [freebsd] @@ -2076,8 +2074,8 @@ packages: dev: true optional: true - /esbuild-linux-32/0.14.44: - resolution: {integrity: sha512-WSIhzLldMR7YUoEL7Ix319tC+NFmW9Pu7NgFWxUfOXeWsT0Wg484hm6bNgs7+oY2pGzg715y/Wrqi1uNOMmZJw==} + /esbuild-linux-32/0.14.45: + resolution: {integrity: sha512-Qk9cCO3PJig/Y+SdslN/Th4pbAjgaH9oUjVH28eMsLTPf6QDUuK6EED91jepJdR3vxhcnVjyl6JqtOWmP+uxCg==} engines: {node: '>=12'} cpu: [ia32] os: [linux] @@ -2085,8 +2083,8 @@ packages: dev: true optional: true - /esbuild-linux-64/0.14.44: - resolution: {integrity: sha512-zgscTrCMcRZRIsVugqBTP/B5lPLNchBlWjQ8sQq2Epnv+UDtYKgXEq1ctWAmibZNy2E9QRCItKMeIEqeTUT5kA==} + /esbuild-linux-64/0.14.45: + resolution: {integrity: sha512-IybO2ugqvc/Zzn1Kih3x0FVjYAy3GTCwhtcp91dbdqk3wPqxYCzObYspa8ca0s+OovI0Cnb+rhXrUtq8gBqlqw==} engines: {node: '>=12'} cpu: [x64] os: [linux] @@ -2094,8 +2092,8 @@ packages: dev: true optional: true - /esbuild-linux-arm/0.14.44: - resolution: {integrity: sha512-laPBPwGfsbBxGw6F6jnqic2CPXLyC1bPrmnSOeJ9oEnx1rcKkizd4HWCRUc0xv+l4z/USRfx/sEfYlWSLeqoJQ==} + /esbuild-linux-arm/0.14.45: + resolution: {integrity: sha512-qKWJ4A4TAcxXV2TBLPw3Av5X2SYNfyNnBHNJTQJ5VuevK6Aq5i6XEMvUgdlcVuZ9MYPfS5aJZWglzDzJMf1Lpw==} engines: {node: '>=12'} cpu: [arm] os: [linux] @@ -2103,8 +2101,8 @@ packages: dev: true optional: true - /esbuild-linux-arm64/0.14.44: - resolution: {integrity: sha512-H0H/2/wgiScTwBve/JR8/o+Zhabx5KPk8T2mkYZFKQGl1hpUgC+AOmRyqy/Js3p66Wim4F4Akv3I3sJA1sKg0w==} + /esbuild-linux-arm64/0.14.45: + resolution: {integrity: sha512-UNEyuHTwztrkEU/+mWIxGzKrYBo2cEtjYAZQVZB1kliANKgRITktg2miaO/b/VtNe84ob1aXSvW8XOPEn5RTGQ==} engines: {node: '>=12'} cpu: [arm64] os: [linux] @@ -2112,8 +2110,8 @@ packages: dev: true optional: true - /esbuild-linux-mips64le/0.14.44: - resolution: {integrity: sha512-ri3Okw0aleYy7o5n9zlIq+FCtq3tcMlctN6X1H1ucILjBJuH8pan2trJPKWeb8ppntFvE28I9eEXhwkWh6wYKg==} + /esbuild-linux-mips64le/0.14.45: + resolution: {integrity: sha512-s/jcfw3Vpku5dIVSFVY7idJsGdIpIJ88IrkyprVgCG2yBeXatb67B7yIt0E1tL+OHrJJdNBw6GikCiMPAAu1VA==} engines: {node: '>=12'} cpu: [mips64el] os: [linux] @@ -2121,8 +2119,8 @@ packages: dev: true optional: true - /esbuild-linux-ppc64le/0.14.44: - resolution: {integrity: sha512-96TqL/MvFRuIVXz+GtCIXzRQ43ZwEk4XTn0RWUNJduXXMDQ/V1iOV28U6x6Oe3NesK4xkoKSaK2+F3VHcU8ZrA==} + /esbuild-linux-ppc64le/0.14.45: + resolution: {integrity: sha512-lJItl6ESZnhSx951U9R7MTBopgwIELHlQzC6SBR023V5JC1rPRFDZ/UEBsV+7BFcCAfqlyb+odGEAmcBSf4XCA==} engines: {node: '>=12'} cpu: [ppc64] os: [linux] @@ -2130,8 +2128,8 @@ packages: dev: true optional: true - /esbuild-linux-riscv64/0.14.44: - resolution: {integrity: sha512-rrK9qEp2M8dhilsPn4T9gxUsAumkITc1kqYbpyNMr9EWo+J5ZBj04n3GYldULrcCw4ZCHAJ+qPjqr8b6kG2inA==} + /esbuild-linux-riscv64/0.14.45: + resolution: {integrity: sha512-8anMu+QLl9MununVCGJN2I/JvUWPm1EVsBBLq/J+Nz4hr8t6QOCuEp0HRaeMohyl2XiMFBchVu0mwa05rF7GFQ==} engines: {node: '>=12'} cpu: [riscv64] os: [linux] @@ -2139,8 +2137,8 @@ packages: dev: true optional: true - /esbuild-linux-s390x/0.14.44: - resolution: {integrity: sha512-2YmTm9BrW5aUwBSe8wIEARd9EcnOQmkHp4+IVaO09Ez/C5T866x+ABzhG0bwx0b+QRo9q97CRMaQx2Ngb6/hfw==} + /esbuild-linux-s390x/0.14.45: + resolution: {integrity: sha512-1TPeNvNCoahMw745KNTA6POKaFfSqQrBb3fdOL82GXZqyKU/6rHNwGP0NgHe88bAUMp3QZfjGfCGKxfBHL77RQ==} engines: {node: '>=12'} cpu: [s390x] os: [linux] @@ -2148,8 +2146,8 @@ packages: dev: true optional: true - /esbuild-netbsd-64/0.14.44: - resolution: {integrity: sha512-zypdzPmZTCqYS30WHxbcvtC0E6e/ECvl4WueUdbdWhs2dfWJt5RtCBME664EpTznixR3lSN1MQ2NhwQF8MQryw==} + /esbuild-netbsd-64/0.14.45: + resolution: {integrity: sha512-55f2eZ8EQhhOZosqX0mApgRoI9PrVyXlHd9Uivk+B0B4WTKUgzkoHaVk4EkIUtNRQTpDWPciTlpb/C2tUYVejA==} engines: {node: '>=12'} cpu: [x64] os: [netbsd] @@ -2157,8 +2155,8 @@ packages: dev: true optional: true - /esbuild-openbsd-64/0.14.44: - resolution: {integrity: sha512-8J43ab9ByYl7KteC03HGQjr2HY1ge7sN04lFnwMFWYk2NCn8IuaeeThvLeNjzOYhyT3I6K8puJP0uVXUu+D1xw==} + /esbuild-openbsd-64/0.14.45: + resolution: {integrity: sha512-Z5sNcT3oN9eryMW3mGn5HAgg7XCxiUS4isqH1tZXpsdOdOESbgbTEP0mBEJU0WU7Vt2gIN5XMbAp7Oigm0k71g==} engines: {node: '>=12'} cpu: [x64] os: [openbsd] @@ -2166,19 +2164,19 @@ packages: dev: true optional: true - /esbuild-plugin-copy/1.3.0_esbuild@0.14.44: + /esbuild-plugin-copy/1.3.0_esbuild@0.14.45: resolution: {integrity: sha512-LOx1xJOlAaCFMRtokHjsJfEkrosy3RDRa8SUHmn7loo0gwrouBQQwLAmOyMECshf7gSR1cPSRtAHu3KF/kQsyw==} peerDependencies: esbuild: ^0.14.0 dependencies: chalk: 4.1.2 - esbuild: 0.14.44 + esbuild: 0.14.45 fs-extra: 10.1.0 globby: 11.1.0 dev: true - /esbuild-sunos-64/0.14.44: - resolution: {integrity: sha512-OH1/09CGUJwffA+HNM6mqPkSIyHVC3ZnURU/4CCIx7IqWUBn1Sh1HRLQC8/TWNgcs0/1u7ygnc2pgf/AHZJ/Ow==} + /esbuild-sunos-64/0.14.45: + resolution: {integrity: sha512-WmWu4wAm8mIxxK9aWFCj5VHunY3BHQDT3dAPexMLLszPyMF7RDtUYf+Dash9tjyitvnoxPAvR7DpWpirDLQIlQ==} engines: {node: '>=12'} cpu: [x64] os: [sunos] @@ -2186,8 +2184,8 @@ packages: dev: true optional: true - /esbuild-windows-32/0.14.44: - resolution: {integrity: sha512-mCAOL9/rRqwfOfxTu2sjq/eAIs7eAXGiU6sPBnowggI7QS953Iq6o3/uDu010LwfN7zr18c/lEj6/PTwwTB3AA==} + /esbuild-windows-32/0.14.45: + resolution: {integrity: sha512-DPPehKwPJFBoSG+jILc/vcJNN8pTwz1m6FWojxqtqPhgw8OabTgN4vL7gNMqL/FSeDxF+zyvZeeMrZFYF1d81Q==} engines: {node: '>=12'} cpu: [ia32] os: [win32] @@ -2195,8 +2193,8 @@ packages: dev: true optional: true - /esbuild-windows-64/0.14.44: - resolution: {integrity: sha512-AG6BH3+YG0s2Q/IfB1cm68FdyFnoE1P+GFbmgFO3tA4UIP8+BKsmKGGZ5I3+ZjcnzOwvT74bQRVrfnQow2KO5Q==} + /esbuild-windows-64/0.14.45: + resolution: {integrity: sha512-t6bxFZcp9bLmSs+1pCNL/BW2bq3QEQHxU4HoiMEyWfF8QBU8iNXFI1iLGdyCzB1Ue2739h55tpOvojFrfyNPWA==} engines: {node: '>=12'} cpu: [x64] os: [win32] @@ -2204,8 +2202,8 @@ packages: dev: true optional: true - /esbuild-windows-arm64/0.14.44: - resolution: {integrity: sha512-ygYPfYE5By4Sd6szsNr10B0RtWVNOSGmZABSaj4YQBLqh9b9i45VAjVWa8tyIy+UAbKF7WGwybi2wTbSVliO8A==} + /esbuild-windows-arm64/0.14.45: + resolution: {integrity: sha512-DnhrvjECBJ2L0owoznPb4RqQKZ498SM8J+YHqmqzi0Gf/enkUwwTjB8vPCK6dDuFnNU/NE8f94FhKdkBHYruDQ==} engines: {node: '>=12'} cpu: [arm64] os: [win32] @@ -2213,32 +2211,32 @@ packages: dev: true optional: true - /esbuild/0.14.44: - resolution: {integrity: sha512-Rn+lRRfj60r/3svI6NgAVnetzp3vMOj17BThuhshSj/gS1LR03xrjkDYyfPmrYG/0c3D68rC6FNYMQ3yRbiXeQ==} + /esbuild/0.14.45: + resolution: {integrity: sha512-JOxGUD8jcs8xE8DjyGWC8by/vLMCXTJ/wuauWipL5kJRZx1dhpqIntb31QHjA45GZJWaXv7SjC/Zwu1bCkXWtQ==} engines: {node: '>=12'} hasBin: true requiresBuild: true optionalDependencies: - esbuild-android-64: 0.14.44 - esbuild-android-arm64: 0.14.44 - esbuild-darwin-64: 0.14.44 - esbuild-darwin-arm64: 0.14.44 - esbuild-freebsd-64: 0.14.44 - esbuild-freebsd-arm64: 0.14.44 - esbuild-linux-32: 0.14.44 - esbuild-linux-64: 0.14.44 - esbuild-linux-arm: 0.14.44 - esbuild-linux-arm64: 0.14.44 - esbuild-linux-mips64le: 0.14.44 - esbuild-linux-ppc64le: 0.14.44 - esbuild-linux-riscv64: 0.14.44 - esbuild-linux-s390x: 0.14.44 - esbuild-netbsd-64: 0.14.44 - esbuild-openbsd-64: 0.14.44 - esbuild-sunos-64: 0.14.44 - esbuild-windows-32: 0.14.44 - esbuild-windows-64: 0.14.44 - esbuild-windows-arm64: 0.14.44 + esbuild-android-64: 0.14.45 + esbuild-android-arm64: 0.14.45 + esbuild-darwin-64: 0.14.45 + esbuild-darwin-arm64: 0.14.45 + esbuild-freebsd-64: 0.14.45 + esbuild-freebsd-arm64: 0.14.45 + esbuild-linux-32: 0.14.45 + esbuild-linux-64: 0.14.45 + esbuild-linux-arm: 0.14.45 + esbuild-linux-arm64: 0.14.45 + esbuild-linux-mips64le: 0.14.45 + esbuild-linux-ppc64le: 0.14.45 + esbuild-linux-riscv64: 0.14.45 + esbuild-linux-s390x: 0.14.45 + esbuild-netbsd-64: 0.14.45 + esbuild-openbsd-64: 0.14.45 + esbuild-sunos-64: 0.14.45 + esbuild-windows-32: 0.14.45 + esbuild-windows-64: 0.14.45 + esbuild-windows-arm64: 0.14.45 dev: true /escalade/3.1.1: @@ -5038,8 +5036,8 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true - /typescript/4.7.3: - resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==} + /typescript/4.7.4: + resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==} engines: {node: '>=4.2.0'} hasBin: true dev: true @@ -5147,7 +5145,7 @@ packages: stylus: optional: true dependencies: - esbuild: 0.14.44 + esbuild: 0.14.45 postcss: 8.4.14 resolve: 1.22.0 rollup: 2.75.6 From fd118474b430138061afe87b308178f041c658e7 Mon Sep 17 00:00:00 2001 From: johnsoncodehk Date: Sun, 19 Jun 2022 01:11:42 +0800 Subject: [PATCH 3/3] feat: support component preview view --- .../vscode-vue-language-features/package.json | 14 +++- .../src/features/preview.ts | 68 +++++++++++++++++-- 2 files changed, 75 insertions(+), 7 deletions(-) diff --git a/extensions/vscode-vue-language-features/package.json b/extensions/vscode-vue-language-features/package.json index 05d2656a6..2cf957197 100644 --- a/extensions/vscode-vue-language-features/package.json +++ b/extensions/vscode-vue-language-features/package.json @@ -55,6 +55,16 @@ "editor.quickSuggestions": true } }, + "views": { + "explorer": [ + { + "id": "vueComponentPreview", + "name": "Vue Component Preview", + "type": "webview", + "when": "volar.foundViteDir" + } + ] + }, "jsonValidation": [ { "fileMatch": "tsconfig.json", @@ -407,12 +417,12 @@ }, "volar.preview.backgroundColor": { "type": "string", - "default": "#fff", + "default": "transparent", "description": "Component preview background color." }, "volar.preview.transparentGrid": { "type": "boolean", - "default": true, + "default": false, "description": "Component preview background style." }, "volar.splitEditors.layout.left": { diff --git a/extensions/vscode-vue-language-features/src/features/preview.ts b/extensions/vscode-vue-language-features/src/features/preview.ts index b21165320..f8652ffa2 100644 --- a/extensions/vscode-vue-language-features/src/features/preview.ts +++ b/extensions/vscode-vue-language-features/src/features/preview.ts @@ -57,6 +57,59 @@ export async function register(context: vscode.ExtensionContext) { const sfcs = new WeakMap(); + class VueComponentPreview implements vscode.WebviewViewProvider { + + public resolveWebviewView( + webviewView: vscode.WebviewView, + _context: vscode.WebviewViewResolveContext, + _token: vscode.CancellationToken, + ) { + webviewView.webview.options = { + enableScripts: true, + }; + updateWebView(); + + vscode.window.onDidChangeActiveTextEditor(updateWebView); + vscode.workspace.onDidChangeConfiguration(updateWebView); + vscode.workspace.onDidSaveTextDocument(updateWebView); + + async function updateWebView() { + + if (!webviewView.visible) + return; + + if (vscode.window.activeTextEditor?.document.languageId !== 'vue') + return; + + const fileName = vscode.window.activeTextEditor.document.fileName; + let terminal = vscode.window.terminals.find(terminal => terminal.name.startsWith('volar-preview:')); + let port: number; + + if (terminal) { + port = Number(terminal.name.split(':')[1]); + } + else { + + const configFile = await getConfigFile(fileName, 'vite'); + if (!configFile) + return; + + const configDir = path.dirname(configFile); + const server = await startPreviewServer(configDir, 'vite'); + terminal = server.terminal; + port = server.port; + } + + const bgPath = vscode.Uri.file(path.join(context.extensionPath, 'images', 'preview-bg.png')); + const bgSrc = webviewView.webview.asWebviewUri(bgPath); + const url = `http://localhost:${port}/__preview#${fileName}`; + + webviewView.webview.html = ''; + webviewView.webview.html = getWebviewContent(url, undefined, bgSrc.toString()); + } + } + } + class FinderPanelSerializer implements vscode.WebviewPanelSerializer { async deserializeWebviewPanel(panel: vscode.WebviewPanel, state: PreviewState) { @@ -65,7 +118,7 @@ export async function register(context: vscode.ExtensionContext) { return; // don't create server because maybe user closed it intentionally } - const port = await openPreview(PreviewType.Webview, state.fileName, '', state.mode, panel); + const port = await openPreview(PreviewType.Webview, state.fileName, state.mode, panel); panel.webview.html = getWebviewContent(`http://localhost:${port}`, state); } @@ -82,7 +135,7 @@ export async function register(context: vscode.ExtensionContext) { return; // don't create server because maybe user closed it intentionally } - const port = await openPreview(PreviewType.ComponentPreview, editor.document.fileName, editor.document.getText(), state.mode, panel); + const port = await openPreview(PreviewType.ComponentPreview, editor.document.fileName, state.mode, panel); if (port !== undefined) { updatePreviewPanel(panel, state.fileName, port, state.mode); @@ -90,6 +143,11 @@ export async function register(context: vscode.ExtensionContext) { } } + vscode.window.registerWebviewViewProvider( + 'vueComponentPreview', + new VueComponentPreview(), + ); + context.subscriptions.push(vscode.commands.registerCommand('volar.action.vite', async () => { const editor = vscode.window.activeTextEditor; @@ -116,7 +174,7 @@ export async function register(context: vscode.ExtensionContext) { if (select === undefined) return; // cancel - openPreview(select as PreviewType, editor.document.fileName, editor.document.getText(), 'vite'); + openPreview(select as PreviewType, editor.document.fileName, 'vite'); })); context.subscriptions.push(vscode.commands.registerCommand('volar.action.nuxt', async () => { @@ -139,7 +197,7 @@ export async function register(context: vscode.ExtensionContext) { if (select === undefined) return; // cancel - openPreview(select as PreviewType, editor.document.fileName, editor.document.getText(), 'nuxt'); + openPreview(select as PreviewType, editor.document.fileName, 'nuxt'); })); context.subscriptions.push(vscode.commands.registerCommand('volar.action.selectElement', () => { const panel = [...panels].find(panel => panel.active); @@ -258,7 +316,7 @@ export async function register(context: vscode.ExtensionContext) { } } - async function openPreview(previewType: PreviewType, fileName: string, fileText: string, mode: 'vite' | 'nuxt', _panel?: vscode.WebviewPanel) { + async function openPreview(previewType: PreviewType, fileName: string, mode: 'vite' | 'nuxt', _panel?: vscode.WebviewPanel) { const configFile = await getConfigFile(fileName, mode); if (!configFile)