{"_id":"@appworks/webview-helper","_rev":"4-0f01a00a1c7f496b04f93c9a61925c43","name":"@appworks/webview-helper","dist-tags":{"beta":"0.0.0-beta.2","latest":"0.1.0"},"versions":{"0.0.0-beta.0":{"name":"@appworks/webview-helper","version":"0.0.0-beta.0","description":"封装 VS Code Webview 相关方法和相互通信的 API","type":"module","main":"es2017/index.js","module":"es2017/index.js","types":"es2017/index.d.ts","exports":{"./webview":{"types":"./es2017/webview/index.d.ts","default":"./es2017/webview/index.js"},"./vscode":{"types":"./es2017/vscode/index.d.ts","default":"./es2017/vscode/index.js"},"./*":"./*"},"sideEffects":false,"scripts":{"start":"ice-pkg start","build":"ice-pkg build"},"dependencies":{"@swc/helpers":"^0.5.1"},"devDependencies":{"@ice/pkg":"^1.0.0","@types/vscode":"^1.78.0","@types/vscode-webview":"^1.57.1"},"publishConfig":{"access":"public"},"gitHead":"5a99e699de31f51a7dc794c62ca7df6b57c645ff","_id":"@appworks/webview-helper@0.0.0-beta.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-/eHSabCWS0cEPixM1S2Vnu3G8gZH6ILrPyv5CNaqccz0zILR8x1yTiHo8HbR2w+xd/FQNfPqVOMErHTZoLKAGg==","shasum":"7d054d3111e25b398671337434c8c6c5296aad30","tarball":"https://registry.npmjs.org/@appworks/webview-helper/-/webview-helper-0.0.0-beta.0.tgz","fileCount":14,"unpackedSize":22426,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCIVP9fpln6RaDCGeTznmP3Id2exk8UaalL8k03x9ArAIgY2UltQ5YTOyRp5cfPDtP4OumNYF2SR+i4ZV5agKQVzg="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-helper_0.0.0-beta.0_1690894499276_0.5830439175215358"},"_hasShrinkwrap":false},"0.0.0-beta.1":{"name":"@appworks/webview-helper","version":"0.0.0-beta.1","description":"封装 VS Code Webview 相关方法和相互通信的 API","type":"module","main":"es2017/index.js","module":"es2017/index.js","types":"es2017/index.d.ts","exports":{"./webview":{"types":"./es2017/webview/index.d.ts","default":"./es2017/webview/index.js"},"./vscode":{"types":"./es2017/vscode/index.d.ts","default":"./es2017/vscode/index.js"},"./*":"./*"},"sideEffects":false,"scripts":{"start":"ice-pkg start","build":"ice-pkg build"},"dependencies":{"@swc/helpers":"^0.5.1"},"devDependencies":{"@ice/pkg":"^1.0.0","@types/vscode":"^1.78.0","@types/vscode-webview":"^1.57.1"},"publishConfig":{"access":"public"},"readme":"# @appworks/webview-helper\n\n封装 VS Code Webview 相关方法和相互通信的 API。\n\n## Install\n\n```bash\n$ npm i @appworks/webview-helper --save\n```\n\n## Usage\n\n注册一个 Webview 面板：\n\n```js\n// src/extension.ts\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate(context) {\n  const helloWorldPanel = new WebviewPanel(\n    {\n      viewType: 'Hello World',\n      title: 'Hello World',\n    },\n    {\n      scripts: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'js', 'main.js'),\n      ],\n      styles: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'css', 'main.css'),\n      ],\n    },\n  );\n  const showHelloWorldCommand = vscode.commands.registerCommand('hello-world.showHelloWorld', () => {\n    helloWorldPanel.render();\n  });\n}\n```\n\n为 Webview 上下文中传递的消息注册一个消息监听器，并根据在 VS code 上下文中接收到的消息执行代码。\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.addMessageListener('hello', (text) => vscode.window.showInformationMessage(text));\n  helloWorldPanel.addMessageListener('getValue', () => {\n    return 'I am value';\n  })\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  React.useEffect(() => {\n    vscode.executeCommand('getValue').then(value => {\n      console.log(value);\n    });\n  }, []);\n\n  return (\n    <h1\n      onClick={() => { vscode.postMessage({ command: 'hello', args: ['Hello World'] }); }}\n    >\n      Home\n    </h1>\n  )\n}\n```\n\n在 Webview 注册一个监听器，监听从 VS Code 接受到的信息：\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.postMessage('hello', ['Hello World'])\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  vscode.addMessageListener('hello', (text) => {\n    console.log(text);\n  });\n}\n```\n","readmeFilename":"README.md","gitHead":"152e509b807153a8e1d196553775f44989d5046c","_id":"@appworks/webview-helper@0.0.0-beta.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-qlX63mX5Nyoe05o07x5O/Q7VZHnK9Gk61XkZwDj4fIteiy7liyOwXUqWOqq65qggxNZtBEPqPcGC/u+KXpwVVg==","shasum":"37018e6192a5e67e04111f15a37d88703e901331","tarball":"https://registry.npmjs.org/@appworks/webview-helper/-/webview-helper-0.0.0-beta.1.tgz","fileCount":19,"unpackedSize":44563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHy65RJp8gbjMLCyfMSo2PytFKcKtOUrTdbD9nbUtFwcAiA9+Z7tAxVby4qgoddkSNeT84NHMcSmBfDw005/qVubWA=="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-helper_0.0.0-beta.1_1691661677921_0.5800158702649927"},"_hasShrinkwrap":false},"0.0.0-beta.2":{"name":"@appworks/webview-helper","version":"0.0.0-beta.2","description":"封装 VS Code Webview 相关方法和相互通信的 API","type":"module","main":"es2017/index.js","module":"es2017/index.js","types":"es2017/index.d.ts","exports":{"./webview":{"types":"./es2017/webview/index.d.ts","default":"./es2017/webview/index.js"},"./vscode":{"types":"./es2017/vscode/index.d.ts","default":"./es2017/vscode/index.js"},"./*":"./*"},"sideEffects":false,"scripts":{"start":"ice-pkg start","build":"ice-pkg build"},"dependencies":{"@swc/helpers":"^0.5.1"},"devDependencies":{"@ice/pkg":"^1.0.0","@types/vscode":"^1.78.0","@types/vscode-webview":"^1.57.1"},"publishConfig":{"access":"public"},"readme":"# @appworks/webview-helper\n\n封装 VS Code Webview 相关方法和相互通信的 API。\n\n## Install\n\n```bash\n$ npm i @appworks/webview-helper --save\n```\n\n## Usage\n\n注册一个 Webview 面板：\n\n```js\n// src/extension.ts\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate(context) {\n  const helloWorldPanel = new WebviewPanel(\n    {\n      viewType: 'Hello World',\n      title: 'Hello World',\n    },\n    {\n      scripts: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'js', 'main.js'),\n      ],\n      styles: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'css', 'main.css'),\n      ],\n    },\n  );\n  const showHelloWorldCommand = vscode.commands.registerCommand('hello-world.showHelloWorld', () => {\n    helloWorldPanel.render();\n  });\n}\n```\n\n为 Webview 上下文中传递的消息注册一个消息监听器，并根据在 VS code 上下文中接收到的消息执行代码。\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.addMessageListener('hello', (text) => vscode.window.showInformationMessage(text));\n  helloWorldPanel.addMessageListener('getValue', () => {\n    return 'I am value';\n  })\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  React.useEffect(() => {\n    vscode.executeCommand('getValue').then(value => {\n      console.log(value);\n    });\n  }, []);\n\n  return (\n    <h1\n      onClick={() => { vscode.postMessage({ command: 'hello', args: ['Hello World'] }); }}\n    >\n      Home\n    </h1>\n  )\n}\n```\n\n在 Webview 注册一个监听器，监听从 VS Code 接受到的信息：\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.postMessage('hello', ['Hello World'])\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  vscode.addMessageListener('hello', (text) => {\n    console.log(text);\n  });\n}\n```\n","readmeFilename":"README.md","gitHead":"152e509b807153a8e1d196553775f44989d5046c","_id":"@appworks/webview-helper@0.0.0-beta.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-V7y6ItelnXL8c/EXc3b22GaiEDyaoobwv/2ef/SHf+Th0noXb/Ek57TN2x6eV9bGHHIZCR2Eje/eNvDQY1eJFA==","shasum":"93ef2bf07a1ae2c1b018bec2984ea27d591a6d29","tarball":"https://registry.npmjs.org/@appworks/webview-helper/-/webview-helper-0.0.0-beta.2.tgz","fileCount":21,"unpackedSize":44641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe1Wl/avrXAT4wUyE2ccraMnLAl4y0WagwpeITER6C/QIgCLVwV+2YYhUd/60Vtcw9q2h8N0w00CsgfNSISfuPpSc="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-helper_0.0.0-beta.2_1691673283082_0.8289189858472039"},"_hasShrinkwrap":false},"0.0.0":{"name":"@appworks/webview-helper","version":"0.0.0","description":"封装 VS Code Webview 相关方法和相互通信的 API","type":"module","main":"es2017/index.js","module":"es2017/index.js","types":"es2017/index.d.ts","exports":{"./webview":{"types":"./es2017/webview/index.d.ts","default":"./es2017/webview/index.js"},"./vscode":{"types":"./es2017/vscode/index.d.ts","default":"./es2017/vscode/index.js"},"./*":"./*"},"sideEffects":false,"scripts":{"start":"ice-pkg start","build":"ice-pkg build"},"dependencies":{"@swc/helpers":"^0.5.1"},"devDependencies":{"@ice/pkg":"^1.0.0","@types/vscode":"^1.78.0","@types/vscode-webview":"^1.57.1"},"publishConfig":{"access":"public"},"gitHead":"1c83dcc797c58782c9d5ef6e109fe0cc625b278d","_id":"@appworks/webview-helper@0.0.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XDwm1o6CtIM4JJxuzgHb+7I1JlqesuxyYKM5wegjWEX9fKDEzL6Z8isTklP84BuYOQCwYr91pNVfzIgAmoAftg==","shasum":"d467b007cea34a0c4fbe794afd4c38f2db56b145","tarball":"https://registry.npmjs.org/@appworks/webview-helper/-/webview-helper-0.0.0.tgz","fileCount":14,"unpackedSize":22754,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAv2tHY1D413uwy9W/tKPHiXupV4ogTTnsmV8zczRHWCAiEA21LPqnJ2vkeqSAjBl3uTdNhRvT9AihDrvndV7aahj/c="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-helper_0.0.0_1692776440932_0.3853477891512205"},"_hasShrinkwrap":false},"0.1.0":{"name":"@appworks/webview-helper","version":"0.1.0","description":"封装 VS Code Webview 相关方法和相互通信的 API","type":"module","main":"es2017/index.js","module":"es2017/index.js","types":"es2017/index.d.ts","exports":{"./webview":{"types":"./es2017/webview/index.d.ts","default":"./es2017/webview/index.js"},"./vscode":{"types":"./es2017/vscode/index.d.ts","default":"./es2017/vscode/index.js"},"./*":"./*"},"sideEffects":false,"scripts":{"start":"ice-pkg start","build":"ice-pkg build"},"dependencies":{"@swc/helpers":"^0.5.1"},"devDependencies":{"@ice/pkg":"^1.0.0","@types/vscode":"^1.78.0","@types/vscode-webview":"^1.57.1"},"publishConfig":{"access":"public"},"gitHead":"a90c226ae87b31a5eaedbb105318e5718e7c0e33","_id":"@appworks/webview-helper@0.1.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XqC2PT9A+KSHNN1CbEoaaFuj/ErYGG4T89Q3vJJgvqgD9RyK+qIi9gPKfkwGaVnTMIQW8IbrXqoKFCXy/Ym/Ag==","shasum":"38d78460c21c6dce188cf71ac2feeee455ca151f","tarball":"https://registry.npmjs.org/@appworks/webview-helper/-/webview-helper-0.1.0.tgz","fileCount":16,"unpackedSize":22832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMdtXifN49ZVfZ44WhmzVruxFvubp4ipFVKSZ9Lgd3CQIgVr7pKoWMKYFfoBpApVkjMoYdItD6xNxn7P4135OjAP0="}]},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-helper_0.1.0_1692790952125_0.00137345378411724"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-01T12:54:59.209Z","0.0.0-beta.0":"2023-08-01T12:54:59.447Z","modified":"2023-08-23T11:42:32.576Z","0.0.0-beta.1":"2023-08-10T10:01:18.111Z","0.0.0-beta.2":"2023-08-10T13:14:43.272Z","0.0.0":"2023-08-23T07:40:41.134Z","0.1.0":"2023-08-23T11:42:32.298Z"},"maintainers":[{"name":"sobear","email":"sobear.me@gmail.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},{"name":"alvinhui","email":"alvin.hui@qq.com"},{"name":"luhengchang228","email":"luhengchang228@126.com"},{"name":"fyangstudio","email":"18767120422@163.com"}],"description":"封装 VS Code Webview 相关方法和相互通信的 API","readme":"# @appworks/webview-helper\n\n封装 VS Code Webview 相关方法和相互通信的 API。\n\n## Install\n\n```bash\n$ npm i @appworks/webview-helper --save\n```\n\n## Usage\n\n注册一个 Webview 面板：\n\n```js\n// src/extension.ts\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate(context) {\n  const helloWorldPanel = new WebviewPanel(\n    {\n      viewType: 'Hello World',\n      title: 'Hello World',\n    },\n    {\n      scripts: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'js', 'main.js'),\n      ],\n      styles: [\n        vscode.Uri.joinPath(context.extensionUri, 'webview', 'build', 'css', 'main.css'),\n      ],\n    },\n  );\n  const showHelloWorldCommand = vscode.commands.registerCommand('hello-world.showHelloWorld', () => {\n    helloWorldPanel.render();\n  });\n}\n```\n\n为 Webview 上下文中传递的消息注册一个消息监听器，并根据在 VS code 上下文中接收到的消息执行代码。\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.addMessageListener('hello', (text) => vscode.window.showInformationMessage(text));\n  helloWorldPanel.addMessageListener('getValue', () => {\n    return 'I am value';\n  })\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  React.useEffect(() => {\n    vscode.executeCommand('getValue').then(value => {\n      console.log(value);\n    });\n  }, []);\n\n  return (\n    <h1\n      onClick={() => { vscode.postMessage({ command: 'hello', args: ['Hello World'] }); }}\n    >\n      Home\n    </h1>\n  )\n}\n```\n\n在 Webview 注册一个监听器，监听从 VS Code 接受到的信息：\n\n```js\n// src/extension.ts\nimport * as vscode from 'vscode';\nimport { WebviewPanel } from '@appworks/webview-helper/webview';\n\nexport function activate() {\n  const helloWorldPanel = new WebviewPanel({}, {});\n  helloWorldPanel.postMessage('hello', ['Hello World'])\n}\n```\n\n```jsx\n// webview/pages/index.tsx\nimport * as React from 'react';\nimport { vscode } from '@appworks/webview-helper/vscode';\n\nexport default function Home() {\n  vscode.addMessageListener('hello', (text) => {\n    console.log(text);\n  });\n}\n```\n","readmeFilename":"README.md"}