@easy_vscode/webview 1.6.6

package/.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["babel-plugin-styled-components", { "ssr": false }],
+    "@babel/plugin-syntax-dynamic-import",
+    "react-hot-loader/babel",
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": true
+      }
+    ]
+  ],
+  "sourceType": "unambiguous"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ZhangJian1713
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/assets/open-link.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8085 9.21906C14.8559 9.13191 14.8821 9.03265 14.8845 8.93096V8.93096C14.8824 8.77265 14.8239 8.62164 14.7216 8.51083L10.8897 4.36945C10.6739 4.13741 10.3288 4.14279 10.119 4.38146C9.90916 4.62012 9.91402 5.0017 10.1298 5.23374L13.0716 8.40279H4.53938C4.23962 8.40279 3.99661 8.67151 3.99661 9.00299C3.99661 9.33447 4.23962 9.60319 4.53938 9.60319H12.9848L10.1298 12.7842C9.91702 13.0196 9.91702 13.4012 10.1298 13.6365C10.3427 13.8719 10.6877 13.8719 10.9006 13.6365L14.6239 9.48315C14.7072 9.41667 14.7713 9.32495 14.8085 9.21906L14.8085 9.21906ZM5.08214 16.8056H1.82556C1.5258 16.8056 1.28279 16.5369 1.28279 16.2054V1.8006V1.8006C1.28279 1.46912 1.5258 1.2004 1.82556 1.2004H5.08214C5.3819 1.2004 5.6249 0.93168 5.6249 0.600199C5.6249 0.268719 5.3819 0 5.08214 0H1.82556C0.926277 0 0.197266 0.806156 0.197266 1.8006V16.2054V16.2054C0.197266 17.1998 0.926277 18.006 1.82556 18.006H5.08214C5.3819 18.006 5.6249 17.7373 5.6249 17.4058C5.6249 17.0743 5.3819 16.8056 5.08214 16.8056Z" fill="currentColor" />
+</svg>

package/es/assets/react-logo.svg

@@ -0,0 +1,7 @@
+<svg viewBox="-11.5 -10.23174 23 20.46348" color="white" xmlns="http://www.w3.org/2000/svg">
+  <circle fill="currentColor" r="2.05"/>
+  <g fill="none" stroke="currentColor">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="matrix(.5 .8660254 -.8660254 .5 0 0)"/><ellipse rx="11" ry="4.2" transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"/>
+  </g>
+</svg>

package/es/global.css

@@ -0,0 +1,100 @@
+body {
+  background-color: #fff;
+  font-family: 'Roboto,PingFang SC';
+  font-size: 14px;
+  padding: 0;
+  margin: 0;
+}
+#root {
+  height: 100%;
+}
+
+/* remove drawer horizontal split line */
+.ant-drawer-wrapper-body .ant-drawer-header {
+  border-bottom: none;
+  padding: 16px 24px 8px;
+}
+.ant-drawer-wrapper-body .ant-drawer-footer {
+  border-top: none;
+  padding: 24px;
+}
+.ant-drawer-wrapper-body .ant-drawer-footer span {
+  font-weight: 500;
+}
+.ant-drawer-wrapper-body .ant-form-item-label > label {
+  font-size: 16px;
+}
+
+/* remove table columns split */
+div
+  .ant-table-thead
+  > tr
+  > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+  background: none;
+}
+
+/* change selected menu appearance */
+div .ant-menu-inline .ant-menu-item::after {
+  border-right: none;
+}
+.ant-menu-item {
+  border-left: 3px solid rgba(0, 0, 0, 0);
+}
+.ant-menu-item-selected {
+  border-left: 3px solid #2673dd;
+}
+
+/* sub menu bgcolor */
+.ant-menu-submenu .ant-menu-sub.ant-menu-inline {
+  background: #fff;
+}
+
+div .ant-tag {
+  line-height: 24px;
+}
+
+/* let it be coverd by Modal.confirm,error... */
+div .ant-notification {
+  z-index: 800;
+}
+
+/* change horizontal Form label margin right */
+div .ant-form-horizontal .ant-form-item-label > label {
+  margin-right: 12px;
+}
+
+/* ui modal */
+div .ant-modal-confirm-body .ant-modal-confirm-title {
+  font-size: 20px;
+  font-weight: 500;
+}
+div .ant-modal-confirm .ant-modal-body {
+  padding: 24px;
+}
+div .ant-modal-close-x {
+  width: 64px;
+  height: 64px;
+  line-height: 64px;
+}
+
+div .ant-popover-inner-content {
+  padding: 24px;
+}
+div .ant-popover-title {
+  padding: 16px 24px 4px;
+  border-bottom: none;
+}
+
+div .ant-tooltip {
+  max-width: none;
+}
+
+.ant-modal-header {
+  border-bottom: none;
+}
+.ant-modal-footer {
+  border-top: none;
+}
+.ant-modal-body {
+  padding: 12px 24px;
+}

