Merge pull request #40 from REST-API-Client/refactor/webViewCodeInjection

unwls · web-flow · commit 020367f1e59f · 2022-07-29T07:23:24.000+09:00
[2022/07/29] - Inject VSCode API directly into Webview
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/SidebarWebViewPanel.js b/src/SidebarWebViewPanel.js
@@ -153,6 +153,13 @@ class SidebarWebViewPanel {
         </head>
         <body>
           <div id="root"></div>
+          <script nonce="${nonce}">
+          let vscode;
+
+          if (typeof acquireVsCodeApi !== "undefined") {
+            vscode = acquireVsCodeApi();
+          }
+          </script>
           <script nonce="${nonce}" src="${scriptSrc}"></script>
         </body>
       </html>`;
diff --git a/webview/features/Request/CodeSnippet/RequestCodeSnippet.js b/webview/features/Request/CodeSnippet/RequestCodeSnippet.js
@@ -11,7 +11,6 @@ import { COMMON, HEIGHT, OPTION } from "../../../constants";
 import CodeEditor from "../../../shared/CodeEditor";
 import useStore from "../../../store/useStore";
 import { generateSdkRequestObject } from "../../../utils";
-import vscode from "../../../vscode";
 
 const RequestCodeSnippet = () => {
   const {
diff --git a/webview/features/Request/Panel/RequestPanel.js b/webview/features/Request/Panel/RequestPanel.js
@@ -4,7 +4,6 @@ import shallow from "zustand/shallow";
 
 import { COMMON } from "../../../constants";
 import useStore from "../../../store/useStore";
-import vscode from "../../../vscode";
 import RequestButton from "../Button/RequestButton";
 import RequestDetailOption from "../Menu/RequestMenu";
 import RequestMethod from "../Method/RequestMethod";
diff --git a/webview/features/Response/Body/ResponseBodyMenu.js b/webview/features/Response/Body/ResponseBodyMenu.js
@@ -6,7 +6,6 @@ import CopyIcon from "../../../components/CopyIcon";
 import SelectWrapper from "../../../components/SelectWrapper";
 import { COMMON, OPTION, RESPONSE } from "../../../constants";
 import useStore from "../../../store/useStore";
-import vscode from "../../../vscode";
 import ResponseBodyViewOption from "./ResponseBodyMenuOption";
 
 const RequestBodyMenu = () => {
diff --git a/webview/features/Sidebar/Guide/SidebarGuideMenu.js b/webview/features/Sidebar/Guide/SidebarGuideMenu.js
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 import { SIDEBAR } from "../../../constants";
-import vscode from "../../../vscode";
 
 const SidebarGuideMenu = () => {
   const handleButtonClick = () => {
diff --git a/webview/features/Sidebar/Menu/SidebarMenuOption.js b/webview/features/Sidebar/Menu/SidebarMenuOption.js
@@ -3,7 +3,6 @@ import shallow from "zustand/shallow";
 
 import { REQUEST, SIDEBAR } from "../../../constants";
 import useStore from "../../../store/useStore";
-import vscode from "../../../vscode";
 import SidebarCollection from "../Collection/SidebarCollection";
 
 const SidebarMenuOption = () => {
diff --git a/webview/shared/KeyValueTable.js b/webview/shared/KeyValueTable.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { memo } from "react";
 import { CgAddR } from "react-icons/cg";
 import { FaTrashAlt } from "react-icons/fa";
 import styled from "styled-components";
@@ -190,4 +190,4 @@ KeyValueTable.propTypes = {
   handleRequestDescription: PropTypes.func,
 };
 
-export default KeyValueTable;
+export default memo(KeyValueTable);
diff --git a/webview/vscode.js b/webview/vscode.js
