0.0.3 • Published 11 months ago
@vscode-use/registerwebview v0.0.3
@vscode-use/registerwebview
WIP: 这个库是为了快速在 vscode 插件中使用 webview 打开侧边栏,让使用上更加简单
Usage
import { RegisterWebview } from '@vscode-use/registerwebview'
// function activate
const provider = new RegisterWebview(
context.extensionUri,
`<div>hello,world</div>`, // html
['main.css'], // css,本地css需要配置在media目录下
[], // js,本地js需要配置在media目录下
(data) => { // callback
}
)
vscode.window.registerWebviewViewProvider('calicoColors.colorsView', provider)
/** 绑定自定义icon
"viewsContainers": {
"activitybar": [
{
"id": "todoList",
"title": "Daily Planner",
"icon": "icon.png"
}
]
},
"views": {
"todoList": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
},
*/
Feature
之前脚本使用字符串的方式插入体验不好,现在暴露了 deferScriptUri 的方式传入 media 下的.ts 或者.js 路径,就可以写 js 了,传惨需要提前通过 setProps 的方式,然后 js 中可以通过 webviewThis 获取到参数, webviewThis 会在最终 render 被替换成 setProps 的参数
const vscode = acquireVsCodeApi()
const { name, age } = webviewThis
const App = {
data() {
return {
name,
age,
}
},
}
new Vue(App).$mount('#app')
Api
- provider.postMessage 推送消息给 js 层
- provider.deferScript 在 js 加载的最后去加载这部分的 script
Menu Settings
// package.json
"contributes": {
"views": {
"explorer": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
},
"commands": [
{
"command": "calicoColors.clearColors",
"category": "Calico Colors",
"title": "Clear Colors"
}
],
"menus": {
"view/title": [ // 顶部右上角的按钮
{
"command": "calicoColors.clearColors",
"group": "navigation",
"when": "view == calicoColors.colorsView"
}
]
}
},