package/es/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-Security-Policy" content="
+    default-src 'self' https://*;
+    connect-src 'self' https://* wss://* ws:;
+    font-src 'self' https://* blob: data:;
+    frame-src 'self' https://* blob: data:;
+    media-src 'self' https://* blob: data:;
+    img-src 'self' https://* blob: data:;
+    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://* http://*;
+    style-src 'self' 'unsafe-inline' https://* blob: data: http://*;
+    "
+  />
+  <title>vscode-infra-webview</title>
+  <script type="text/javascript"> window.currentView = '$currentView$' </script>
+  <script type="text/javascript"> window.vscodeEnv = $vscodeEnv$ </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { render } from 'react-dom'
+import App from './src/App'
+import i18n, { i18next } from '@easy_vscode/i18n'
+
+export * from './src/helpers/callVscode'
+
+interface IWebviewComponents {
+  [componentName: string]: React.FC
+}
+
+export const registerWebview = function (webviewComponents: IWebviewComponents) {
+  const vscodeEnv = (window as any).vscodeEnv
+  const lng = vscodeEnv.language || 'en'
+  i18next.then(() => {
+    i18n.changeLanguage(lng,()=>{
+      render(<App components={webviewComponents} />, document.getElementById('root'))
+    })
+  })
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@easy_vscode/webview",
+  "version": "1.6.6",
+  "description": "webview of Easy Vscode",
+  "main": "index.tsx",
+  "author": "zhangjian",
+  "license": "MIT",
+  "scripts": {
+    "ui-dev": "webpack serve --config webpack.webview.js --color --progress --mode development",
+    "ui-watch": "webpack --config webpack.webview.js --watch --mode development",
+    "ui-build": "webpack --config webpack.webview.js --color --mode production",
+    "lint-staged": "lint-staged",
+    "check-type": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.7.16",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@easy_vscode/i18n": "^1.2.6",
+    "antd": "^4.22.5",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
+    "babel-plugin-styled-components": "^2.0.7",
+    "clean-webpack-plugin": "^4.0.0",
+    "commander": "^9.4.0",
+    "css-loader": "^6.7.1",
+    "fork-ts-checker-webpack-plugin": "4.1.6",
+    "html-webpack-plugin": "^5.5.0",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "react-hot-loader": "^4.13.0",
+    "style-loader": "^3.3.1",
+    "styled-components": "^5.3.5",
+    "terser-webpack-plugin": "^5.3.4",
+    "vscode": "^1.1.37",
+    "webpack": "^5.45.1",
+    "webpack-cli": "^4.7.2"
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "@types/vscode": "^1.70.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.6.0",
+    "react-dom": ">=16.6.0"
+  },
+  "gitHead": "5455a0d0299d82ea382f18328590fc310b88b58d"
+}

package/src/App.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { ConfigProvider } from 'antd'
+import 'antd/dist/antd.css'
+import './global.css'
+
+const NO_CURRENT_VIEW = '$currentView$'
+
+interface IAppProps{
+  components:Record<string, React.FunctionComponent>
+}
+
+const App: React.FC<IAppProps> = ({components={}}:IAppProps)=> {
+  let currentView = (window as any).currentView
+  if(currentView === NO_CURRENT_VIEW) {
+    currentView = Object.keys(components)[0]
+  }
+ const CurrentComponent = components[currentView]
+  return (
+    <ConfigProvider
+      getPopupContainer={(triggerNode) => {
+        if (triggerNode) return triggerNode
+        return document.body
+      }}
+    >
+      <CurrentComponent />
+    </ConfigProvider>
+      )
+  }
+
+export default App

package/src/assets/open-link.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8085 9.21906C14.8559 9.13191 14.8821 9.03265 14.8845 8.93096V8.93096C14.8824 8.77265 14.8239 8.62164 14.7216 8.51083L10.8897 4.36945C10.6739 4.13741 10.3288 4.14279 10.119 4.38146C9.90916 4.62012 9.91402 5.0017 10.1298 5.23374L13.0716 8.40279H4.53938C4.23962 8.40279 3.99661 8.67151 3.99661 9.00299C3.99661 9.33447 4.23962 9.60319 4.53938 9.60319H12.9848L10.1298 12.7842C9.91702 13.0196 9.91702 13.4012 10.1298 13.6365C10.3427 13.8719 10.6877 13.8719 10.9006 13.6365L14.6239 9.48315C14.7072 9.41667 14.7713 9.32495 14.8085 9.21906L14.8085 9.21906ZM5.08214 16.8056H1.82556C1.5258 16.8056 1.28279 16.5369 1.28279 16.2054V1.8006V1.8006C1.28279 1.46912 1.5258 1.2004 1.82556 1.2004H5.08214C5.3819 1.2004 5.6249 0.93168 5.6249 0.600199C5.6249 0.268719 5.3819 0 5.08214 0H1.82556C0.926277 0 0.197266 0.806156 0.197266 1.8006V16.2054V16.2054C0.197266 17.1998 0.926277 18.006 1.82556 18.006H5.08214C5.3819 18.006 5.6249 17.7373 5.6249 17.4058C5.6249 17.0743 5.3819 16.8056 5.08214 16.8056Z" fill="currentColor" />
+</svg>

package/src/assets/react-logo.svg

@@ -0,0 +1,7 @@
+<svg viewBox="-11.5 -10.23174 23 20.46348" color="white" xmlns="http://www.w3.org/2000/svg">
+  <circle fill="currentColor" r="2.05"/>
+  <g fill="none" stroke="currentColor">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="matrix(.5 .8660254 -.8660254 .5 0 0)"/><ellipse rx="11" ry="4.2" transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"/>
+  </g>
+</svg>

package/src/common-styles/basic.ts

@@ -0,0 +1,71 @@
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { Button } from 'antd'
+
+export const StyledCommonContent = styled.div`
+  background-color: #fff;
+  padding: 24px;
+  // height: 100%;
+  margin-bottom: 16px;
+`
+
+export const StyledSuffix = styled.span`
+  font-size: 14px;
+  color: #999;
+`
+
+export const StyledLinkName = styled(Link)`
+  display: block;
+  line-height: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2673dd;
+  text-decoration: underline;
+  cursor: pointer;
+`
+
+export const StyledEllipsis = styled.div`
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`
+
+export const StyledTitle = styled.div`
+  font-weight: bold;
+  font-size: 26px;
+  line-height: 28px;
+  color: #333;
+  margin-bottom: 24px;
+`
+
+export const StyleTag = styled.span`
+  padding: 4px 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 2px;
+  background: #fafafa;
+  color: #333333;
+  font-size: 14px;
+  margin: 0 4px 4px 0;
+  display: inline-block;
+`
+
+export const StyledLinkButton = styled(Button)`
+  padding-left: 0;
+`
+
+export const StyledSubTitle = styled.div`
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 20px;
+  color: #333;
+  margin-bottom: 32px;
+`
+
+export const StyledBlockTitle = styled.div`
+  font-weight: 500;
+  font-size: 18px;
+  margin-bottom: 24px;
+`

package/src/common-styles/descriptions.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+import { Descriptions as AntdDescriptions } from 'antd'
+
+export const Descriptions = styled(AntdDescriptions)`
+  .ant-descriptions-item-label {
+    color: #999;
+    padding: 0 16px;
+  }
+`

package/src/common-styles/flexWrapper.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+export const StyledEndWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+export const StyledCenterWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const StyledBetweenWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const styledAroundWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+`
+
+export const StyledHorizonCenterWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const StyledFlexWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`

package/src/common-styles/table.ts

@@ -0,0 +1,72 @@
+import styled from 'styled-components'
+import { Table as AntdTable, Input, DatePicker } from 'antd'
+
+const { RangePicker } = DatePicker
+
+export const Table = styled(AntdTable)`
+  .ant-table-container {
+    border: 1px solid #f0f0f0;
+    border-bottom: none;
+  }
+
+  .ant-table-thead {
+    height: 40px;
+  }
+
+  .ant-table-thead > tr > th {
+    padding: 5px 15px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .ant-table-tbody > tr .ant-table-wrapper:only-child .ant-table {
+    margin: 0;
+
+    .ant-table-tbody > tr:last-child > td {
+      border-bottom: 1px solid #f0f0f0;
+    }
+  }
+
+  .ant-table-tbody > tr > td {
+    color: #333;
+    padding: 16px 16px;
+  }
+
+  .ant-table-expanded-row > .ant-table-cell {
+    background: #fff;
+  }
+
+  .ant-table-column-sorters {
+    padding: 16px 0;
+  }
+
+  .ant-table {
+    position: relative;
+    z-index: 1;
+  }
+`
+
+export const IPAddress = styled.div`
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+`
+
+export const IPLabel = styled.span`
+  color: #b7b7b7;
+`
+
+export const StyledInput = styled(Input)`
+  width: 480px;
+`
+
+export const StyledRangePicker = styled(RangePicker)`
+  margin-left: 24px;
+`
+
+export const Header = styled.div`
+  display: flex;
+  margin-bottom: 24px;
+`

package/src/common-styles/tabs.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { Tabs as AntdTabs } from 'antd'
+
+export const Tabs = styled(AntdTabs)`
+  .ant-tabs-nav {
+    margin: 0 0 24px 0;
+    line-height: 18px;
+  }
+  .ant-tabs-tab {
+    padding: 0 19px 16px 19px;
+  }
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0;
+  }
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn span {
+    color: #2673dd;
+  }
+`

package/src/constants/index.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export const DIST_WEBVIEW_PATH = 'distWebview'
+export const DIST_WEBVIEW_INDEX_HTML = `${DIST_WEBVIEW_PATH}/index.html`
+
+export const WEBVIEW_NAMES = {
+  PreviewImages: 'PreviewImages',
+}
+
+export const NATIVE_CMD = {
+  WORKBENCH_ACTION_OPEN_SNIPPETS: 'workbench.action.openSnippets'
+}
+
+export const MESSAGE_CMD = {
+  EXECUTE_SPECIFIC_COMMAND: 'executeSpecificCommand',
+  EXECUTE_CHILD_PROCESS: 'executeChildProcess',
+  LOG_INFO: 'logInfo', // log for debug
+}

package/src/global.css

@@ -0,0 +1,100 @@
+body {
+  background-color: #fff;
+  font-family: 'Roboto,PingFang SC';
+  font-size: 14px;
+  padding: 0;
+  margin: 0;
+}
+#root {
+  height: 100%;
+}
+
+/* remove drawer horizontal split line */
+.ant-drawer-wrapper-body .ant-drawer-header {
+  border-bottom: none;
+  padding: 16px 24px 8px;
+}
+.ant-drawer-wrapper-body .ant-drawer-footer {
+  border-top: none;
+  padding: 24px;
+}
+.ant-drawer-wrapper-body .ant-drawer-footer span {
+  font-weight: 500;
+}
+.ant-drawer-wrapper-body .ant-form-item-label > label {
+  font-size: 16px;
+}
+
+/* remove table columns split */
+div
+  .ant-table-thead
+  > tr
+  > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+  background: none;
+}
+
+/* change selected menu appearance */
+div .ant-menu-inline .ant-menu-item::after {
+  border-right: none;
+}
+.ant-menu-item {
+  border-left: 3px solid rgba(0, 0, 0, 0);
+}
+.ant-menu-item-selected {
+  border-left: 3px solid #2673dd;
+}
+
+/* sub menu bgcolor */
+.ant-menu-submenu .ant-menu-sub.ant-menu-inline {
+  background: #fff;
+}
+
+div .ant-tag {
+  line-height: 24px;
+}
+
+/* let it be coverd by Modal.confirm,error... */
+div .ant-notification {
+  z-index: 800;
+}
+
+/* change horizontal Form label margin right */
+div .ant-form-horizontal .ant-form-item-label > label {
+  margin-right: 12px;
+}
+
+/* ui modal */
+div .ant-modal-confirm-body .ant-modal-confirm-title {
+  font-size: 20px;
+  font-weight: 500;
+}
+div .ant-modal-confirm .ant-modal-body {
+  padding: 24px;
+}
+div .ant-modal-close-x {
+  width: 64px;
+  height: 64px;
+  line-height: 64px;
+}
+
+div .ant-popover-inner-content {
+  padding: 24px;
+}
+div .ant-popover-title {
+  padding: 16px 24px 4px;
+  border-bottom: none;
+}
+
+div .ant-tooltip {
+  max-width: none;
+}
+
+.ant-modal-header {
+  border-bottom: none;
+}
+.ant-modal-footer {
+  border-top: none;
+}
+.ant-modal-body {
+  padding: 12px 24px;
+}

package/src/helpers/callVscode.ts

