Auto import components

2020-08-17 18:29:14 +05:30
parent e68ad7331f
commit e86a17980b
40 changed files with 45 additions and 227 deletions
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
  </p>
  <p>

-[![Travis Build Status](https://img.shields.io/travis/com/hoppscotch/hoppscotch/master?logo=Travis)](https://travis-ci.com/hoppscotch/hoppscotch) [![GitHub release](https://img.shields.io/github/release/hoppscotch/hoppscotch/all?logo=GitHub)](https://github.com/hoppscotch/hoppscotch/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=postwoman)](https://hoppscotch.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/hoppscotch?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/hoppscotch) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/hoppscotch_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fhoppscotch.io&text=%F0%9F%91%BD%20hoppscotch%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520hoppscotch%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fhoppscotch.io%26hashtags%3Dhoppscotch%26via%3Dliyasthomas&via=liyasthomas&hashtags=hoppscotch)
+[![Travis Build Status](https://img.shields.io/travis/com/hoppscotch/hoppscotch/master?logo=Travis)](https://travis-ci.com/hoppscotch/hoppscotch) [![GitHub release](https://img.shields.io/github/release/hoppscotch/hoppscotch/all?logo=GitHub)](https://github.com/hoppscotch/hoppscotch/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=postwoman)](https://hoppscotch.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/hoppscotch?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/hoppscotch) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/hoppscotch) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fhoppscotch.io&text=%F0%9F%91%BD%20hoppscotch%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520hoppscotch%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fhoppscotch.io%26hashtags%3Dhoppscotch%26via%3Dliyasthomas&via=liyasthomas&hashtags=hoppscotch)

  </p>
  <p>
--- a/components/collections/add-collection.vue
+++ b/components/collections/add-collection.vue
@@ -49,9 +49,6 @@ export default {
  props: {
    show: Boolean,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -51,9 +51,6 @@ export default {
    collection: Object,
    collectionIndex: Number,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -100,10 +100,6 @@ ul li {
 import { fb } from "~/helpers/fb"

 export default {
-  components: {
-    folder: () => import("./folder"),
-    request: () => import("./request"),
-  },
  props: {
    collectionIndex: Number,
    collection: Object,
@@ -127,11 +123,11 @@ export default {
      this.showChildren = !this.showChildren
    },
    removeCollection() {
-      if (!confirm( this.$t("are_you_sure_remove_collection") )) return
+      if (!confirm(this.$t("are_you_sure_remove_collection"))) return
      this.$store.commit("postwoman/removeCollection", {
        collectionIndex: this.collectionIndex,
      })
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
        icon: "delete",
      })
      this.syncCollections()
--- a/components/collections/edit-collection.vue
+++ b/components/collections/edit-collection.vue
@@ -51,9 +51,6 @@ export default {
    editingCollection: Object,
    editingCollectionIndex: Number,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/collections/edit-folder.vue
+++ b/components/collections/edit-folder.vue
@@ -48,9 +48,6 @@ export default {
    folder: Object,
    folderIndex: Number,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/collections/edit-request.vue
+++ b/components/collections/edit-request.vue
@@ -79,9 +79,6 @@ export default {
    request: Object,
    requestIndex: Number,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      requestUpdateData: {
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -80,9 +80,6 @@ export default {
    folderIndex: Number,
    doc: Boolean,
  },
-  components: {
-    request: () => import("./request"),
-  },
  data() {
    return {
      showChildren: false,
@@ -103,13 +100,13 @@ export default {
      this.$store.commit("postwoman/selectRequest", { request })
    },
    removeFolder() {
-      if (!confirm( this.$t("are_you_sure_remove_folder"))) return
+      if (!confirm(this.$t("are_you_sure_remove_folder"))) return
      this.$store.commit("postwoman/removeFolder", {
        collectionIndex: this.collectionIndex,
        folderIndex: this.folderIndex,
      })
      this.syncCollections()
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
        icon: "delete",
      })
    },
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -87,9 +87,6 @@ export default {
  props: {
    show: Boolean,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  computed: {
    collectionJson() {
      return JSON.stringify(this.$store.state.postwoman.collections, null, 2)
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -5,20 +5,20 @@ TODO:

 <template>
  <pw-section class="yellow" :label="$t('collections')" ref="collections">
-    <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <editCollection
+    <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <edit-collection
      :show="showModalEdit"
      :editingCollection="editingCollection"
      :editingCollectionIndex="editingCollectionIndex"
      @hide-modal="displayModalEdit(false)"
    />
-    <addFolder
+    <add-folder
      :show="showModalAddFolder"
      :collection="editingCollection"
      :collectionIndex="editingCollectionIndex"
      @hide-modal="displayModalAddFolder(false)"
    />
-    <editFolder
+    <edit-folder
      :show="showModalEditFolder"
      :collection="editingCollection"
      :collectionIndex="editingCollectionIndex"
@@ -26,7 +26,7 @@ TODO:
      :folderIndex="editingFolderIndex"
      @hide-modal="displayModalEditFolder(false)"
    />
-    <editRequest
+    <edit-request
      :show="showModalEditRequest"
      :collectionIndex="editingCollectionIndex"
      :folderIndex="editingFolderIndex"
@@ -34,7 +34,7 @@ TODO:
      :requestIndex="editingRequestIndex"
      @hide-modal="displayModalEditRequest(false)"
    />
-    <importExportCollections
+    <import-export-collections
      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
@@ -95,20 +95,9 @@ ul {
 </style>

 <script>
-import collection from "./collection"
 import { fb } from "~/helpers/fb"

 export default {
-  components: {
-    collection,
-    "pw-section": () => import("../layout/section"),
-    addCollection: () => import("./addCollection"),
-    addFolder: () => import("./addFolder"),
-    editCollection: () => import("./editCollection"),
-    editFolder: () => import("./editFolder"),
-    editRequest: () => import("./editRequest"),
-    importExportCollections: () => import("./importExportCollections"),
-  },
  props: {
    doc: Boolean,
  },
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -85,9 +85,6 @@ export default {
    show: Boolean,
    editingRequest: Object,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      defaultRequestName: "My Request",
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -49,9 +49,6 @@ export default {
  props: {
    show: Boolean,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -114,9 +114,6 @@ export default {
    editingEnvironment: Object,
    editingEnvironmentIndex: Number,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  data() {
    return {
      name: undefined,
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -87,9 +87,6 @@ export default {
  props: {
    show: Boolean,
  },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
  computed: {
    environmentJson() {
      return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,13 +1,13 @@
 <template>
  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
-    <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <editEnvironment
+    <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <edit-environment
      :show="showModalEdit"
      :editingEnvironment="editingEnvironment"
      :editingEnvironmentIndex="editingEnvironmentIndex"
      @hide-modal="displayModalEdit(false)"
    />
-    <importExportEnvironment
+    <import-export-environment
      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
@@ -54,17 +54,9 @@ ul {
 </style>

 <script>
-import environment from "./environment"
 import { fb } from "~/helpers/fb"

 export default {
-  components: {
-    environment,
-    "pw-section": () => import("../layout/section"),
-    addEnvironment: () => import("./addEnvironment"),
-    editEnvironment: () => import("./editEnvironment"),
-    importExportEnvironment: () => import("./importExportEnvironment"),
-  },
  data() {
    return {
      showModalImportExport: false,
--- a/components/graphql/argument.vue
+++ b/components/graphql/argument.vue
@@ -11,13 +11,7 @@
 <style scoped lang="scss"></style>

 <script>
-import typelink from "./typelink"
-
 export default {
-  components: {
-    typelink: typelink,
-  },
-
  props: {
    gqlArg: Object,
  },
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -50,13 +50,7 @@
 </style>

 <script>
-import typelink from "./typelink"
-
 export default {
-  components: {
-    typelink: typelink,
-  },
-
  props: {
    gqlField: Object,
    jumpTypeCallback: Function,
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -8,7 +8,7 @@
    <div v-if="gqlType.getFields">
      <h5>{{ $t("fields") }}</h5>
      <div v-for="field in gqlType.getFields()" :key="field.name">
-        <gql-field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
+        <field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
      </div>
    </div>
  </div>
@@ -32,10 +32,6 @@

 <script>
 export default {
-  components: {
-    "gql-field": () => import("./field"),
-  },
-
  props: {
    gqlType: {},
    jumpTypeCallback: Function,
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -313,9 +313,6 @@ const updateOnLocalStorage = (propertyName, property) =>
  window.localStorage.setItem(propertyName, JSON.stringify(property))

 export default {
-  components: {
-    "pw-section": () => import("../layout/section"),
-  },
  data() {
    return {
      history:
--- a/components/layout/pw-footer.vue
+++ b/components/layout/pw-footer.vue
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -271,13 +271,6 @@ import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"

 export default {
-  components: {
-    modal: () => import("../ui/modal"),
-    login: () => import("../firebase/login"),
-    logout: () => import("../firebase/logout"),
-    contributors: () => import("./contributors"),
-  },
-
  data() {
    return {
      // Once the PWA code is initialized, this holds a method
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -307,10 +307,6 @@ nav.secondary-nav {

 <script>
 export default {
-  components: {
-    logo: () => import("./logo"),
-  },
-
  methods: {
    linkActive(path) {
      return {
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -50,7 +50,7 @@
        </div>
      </div>
      <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
          :value="responseBodyText"
          :lang="'html'"
          :options="{
@@ -74,13 +74,9 @@
  </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"

 export default {
-  components: {
-    Editor: AceEditor,
-  },
  mixins: [TextContentRendererMixin],
  props: {
    response: {},
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -41,7 +41,7 @@
        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
      </div>
      <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
          :value="jsonBodyText"
          :lang="'json'"
          :options="{
@@ -60,14 +60,10 @@
 </template>

 <script>
-import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"

 export default {
-  components: {
-    Editor: AceEditor,
-  },
  mixins: [TextContentRendererMixin],
  props: {
    response: {},
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -38,7 +38,7 @@
        </div>
      </div>
      <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
          :value="responseBodyText"
          :lang="'plain_text'"
          :options="{
@@ -56,14 +56,10 @@
  </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"

 export default {
-  components: {
-    Editor: AceEditor,
-  },
  mixins: [TextContentRendererMixin],
  props: {
    response: {},
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -38,7 +38,7 @@
        </div>
      </div>
      <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
          :value="responseBodyText"
          :lang="'xml'"
          :options="{
@@ -56,13 +56,9 @@
  </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"

 export default {
-  components: {
-    Editor: AceEditor,
-  },
  mixins: [TextContentRendererMixin],
  props: {
    response: {},
--- a/components/lenses/response-body-renderer.vue
+++ b/components/lenses/response-body-renderer.vue
@@ -26,9 +26,6 @@ import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"

 export default {
  components: {
-    tabs: () => import("../ui/tabs"),
-    tab: () => import("../ui/tab"),
-    headers: () => import("./headers"),
    // Lens Renderers
    ...getLensRenderers(),
  },
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -23,7 +23,7 @@
    <pw-section class="blue" :label="$t('communication')">
      <ul>
        <li>
-          <realtime-log :title="$t('log')" :log="this.log" />
+          <log :title="$t('log')" :log="this.log" />
        </li>
      </ul>
      <ul>
@@ -73,10 +73,6 @@ import Paho from "paho-mqtt"
 import { wsValid } from "~/helpers/utils/valid"

 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    realtimeLog: () => import("./log"),
-  },
  data: function () {
    return {
      url: "wss://test.mosquitto.org:8081",
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -32,7 +32,7 @@
    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
      <ul>
        <li>
-          <realtime-log :title="$t('log')" :log="communication.log" />
+          <log :title="$t('log')" :log="communication.log" />
        </li>
      </ul>
      <ul>
@@ -81,10 +81,6 @@ import io from "socket.io-client"
 import wildcard from "socketio-wildcard"

 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    realtimeLog: () => import("./log"),
-  },
  data() {
    return {
      url: "ws://",
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -31,7 +31,7 @@
    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
      <ul>
        <li>
-          <realtime-log :title="$t('events')" :log="events.log" />
+          <log :title="$t('events')" :log="events.log" />
          <div id="result"></div>
        </li>
      </ul>
@@ -43,10 +43,6 @@
 import { httpValid } from "~/helpers/utils/valid"

 export default {
-  components: {
-    "pw-section": () => import("../layout/section"),
-    realtimeLog: () => import("./log"),
-  },
  data() {
    return {
      connectionSSEState: false,
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -32,7 +32,7 @@
    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
      <ul>
        <li>
-          <realtime-log :title="$t('log')" :log="communication.log" />
+          <log :title="$t('log')" :log="communication.log" />
        </li>
      </ul>
      <ul>
@@ -69,10 +69,6 @@
 import { wsValid } from "~/helpers/utils/valid"

 export default {
-  components: {
-    "pw-section": () => import("../layout/section"),
-    realtimeLog: () => import("./log"),
-  },
  data() {
    return {
      connectionState: false,
--- a/components/ui/pw-toggle.vue
+++ b/components/ui/pw-toggle.vue
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,12 +15,6 @@

 <script>
 export default {
-  components: {
-    sidenav: () => import("~/components/layout/sidenav"),
-    "pw-header": () => import("~/components/layout/header"),
-    "pw-footer": () => import("~/components/layout/footer"),
-  },
-
  beforeMount() {
    // Load theme settings
    ;(() => {
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -20,6 +20,7 @@ export const options = {
 }
 export default {
  mode: "spa",
+  target: "static",
  /*
   ** Headers of the page
   */
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -43,7 +43,7 @@
          </ul>
          <ul>
            <li>
-              <Editor
+              <ace-editor
                v-model="collectionJSON"
                :lang="'json'"
                :lint="false"
@@ -326,14 +326,7 @@
 </style>

 <script>
-import AceEditor from "~/components/ui/ace-editor"
-
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    Editor: AceEditor,
-    collections: () => import("~/components/collections"),
-  },
  data() {
    return {
      collectionJSON: "[]",
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -126,7 +126,7 @@
              </button>
            </div>
          </div>
-          <Editor
+          <ace-editor
            v-if="schema"
            :value="schema"
            :lang="'graphqlschema'"
@@ -179,7 +179,7 @@
              </button>
            </div>
          </div>
-          <QueryEditor
+          <queryeditor
            ref="queryEditor"
            v-model="gqlQueryString"
            :onRunGQLQuery="runQuery"
@@ -195,7 +195,7 @@
        </pw-section>

        <pw-section class="yellow" label="Variables" ref="variables">
-          <Editor
+          <ace-editor
            v-model="variableString"
            :lang="'json'"
            :options="{
@@ -233,7 +233,7 @@
              </button>
            </div>
          </div>
-          <Editor
+          <ace-editor
            v-if="response"
            :value="response"
            :lang="'json'"
@@ -272,13 +272,13 @@
                  :selected="true"
                >
                  <div v-for="field in queryFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                  </div>
                </tab>

                <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
                  <div v-for="field in mutationFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                  </div>
                </tab>

@@ -288,13 +288,13 @@
                  :label="$t('subscriptions')"
                >
                  <div v-for="field in subscriptionFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                  </div>
                </tab>

                <tab v-if="gqlTypes.length > 0" :id="'types'" :label="$t('types')" ref="typesTab">
                  <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
-                    <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
+                    <type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
                  </div>
                </tab>
              </div>
@@ -332,22 +332,10 @@
 import axios from "axios"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
-import AceEditor from "~/components/ui/ace-editor"
-import QueryEditor from "~/components/graphql/queryeditor"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"

 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    "gql-field": () => import("~/components/graphql/field"),
-    "gql-type": () => import("~/components/graphql/type"),
-    autocomplete: () => import("~/components/ui/autocomplete"),
-    Editor: AceEditor,
-    QueryEditor: QueryEditor,
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-  },
  data() {
    return {
      commonHeaders,
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -346,7 +346,7 @@
                      </button>
                    </div>
                  </div>
-                  <Editor
+                  <ace-editor
                    v-model="rawParams"
                    :lang="rawInputEditorLang"
                    :options="{
@@ -821,7 +821,7 @@
                        </a>
                      </div>
                    </div>
-                    <JSEditor
+                    <js-editor
                      v-model="preRequestScript"
                      :options="{
                        maxLines: '16',
@@ -866,7 +866,7 @@
                        </a>
                      </div>
                    </div>
-                    <JSEditor
+                    <js-editor
                      v-model="testScript"
                      :options="{
                        maxLines: '16',
@@ -931,7 +931,7 @@
            </li>
          </ul>
          <div v-if="response.body && response.body !== $t('loading')">
-            <response-renderer :response="response" />
+            <response-body-renderer :response="response" />
          </div>
        </pw-section>
      </div>
@@ -979,7 +979,7 @@
        :editing-request="editRequest"
      />

-      <pw-modal v-if="showModal" @close="showModal = false">
+      <modal v-if="showModal" @close="showModal = false">
        <div slot="header">
          <ul>
            <li>
@@ -1019,9 +1019,9 @@
            </span>
          </div>
        </div>
-      </pw-modal>
+      </modal>

-      <pw-modal v-if="!isHidden" @close="isHidden = true">
+      <modal v-if="!isHidden" @close="isHidden = true">
        <div slot="header">
          <ul>
            <li>
@@ -1076,9 +1076,9 @@
          </ul>
        </div>
        <div slot="footer"></div>
-      </pw-modal>
+      </modal>

-      <pw-modal v-if="showTokenList" @close="showTokenList = false">
+      <modal v-if="showTokenList" @close="showTokenList = false">
        <div slot="header">
          <ul>
            <li>
@@ -1152,9 +1152,9 @@
          </p>
        </div>
        <div slot="footer"></div>
-      </pw-modal>
+      </modal>

-      <pw-modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
+      <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
        <div slot="header">
          <ul>
            <li>
@@ -1237,13 +1237,12 @@
            </span>
          </div>
        </div>
-      </pw-modal>
+      </modal>
    </div>
  </div>
 </template>

 <script>
-import section from "~/components/layout/section"
 import url from "url"
 import querystring from "querystring"
 import { commonHeaders } from "~/helpers/headers"
@@ -1251,8 +1250,6 @@ import parseCurlCommand from "~/assets/js/curlparser.js"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
-import AceEditor from "~/components/ui/ace-editor"
-import JSEditor from "~/components/ui/js-editor"
 import { tokenRequest, oauthRedirect } from "~/assets/js/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
 import { fb } from "~/helpers/fb"
@@ -1312,24 +1309,6 @@ const parseHeaders = (xhr) => {
 export const findStatusGroup = (responseStatus) =>
  statusCategories.find(({ statusCodeRegex }) => statusCodeRegex.test(responseStatus))
 export default {
-  components: {
-    "pw-section": section,
-    "pw-toggle": () => import("~/components/ui/toggle"),
-    "pw-modal": () => import("~/components/ui/modal"),
-    autocomplete: () => import("~/components/ui/autocomplete"),
-    history: () => import("~/components/layout/history"),
-    collections: () => import("~/components/collections"),
-    saveRequestAs: () => import("~/components/collections/saveRequestAs"),
-    Editor: AceEditor,
-    JSEditor: JSEditor,
-    environments: () => import("~/components/environments"),
-    inputform: () => import("~/components/firebase/inputform"),
-    notes: () => import("~/components/firebase/feeds"),
-    login: () => import("~/components/firebase/login"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-    "response-renderer": () => import("~/components/lenses/ResponseBodyRenderer"),
-  },
  data() {
    return {
      showModal: false,
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -24,15 +24,6 @@

 <script>
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-    websocket: () => import("~/components/realtime/websocket"),
-    sse: () => import("~/components/realtime/sse"),
-    socketio: () => import("~/components/realtime/socketio"),
-    mqtt: () => import("~/components/realtime/mqtt"),
-  },
  head() {
    return {
      title: `Realtime • ${this.$store.state.name}`,
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -220,13 +220,6 @@ import { fb } from "~/helpers/fb"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"

 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    "pw-toggle": () => import("~/components/ui/toggle"),
-    swatch: () => import("~/components/settings/swatch"),
-    login: () => import("~/components/firebase/login"),
-    logout: () => import("~/components/firebase/logout"),
-  },
  data() {
    return {
      // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss