@luozhu/vscode-utils
Version:
Luozhu's vscode utils.
70 lines (69 loc) • 4.82 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createUmiWebviewPanel = exports.getUmiHTMLContent = void 0;
var vscode_1 = __importDefault(require("vscode"));
var path_1 = __importDefault(require("path"));
/**
* 获取基于 umijs 的 webview 内容
* @param context 扩展上下文
* @param webviewPanel webview 面板对象
* @param options 配置项
* @returns string
*/
var getUmiHTMLContent = function (context, webviewPanel, options) {
var title = options.title || 'umijs';
var rootPath = options.rootPath || 'web';
var style = options.style || '';
// 获取内容的 Uri
var getDiskPath = function (fileName) {
return webviewPanel.webview.asWebviewUri(vscode_1.default.Uri.file(path_1.default.join(context.extensionPath, rootPath, 'dist', fileName)));
};
// eslint-disable-next-line import/no-unresolved
var umiVersion = require('../../../umi/package.json').version;
return "\n <html>\n <head>\n <meta charset=\"utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no\"\n />\n <title>" + title + "</title>\n <link rel=\"stylesheet\" href=\"" + getDiskPath('umi.css') + "\" />\n <style>\n // \u7ED9 webview \u5185\u5BB9\u52A0\u4E0A\u4E3B\u9898\n #root {\n background-color: var(--vscode-editor-background);\n }\n body {\n padding: 0 var(--container-paddding);\n color: var(--vscode-foreground);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n font-family: var(--vscode-font-family);\n background-color: var(--vscode-editor-background);\n }\n body.vscode-light {\n color: black;\n background-color: var(--vscode-editor-background);\n }\n body.vscode-light h1, h2, h3, h4, h5, h6 {\n color: black;\n }\n body.vscode-dark {\n color: white;\n background-color: var(--vscode-editor-background);\n }\n body.vscode-dark h1, h2, h3, h4, h5, h6 {\n color: white;\n }\n body.vscode-high-contrast {\n color: red;\n background-color: var(--vscode-editor-background);\n }\n body.vscode-high-contrast h1, h2, h3, h4, h5, h6 {\n color: red;\n }\n " + style + "\n </style>\n <script>\n //! umi version: " + umiVersion + "\n </script>\n </head>\n <body>\n <div id=\"root\"></div>\n\n <script src=\"" + getDiskPath('umi.js') + "\"></script>\n </body>\n </html>\n ";
};
exports.getUmiHTMLContent = getUmiHTMLContent;
// 追踪当前 webview 面板
var currentPanel;
/**
* 获取基于 umijs 的 webview 内容
* @param context 扩展上下文
* @param viewType webview 面板的唯一标识符
* @param title webview 面板的标题
* @param iconPath webview 面板的 Icon
* @returns vscode.WebviewPanel
*/
var createUmiWebviewPanel = function (context, viewType, title, iconPath) {
var columnToShowIn = vscode_1.default.window.activeTextEditor
? vscode_1.default.window.activeTextEditor.viewColumn
: undefined;
if (currentPanel) {
// 如果我们已经有了一个面板，那就把它显示到目标列布局中
currentPanel.reveal(columnToShowIn);
}
else {
// 否则，创建并显示新的 Webview
currentPanel = vscode_1.default.window.createWebviewPanel(viewType, // 只供内部使用，这个 webview 的标识
title, // 给用户显示的面板标题
vscode_1.default.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
{
// webview 面板的内容配置
enableScripts: true,
localResourceRoots: [vscode_1.default.Uri.file(path_1.default.join(context.extensionPath, 'web/dist'))],
retainContextWhenHidden: true, // 隐藏时保留上下文
});
// 设置 Logo
currentPanel.iconPath = vscode_1.default.Uri.file(path_1.default.join(context.extensionPath, iconPath));
// 设置 HTML 内容
currentPanel.webview.html = (0, exports.getUmiHTMLContent)(context, currentPanel);
}
// 当前面板被关闭后重置
currentPanel.onDidDispose(function () {
currentPanel = undefined;
}, null, context.subscriptions);
return currentPanel;
};
exports.createUmiWebviewPanel = createUmiWebviewPanel;