@@ -0,0 +1,53 @@
+import { IMessage, MessageCallback } from './type'
+
+type IVscode = {
+  postMessage: (message: IMessage) => void
+}
+declare const acquireVsCodeApi: () => IVscode
+
+let vscode: IVscode = {
+  postMessage: () => {}
+}
+try {
+  if(!location.origin.startsWith('http')){
+    vscode = acquireVsCodeApi()
+  }
+} catch (error) {
+  console.error('acquireVsCodeApi not exists:', error)
+}
+
+const callbacks = {}
+
+window.addEventListener('message', (event) => {
+  const message = event.data
+  switch (message.cmd) {
+    case 'vscodeCallback':
+      //   console.log(message.data)
+      const callback = callbacks[message.callbackId]
+      if (callback && typeof callback === 'function') {
+        callback(message.data)
+      }
+      delete callbacks[message.callbackId]
+      break
+    default:
+      break
+  }
+})
+
+export const getRandomId = () => Date.now() + '_' + Math.round(Math.random() * 100000)
+
+/**
+ * post message to vscode extension
+ * @param msg
+ * @param callback
+ */
+export const callVscode = (msg: Partial<IMessage>, callback?: MessageCallback) => {
+  msg.msgId = getRandomId()
+  msg.postTime = new Date().toLocaleString()
+  if (callback) {
+    const callbackId = getRandomId()
+    callbacks[callbackId] = callback
+    msg.callbackId = callbackId
+  }
+  vscode.postMessage(msg as IMessage)
+}

package/src/helpers/fetch.ts

@@ -0,0 +1,98 @@
+import axio from 'axios'
+
+const STATUS_UNAUTH = 401
+const STATUS_NOT_FOUND = 404
+
+const axios = axio.create({
+  baseURL: '',
+  timeout: 15000,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json;charset=utf-8'
+  }
+})
+axios.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+axios.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    if (error.response) {
+      if (error.response.status === STATUS_UNAUTH) {
+        // unauthorizedCb()
+        console.error('please login')
+      } else if (error.response.status === STATUS_NOT_FOUND) {
+        console.error('resource not found')
+      } else if (error.response.status >= 500) {
+        console.error('server error')
+      }
+    } else {
+      console.error('network error')
+    }
+    return Promise.reject(error)
+  }
+)
+
+interface IFetchParam {
+  server?: string
+  version?: string
+  resource?: string
+  payload?: any
+  params?: any
+  contentType?: string
+  method?: 'GET' | 'POST' | 'DELETE' | 'PATCH' | 'PUT'
+  headers?: any
+  credentials?: string
+  timeout?: number
+}
+
+/**
+ * fetch util
+ * @param {*} fetchParam
+ * @returns promise
+ */
+// const request = (url, method, params = {}, config) => {
+const request = (fetchParam: IFetchParam): Promise<any> => {
+  const { resource, method = 'GET', params = {}, payload = {}, headers = {}, ...config } = fetchParam
+  const reqParams: any = {
+    url: resource,
+    method,
+    headers,
+    ...config
+  }
+  reqParams.params = { env: 'test', ...params }
+  if (method.toUpperCase() !== 'GET') {
+    reqParams.data = payload
+  }
+  return new Promise((resolve, reject) => {
+    axios(reqParams)
+      .then((response: any) => {
+        const error = response.data?.error
+        if (error) {
+          reject(error)
+        }
+        resolve(response.data)
+      })
+      .catch((error) => {
+        reject(error.response && error.response.data)
+        console.error('fetch error', error)
+      })
+  })
+}
+
+export default request
+
+export class HTTPError extends Error {
+  code: number
+  details: any
+
+  constructor(message: string, code: number, details: any) {
+    super(message)
+    this.message = message
+    this.code = code
+    this.details = details
+  }
+}

package/src/helpers/type.ts

@@ -0,0 +1,45 @@
+import * as vscode from 'vscode'
+
+export interface ICreatePanelParams {
+  // Identifies the type of the webview panel.
+  viewType: string
+  // Title of the panel.
+  title: string
+  // Where to show the webview in the editor. If preserveFocus is set, the new webview will not take focus.
+  showOptions:
+  | vscode.ViewColumn
+  | {
+    viewColumn: vscode.ViewColumn
+    preserveFocus?: boolean | undefined
+  }
+  // Settings for the new panel.
+  options?: (vscode.WebviewPanelOptions & vscode.WebviewOptions) | undefined
+}
+
+export interface IWebviewProps {
+  // command to active this webview panel
+  command: string
+  // webview static files
+  htmlPath: string
+  // View id to be show, link to inner webview project
+  currentView: string
+  // all need options to create this webview panel
+  panelParams: ICreatePanelParams
+  // panel icon path
+  iconPath?: string
+}
+
+export interface IMessage {
+  msgId: string
+  cmd: string
+  postTime: string
+  callbackId: string
+  data: any
+}
+
+export type MessageCallback = (data: any) => void
+
+export interface IWebview {
+  webviewProps: IWebviewProps
+  messageHandlers: Map<string, (message: IMessage, webview: vscode.Webview) => any>
+}

