[
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"env\": {\n    \"browser\": true,\n    \"es2021\": true,\n    \"node\": true\n  },\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:react/recommended\",\n    \"plugin:@typescript-eslint/recommended\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"parser\": \"@typescript-eslint/parser\",\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"ecmaVersion\": 12,\n    \"sourceType\": \"module\"\n  },\n  \"settings\": {\n    \"react\": {\n      \"version\": \"detect\"\n    }\n  },\n  \"ignorePatterns\": [\"out\", \"dist\", \"**/*.d.ts\"],\n  \"plugins\": [\"react\", \"@typescript-eslint\"],\n  \"rules\": {\n    \"@typescript-eslint/explicit-module-boundary-types\": \"off\"\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "out\ndist\nnode_modules\n.vscode-test/\n*.vsix\n"
  },
  {
    "path": ".husky/pre-push",
    "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint\n"
  },
  {
    "path": ".prettierignore",
    "content": "out\ndist\n"
  },
  {
    "path": ".vscode/launch.json",
    "content": "// A launch configuration that compiles the extension and then opens it inside a new window\n// Use IntelliSense to learn about possible attributes.\n// Hover to view descriptions of existing attributes.\n// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Run Extension\",\n      \"type\": \"extensionHost\",\n      \"request\": \"launch\",\n      \"args\": [\"--extensionDevelopmentPath=${workspaceFolder}\"],\n      \"outFiles\": [\"${workspaceFolder}/dist/**/*.js\"],\n      \"preLaunchTask\": \"${defaultBuildTask}\"\n    },\n    {\n      \"name\": \"Extension Tests\",\n      \"type\": \"extensionHost\",\n      \"request\": \"launch\",\n      \"args\": [\n        \"--extensionDevelopmentPath=${workspaceFolder}\",\n        \"--extensionTestsPath=${workspaceFolder}/out/test/suite/index\"\n      ],\n      \"outFiles\": [\"${workspaceFolder}/out/test/**/*.js\"],\n      \"preLaunchTask\": \"npm: test-watch\"\n    }\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "// Place your settings in this file to overwrite default and user settings.\n{\n  \"files.exclude\": {\n    \"out\": false, // set this to true to hide the \"out\" folder with the compiled JS files\n    \"dist\": false // set this to true to hide the \"dist\" folder with the compiled JS files\n  },\n  \"search.exclude\": {\n    \"out\": true, // set this to false to include \"out\" folder in search results\n    \"dist\": true // set this to false to include \"dist\" folder in search results\n  },\n  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts\n  \"typescript.tsc.autoDetect\": \"off\"\n}\n"
  },
  {
    "path": ".vscode/tasks.json",
    "content": "// See https://go.microsoft.com/fwlink/?LinkId=733558\n// for the documentation about the tasks.json format\n{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"type\": \"npm\",\n      \"script\": \"watch\",\n      \"problemMatcher\": [\"$ts-webpack-watch\", \"$tslint-webpack-watch\"],\n      \"isBackground\": true,\n      \"presentation\": {\n        \"reveal\": \"never\"\n      },\n      \"group\": {\n        \"kind\": \"build\",\n        \"isDefault\": true\n      }\n    },\n    {\n      \"type\": \"npm\",\n      \"script\": \"test-watch\",\n      \"problemMatcher\": \"$tsc-watch\",\n      \"isBackground\": true,\n      \"presentation\": {\n        \"reveal\": \"never\"\n      },\n      \"group\": \"build\"\n    }\n  ]\n}\n"
  },
  {
    "path": ".vscodeignore",
    "content": ".vscode/**\n.vscode-test/**\nout/**\nnode_modules/**\nsrc/**\n.gitignore\n.yarnrc\nvsc-extension-quickstart.md\n**/tsconfig.json\n**/.eslintrc.json\n**/*.map\n**/*.ts\ndist/prerender.js\ndist/*.prerender.js\ndist/*.prerender.js.*\n"
  },
  {
    "path": ".yarnrc",
    "content": "--ignore-engines true"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to the \"postcode\" extension will be documented in this file.\n\nCheck [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.\n\n### 1.3.9\n\n- automattically use http protocol if none is specified\n- make font size relative to vscode editor font size\n\n### 1.3.8\n\n- display response time in response window\n\n### 1.3.7\n\n- add request options for strict ssl \n\n### 1.3.6\n\n- add beautify button for post body\n\n### 1.3.5\n\n- fix basic auth functionality\n\n### 1.3.4\n\n- Add headers tab for response\n\n### 1.3.3\n\n- Improve load time by pre-rendering\n\n### 1.3.2\n\n- Remove excess scroll\n\n### 1.3.1\n\n- Add copy button to code editor\n\n### 1.3.0\n\n- Support code-snippet generation\n\n### 1.2.1\n\n- Clear error when response is updated\n\n### 1.2.0\n\n- Support GraphQL requests\n\n### 1.1.0\n\n- Support formating of responses based on language\n\n### 1.0.0\n\n- Initial release\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Rohini Senthil\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<h1 align=\"center\">Postcode</h1>\n<div align=\"center\">\n  <strong> API client for VS code 📦</strong>  \n  <br/> <br/>\n  <a href=\"https://marketplace.visualstudio.com/items?itemName=rohinivsenthil.postcode&ssr=false#overview\"><img src=\"https://img.shields.io/visual-studio-marketplace/i/rohinivsenthil.postcode\" /></a>\n<!--   <img src=\"https://img.shields.io/visual-studio-marketplace/d/rohinivsenthil.postcode\" /> -->\n  <a href=\"https://marketplace.visualstudio.com/items?itemName=rohinivsenthil.postcode&ssr=false#version-history\"><img src=\"https://img.shields.io/visual-studio-marketplace/v/rohinivsenthil.postcode\" /></a>\n  <a href=\"https://marketplace.visualstudio.com/items?itemName=rohinivsenthil.postcode&ssr=false#review-details\"><img src=\"https://img.shields.io/visual-studio-marketplace/r/rohinivsenthil.postcode\" /></a>\n</div>\n<br />\n\nPostcode is a [Visual Studio Code](https://code.visualstudio.com/) [extension](https://marketplace.visualstudio.com/VSCode) that can be used to create and test simple and complex HTTP/s requests, as well as view responses. You can find the extension available [here](https://marketplace.visualstudio.com/items?itemName=rohinivsenthil.postcode).\n\n\n<div align=\"center\">\n  <img src=\"https://user-images.githubusercontent.com/42040329/120920378-0c83c880-c6dc-11eb-814a-e667563eed95.gif\"/>\n  <br/>\n  <sup>Release: 1.3.3</sup>\n</div>\n\n## Highlighted Features\n\n- **Intuitive UI/UX** similar to Postman fitting seamlessly with any VSCode theme\n- Supports **GraphQL** requests\n- Supports **code snippet generation** from requests\n\n## Quick start\n\n**Step 1.** Install the Postcode extension for Visual Studio Code  \n**Step 2.** Click on the Postcode icon in the side panel OR run the following command **Postcode: Create Request**  \n**Step 3** Create or test your HTTP/s requests and hit Send to see the responses\n\n## Commands\n\n| Command                  | Description                                          |\n| ------------------------ | ---------------------------------------------------- |\n| Postcode: Create Request | Opens a new Postcode tab to create and test requests |\n\n## Issues, feature requests, and contributions\n\n### Issues\n\n- If you come across a problem with the extension, please file an [issue](https://github.com/rohinivsenthil/postcode/issues/new)\n- For list of known issues, please check the [issues tab](https://github.com/rohinivsenthil/postcode/issues/new)\n\n### Feature requests\n\n- Find planned features for future releases marked as [feature](https://github.com/rohinivsenthil/postcode/issues?q=is%3Aissue+is%3Aopen+label%3Afeature) under issues tab.\n- For new feature requests, please file an [issue](https://github.com/rohinivsenthil/postcode/issues/new)\n\n### Contributions\n\nContributions are always welcome!\n\n#### Running the extension locally for development\n\n1. Clone the repository and install dependencies by running `yarn install`\n2. Press `F5` to open a new window with your extension loaded.\n3. Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Postcode: Create Request`.\n\n#### Folder structure\n\n- **`package.json`** - this is the manifest file in which you declare your extension and command. The plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette.\n- **`webview`**: folder where you will find entire React code\n- **`src/extension.ts`**: this is the main file where you will provide the implementation of your command. The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. We pass the function containing the implementation of the command as the second parameter to `registerCommand`.\n\n#### Making changes\n\n- You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.\n- You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.\n\n## Related\n\n- Read the [launch blog](https://rohinivsenthil.medium.com/postcode-vs-code-extension-alternative-to-postman-384816d4cf07) post on Medium\n- Featured #11 Product of the day on [Product Hunt](https://www.producthunt.com/posts/postcode)\n- Featured in **Trending this week** on Visual Studio Code Marketplace\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"postcode\",\n  \"publisher\": \"rohinivsenthil\",\n  \"displayName\": \"Postcode\",\n  \"icon\": \"icons/icon.png\",\n  \"description\": \"An API client to test and create HTTP/s requests\",\n  \"version\": \"1.3.9\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/rohinivsenthil/postcode/issues\"\n  },\n  \"author\": {\n    \"name\": \"Rohini Senthil\",\n    \"email\": \"rohinivsenthil@gmail.com\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/rohinivsenthil/postcode\"\n  },\n  \"engines\": {\n    \"vscode\": \"^1.56.0\"\n  },\n  \"categories\": [\n    \"Programming Languages\"\n  ],\n  \"keywords\": [\n    \"api-client\",\n    \"postman\",\n    \"REST\",\n    \"graphql\",\n    \"http\"\n  ],\n  \"activationEvents\": [\n    \"onCommand:postcode.createRequest\"\n  ],\n  \"main\": \"./dist/extension.js\",\n  \"contributes\": {\n    \"commands\": [\n      {\n        \"command\": \"postcode.createRequest\",\n        \"title\": \"Postcode: Create Request\"\n      }\n    ],\n    \"viewsContainers\": {\n      \"activitybar\": [\n        {\n          \"id\": \"postcode\",\n          \"title\": \"Postcode\",\n          \"icon\": \"webview/icons/package.svg\"\n        }\n      ]\n    },\n    \"views\": {\n      \"postcode\": [\n        {\n          \"id\": \"postcode.request\",\n          \"name\": \"Request\"\n        }\n      ]\n    },\n    \"viewsWelcome\": [\n      {\n        \"view\": \"postcode.request\",\n        \"contents\": \"[Create Request](command:postcode.createRequest)\"\n      }\n    ]\n  },\n  \"scripts\": {\n    \"vscode:prepublish\": \"yarn run package\",\n    \"compile\": \"cross-env NODE_ENV=development webpack --progress\",\n    \"watch\": \"cross-env NODE_ENV=development webpack --progress --watch\",\n    \"package\": \"cross-env NODE_ENV=production webpack --progress\",\n    \"test-compile\": \"tsc -p ./\",\n    \"test-watch\": \"tsc -watch -p ./\",\n    \"pretest\": \"yarn run test-compile && yarn run lint\",\n    \"lint\": \"eslint src webview --ext .ts,.tsx\",\n    \"lint:fix\": \"eslint --fix src webview --ext .ts,.tsx\",\n    \"test\": \"node ./out/test/runTest.js\",\n    \"prepare\": \"husky install\"\n  },\n  \"devDependencies\": {\n    \"@svgr/webpack\": \"^5.5.0\",\n    \"@types/glob\": \"^7.1.3\",\n    \"@types/mocha\": \"^8.0.4\",\n    \"@types/node\": \"^12.11.7\",\n    \"@types/react\": \"^17.0.5\",\n    \"@types/react-dom\": \"^17.0.4\",\n    \"@types/react-redux\": \"^7.1.16\",\n    \"@types/vscode\": \"^1.56.0\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.14.1\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"cross-env\": \"^7.0.3\",\n    \"css-loader\": \"^5.2.4\",\n    \"eslint\": \"^7.19.0\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-prettier\": \"^3.4.0\",\n    \"eslint-plugin-react\": \"^7.23.2\",\n    \"file-loader\": \"^6.2.0\",\n    \"glob\": \"^7.1.6\",\n    \"husky\": \"^7.0.1\",\n    \"mini-css-extract-plugin\": \"^1.6.0\",\n    \"mocha\": \"^8.2.1\",\n    \"monaco-editor-webpack-plugin\": \"^3.1.0\",\n    \"prettier\": \"2.3.0\",\n    \"static-site-generator-webpack-plugin\": \"^3.4.2\",\n    \"style-loader\": \"^2.0.0\",\n    \"ts-loader\": \"^8.0.14\",\n    \"typescript\": \"^4.1.3\",\n    \"url-loader\": \"^4.1.1\",\n    \"vscode-test\": \"^1.5.0\",\n    \"webpack\": \"^5.19.0\",\n    \"webpack-cli\": \"^4.4.0\"\n  },\n  \"dependencies\": {\n    \"@reduxjs/toolkit\": \"^1.5.1\",\n    \"axios\": \"^0.21.1\",\n    \"buffer\": \"^6.0.3\",\n    \"monaco-editor\": \"^0.24.0\",\n    \"path-browserify\": \"^1.0.1\",\n    \"postman-code-generators\": \"^1.1.5\",\n    \"postman-collection\": \"^3.6.11\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-icons\": \"^4.2.0\",\n    \"react-redux\": \"^7.2.4\",\n    \"url\": \"^0.11.0\"\n  }\n}"
  },
  {
    "path": "src/extension.ts",
    "content": "// The module 'vscode' contains the VS Code extensibility API\n// Import the module and reference it with the alias vscode in your code below\nimport * as vscode from \"vscode\";\nimport * as fs from \"fs\";\nimport axios from \"axios\";\nimport * as https from \"https\";\nimport { RequestOptions } from \"../webview/features/requestOptions/requestOptionsSlice\";\n\n// this method is called when your extension is activated\n// your extension is activated the very first time the command is executed\nexport function activate(context: vscode.ExtensionContext) {\n  const webviewContent = fs\n    .readFileSync(\n      vscode.Uri.joinPath(context.extensionUri, \"dist/index.html\").fsPath,\n      { encoding: \"utf-8\" }\n    )\n    .replace(\n      \"styleUri\",\n      vscode.Uri.joinPath(context.extensionUri, \"/dist/main.css\")\n        .with({ scheme: \"vscode-resource\" })\n        .toString()\n    )\n    .replace(\n      \"scriptUri\",\n      vscode.Uri.joinPath(context.extensionUri, \"/dist/webview.js\")\n        .with({ scheme: \"vscode-resource\" })\n        .toString()\n    );\n\n  // The command has been defined in the package.json file\n  // Now provide the implementation of the command with registerCommand\n  // The commandId parameter must match the command field in package.json\n  const disposable = vscode.commands.registerCommand(\n    \"postcode.createRequest\",\n    () => {\n      // The code you place here will be executed every time your command is executed\n\n      // Display a message box to the user\n      vscode.window.showInformationMessage(\"Welcome to Postcode!\");\n\n      const panel = vscode.window.createWebviewPanel(\n        \"postcode\",\n        \"Postcode\",\n        vscode.ViewColumn.One,\n        {\n          enableScripts: true,\n          retainContextWhenHidden: true,\n          localResourceRoots: [\n            vscode.Uri.joinPath(context.extensionUri, \"dist\"),\n          ],\n        }\n      );\n\n      panel.webview.html = webviewContent;\n      panel.iconPath = vscode.Uri.joinPath(\n        context.extensionUri,\n        \"icons/icon.png\"\n      );\n\n      panel.webview.onDidReceiveMessage(\n        ({ method, url, headers, body, auth, options }) => {\n          // Options Section\n          const requestOptions = options as RequestOptions;\n          let requestStartedAt, responseDuration;\n\n          if (!url) {\n            panel.webview.postMessage({\n              type: \"response\",\n              error: { message: \"Request URL is empty\" },\n            });\n            vscode.window.showInformationMessage(\"Request URL is empty\");\n            return;\n          }\n\n          const headersObj = {};\n\n          if (auth.type === \"bearer\") {\n            headersObj[\"Authorization\"] = `Bearer ${auth.bearer.token}`;\n          }\n\n          headers.forEach(({ key, value, disabled }) => {\n            if (!disabled) {\n              headersObj[key] = value;\n            }\n          });\n\n          let data = \"\";\n          if (body.mode === \"formdata\") {\n            const dataObj = new URLSearchParams();\n            body.formdata.forEach(({ key, value, disabled }) => {\n              if (!disabled) {\n                dataObj.append(key, value);\n              }\n            });\n            data = dataObj.toString();\n            headersObj[\"Content-Type\"] = \"multipart/form-data\";\n          } else if (body.mode === \"urlencoded\") {\n            const dataObj = new URLSearchParams();\n            body.urlencoded.forEach(({ key, value, disabled }) => {\n              if (!disabled) {\n                dataObj.append(key, value);\n              }\n            });\n            data = dataObj.toString();\n            headersObj[\"Content-Type\"] = \"application/x-www-form-urlencoded\";\n          } else if (body.mode === \"raw\") {\n            data = body.raw;\n            headersObj[\"Content-Type\"] = {\n              json: \"application/json\",\n              html: \"text/html\",\n              xml: \"text/xml\",\n              text: \"text/plain\",\n            }[body.options.raw.language];\n          } else if (body.mode === \"file\") {\n            data = body.fileData;\n            headersObj[\"Content-Type\"] = \"application/octet-stream\";\n          } else if (body.mode === \"graphql\") {\n            data = JSON.stringify({\n              query: body.graphql.query,\n              variables: body.graphql.variables,\n            });\n            headersObj[\"Content-Type\"] = \"application/json\";\n          }\n\n          // Option 1. StrictSSL\n          https.globalAgent.options.rejectUnauthorized =\n            requestOptions.strictSSL === \"yes\";\n\n          axios.interceptors.request.use((config) => {\n            requestStartedAt = new Date().getTime();\n            return config;\n          });\n\n          axios.interceptors.response.use((config) => {\n            responseDuration = new Date().getTime() - requestStartedAt;\n            return config;\n          });\n\n          axios({\n            method,\n            url,\n            baseURL: \"\",\n            data: data,\n            headers: headersObj,\n            auth: auth.type === \"basic\" ? auth.basic : undefined,\n            transformResponse: [(data) => data],\n            responseType: \"text\",\n            validateStatus: () => true,\n          })\n            .then((resp) =>\n              panel.webview.postMessage({\n                type: \"response\",\n                data: resp.data,\n                status: resp.status,\n                statusText: resp.statusText,\n                headers: resp.headers,\n                duration: responseDuration,\n              })\n            )\n            .catch((err) => {\n              panel.webview.postMessage({\n                type: \"response\",\n                error: err,\n              });\n              vscode.window.showInformationMessage(\n                \"Error: Could not send request\"\n              );\n            });\n        }\n      );\n    }\n  );\n\n  context.subscriptions.push(disposable);\n}\n\n// this method is called when your extension is deactivated\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport function deactivate() {}\n"
  },
  {
    "path": "src/test/runTest.ts",
    "content": "import * as path from \"path\";\n\nimport { runTests } from \"vscode-test\";\n\nasync function main() {\n  try {\n    // The folder containing the Extension Manifest package.json\n    // Passed to `--extensionDevelopmentPath`\n    const extensionDevelopmentPath = path.resolve(__dirname, \"../../\");\n\n    // The path to test runner\n    // Passed to --extensionTestsPath\n    const extensionTestsPath = path.resolve(__dirname, \"./suite/index\");\n\n    // Download VS Code, unzip it and run the integration test\n    await runTests({ extensionDevelopmentPath, extensionTestsPath });\n  } catch (err) {\n    console.error(\"Failed to run tests\");\n    process.exit(1);\n  }\n}\n\nmain();\n"
  },
  {
    "path": "src/test/suite/extension.test.ts",
    "content": "import * as assert from \"assert\";\n\n// You can import and use all API from the 'vscode' module\n// as well as import your extension to test it\nimport * as vscode from \"vscode\";\n// import * as myExtension from '../../extension';\n\nsuite(\"Extension Test Suite\", () => {\n  vscode.window.showInformationMessage(\"Start all tests.\");\n\n  test(\"Sample test\", () => {\n    assert.strictEqual(-1, [1, 2, 3].indexOf(5));\n    assert.strictEqual(-1, [1, 2, 3].indexOf(0));\n  });\n});\n"
  },
  {
    "path": "src/test/suite/index.ts",
    "content": "import * as path from \"path\";\nimport * as Mocha from \"mocha\";\nimport * as glob from \"glob\";\n\nexport function run(): Promise<void> {\n  // Create the mocha test\n  const mocha = new Mocha({\n    ui: \"tdd\",\n    color: true,\n  });\n\n  const testsRoot = path.resolve(__dirname, \"..\");\n\n  return new Promise((c, e) => {\n    glob(\"**/**.test.js\", { cwd: testsRoot }, (err, files) => {\n      if (err) {\n        return e(err);\n      }\n\n      // Add files to the test suite\n      files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f)));\n\n      try {\n        // Run the mocha test\n        mocha.run((failures) => {\n          if (failures > 0) {\n            e(new Error(`${failures} tests failed.`));\n          } else {\n            c();\n          }\n        });\n      } catch (err) {\n        console.error(err);\n        e(err);\n      }\n    });\n  });\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"commonjs\",\n    \"target\": \"es6\",\n    \"outDir\": \"out\",\n    \"jsx\": \"react\",\n    \"lib\": [\"es2019\", \"dom\"],\n    \"sourceMap\": true,\n    \"rootDir\": \".\",\n    \"resolveJsonModule\": true,\n    \"strict\": false /* enable all strict type-checking options */\n    /* Additional Checks */\n    // \"noImplicitReturns\": true, /* Report error when not all code paths in function return a value. */\n    // \"noFallthroughCasesInSwitch\": true, /* Report errors for fallthrough cases in switch statement. */\n    // \"noUnusedParameters\": true,  /* Report errors on unused parameters. */\n  },\n  \"exclude\": [\"node_modules\", \".vscode-test\"]\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "/* eslint-disable @typescript-eslint/no-var-requires */\n//@ts-check\n\n\"use strict\";\n\nconst path = require(\"path\");\nconst webpack = require(\"webpack\");\nconst MonacoWebpackPlugin = require(\"monaco-editor-webpack-plugin\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst StaticSiteGeneratorPlugin = require(\"static-site-generator-webpack-plugin\");\n\nconst imageInlineSizeLimit = parseInt(\n  process.env.IMAGE_INLINE_SIZE_LIMIT || \"10000\"\n);\n\nconst baseConfig = (webpackEnv) => {\n  const isEnvDevelopment = webpackEnv === \"development\";\n  const isEnvProduction = webpackEnv === \"production\";\n\n  return {\n    mode: isEnvProduction ? \"production\" : isEnvDevelopment && \"development\",\n    bail: isEnvProduction,\n    devtool: isEnvProduction\n      ? \"source-map\"\n      : isEnvDevelopment && \"eval-cheap-module-source-map\",\n    resolve: {\n      fallback: {\n        buffer: require.resolve(\"buffer\"),\n        path: require.resolve(\"path-browserify\"),\n        url: require.resolve(\"url\"),\n      },\n      extensions: [\".ts\", \".tsx\", \".js\"],\n    },\n    module: {\n      rules: [\n        {\n          oneOf: [\n            {\n              test: [/\\.bmp$/, /\\.gif$/, /\\.jpe?g$/, /\\.png$/],\n              loader: require.resolve(\"url-loader\"),\n              options: {\n                limit: imageInlineSizeLimit,\n                name: \"static/media/[name].[hash:8].[ext]\",\n              },\n            },\n            {\n              test: /\\.svg$/,\n              use: [\n                require.resolve(\"@svgr/webpack\"),\n                require.resolve(\"url-loader\"),\n              ],\n            },\n            {\n              test: /\\.tsx?$/,\n              exclude: /node_modules/,\n              loader: require.resolve(\"ts-loader\"),\n            },\n            {\n              test: /\\.css$/,\n              use: [\n                MiniCssExtractPlugin.loader,\n                {\n                  loader: require.resolve(\"css-loader\"),\n                  options: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || isEnvDevelopment,\n                  },\n                },\n              ],\n              sideEffects: true,\n            },\n            {\n              loader: require.resolve(\"file-loader\"),\n              exclude: [/\\.(js|mjs|jsx|ts|tsx)$/, /\\.html$/, /\\.json$/],\n              options: {\n                name: \"media/[name].[hash:8].[ext]\",\n              },\n            },\n          ],\n        },\n      ],\n    },\n    plugins: [\n      new MiniCssExtractPlugin({\n        filename: \"ignore.css\",\n      }),\n    ],\n  };\n};\n\nconst extensionConfig = (webpackEnv) => {\n  return {\n    ...baseConfig(webpackEnv),\n    target: \"node\",\n    entry: \"./src/extension.ts\",\n    output: {\n      path: path.resolve(__dirname, \"dist\"),\n      filename: \"extension.js\",\n      libraryTarget: \"commonjs2\",\n    },\n    externals: { vscode: \"commonjs vscode\" },\n  };\n};\n\nconst webviewConfig = (webpackEnv) => {\n  return {\n    ...baseConfig(webpackEnv),\n    entry: \"./webview/index.tsx\",\n    output: {\n      path: path.resolve(__dirname, \"dist\"),\n      filename: \"webview.js\",\n    },\n    plugins: [\n      new MiniCssExtractPlugin(),\n      new MonacoWebpackPlugin({\n        languages: [\n          \"csharp\",\n          \"dart\",\n          \"go\",\n          \"graphql\",\n          \"html\",\n          \"java\",\n          \"typescript\",\n          \"json\",\n          \"objective-c\",\n          \"php\",\n          \"powershell\",\n          \"python\",\n          \"ruby\",\n          \"shell\",\n          \"swift\",\n          \"xml\",\n        ],\n      }),\n      new webpack.ProvidePlugin({\n        Buffer: [\"buffer\", \"Buffer\"],\n        process: \"process/browser\",\n      }),\n    ],\n  };\n};\n\nconst prerenderConfig = (webpackEnv) => {\n  const config = baseConfig(webpackEnv);\n\n  return {\n    ...config,\n    target: \"node\",\n    entry: \"./webview/prerender.tsx\",\n    output: {\n      path: path.resolve(__dirname, \"dist\"),\n      filename: \"prerender.js\",\n      libraryTarget: \"commonjs2\",\n    },\n    plugins: [\n      new MiniCssExtractPlugin({\n        filename: \"ignore.css\",\n      }),\n      new StaticSiteGeneratorPlugin({\n        paths: [\"/\"],\n      }),\n      new webpack.ProvidePlugin({\n        Buffer: [\"buffer\", \"Buffer\"],\n        process: \"process/browser\",\n      }),\n    ],\n  };\n};\n\nmodule.exports = [extensionConfig, webviewConfig, prerenderConfig];\n"
  },
  {
    "path": "webview/App.css",
    "content": ".App {\n  background-color: var(--background);\n}\n"
  },
  {
    "path": "webview/App.tsx",
    "content": "import * as React from \"react\";\nimport \"./App.css\";\nimport { responseUpdated } from \"./features/response/responseSlice\";\nimport { Postcode } from \"./pages/Postcode\";\nimport { useAppDispatch } from \"./redux/hooks\";\n\nconst App = () => {\n  const dispatch = useAppDispatch();\n\n  React.useEffect(() => {\n    window.addEventListener(\"message\", (event) => {\n      if (event.data.type === \"response\") {\n        dispatch(responseUpdated(event.data));\n      }\n    });\n  }, []);\n\n  return (\n    <div className=\"App\">\n      <Postcode />\n    </div>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "webview/acquireVsCodeApi.d.ts",
    "content": "declare var acquireVsCodeApi: any;\n"
  },
  {
    "path": "webview/components/RequestBar/index.tsx",
    "content": "import * as React from \"react\";\nimport { Url } from \"postman-collection\";\nimport vscode from \"../../vscode\";\nimport { RequestMethodSelector } from \"../../features/requestMethod/RequestMethodSelector\";\nimport { RequestUrl } from \"../../features/requestUrl/RequestUrl\";\nimport { responseLoadingStarted } from \"../../features/response/responseSlice\";\nimport { selectRequestAuth } from \"../../features/requestAuth/requestAuthSlice\";\nimport { selectRequestBody } from \"../../features/requestBody/requestBodySlice\";\nimport { selectRequestHeaders } from \"../../features/requestHeader/requestHeaderSlice\";\nimport { selectRequestUrl } from \"../../features/requestUrl/requestUrlSlice\";\nimport { selectRequestMethod } from \"../../features/requestMethod/requestMethodSlice\";\nimport { selectRequestOptions } from \"../../features/requestOptions/requestOptionsSlice\";\nimport { useAppDispatch, useAppSelector } from \"../../redux/hooks\";\nimport \"./styles.css\";\n\nexport const RequestBar = () => {\n  const dispatch = useAppDispatch();\n\n  const requestMethod = useAppSelector(selectRequestMethod);\n  const requestHeaders = useAppSelector(selectRequestHeaders);\n  const requestBody = useAppSelector(selectRequestBody);\n  const requestUrl = useAppSelector(selectRequestUrl);\n  const requestAuth = useAppSelector(selectRequestAuth);\n  const requestOptions = useAppSelector(selectRequestOptions);\n\n  return (\n    <form\n      className=\"request-bar\"\n      onSubmit={(e) => {\n        dispatch(responseLoadingStarted());\n        const { protocol } = Url.parse(requestUrl);\n        vscode.postMessage({\n          method: requestMethod,\n          auth: requestAuth,\n          body: requestBody,\n          headers: requestHeaders,\n          url: protocol ? requestUrl : `http://${requestUrl}`,\n          options: requestOptions,\n        });\n        e.preventDefault();\n      }}\n    >\n      <RequestMethodSelector />\n      <RequestUrl />\n      <button\n        name=\"request-send\"\n        id=\"request-send\"\n        type=\"submit\"\n        className=\"button-request-send\"\n      >\n        Send\n      </button>\n    </form>\n  );\n};\n"
  },
  {
    "path": "webview/components/RequestBar/styles.css",
    "content": ".request-bar {\n  display: flex;\n  padding: 0 20px;\n  padding-top: 30px;\n}\n\n.input-request-url {\n  flex: 2;\n  padding: 13px 20px;\n  color: var(--default-text);\n  display: inline-block;\n  outline: none;\n  border: 0;\n  border-radius: 0 2px 2px 0;\n  background-color: var(--input-field);\n  font-size: var(--default-font-size);\n}\n.input-request-url:focus {\n  outline: none;\n}\n.input-request-url:hover {\n  background-color: var(--input-field-hover);\n}\n\n.button-request-send {\n  background-color: var(--send-button);\n  color: #fff;\n  font-weight: bold;\n  padding: 13px 20px;\n  margin: 0 0 0 12px;\n  display: inline-block;\n  outline: none;\n  border-radius: 5%;\n  border: 0;\n  cursor: pointer;\n  font-size: var(--default-font-size);\n}\n.button-request-send:hover {\n  background-color: var(--send-button-hover);\n}\n"
  },
  {
    "path": "webview/components/RequestOptionsBar/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport * as propTypes from \"prop-types\";\nimport { requestOptions } from \"../../constants/request-options\";\nimport { useAppSelector } from \"../../redux/hooks\";\nimport { selectRequestHeaders } from \"../../features/requestHeader/requestHeaderSlice\";\n\nexport const RequestOptionsTab = (props) => {\n  const { selected, setSelected } = props;\n  const header = useAppSelector(selectRequestHeaders);\n\n  return (\n    <div className=\"request-options-tab-wrapper\">\n      <div className=\"request-options\">\n        {requestOptions.map((option) => (\n          <button\n            key={option.value}\n            onClick={() => setSelected(option.value)}\n            className={\n              selected === option.value\n                ? \"request-option request-option-selected\"\n                : \"request-option\"\n            }\n          >\n            {option.name}\n            {option.value === \"headers\" ? (\n              <div className=\"request-options-header-length\">\n                (\n                {\n                  header.filter(\n                    ({ key, value, description }) => key || value || description\n                  ).length\n                }\n                )\n              </div>\n            ) : null}\n          </button>\n        ))}\n      </div>\n      <button\n        id=\"request-code\"\n        name=\"request-code\"\n        className=\"button-request\"\n        onClick={() => setSelected(\"code\")}\n      >\n        Code\n      </button>\n    </div>\n  );\n};\n\nRequestOptionsTab.propTypes = {\n  selected: propTypes.string.isRequired,\n  setSelected: propTypes.func.isRequired,\n};\n"
  },
  {
    "path": "webview/components/RequestOptionsBar/styles.css",
    "content": ".request-options-tab-wrapper {\n  display: flex;\n  justify-content: space-between;\n  padding: 15px 20px 0 20px;\n}\n\n.request-options {\n  display: flex;\n}\n\n.request-option {\n  padding: 0px 5px 10px 5px;\n  margin: 0 10px 0 0;\n  display: flex;\n  cursor: pointer;\n  background-color: transparent;\n  color: var(--default-text-light);\n  outline: none;\n  border: 3px solid transparent;\n  border-radius: 0;\n  font-weight: 500;\n  font-size: var(--default-font-size);\n}\n.request-option:hover {\n  color: var(--default-text);\n}\n\n.request-option-selected {\n  color: var(--default-text);\n  border-bottom: 3px solid var(--primary);\n}\n\n.request-options-header-length {\n  margin-left: 4px;\n  color: var(--tab-info);\n}\n\n.button-request {\n  display: inline-block;\n  cursor: pointer;\n  background-color: transparent;\n  color: var(--primary);\n  outline: none;\n  border: 3px solid transparent;\n  border-radius: 0;\n  font-weight: 500;\n  font-size: var(--default-font-size);\n}\n\n.button-request:hover {\n  color: var(--primary-dark);\n}\n\n.hidden {\n  display: none; \n}"
  },
  {
    "path": "webview/components/RequestOptionsWindow/index.tsx",
    "content": "import * as React from \"react\";\nimport { RequestQueryParams } from \"../../features/requestUrl/RequestQueryParams\";\nimport { RequestAuth } from \"../../features/requestAuth/RequestAuth\";\nimport { Body } from \"../../features/requestBody/RequestBody\";\nimport { Headers } from \"../../features/requestHeader/HeadersWindow\";\nimport { CodeSnippet } from \"../../features/codeGen/CodeSnippet\";\nimport { RequestOptions } from \"../../features/requestOptions/RequestOptions\";\nimport * as propTypes from \"prop-types\";\nimport \"./styles.css\";\n\nexport const RequestOptionsWindow = (props) => {\n  const { selected } = props;\n  return (\n    <div className=\"request-options-window-wrapper\">\n      {selected === \"params\" ? (\n        <RequestQueryParams />\n      ) : selected === \"authorization\" ? (\n        <RequestAuth />\n      ) : selected === \"body\" ? (\n        <Body />\n      ) : selected === \"headers\" ? (\n        <Headers />\n      ) : selected === \"code\" ? (\n        <CodeSnippet />\n      ) : selected === \"options\" ? (\n        <RequestOptions />\n      ) : null}\n    </div>\n  );\n};\n\nRequestOptionsWindow.propTypes = {\n  selected: propTypes.string.isRequired,\n};\n"
  },
  {
    "path": "webview/components/RequestOptionsWindow/styles.css",
    "content": ".request-options-window-wrapper {\n  flex: 1;\n  padding: 5px 20px 10px 20px;\n  overflow: scroll;\n}\n"
  },
  {
    "path": "webview/components/Response/index.tsx",
    "content": "import * as React from \"react\";\nimport { ResponseTab } from \"../../features/response/ResponseTab\";\nimport { ResponseWindow } from \"../../features/response/ResponseWindow\";\nimport { ReactComponent as PackageIcon } from \"../../icons/package.svg\";\nimport \"./styles.css\";\nimport { useAppSelector } from \"../../redux/hooks\";\nimport { selectResponse } from \"../../features/response/responseSlice\";\nimport { supportedLangs } from \"../../constants/supported-langs\";\n\nexport const Response = () => {\n  const response = useAppSelector(selectResponse);\n  const [selected, setSelected] = React.useState(\"body\");\n  const [language, setLanguage] = React.useState(supportedLangs[0].value);\n\n  if (response.loading) {\n    return (\n      <div className=\"loader-wrapper\">\n        <div>Sending request ...</div>\n        <div className=\"loader\" />\n      </div>\n    );\n  } else if (response.initial) {\n    return (\n      <div className=\"initial-response-wrapper\">\n        <div className=\"initial-text\">Hit Send to get a response</div>\n        <PackageIcon className=\"img-initial-response\" />\n      </div>\n    );\n  } else if (response.error) {\n    return (\n      <div className=\"error-response-wrapper\">\n        <div>Could not send request</div>\n        <div className=\"error-message\">{`Error: ${response.error.message}`}</div>\n        <PackageIcon className=\"img-error-response\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"response-body-wrapper\">\n        <ResponseTab\n          selected={selected}\n          setSelected={setSelected}\n          language={language}\n          setLanguage={setLanguage}\n        />\n        <ResponseWindow selected={selected} language={language} />\n      </div>\n    );\n  }\n};\n"
  },
  {
    "path": "webview/components/Response/styles.css",
    "content": ".response-body-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  font-size: var(--default-font-size);\n  border-top: var(--default-border-size) solid var(--border);\n}\n\n.error-response-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: var(--default-font-size);\n  border-top: var(--default-border-size) solid var(--border);\n}\n\n.img-error-response {\n  margin: 15px;\n  fill: var(--logo-color);\n  width: 20%;\n  height: 20%;\n}\n\n.error-message {\n  margin: 10px;\n  color: var(--error-message);\n}\n\n.initial-response-wrapper {\n  border-top: var(--default-border-size) solid var(--border);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: var(--default-text-light);\n  font-size: var(--default-font-size);\n  flex: 1;\n}\n\n.img-initial-response {\n  fill: var(--logo-color);\n  width: 20%;\n  height: 20%;\n}\n\n.initial-text {\n  padding: 10px;\n}\n\n.loader-wrapper {\n  border-top: var(--default-border-size) solid var(--border);\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: var(--default-font-size);\n}\n\n.loader,\n.loader:before,\n.loader:after {\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n  -webkit-animation: load7 1.8s infinite ease-in-out;\n  animation: load7 1.8s infinite ease-in-out;\n}\n.loader {\n  color: var(--border);\n  position: relative;\n  text-indent: -9999em;\n  -webkit-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  transform: translateZ(0);\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n.loader:before,\n.loader:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n}\n.loader:before {\n  left: -3.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n.loader:after {\n  left: 3.5em;\n}\n@-webkit-keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0;\n  }\n}\n@keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0;\n  }\n}\n"
  },
  {
    "path": "webview/constants/request-options.ts",
    "content": "export const requestOptions = [\n  {\n    name: \"Params\",\n    value: \"params\",\n  },\n  {\n    name: \"Authorization\",\n    value: \"authorization\",\n  },\n  {\n    name: \"Headers\",\n    value: \"headers\",\n  },\n  {\n    name: \"Body\",\n    value: \"body\",\n  },\n  {\n    name: \"Options\",\n    value: \"options\",\n  },\n];\n"
  },
  {
    "path": "webview/constants/response-options.ts",
    "content": "export const responseOptions = [\n  {\n    name: \"Body\",\n    value: \"body\",\n  },\n  {\n    name: \"Headers\",\n    value: \"headers\",\n  },\n];\n"
  },
  {
    "path": "webview/constants/response-views.ts",
    "content": "export const responseViews = [\n  {\n    name: \"Pretty\",\n    value: \"pretty\",\n  },\n  {\n    name: \"Raw\",\n    value: \"raw\",\n  },\n];\n"
  },
  {
    "path": "webview/constants/supported-langs.ts",
    "content": "export const supportedLangs = [\n  {\n    name: \"JSON\",\n    value: \"json\",\n  },\n  {\n    name: \"HTML\",\n    value: \"html\",\n  },\n  {\n    name: \"XML\",\n    value: \"xml\",\n  },\n  {\n    name: \"Text\",\n    value: \"text\",\n  },\n];\n"
  },
  {
    "path": "webview/features/codeGen/CodeSnippet/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport {\n  codeGenLanguageUpdated,\n  codeGenOptions,\n  codeGenVariantUpdated,\n  selectCodeGenEditorLanguage,\n  selectCodeGenLanguage,\n  selectCodeGenLanguageKey,\n  selectCodeGenVariant,\n  selectRequest,\n} from \"../codeGenSlice\";\nimport * as codegen from \"postman-code-generators\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\n\nconst Editor = React.lazy(() => import(\"../../../shared/Editor\"));\n\nexport const CodeSnippet = () => {\n  const [code, setCode] = React.useState(\"\");\n\n  const language = useAppSelector(selectCodeGenLanguage);\n  const variant = useAppSelector(selectCodeGenVariant);\n  const editorLanguage = useAppSelector(selectCodeGenEditorLanguage);\n  const languageKey = useAppSelector(selectCodeGenLanguageKey);\n  const dispatch = useAppDispatch();\n\n  const request = useAppSelector(selectRequest);\n\n  React.useEffect(() => {\n    codegen.convert(languageKey, variant, request, {}, (err, snippet) => {\n      setCode(snippet);\n    });\n  }, [languageKey, variant, request]);\n\n  return (\n    <div className=\"code-gen-wrapper\">\n      <div className=\"code-gen-option\">\n        <select\n          onChange={(e) => dispatch(codeGenLanguageUpdated(e.target.value))}\n          className=\"select-code-option\"\n          value={language}\n        >\n          {codeGenOptions.map(({ language }) => (\n            <option key={language} value={language}>\n              {language}\n            </option>\n          ))}\n        </select>\n        <select\n          onChange={(e) => dispatch(codeGenVariantUpdated(e.target.value))}\n          className=\"select-code-option\"\n          value={variant}\n        >\n          {codeGenOptions\n            .filter(({ language: lang }) => lang === language)[0]\n            .variants.map((variant) => (\n              <option key={variant} value={variant}>\n                {variant}\n              </option>\n            ))}\n        </select>\n      </div>\n      <div className=\"code-display\">\n        <React.Suspense fallback={<div>loading</div>}>\n          <Editor\n            className=\"code-gen-editor\"\n            value={code}\n            language={editorLanguage}\n            readOnly\n            copyButton\n          />\n        </React.Suspense>\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/codeGen/CodeSnippet/styles.css",
    "content": ".code-gen-wrapper {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.code-gen-options {\n  display: flex;\n  align-items: center;\n}\n\n.code-display {\n  height: 95%;\n  border-top: var(--default-border-size) solid var(--border);\n  margin-top: 15px;\n}\n\n.code-gen-editor {\n  height: 95%;\n}\n\n.select-code-option {\n  padding: 4px;\n  margin-right: 8px;\n  display: inline-block;\n  font-weight: 600;\n  outline: none;\n  border: var(--default-border-size) solid var(--border);\n  border-radius: 2px;\n  background-color: var(--background);\n  color: var(--default-text-light);\n  cursor: pointer;\n  font-size: var(--default-font-size);\n}\n.select-code-option:hover {\n  color: var(--default-text);\n}\n.select-code-option:focus {\n  outline: none;\n}\n"
  },
  {
    "path": "webview/features/codeGen/codeGenSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\nimport { Request } from \"postman-collection\";\n\nexport const codeGenOptions = [\n  { language: \"C\", variants: [\"libcurl\"], editor: \"c\", key: \"c\" },\n  { language: \"C#\", variants: [\"RestSharp\"], editor: \"csharp\", key: \"csharp\" },\n  { language: \"cURL\", variants: [\"cURL\"], editor: \"shell\", key: \"curl\" },\n  { language: \"Dart\", variants: [\"http\"], editor: \"dart\", key: \"dart\" },\n  { language: \"Go\", variants: [\"Native\"], editor: \"go\", key: \"go\" },\n  { language: \"HTTP\", variants: [\"HTTP\"], editor: \"text\", key: \"http\" },\n  { language: \"Java\", variants: [\"OkHttp\", \"Unirest\"], editor: \"java\" },\n  {\n    language: \"JavaScript\",\n    variants: [\"Fetch\", \"jQuery\", \"XHR\"],\n    editor: \"javascript\",\n    key: \"javascript\",\n  },\n  {\n    language: \"NodeJs\",\n    variants: [\"Axios\", \"Native\", \"Request\", \"Unirest\"],\n    editor: \"javascript\",\n    key: \"nodejs\",\n  },\n  {\n    language: \"Objective-C\",\n    variants: [\"NSURLSession\"],\n    editor: \"objective-c\",\n    key: \"objective-c\",\n  },\n  { language: \"OCaml\", variants: [\"Cohttp\"], editor: \"text\", key: \"ocaml\" },\n  {\n    language: \"PHP\",\n    variants: [\"cURL\", \"pecl_http\", \"HTTP_Request2\"],\n    editor: \"php\",\n    key: \"php\",\n  },\n  {\n    language: \"PowerShell\",\n    variants: [\"RestMethod\"],\n    editor: \"powershell\",\n    key: \"powershell\",\n  },\n  {\n    language: \"Python\",\n    variants: [\"http.client\", \"Requests\"],\n    editor: \"python\",\n    key: \"python\",\n  },\n  { language: \"Ruby\", variants: [\"Net:HTTP\"], editor: \"ruby\", key: \"ruby\" },\n  {\n    language: \"Shell\",\n    variants: [\"Httpie\", \"wget\"],\n    editor: \"shell\",\n    key: \"shell\",\n  },\n  {\n    language: \"Swift\",\n    variants: [\"URLSession\"],\n    editor: \"swift\",\n    key: \"swift\",\n  },\n];\n\nexport interface codeGenOptionState {\n  language: string;\n  variant: string;\n}\n\nconst initialState = { language: \"C\", variant: \"libcurl\" };\n\nconst codeGenSlice = createSlice({\n  name: \"codeGenOptions\",\n  initialState,\n  reducers: {\n    codeGenLanguageUpdated(state, action: PayloadAction<string>) {\n      state.language = action.payload;\n      state.variant = codeGenOptions.filter(\n        ({ language }) => language === action.payload\n      )[0].variants[0];\n    },\n    codeGenVariantUpdated(state, action: PayloadAction<string>) {\n      state.variant = action.payload;\n    },\n  },\n});\n\nexport const { codeGenLanguageUpdated, codeGenVariantUpdated } =\n  codeGenSlice.actions;\n\nexport const selectCodeGenLanguage = (state: RootState) =>\n  state.codeGenOptions.language;\nexport const selectCodeGenVariant = (state: RootState) =>\n  state.codeGenOptions.variant;\nexport const selectCodeGenEditorLanguage = (state: RootState) =>\n  codeGenOptions.filter(\n    ({ language }) => language === state.codeGenOptions.language\n  )[0].editor;\nexport const selectCodeGenLanguageKey = (state: RootState) =>\n  codeGenOptions.filter(\n    ({ language }) => language === state.codeGenOptions.language\n  )[0].key;\n\nexport const selectRequest = (state: RootState) =>\n  new Request({\n    method: state.requestMethod,\n    url: state.requestUrl,\n    header: state.requestHeader,\n    body: {\n      mode: state.requestBody.mode,\n      options: state.requestBody.options,\n      [state.requestBody.mode]: state.requestBody[state.requestBody.mode],\n    },\n    auth: {\n      type: state.requestAuth.type,\n      [state.requestAuth.type]: state.requestAuth[state.requestAuth.type],\n    },\n  });\n\nexport default codeGenSlice.reducer;\n"
  },
  {
    "path": "webview/features/requestAuth/BasicAuth/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestAuthOptionsUpdated,\n  selectBasicAuthOptions,\n} from \"../requestAuthSlice\";\n\nexport const BasicAuth = () => {\n  const basicAuthOptions = useAppSelector(selectBasicAuthOptions);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div>\n      <div className=\"basic-auth-input-group\">\n        <div className=\"label-basic-auth\">Username</div>\n        <input\n          type=\"text\"\n          id=\"basic-auth-username-input\"\n          name=\"basic-auth-username-input\"\n          placeholder=\"Username\"\n          autoComplete=\"off\"\n          className=\"input-basic-auth\"\n          value={basicAuthOptions.username}\n          onChange={(e) =>\n            dispatch(\n              requestAuthOptionsUpdated({\n                username: e.target.value,\n                password: basicAuthOptions.password,\n              })\n            )\n          }\n        />\n      </div>\n      <div className=\"basic-auth-input-group\">\n        <div className=\"label-basic-auth\">Password</div>\n        <input\n          type=\"password\"\n          id=\"basic-auth-password-input\"\n          name=\"basic-auth-password-input\"\n          placeholder=\"Password\"\n          autoComplete=\"off\"\n          className=\"input-basic-auth\"\n          value={basicAuthOptions.password}\n          onChange={(e) =>\n            dispatch(\n              requestAuthOptionsUpdated({\n                username: basicAuthOptions.username,\n                password: e.target.value,\n              })\n            )\n          }\n        />\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestAuth/BasicAuth/styles.css",
    "content": ".basic-auth-input-group {\n  padding: 15px 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.label-basic-auth {\n  font-size: var(--default-font-size);\n  color: var(--default-text);\n  padding-right: 20px;\n}\n\n.input-basic-auth {\n  width: 60%;\n  padding: 13px 20px;\n  color: var(--default-text);\n  display: inline-block;\n  outline: none;\n  border: 0;\n  border-radius: 0 2px 2px 0;\n  background-color: var(--input-field);\n  font-size: var(--default-font-size);\n}\n.input-basic-auth:focus {\n  outline: none;\n}\n.input-basic-auth:hover {\n  background-color: var(--input-field-hover);\n}\n"
  },
  {
    "path": "webview/features/requestAuth/BearerToken/index.tsx",
    "content": "import * as React from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestAuthOptionsUpdated,\n  selectBearerAuthOptions,\n} from \"../requestAuthSlice\";\nimport \"./styles.css\";\n\nexport const BearerToken = () => {\n  const bearerAuthOptions = useAppSelector(selectBearerAuthOptions);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"bearer-token-wrapper\">\n      <div className=\"label-bearer-token\">Token</div>\n      <input\n        type=\"text\"\n        id=\"bearer-token-input\"\n        name=\"bearer-token-input\"\n        placeholder=\"Token\"\n        autoComplete=\"off\"\n        className=\"input-bearer-token\"\n        value={bearerAuthOptions.token}\n        onChange={(e) =>\n          dispatch(requestAuthOptionsUpdated({ token: e.target.value }))\n        }\n      />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestAuth/BearerToken/styles.css",
    "content": ".bearer-token-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 15px 0;\n}\n\n.label-bearer-token {\n  font-size: var(--default-font-size);\n  color: var(--default-text);\n  padding-right: 20px;\n}\n\n.input-bearer-token {\n  width: 60%;\n  padding: 13px 20px;\n  color: var(--default-text);\n  display: inline-block;\n  outline: none;\n  border: 0;\n  border-radius: 0 2px 2px 0;\n  background-color: var(--input-field);\n  font-size: var(--default-font-size);\n}\n.input-bearer-token:focus {\n  outline: none;\n}\n.input-bearer-token:hover {\n  background-color: var(--input-field-hover);\n}\n"
  },
  {
    "path": "webview/features/requestAuth/NoAuth/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\n\nexport const NoAuth = () => {\n  return (\n    <div className=\"no-auth-wrapper\">\n      <div className=\"none-prompt\">\n        This request does not use any authorization.\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestAuth/NoAuth/styles.css",
    "content": ".no-auth-wrapper {\n  display: flex;\n  justify-content: center;\n}\n"
  },
  {
    "path": "webview/features/requestAuth/RequestAuth/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { NoAuth } from \"../NoAuth\";\nimport { BearerToken } from \"../BearerToken\";\nimport { BasicAuth } from \"../BasicAuth\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestAuthTypes,\n  requestAuthTypeUpdated,\n  selectRequestAuthType,\n} from \"../requestAuthSlice\";\n\nexport const RequestAuth = () => {\n  const requestAuthType = useAppSelector(selectRequestAuthType);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"req-auth-wrapper\">\n      <div className=\"auth-type\">\n        <div className=\"label-auth-type\">Authorization Type: </div>\n        <select\n          onChange={(e) => dispatch(requestAuthTypeUpdated(e.target.value))}\n          className=\"select-auth-type\"\n          value={requestAuthType}\n        >\n          {requestAuthTypes.map(({ value, name }) => (\n            <option key={value} value={value}>\n              {name}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className=\"req-auth-type-window\">\n        {requestAuthType === \"noauth\" ? (\n          <NoAuth />\n        ) : requestAuthType === \"bearer\" ? (\n          <BearerToken />\n        ) : requestAuthType === \"basic\" ? (\n          <BasicAuth />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestAuth/RequestAuth/styles.css",
    "content": ".req-auth-wrapper {\n  margin-top: 15px;\n}\n\n.auth-type {\n  display: flex;\n  align-items: center;\n}\n\n.label-auth-type {\n  font-size: var(--default-font-size);\n  color: var(--default-text);\n  padding-right: 12px;\n}\n\n.select-auth-type {\n  padding: 4px;\n  display: inline-block;\n  font-weight: 600;\n  outline: none;\n  border: var(--default-border-size) solid var(--border);\n  border-radius: 2px;\n  background-color: var(--background);\n  color: var(--default-text-light);\n  cursor: pointer;\n  font-size: var(--default-font-size);\n}\n.select-auth-type:hover {\n  color: var(--default-text);\n}\n.select-auth-type:focus {\n  outline: none;\n}\n\n.req-auth-type-window {\n  border-top: var(--default-border-size) solid var(--border);\n  margin-top: 15px;\n}\n"
  },
  {
    "path": "webview/features/requestAuth/requestAuthSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\nexport const requestAuthTypes = [\n  { name: \"No Auth\", value: \"noauth\" },\n  { name: \"Bearer Token\", value: \"bearer\" },\n  { name: \"Basic Auth\", value: \"basic\" },\n];\n\nexport interface BearerAuthOptions {\n  token: string;\n}\n\nexport interface BasicAuthOptions {\n  username: string;\n  password: string;\n}\n\nexport interface RequestAuthState {\n  type: string;\n  bearer: BearerAuthOptions;\n  basic: BasicAuthOptions;\n}\n\nconst initialState: RequestAuthState = {\n  type: \"noauth\",\n  bearer: { token: \"\" },\n  basic: { username: \"\", password: \"\" },\n};\n\nconst requestAuthSlice = createSlice({\n  name: \"requestAuth\",\n  initialState,\n  reducers: {\n    requestAuthTypeUpdated(state, action: PayloadAction<string>) {\n      state.type = action.payload;\n    },\n    requestAuthOptionsUpdated(\n      state,\n      action: PayloadAction<BearerAuthOptions | BasicAuthOptions>\n    ) {\n      state[state.type] = action.payload;\n    },\n  },\n});\n\nexport const { requestAuthTypeUpdated, requestAuthOptionsUpdated } =\n  requestAuthSlice.actions;\n\nexport const selectRequestAuth = (state: RootState) => state.requestAuth;\nexport const selectRequestAuthType = (state: RootState) =>\n  state.requestAuth.type;\nexport const selectBearerAuthOptions = (state: RootState) =>\n  state.requestAuth.bearer;\nexport const selectBasicAuthOptions = (state: RootState) =>\n  state.requestAuth.basic;\n\nexport default requestAuthSlice.reducer;\n"
  },
  {
    "path": "webview/features/requestBody/Binary/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestBodyBinaryUpdated,\n  selectRequestBodyFile,\n} from \"../requestBodySlice\";\n\nexport const Binary = () => {\n  const binary = useAppSelector(selectRequestBodyFile);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"binary-wrapper\">\n      <div className=\"input-file-wrapper\">\n        <input\n          type=\"file\"\n          id=\"myFile\"\n          name=\"filename\"\n          className=\"input-file-upload\"\n          onChange={(e) => {\n            if (e.target.files.length) {\n              e.target.files[0].text().then((data) =>\n                dispatch(\n                  requestBodyBinaryUpdated({\n                    name: e.target.files[0].name,\n                    data,\n                  })\n                )\n              );\n            }\n          }}\n        ></input>\n        <label className=\"label-file-upload\" htmlFor=\"myFile\">\n          Select file\n        </label>\n        <div>{binary}</div>\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/Binary/styles.css",
    "content": ".binary-wrapper {\n  border-top: var(--default-border-size) solid var(--border);\n  display: flex;\n  margin-top: 15px;\n  color: var(--default-text-light);\n  font-size: var(--default-font-size);\n}\n\n.input-file-wrapper {\n  margin-top: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.input-file-upload {\n  display: none;\n}\n\n.label-file-upload {\n  padding: 6px;\n  cursor: pointer;\n  background-color: var(--input-field);\n  margin-right: 10px;\n}\n"
  },
  {
    "path": "webview/features/requestBody/FormData/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { KeyValueTable } from \"../../../shared/KeyValueTable\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  selectRequestBodyFormData,\n  requestBodyFormDataItemAdded,\n  requestBodyFormDataItemDeleted,\n  requestBodyFormDataItemUpdated,\n} from \"../requestBodySlice\";\n\nexport const FormData = () => {\n  const urlEncoded = useAppSelector(selectRequestBodyFormData);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"form-data-wrapper\">\n      <KeyValueTable\n        data={urlEncoded}\n        onRowAdd={(value) => dispatch(requestBodyFormDataItemAdded(value))}\n        onRowDelete={(idx) => dispatch(requestBodyFormDataItemDeleted(idx))}\n        onRowUpdate={(idx, value) =>\n          dispatch(requestBodyFormDataItemUpdated({ idx, value }))\n        }\n      />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/FormData/styles.css",
    "content": ".form-data-wrapper {\n  margin-top: 15px;\n}\n"
  },
  {
    "path": "webview/features/requestBody/GraphQL/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestBodyGraphqlQueryUpdated,\n  requestBodyGraphqlVariablesUpdated,\n  selectRequestBodyGraphqlQuery,\n  selectRequestBodyGraphqlVariables,\n} from \"../requestBodySlice\";\n\nconst Editor = React.lazy(() => import(\"../../../shared/Editor\"));\n\nexport const GraphQL = () => {\n  const query = useAppSelector(selectRequestBodyGraphqlQuery);\n  const variables = useAppSelector(selectRequestBodyGraphqlVariables);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"gql-wrapper\">\n      <div className=\"gql-section\">\n        <div className=\"gql-section-heading\">QUERY</div>\n        <React.Suspense fallback={<div>loading</div>}>\n          <Editor\n            className=\"gql-editor\"\n            value={query}\n            language=\"graphql\"\n            onChange={(data) => dispatch(requestBodyGraphqlQueryUpdated(data))}\n          />\n        </React.Suspense>\n      </div>\n      <div className=\"gql-section\">\n        <div className=\"gql-section-heading\">VARIABLES</div>\n        <React.Suspense fallback={<div>loading</div>}>\n          <Editor\n            className=\"gql-editor\"\n            value={variables}\n            language=\"json\"\n            onChange={(data) =>\n              dispatch(requestBodyGraphqlVariablesUpdated(data))\n            }\n          />\n        </React.Suspense>\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/GraphQL/styles.css",
    "content": ".gql-wrapper {\n  display: flex;\n  height: 100%;\n  margin-top: 10px;\n}\n\n.gql-section {\n  height: 95%;\n  padding: 0 10px 0 10px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.gql-section-heading {\n  font-size: var(--default-font-size);\n  padding-bottom: 10px;\n  font-weight: 700;\n}\n\n.gql-editor {\n  height: 90%;\n}\n"
  },
  {
    "path": "webview/features/requestBody/NoBody/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\n\nexport const None = () => {\n  return (\n    <div className=\"none-wrapper\">\n      <div className=\"none-prompt\">This request does not have a body</div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/NoBody/styles.css",
    "content": ".none-wrapper {\n  border-top: var(--default-border-size) solid var(--border);\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n}\n\n.none-prompt {\n  color: var(--default-text-light);\n  font-size: var(--default-font-size);\n  margin-top: 20px;\n}\n"
  },
  {
    "path": "webview/features/requestBody/Raw/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestBodyRawUpdated,\n  selectRequestBodyRaw,\n  selectRequestBodyRawFormat,\n  selectRequestBodyRawLanguage,\n} from \"../requestBodySlice\";\n\nconst Editor = React.lazy(() => import(\"../../../shared/Editor\"));\n\nexport const Raw = () => {\n  const raw = useAppSelector(selectRequestBodyRaw);\n  const language = useAppSelector(selectRequestBodyRawLanguage);\n  const format = useAppSelector(selectRequestBodyRawFormat);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"raw-wrapper\">\n      <React.Suspense fallback={<div>loading</div>}>\n        <Editor\n          className=\"raw-editor\"\n          value={raw}\n          language={language}\n          format={format}\n          onChange={(data) => dispatch(requestBodyRawUpdated(data))}\n        />\n      </React.Suspense>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/Raw/styles.css",
    "content": ".raw-wrapper {\n  height: 95%;\n  margin-top: 15px;\n}\n\n.raw-editor {\n  height: 95%;\n}\n"
  },
  {
    "path": "webview/features/requestBody/RequestBody/index.tsx",
    "content": "import * as React from \"react\";\nimport { Binary } from \"../Binary\";\nimport { FormData } from \"../FormData\";\nimport { None } from \"../NoBody\";\nimport { Raw } from \"../Raw\";\nimport { UrlEncoded } from \"../UrlEncoded\";\nimport { GraphQL } from \"../GraphQL\";\nimport {\n  requestBodyModes,\n  requestBodyRawLanguages,\n  requestBodyRawLanguageUpdated,\n  requestBodyModeUpdated,\n  selectRequestBodyMode,\n  selectRequestBodyRawLanguage,\n  requestBodyRawFormatUpdated,\n} from \"../requestBodySlice\";\nimport \"./styles.css\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\n\nexport const Body = () => {\n  const bodyMode = useAppSelector(selectRequestBodyMode);\n  const language = useAppSelector(selectRequestBodyRawLanguage);\n  const hideBeautifyButton = bodyMode === \"raw\" && language === \"json\";\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"request-body-wrapper\">\n      <div className=\"body-options-wrapper\">\n        {requestBodyModes.map(({ name, value }) => (\n          <div key={value} className=\"body-options\">\n            <input\n              name=\"req-body-radio\"\n              type=\"radio\"\n              id={value}\n              value={value}\n              onChange={(e) =>\n                e.target.checked && dispatch(requestBodyModeUpdated(value))\n              }\n              className=\"radio-body-option\"\n              checked={bodyMode === value ? true : false}\n            />\n            <label className=\"label-body-option\" htmlFor={value}>\n              {name}\n            </label>\n          </div>\n        ))}\n        {bodyMode === \"raw\" ? (\n          <select\n            className=\"select-raw-lang\"\n            value={language}\n            onChange={(e) =>\n              dispatch(requestBodyRawLanguageUpdated(e.target.value))\n            }\n          >\n            {requestBodyRawLanguages.map((type) => (\n              <option key={type.value} value={type.value}>\n                {type.name}\n              </option>\n            ))}\n          </select>\n        ) : null}\n        <button\n          id=\"request-beautify\"\n          name=\"request-beautify\"\n          className={\n            hideBeautifyButton ? \"button-request\" : \"button-request hidden\"\n          }\n          onClick={() => {\n            dispatch(requestBodyRawFormatUpdated(true));\n          }}\n        >\n          Beautify\n        </button>\n      </div>\n      <div className=\"request-body-window-wrapper\">\n        {bodyMode === \"none\" ? (\n          <None />\n        ) : bodyMode === \"formdata\" ? (\n          <FormData />\n        ) : bodyMode === \"urlencoded\" ? (\n          <UrlEncoded />\n        ) : bodyMode === \"raw\" ? (\n          <Raw />\n        ) : bodyMode === \"file\" ? (\n          <Binary />\n        ) : bodyMode === \"graphql\" ? (\n          <GraphQL />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/RequestBody/styles.css",
    "content": ".request-body-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.request-body-window-wrapper {\n  flex: 1;\n}\n\n.body-options-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.body-options {\n  display: flex;\n  padding: 6px 5px 6px 0px;\n  margin: 0 10px 0 0;\n  justify-content: center;\n  align-items: center;\n}\n\n.radio-body-option {\n  cursor: pointer;\n  outline: none;\n  border-radius: 0;\n  margin: 0px 8px;\n}\n.radio-body-option:checked {\n  outline: none;\n}\n.radio-body-option:focus {\n  outline: none;\n}\n\n.label-body-option {\n  color: var(--default-text-light);\n  font-size: var(--default-font-size);\n}\n\n.select-raw-lang {\n  padding: 4px;\n  margin-left: 5px;\n  display: inline-block;\n  font-weight: 600;\n  outline: none;\n  border: var(--default-border-size) solid var(--border);\n  border-radius: 2px;\n  background-color: var(--background);\n  color: var(--default-text-light);\n  cursor: pointer;\n  font-size: var(--small-font-size);\n}\n.select-raw-lang:hover {\n  color: var(--default-text);\n}\n.select-raw-lang:focus {\n  outline: none;\n}\n\n#request-beautify {\n  margin-left: 10px;\n}\n"
  },
  {
    "path": "webview/features/requestBody/UrlEncoded/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { KeyValueTable } from \"../../../shared/KeyValueTable\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  selectRequestBodyUrlEncoded,\n  requestBodyUrlEncodedItemAdded,\n  requestBodyUrlEncodedItemDeleted,\n  requestBodyUrlEncodedItemUpdated,\n} from \"../requestBodySlice\";\n\nexport const UrlEncoded = () => {\n  const urlEncoded = useAppSelector(selectRequestBodyUrlEncoded);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"url-encoded-wrapper\">\n      <KeyValueTable\n        data={urlEncoded}\n        onRowAdd={(value) => dispatch(requestBodyUrlEncodedItemAdded(value))}\n        onRowDelete={(idx) => dispatch(requestBodyUrlEncodedItemDeleted(idx))}\n        onRowUpdate={(idx, value) =>\n          dispatch(requestBodyUrlEncodedItemUpdated({ idx, value }))\n        }\n      />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestBody/UrlEncoded/styles.css",
    "content": ".url-encoded-wrapper {\n  margin-top: 15px;\n}\n"
  },
  {
    "path": "webview/features/requestBody/requestBodySlice.ts",
    "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\nexport const requestBodyModes = [\n  { name: \"none\", value: \"none\" },\n  { name: \"form-data\", value: \"formdata\" },\n  { name: \"x-www-form-urlencoded\", value: \"urlencoded\" },\n  { name: \"raw\", value: \"raw\" },\n  { name: \"binary\", value: \"file\" },\n  { name: \"GraphQL\", value: \"graphql\" },\n];\n\nexport const requestBodyRawLanguages = [\n  { name: \"JSON\", value: \"json\" },\n  { name: \"HTML\", value: \"html\" },\n  { name: \"XML\", value: \"xml\" },\n  { name: \"Text\", value: \"text\" },\n];\n\nexport interface RequestBodyState {\n  mode?: string;\n  disabled: boolean;\n  raw: string;\n  file: string;\n  fileData: string;\n  formdata: { key: string; value: string; description: string }[];\n  urlencoded: { key: string; value: string; description: string }[];\n  options: any;\n  graphql: { query: string; variables: string };\n  format: boolean;\n}\n\nconst initialState: RequestBodyState = {\n  disabled: true,\n  format: false,\n  raw: \"\",\n  file: \"\",\n  fileData: \"\",\n  formdata: [],\n  urlencoded: [],\n  options: { raw: { language: \"json\" } },\n  graphql: { query: \"\", variables: \"{}\" },\n};\n\nconst requestBodySlice = createSlice({\n  name: \"requestBody\",\n  initialState,\n  reducers: {\n    requestBodyFormDataItemAdded(state, action: PayloadAction<any>) {\n      state.formdata.push(action.payload);\n    },\n    requestBodyFormDataItemDeleted(state, action: PayloadAction<number>) {\n      state.formdata.splice(action.payload, 1);\n    },\n    requestBodyFormDataItemUpdated(state, action: PayloadAction<any>) {\n      state.formdata[action.payload.idx] = action.payload.value;\n    },\n    requestBodyUrlEncodedItemAdded(state, action: PayloadAction<any>) {\n      state.urlencoded.push(action.payload);\n    },\n    requestBodyUrlEncodedItemDeleted(state, action: PayloadAction<number>) {\n      state.urlencoded.splice(action.payload, 1);\n    },\n    requestBodyUrlEncodedItemUpdated(state, action: PayloadAction<any>) {\n      state.urlencoded[action.payload.idx] = action.payload.value;\n    },\n    requestBodyRawUpdated(state, action: PayloadAction<string>) {\n      state.raw = action.payload;\n    },\n    requestBodyRawFormatUpdated(state, action: PayloadAction<boolean>) {\n      state.format = action.payload;\n    },\n    requestBodyRawLanguageUpdated(state, action: PayloadAction<string>) {\n      state.options.raw.language = action.payload;\n    },\n    requestBodyBinaryUpdated(state, action: PayloadAction<any>) {\n      state.file = action.payload.name;\n      state.fileData = action.payload.data;\n    },\n    requestBodyGraphqlQueryUpdated(state, action: PayloadAction<string>) {\n      state.graphql.query = action.payload;\n    },\n    requestBodyGraphqlVariablesUpdated(state, action: PayloadAction<string>) {\n      state.graphql.variables = action.payload;\n    },\n    requestBodyModeUpdated(state, action: PayloadAction<string>) {\n      if (action.payload === \"none\") {\n        state.mode = undefined;\n        state.disabled = true;\n      } else {\n        state.mode = action.payload;\n        state.disabled = false;\n      }\n    },\n  },\n});\n\nexport const {\n  requestBodyBinaryUpdated,\n  requestBodyFormDataItemAdded,\n  requestBodyFormDataItemDeleted,\n  requestBodyFormDataItemUpdated,\n  requestBodyModeUpdated,\n  requestBodyRawUpdated,\n  requestBodyRawFormatUpdated,\n  requestBodyRawLanguageUpdated,\n  requestBodyUrlEncodedItemAdded,\n  requestBodyUrlEncodedItemDeleted,\n  requestBodyUrlEncodedItemUpdated,\n  requestBodyGraphqlQueryUpdated,\n  requestBodyGraphqlVariablesUpdated,\n} = requestBodySlice.actions;\n\nexport const selectRequestBody = (state: RootState) => state.requestBody;\nexport const selectRequestBodyMode = (state: RootState) =>\n  state.requestBody.mode || \"none\";\nexport const selectRequestBodyRaw = (state: RootState) => state.requestBody.raw;\nexport const selectRequestBodyRawLanguage = (state: RootState) =>\n  state.requestBody.options.raw.language;\nexport const selectRequestBodyFile = (state: RootState) =>\n  state.requestBody.file;\nexport const selectRequestBodyFileData = (state: RootState) =>\n  state.requestBody.fileData;\nexport const selectRequestBodyFormData = (state: RootState) =>\n  state.requestBody.formdata;\nexport const selectRequestBodyUrlEncoded = (state: RootState) =>\n  state.requestBody.urlencoded;\nexport const selectRequestBodyGraphqlQuery = (state: RootState) =>\n  state.requestBody.graphql.query;\nexport const selectRequestBodyGraphqlVariables = (state: RootState) =>\n  state.requestBody.graphql.variables;\nexport const selectRequestBodyRawFormat = (state: RootState) =>\n  state.requestBody.format;\n\nexport default requestBodySlice.reducer;\n"
  },
  {
    "path": "webview/features/requestHeader/HeadersWindow/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { KeyValueTable } from \"../../../shared/KeyValueTable\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestHeaderAdded,\n  requestHeaderUpdated,\n  requestHeaderDeleted,\n  selectRequestHeaders,\n} from \"../requestHeaderSlice\";\n\nexport const Headers = () => {\n  const header = useAppSelector(selectRequestHeaders);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"headers-wrapper\">\n      <KeyValueTable\n        data={header}\n        onRowAdd={(value) => dispatch(requestHeaderAdded(value))}\n        onRowDelete={(idx) => dispatch(requestHeaderDeleted(idx))}\n        onRowUpdate={(idx, value) =>\n          dispatch(requestHeaderUpdated({ idx, value }))\n        }\n      />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestHeader/HeadersWindow/styles.css",
    "content": ".headers-wrapper {\n  margin-top: 15px;\n}\n"
  },
  {
    "path": "webview/features/requestHeader/requestHeaderSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\ninterface Header {\n  key: string;\n  value: string;\n  description: string;\n  disabled: boolean;\n}\n\nconst initialState: Header[] = [\n  {\n    key: \"Cache-Control\",\n    value: \"no-cache\",\n    description: \"\",\n    disabled: false,\n  },\n  {\n    key: \"Accept\",\n    value: \"*/*\",\n    description: \"\",\n    disabled: false,\n  },\n  {\n    key: \"Accept-Encoding\",\n    value: \"gzip, deflate\",\n    description: \"\",\n    disabled: false,\n  },\n  {\n    key: \"Connection\",\n    value: \"keep-alive\",\n    description: \"\",\n    disabled: false,\n  },\n];\n\nconst requestHeaderSlice = createSlice({\n  name: \"requestHeader\",\n  initialState,\n  reducers: {\n    requestHeaderUpdated(state, action: PayloadAction<any>) {\n      state[action.payload.idx] = action.payload.value;\n    },\n    requestHeaderAdded(state, action: PayloadAction<Header>) {\n      state.push(action.payload);\n    },\n    requestHeaderDeleted(state, action: PayloadAction<number>) {\n      state.splice(action.payload, 1);\n    },\n  },\n});\n\nexport const {\n  requestHeaderAdded,\n  requestHeaderUpdated,\n  requestHeaderDeleted,\n} = requestHeaderSlice.actions;\n\nexport const selectRequestHeaders = (state: RootState) => state.requestHeader;\n\nexport default requestHeaderSlice.reducer;\n"
  },
  {
    "path": "webview/features/requestMethod/RequestMethodSelector/index.tsx",
    "content": "import * as React from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestMethodUpdated,\n  selectRequestMethod,\n  requestMethods,\n} from \"../requestMethodSlice\";\nimport \"./styles.css\";\n\nexport const RequestMethodSelector = () => {\n  const requestMethod = useAppSelector(selectRequestMethod);\n  const dispatch = useAppDispatch();\n\n  return (\n    <select\n      className=\"request-method-selector\"\n      onChange={(e) => dispatch(requestMethodUpdated(e.target.value))}\n      value={requestMethod}\n    >\n      {requestMethods.map(({ value, name }) => (\n        <option value={value} key={value}>\n          {name}\n        </option>\n      ))}\n    </select>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestMethod/RequestMethodSelector/styles.css",
    "content": ".request-method-selector {\n  padding: 12px 20px;\n  display: inline-block;\n  font-weight: 600;\n  outline: none;\n  border: 0;\n  border-radius: 2px 0 0 2px;\n  background-color: var(--input-field);\n  color: var(--default-text);\n  cursor: pointer;\n  font-size: var(--default-font-size);\n}\n.request-method-selector:hover {\n  background-color: var(--input-field-hover);\n}\n.request-method-selector:focus {\n  outline: none;\n}\n"
  },
  {
    "path": "webview/features/requestMethod/requestMethodSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\nexport const requestMethods = [\n  { name: \"GET\", value: \"get\" },\n  { name: \"POST\", value: \"post\" },\n  { name: \"PUT\", value: \"put\" },\n  { name: \"PATCH\", value: \"patch\" },\n  { name: \"DELETE\", value: \"delete\" },\n  { name: \"OPTIONS\", value: \"options\" },\n  { name: \"HEAD\", value: \"head\" },\n];\n\nconst initialState = \"get\";\n\nconst requestMethodSlice = createSlice({\n  name: \"requestMethod\",\n  initialState,\n  reducers: {\n    requestMethodUpdated(state, action: PayloadAction<string>) {\n      return action.payload;\n    },\n  },\n});\n\nexport const { requestMethodUpdated } = requestMethodSlice.actions;\n\nexport const selectRequestMethod = (state: RootState) => state.requestMethod;\n\nexport default requestMethodSlice.reducer;\n"
  },
  {
    "path": "webview/features/requestOptions/RequestOptions/index.tsx",
    "content": "import * as React from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestOptionsUpdated,\n  selectRequestOptions,\n  requestOptionsList,\n} from \"../requestOptionsSlice\";\nimport \"./styles.css\";\n\nexport const RequestOptions = () => {\n  const requestOptions = useAppSelector(selectRequestOptions);\n  const dispatch = useDispatch();\n\n  return (\n    <div className=\"req-options-wrapper\">\n      <div className=\"options\">\n        {requestOptionsList.map(({ name, value, type, ...optionDetails }) => (\n          <React.Fragment key={`req-option-${value}`}>\n            <div className=\"req-option-label\">{`${name}: `}</div>\n            {\n              type === \"select\" ? (\n                <select\n                  onChange={(e) =>\n                    dispatch(\n                      requestOptionsUpdated({\n                        ...requestOptions,\n                        [value]: e.target.value,\n                      })\n                    )\n                  }\n                  defaultValue={optionDetails.default}\n                  className=\"req-option-switch\"\n                >\n                  {optionDetails.options.map(({ key, value }) => (\n                    <option key={key} value={value}>\n                      {value}\n                    </option>\n                  ))}\n                </select>\n              ) : null\n              // Note: Augment this switch later with different renderers for\n              // different types of options\n            }\n          </React.Fragment>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestOptions/RequestOptions/styles.css",
    "content": ".req-options-wrapper {\n    margin-top: 15px;\n}\n\n.options {\n    display: flex;\n    align-items: center;\n}\n\n.req-option-label {\n    font-size: var(--default-font-size);\n    color: var(--default-text);\n    padding-right: 12px;\n}\n\n.req-option-switch {\n    padding: 4px;\n    display: inline-block;\n    font-weight: 600;\n    outline: none;\n    border: var(--default-border-size) solid var(--border);\n    border-radius: 2px;\n    background-color: var(--background);\n    color: var(--default-text-light);\n    cursor: pointer;\n    font-size: var(--default-font-size);\n  }"
  },
  {
    "path": "webview/features/requestOptions/requestOptionsSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\nexport const requestOptionsList = [\n  {\n    name: \"Strict SSL\",\n    value: \"strictSSL\",\n    type: \"select\",\n    options: [\n      { key: \"yes\", value: \"Yes\" },\n      { key: \"no\", value: \"No\" },\n    ],\n    default: \"Yes\",\n  },\n];\n\nexport interface RequestOptions {\n  strictSSL: string;\n}\n\nconst initialState = {\n  strictSSL: \"yes\",\n};\n\nconst requestOptionsSlice = createSlice({\n  name: \"requestOptions\",\n  initialState,\n  reducers: {\n    requestOptionsUpdated(_, action: PayloadAction<RequestOptions>) {\n      return action.payload;\n    },\n  },\n});\n\nexport const { requestOptionsUpdated } = requestOptionsSlice.actions;\n\nexport const selectRequestOptions = (state: RootState) => state.requestOptions;\n\nexport default requestOptionsSlice.reducer;\n"
  },
  {
    "path": "webview/features/requestUrl/RequestQueryParams/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { KeyValueTable } from \"../../../shared/KeyValueTable\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport {\n  requestQueryParamAdded,\n  requestQueryParamDeleted,\n  requestQueryParamUpdated,\n  selectRequestQueryParams,\n} from \"../requestUrlSlice\";\n\nexport const RequestQueryParams = () => {\n  const queryParams = useAppSelector(selectRequestQueryParams);\n  const dispatch = useAppDispatch();\n\n  return (\n    <div className=\"params-wrapper\">\n      <KeyValueTable\n        data={queryParams}\n        onRowAdd={(value) => dispatch(requestQueryParamAdded(value))}\n        onRowDelete={(idx) => dispatch(requestQueryParamDeleted(idx))}\n        onRowUpdate={(idx, value) =>\n          dispatch(requestQueryParamUpdated({ idx, value }))\n        }\n      />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/requestUrl/RequestQueryParams/styles.css",
    "content": ".params-wrapper {\n  margin-top: 15px;\n}\n"
  },
  {
    "path": "webview/features/requestUrl/RequestUrl/index.tsx",
    "content": "import * as React from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../../redux/hooks\";\nimport { requestUrlUpdated, selectRequestUrl } from \"../requestUrlSlice\";\nimport \"./styles.css\";\n\nexport const RequestUrl = () => {\n  const requestUrl = useAppSelector(selectRequestUrl);\n  const dispatch = useAppDispatch();\n\n  return (\n    <input\n      placeholder=\"Enter request URL\"\n      className=\"input-request-url\"\n      value={requestUrl}\n      onChange={(e) => dispatch(requestUrlUpdated(e.target.value))}\n    />\n  );\n};\n"
  },
  {
    "path": "webview/features/requestUrl/RequestUrl/styles.css",
    "content": ".input-request-url {\n  flex: 2;\n  padding: 13px 20px;\n  color: var(--default-text);\n  display: inline-block;\n  outline: none;\n  border: 0;\n  border-radius: 0 2px 2px 0;\n  background-color: var(--input-field);\n  font-size: var(--default-font-size);\n}\n.input-request-url:focus {\n  outline: none;\n}\n.input-request-url:hover {\n  background-color: var(--input-field-hover);\n}\n"
  },
  {
    "path": "webview/features/requestUrl/requestUrlSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\nimport { Url } from \"postman-collection\";\n\ninterface QueryParam {\n  key: string;\n  value: string;\n  description: string;\n  disabled: boolean;\n}\n\ninterface Variable {\n  key: string;\n  value: string;\n  description: string;\n}\n\nexport interface RequestUrlState {\n  auth?: string;\n  hash?: string;\n  host?: string[];\n  path?: string[];\n  port?: string;\n  protocol?: string;\n  query: QueryParam[];\n  variables: Variable[];\n}\n\nconst initialState: RequestUrlState = {\n  query: [],\n  variables: [],\n};\n\nconst requestUrlSlice = createSlice({\n  name: \"requestUrl\",\n  initialState,\n  reducers: {\n    requestUrlUpdated(state, action: PayloadAction<string>) {\n      const { query, ...other } = Url.parse(action.payload);\n      return {\n        ...other,\n        query: [\n          ...state.query.filter(({ disabled }) => disabled),\n          ...(query || []),\n        ],\n      };\n    },\n    requestQueryParamAdded(state, action: PayloadAction<QueryParam>) {\n      state.query.push(action.payload);\n    },\n    requestQueryParamUpdated(state, action: PayloadAction<any>) {\n      state.query[action.payload.idx] = action.payload.value;\n    },\n    requestQueryParamDeleted(state, action: PayloadAction<number>) {\n      state.query.splice(action.payload, 1);\n    },\n    // requestUrlVariableUpdated(state, action: PayloadAction<Variable>) {},\n  },\n});\n\nexport const {\n  requestUrlUpdated,\n  requestQueryParamAdded,\n  requestQueryParamUpdated,\n  requestQueryParamDeleted,\n  // requestUrlVariableUpdated,\n} = requestUrlSlice.actions;\n\nexport const selectRequestUrl = (state: RootState) =>\n  new Url(state.requestUrl).toString();\nexport const selectRequestQueryParams = (state: RootState) =>\n  state.requestUrl.query;\nexport const selectRequestVariables = (state: RootState) =>\n  state.requestUrl.variables;\n\nexport default requestUrlSlice.reducer;\n"
  },
  {
    "path": "webview/features/response/ResponseBody/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport { useAppSelector } from \"../../../redux/hooks\";\nimport { selectResponse } from \"../responseSlice\";\nimport * as propTypes from \"prop-types\";\n\nconst Editor = React.lazy(() => import(\"../../../shared/Editor\"));\n\nexport const ResponseBody = (props) => {\n  const { language } = props;\n  const response = useAppSelector(selectResponse);\n\n  return (\n    <div className=\"response-window\">\n      <React.Suspense fallback={<div>loading</div>}>\n        <Editor\n          className=\"response-editor\"\n          value={response.data || \"\"}\n          language={language}\n          readOnly\n          copyButton\n          format\n        />\n      </React.Suspense>\n    </div>\n  );\n};\n\nResponseBody.propTypes = {\n  language: propTypes.string.isRequired,\n};\n"
  },
  {
    "path": "webview/features/response/ResponseBody/styles.css",
    "content": ".response-window {\n  height: 100%;\n}\n\n.response-editor {\n  height: 95%;\n}\n"
  },
  {
    "path": "webview/features/response/ResponseHeaders/index.tsx",
    "content": "import * as React from \"react\";\nimport { useAppSelector } from \"../../../redux/hooks\";\nimport { KeyValueTable } from \"../../../shared/KeyValueTable\";\nimport { selectResponseHeaders } from \"../responseSlice\";\nimport \"./styles.css\";\n\nexport const ResponseHeaders = () => {\n  const headers = useAppSelector(selectResponseHeaders);\n\n  return (\n    <div className=\"response-headers\">\n      <KeyValueTable data={headers} fixed />\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/features/response/ResponseHeaders/styles.css",
    "content": ".response-headers {\n  display: flex;\n height: 80%;\n}"
  },
  {
    "path": "webview/features/response/ResponseTab/index.tsx",
    "content": "import * as React from \"react\";\nimport \"./styles.css\";\nimport * as propTypes from \"prop-types\";\nimport { responseOptions } from \"../../../constants/response-options\";\nimport { supportedLangs } from \"../../../constants/supported-langs\";\nimport { useAppSelector } from \"../../../redux/hooks\";\nimport { selectResponse } from \"../responseSlice\";\n\nconst ResponseInfo = ({ responseTitle, info }) => {\n  return (\n    <>\n      <div>{responseTitle}</div>\n      <div className=\"text-response-info\">{info}</div>\n    </>\n  );\n};\n\nexport const ResponseTab = (props) => {\n  const { selected, setSelected, language, setLanguage } = props;\n  const response = useAppSelector(selectResponse);\n\n  return (\n    <div className=\"response-options-tab-wrapper\">\n      <div className=\"response-options\">\n        {responseOptions.map((option) => (\n          <button\n            key={option.value}\n            onClick={() => setSelected(option.value)}\n            className={\n              selected === option.value\n                ? \"response-option response-option-selected\"\n                : \"response-option\"\n            }\n          >\n            {option.name}\n          </button>\n        ))}\n        {selected === \"body\" ? (\n          <select\n            onChange={(e) => setLanguage(e.target.value)}\n            className=\"select-res-lang\"\n            value={language}\n          >\n            {supportedLangs.map((type) => (\n              <option key={type.value} value={type.value}>\n                {type.name}\n              </option>\n            ))}\n          </select>\n        ) : null}\n      </div>\n      <div className=\"response-status\">\n        <ResponseInfo\n          responseTitle=\"Status:\"\n          info={`${response.status} ${response.statusText}`}\n        />\n        <ResponseInfo\n          responseTitle=\"Duration:\"\n          info={`${response.duration} ms`}\n        />\n      </div>\n    </div>\n  );\n};\n\nResponseInfo.propTypes = {\n  responseTitle: propTypes.string.isRequired,\n  info: propTypes.string.isRequired,\n};\n\nResponseTab.propTypes = {\n  selected: propTypes.string.isRequired,\n  setSelected: propTypes.func.isRequired,\n  language: propTypes.string.isRequired,\n  setLanguage: propTypes.func.isRequired,\n};\n"
  },
  {
    "path": "webview/features/response/ResponseTab/styles.css",
    "content": ".response-options-tab-wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px 20px 5px 20px;\n}\n\n.response-options {\n  display: flex;\n}\n\n.response-option {\n  padding: 5px 5px 5px 0;\n  margin: 0 10px 0 0;\n  display: flex;\n  cursor: pointer;\n  background-color: transparent;\n  color: var(--default-text-light);\n  outline: none;\n  border: none;\n  border-radius: 0;\n  font-weight: 500;\n  font-size: var(--default-font-size);\n}\n.response-option:hover {\n  color: var(--default-text);\n}\n\n.response-option-selected {\n  color: var(--default-text);\n}\n\n.response-options-header-length {\n  margin-left: 4px;\n  color: var(--tab-info);\n}\n\n.response-status {\n  font-size: var(--default-font-size);\n  display: flex;\n  align-items: center;\n}\n\n.text-response-info {\n  color: var(--tab-info);\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.select-res-lang {\n  margin-left: 10px;\n  padding: 5px;\n  display: inline-block;\n  font-weight: 600;\n  outline: none;\n  border: var(--default-border-size) solid var(--border);\n  border-radius: 2px;\n  background-color: var(--background);\n  color: var(--default-text-light);\n  cursor: pointer;\n  font-size: var(--small-font-size);\n}\n.select-res-lang:hover {\n  color: var(--default-text);\n}\n.select-res-lang:focus {\n  outline: none;\n}"
  },
  {
    "path": "webview/features/response/ResponseWindow/index.tsx",
    "content": "import * as React from \"react\";\nimport * as propTypes from \"prop-types\";\nimport \"./styles.css\";\nimport { ResponseBody } from \"../ResponseBody\";\nimport { ResponseHeaders } from \"../ResponseHeaders\";\n\nexport const ResponseWindow = (props) => {\n  const { selected, language } = props;\n  return (\n    <div className=\"response-options-window-wrapper\">\n      {selected === \"body\" ? (\n        <ResponseBody language={language} />\n      ) : selected === \"headers\" ? (\n        <ResponseHeaders />\n      ) : null}\n    </div>\n  );\n};\n\nResponseWindow.propTypes = {\n  selected: propTypes.string.isRequired,\n  language: propTypes.string.isRequired,\n};\n"
  },
  {
    "path": "webview/features/response/ResponseWindow/styles.css",
    "content": ".response-options-window-wrapper {\n  flex: 1;\n  padding: 5px 20px 10px 20px;\n}\n"
  },
  {
    "path": "webview/features/response/responseSlice.ts",
    "content": "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../../redux/store\";\n\nexport interface ResponseState {\n  status?: number;\n  statusText?: string;\n  data?: string;\n  initial: boolean;\n  error?: Error;\n  loading?: boolean;\n  headers?: { key: string; value: string }[];\n  duration?: number;\n}\n\nconst initialState: ResponseState = { initial: true };\n\nconst responseSlice = createSlice({\n  name: \"response\",\n  initialState,\n  reducers: {\n    responseUpdated(state, action: PayloadAction<any>) {\n      return {\n        ...action.payload,\n        headers:\n          action.payload.headers &&\n          Object.entries(action.payload.headers).map(([key, value]) => ({\n            key,\n            value,\n          })),\n        initial: false,\n        loading: false,\n      };\n    },\n    responseLoadingStarted(state) {\n      state.loading = true;\n    },\n  },\n});\n\nexport const { responseUpdated, responseLoadingStarted } =\n  responseSlice.actions;\n\nexport const selectResponse = (state: RootState) => state.response;\nexport const selectResponseHeaders = (state: RootState) =>\n  state.response.headers;\n\nexport default responseSlice.reducer;\n"
  },
  {
    "path": "webview/index.css",
    "content": "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  --primary: var(--vscode-button-hoverBackground);\n  --primary-dark: var(--vscode-button-background);\n  --background: var(--vscode-editor-background);\n  --input-field: var(--vscode-input-background);\n  --input-field-focus: var(--vscode-input-background);\n  --input-field-hover: var(--vscode-input-background);\n  --input-field-unchecked: #808080;\n  --default-text: var(--vscode-foreground);\n  --default-text-light: var(--vscode-descriptionForeground);\n  --border: var(--vscode-tree-tableColumnsBorder);\n  --send-button: var(--vscode-button-background);\n  --send-button-hover: var(--vscode-button-hoverBackground);\n  --tab-info: #259c47;\n  --logo-color: var(--vscode-tree-tableColumnsBorder);\n  --error-message: var(--vscode-errorForeground);\n  --default-font-size: var(--vscode-editor-font-size);\n  --small-font-size: width: calc(var(--vscode-editor-font-size) * 0.727);;\n  --default-border-size: 0.1px;\n}\n\nhtml,\nbody,\n#root,\n.App {\n  height: 100%;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n"
  },
  {
    "path": "webview/index.tsx",
    "content": "import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport { store } from \"./redux/store\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.hydrate(\n  <Provider store={store}>\n    <App />\n  </Provider>,\n  document.getElementById(\"root\")\n);\n"
  },
  {
    "path": "webview/pages/Postcode/index.tsx",
    "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport \"./styles.css\";\nimport { RequestBar } from \"../../components/RequestBar\";\nimport { RequestOptionsTab } from \"../../components/RequestOptionsBar\";\nimport { RequestOptionsWindow } from \"../../components/RequestOptionsWindow\";\nimport { Response } from \"../../components/Response\";\nimport { requestOptions } from \"../../constants/request-options\";\n\nexport const Postcode = () => {\n  const [selectedOption, setSelectedOption] = React.useState(\n    requestOptions[0].value\n  );\n\n  return (\n    <div className=\"request-wrapper\">\n      <RequestBar />\n      <div className=\"request-options-wrapper\">\n        <RequestOptionsTab\n          selected={selectedOption}\n          setSelected={setSelectedOption}\n        />\n        <RequestOptionsWindow selected={selectedOption} />\n      </div>\n      <div className=\"response-wrapper\">\n        <Response />\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "webview/pages/Postcode/styles.css",
    "content": ".request-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: inherit;\n}\n\n.request-options-wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 50%;\n}\n\n.response-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 50%;\n}\n"
  },
  {
    "path": "webview/prerender.tsx",
    "content": "import { Provider } from \"react-redux\";\nimport * as React from \"react\";\nimport { renderToString } from \"react-dom/server\";\nimport App from \"./App\";\nimport { store } from \"./redux/store\";\n\nexport default () => {\n  const html = renderToString(\n    <Provider store={store}>\n      <App />\n    </Provider>\n  );\n\n  const preloadedState = store.getState();\n\n  return `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <link href=\"styleUri\" rel=\"stylesheet\" type=\"text/css\"/>\n      </head>\n      <body>\n        <noscript>You need to enable JavaScript to run this app.</noscript>\n        <div id=\"root\">${html}</div>\n        <script>\n          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(\n            /</g,\n            \"\\\\u003c\"\n          )}\n        </script>\n    \t\t<script src=\"scriptUri\"></script>\n      </body>\n    </html>\n  `;\n};\n"
  },
  {
    "path": "webview/react-app-env.d.ts",
    "content": "/// <reference types=\"node\" />\n/// <reference types=\"react\" />\n/// <reference types=\"react-dom\" />\n\ndeclare namespace NodeJS {\n  interface ProcessEnv {\n    readonly NODE_ENV: \"development\" | \"production\" | \"test\";\n    readonly PUBLIC_URL: string;\n  }\n}\n\ndeclare module \"*.avif\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.bmp\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.gif\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.jpg\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.jpeg\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.png\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.webp\" {\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.svg\" {\n  import * as React from \"react\";\n\n  export const ReactComponent: React.FunctionComponent<\n    React.SVGProps<SVGSVGElement> & { title?: string }\n  >;\n\n  const src: string;\n  export default src;\n}\n\ndeclare module \"*.module.css\" {\n  const classes: { readonly [key: string]: string };\n  export default classes;\n}\n\ndeclare module \"*.module.scss\" {\n  const classes: { readonly [key: string]: string };\n  export default classes;\n}\n\ndeclare module \"*.module.sass\" {\n  const classes: { readonly [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "webview/redux/hooks.ts",
    "content": "import { TypedUseSelectorHook, useDispatch, useSelector } from \"react-redux\";\nimport type { RootState, AppDispatch } from \"./store\";\n\n// Use throughout your app instead of plain `useDispatch` and `useSelector`\nexport const useAppDispatch = () => useDispatch<AppDispatch>();\nexport const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;\n"
  },
  {
    "path": "webview/redux/store.ts",
    "content": "import { configureStore, ThunkAction, Action } from \"@reduxjs/toolkit\";\nimport requestAuthReducer from \"../features/requestAuth/requestAuthSlice\";\nimport requestBodyReducer from \"../features/requestBody/requestBodySlice\";\nimport requestHeaderReducer from \"../features/requestHeader/requestHeaderSlice\";\nimport requestMethodReducer from \"../features/requestMethod/requestMethodSlice\";\nimport requestUrlReducer from \"../features/requestUrl/requestUrlSlice\";\nimport responseReducer from \"../features/response/responseSlice\";\nimport codeGenOptionsReducer from \"../features/codeGen/codeGenSlice\";\nimport requestOptionsReducer from \"../features/requestOptions/requestOptionsSlice\";\n\nlet preloadedState;\nif (typeof window !== \"undefined\") {\n  preloadedState = (window as any).__PRELOADED_STATE__;\n  delete (window as any).__PRELOADED_STATE__;\n}\n\nexport const store = configureStore({\n  reducer: {\n    requestAuth: requestAuthReducer,\n    requestBody: requestBodyReducer,\n    requestHeader: requestHeaderReducer,\n    requestMethod: requestMethodReducer,\n    requestUrl: requestUrlReducer,\n    response: responseReducer,\n    codeGenOptions: codeGenOptionsReducer,\n    requestOptions: requestOptionsReducer,\n  },\n  preloadedState,\n});\n\nexport type AppDispatch = typeof store.dispatch;\nexport type RootState = ReturnType<typeof store.getState>;\nexport type AppThunk<ReturnType = void> = ThunkAction<\n  ReturnType,\n  RootState,\n  unknown,\n  Action<string>\n>;\n"
  },
  {
    "path": "webview/shared/Editor/index.tsx",
    "content": "import * as React from \"react\";\nimport * as monaco from \"monaco-editor\";\nimport * as propTypes from \"prop-types\";\nimport \"./styles.css\";\nimport { useAppDispatch } from \"../../redux/hooks\";\nimport { requestBodyRawFormatUpdated } from \"../../features/requestBody/requestBodySlice\";\n\nconst Editor = (props) => {\n  const { value, language, onChange, readOnly, className, copyButton, format } =\n    props;\n\n  const divEl = React.useRef<HTMLDivElement>(null);\n  const [editor, setEditor] = React.useState(undefined);\n  const [copy, setCopy] = React.useState(\"Copy\");\n  const dispatch = useAppDispatch();\n\n  React.useEffect(() => {\n    if (divEl.current) {\n      const tmpEditor = monaco.editor.create(divEl.current, {\n        minimap: { enabled: false },\n        scrollBeyondLastLine: false,\n        theme: \"vs-dark\",\n        value,\n        language,\n        readOnly,\n      });\n\n      window.addEventListener(\"resize\", () => {\n        tmpEditor.layout();\n      });\n\n      if (onChange) {\n        tmpEditor.onDidChangeModelContent(() => {\n          onChange(tmpEditor.getValue());\n        });\n      }\n\n      setEditor(tmpEditor);\n\n      return () => {\n        tmpEditor.dispose();\n      };\n    }\n  }, []);\n\n  React.useEffect(() => {\n    if (editor) {\n      if (editor.getValue() !== value) {\n        editor.setValue(value);\n      }\n\n      const model = editor.getModel();\n      monaco.editor.setModelLanguage(model, language);\n      if (format) {\n        editor.updateOptions({ readOnly: false });\n        setTimeout(() => {\n          editor\n            .getAction(\"editor.action.formatDocument\")\n            .run()\n            .then(() => {\n              editor.updateOptions({ readOnly });\n              dispatch(requestBodyRawFormatUpdated(false));\n            });\n        }, 300);\n      }\n    }\n  }, [value, language, editor, format]);\n\n  return (\n    <div className={`${className} postcode-editor`} ref={divEl}>\n      {copyButton && (\n        <button\n          onClick={() => {\n            navigator.clipboard.writeText(value).then(() => {\n              setCopy(\"Copied\");\n              setTimeout(() => setCopy(\"Copy\"), 1000);\n            });\n          }}\n          className=\"copy-button\"\n        >\n          {copy}\n        </button>\n      )}\n    </div>\n  );\n};\n\nEditor.propTypes = {\n  value: propTypes.string.isRequired,\n  language: propTypes.string.isRequired,\n  onChange: propTypes.func,\n  className: propTypes.string,\n  readOnly: propTypes.bool,\n  copyButton: propTypes.bool,\n  format: propTypes.bool,\n};\n\nexport default Editor;\n"
  },
  {
    "path": "webview/shared/Editor/styles.css",
    "content": ".monaco-editor {\n  border: var(--default-border-size) solid var(--border);\n}\n\n.postcode-editor {\n  position: relative;\n}\n\n.copy-button {\n  font-size: var(--default-font-size);\n  background-color: rgb(51, 51, 51);\n  border: none;\n  color: #fff;\n  border-radius: 0.4rem;\n  cursor: pointer;\n  outline: none;\n  padding: 0.4rem 0.5rem;\n  position: absolute;\n  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n  z-index: 10;\n  right: 0.5rem;\n  top: 0.5rem;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.postcode-editor:hover .copy-button {\n  opacity: 1;\n  visibility: visible;\n}\n"
  },
  {
    "path": "webview/shared/KeyValueTable/index.tsx",
    "content": "import * as React from \"react\";\nimport * as propTypes from \"prop-types\";\nimport { FaTrashAlt } from \"react-icons/fa\";\nimport \"./styles.css\";\n\nexport const KeyValueRow = (props) => {\n  const {\n    itemKey,\n    itemValue,\n    itemDescription,\n    itemDisabled,\n    actions,\n    onDelete,\n    onChange,\n    fixed,\n  } = props;\n\n  return (\n    <tr className={itemDisabled ? \"kv-disabled\" : null}>\n      {!fixed && (\n        <td className=\"kv-action-cell\">\n          {actions && (\n            <input\n              type=\"checkbox\"\n              checked={!itemDisabled}\n              onChange={(e) =>\n                onChange({\n                  key: itemKey,\n                  value: itemValue,\n                  description: itemDescription,\n                  disabled: !e.target.checked,\n                })\n              }\n            />\n          )}\n        </td>\n      )}\n      <td>\n        <input\n          className=\"kv-input\"\n          placeholder=\"Key\"\n          value={itemKey}\n          disabled={fixed}\n          onChange={(e) =>\n            onChange({\n              key: e.target.value,\n              value: itemValue,\n              description: itemDescription,\n              disabled: itemDisabled,\n            })\n          }\n        />\n      </td>\n      <td>\n        <input\n          className=\"kv-input\"\n          placeholder=\"Value\"\n          value={itemValue}\n          disabled={fixed}\n          onChange={(e) =>\n            onChange({\n              key: itemKey,\n              value: e.target.value,\n              description: itemDescription,\n              disabled: itemDisabled,\n            })\n          }\n        />\n      </td>\n      {!fixed && (\n        <td>\n          <input\n            className=\"kv-input\"\n            placeholder=\"Description\"\n            value={itemDescription}\n            disabled={fixed}\n            onChange={(e) =>\n              onChange({\n                key: itemKey,\n                value: itemValue,\n                description: e.target.value,\n                disabled: itemDisabled,\n              })\n            }\n          />\n        </td>\n      )}\n      {!fixed && (\n        <td className=\"kv-action-cell\">\n          {actions && (\n            <FaTrashAlt className=\"kv-delete-button\" onClick={onDelete} />\n          )}\n        </td>\n      )}\n    </tr>\n  );\n};\n\nexport const KeyValueTable = (props) => {\n  const { data, fixed, onRowUpdate, onRowAdd, onRowDelete } = props;\n\n  return (\n    <table className=\"kv-table\">\n      <thead>\n        <tr>\n          {!fixed && <th></th>}\n          <th className=\"kv-heading-cell\">KEY</th>\n          <th className=\"kv-heading-cell\">VALUE</th>\n          {!fixed && <th className=\"kv-heading-cell\">DESCRIPTION</th>}\n          {!fixed && <th></th>}\n        </tr>\n      </thead>\n      <tbody>\n        {(fixed ? data : [...data, {}]).map(\n          ({ key, value, description, disabled }, idx) => (\n            <KeyValueRow\n              fixed={fixed}\n              itemKey={key || \"\"}\n              itemValue={value || \"\"}\n              itemDescription={description || \"\"}\n              itemDisabled={disabled || false}\n              onDelete={() => onRowDelete(idx)}\n              onChange={(item) =>\n                idx === data.length ? onRowAdd(item) : onRowUpdate(idx, item)\n              }\n              key={idx}\n              actions={idx !== data.length}\n            />\n          )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nKeyValueTable.propTypes = {\n  data: propTypes.array.isRequired,\n  fixed: propTypes.bool,\n  onRowDelete: propTypes.func,\n  onRowAdd: propTypes.func,\n  onRowUpdate: propTypes.func,\n};\n\nKeyValueRow.propTypes = {\n  fixed: propTypes.bool,\n  itemKey: propTypes.string.isRequired,\n  itemValue: propTypes.string.isRequired,\n  itemDescription: propTypes.string.isRequired,\n  itemDisabled: propTypes.bool.isRequired,\n  actions: propTypes.bool.isRequired,\n  onChange: propTypes.func.isRequired,\n  onDelete: propTypes.func.isRequired,\n};\n"
  },
  {
    "path": "webview/shared/KeyValueTable/styles.css",
    "content": ".kv-table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.kv-table,\ntd,\nth {\n  border: var(--default-border-size) solid var(--border);\n}\n\nth,\n.kv-input {\n  color: var(--default-text);\n  padding: 10px 12px;\n}\n\nth {\n  text-align: left;\n  font-weight: 700;\n  font-size: var(--small-font-size);\n}\n\n.kv-action-cell {\n  text-align: center;\n  width: 30px;\n}\n\n.kv-input {\n  box-sizing: border-box;\n  width: 100%;\n  border: 0;\n  background-color: transparent;\n  font-size: var(--default-font-size);\n}\n\n.kv-input:focus {\n  outline: none;\n}\n\n.kv-disabled .kv-input {\n  color: var(--input-field-unchecked);\n}\n\n.kv-delete-button {\n  cursor: pointer;\n}\n"
  },
  {
    "path": "webview/vscode.ts",
    "content": "let vscode;\nif (typeof acquireVsCodeApi !== \"undefined\") {\n  vscode = acquireVsCodeApi();\n}\n\nexport default vscode;\n"
  }
]