package/src/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-Security-Policy" content="
+    default-src 'self' https://*;
+    connect-src 'self' https://* wss://* ws:;
+    font-src 'self' https://* blob: data:;
+    frame-src 'self' https://* blob: data:;
+    media-src 'self' https://* blob: data:;
+    img-src 'self' https://* blob: data:;
+    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://* http://*;
+    style-src 'self' 'unsafe-inline' https://* blob: data: http://*;
+    "
+  />
+  <title>vscode-infra-webview</title>
+  <script type="text/javascript"> window.currentView = '$currentView$' </script>
+  <script type="text/javascript"> window.vscodeEnv = $vscodeEnv$ </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "declaration": true,
+    "lib": ["es5", "es2015", "es2016", "es2017", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "outDir": "./dist",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "baseUrl": "src",
+    "rootDirs": ["src"],
+    "jsx": "react",
+    "sourceMap": true,
+    "strictNullChecks": false,
+    "target": "es5",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "importHelpers": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist", "stories"],
+  "include": ["src/**/*", "typings", "index.tsx"]
+}

package/types/custom-typings.d.ts

@@ -0,0 +1,20 @@
+declare module '*.svg' {
+  import React = require('react')
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  const content: string
+  export default content
+}
+
+declare module '*.png' {
+  const content: any
+  export = content
+}
+
+declare module '*.jpg' {
+  const content: any
+  export = content
+}
+declare module '*.json' {
+  const content: any
+  export = content
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+declare let __SERVER_ENV__: string
+declare let __RELEASE__: string

package/webpack.webview.js

@@ -0,0 +1,137 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+const TerserPlugin = require('terser-webpack-plugin')
+const webpack = require('webpack')
+
+const cssUse = [MiniCssExtractPlugin.loader].concat('css-loader')
+const cssUseDebug = ['style-loader', 'css-loader']
+
+console.log('process.cwd():', process.cwd())
+console.log('__dirname:', __dirname)
+
+// const isProductionMode = argv.mode === 'production'
+const isProductionMode = true
+exports.default = {
+  target: 'web',
+  entry: {
+    // app: ['./src/webviewUI/src/index.tsx']
+    app: [path.resolve(__dirname, './src/index.tsx')]
+  },
+  output: {
+    path: path.resolve('./distWebview/'),
+    publicPath: '/'
+  },
+  optimization: {
+    chunkIds: 'named',
+    minimizer: [
+      new TerserPlugin({
+        parallel: true
+      })
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)sx?$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            babelrc: true,
+            configFile: path.resolve(__dirname, './.babelrc')
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: isProductionMode ? cssUse : cssUseDebug
+      },
+      {
+        test: /\.less$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                modifyVars: {
+                  'primary-color': '#2673DD',
+                  'link-color': '#2673DD'
+                },
+                javascriptEnabled: true
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'babel-loader'
+          },
+          {
+            loader: '@svgr/webpack',
+            options: {
+              babel: false,
+              icon: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|woff2|svg?)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000
+            }
+          }
+        ]
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    modules: [path.resolve(__dirname, 'src'), 'node_modules']
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    // !isProductionMode &&
+    new ForkTsCheckerWebpackPlugin({
+      reportFiles: ['src/**/*.{ts,tsx}']
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './src/index.html'),
+      favicon: path.resolve(__dirname, './src/favicon.ico'),
+      inject: true,
+      minify: {
+        html5: true,
+        minifyCSS: false,
+        minifyJS: false,
+        removeComments: false,
+        collapseWhitespace: false,
+        preserveLineBreaks: true
+      }
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new MiniCssExtractPlugin({
+      filename: isProductionMode ? '[name].[hash].css' : '[name].css',
+      chunkFilename: isProductionMode ? '[id].[hash].css' : '[id].css'
+    })
+  ],
+  devServer: {
+    historyApiFallback: {
+      disableDotRule: true
+    },
+    hot: true,
+    compress: true,
+    port: 5000
+  },
+  devtool: isProductionMode ? false : 'source-map'
+}