feat: antfu's setup script transform + request component in setup sugar

components/http/Request.vue

@@ -115,27 +115,18 @@
           <SmartItem
             :label="$t('import.curl')"
             icon="import_export"
-            @click.native="
+            @click.native="showCurlImportModal = !showCurlImportModal"
-              showCurlImportModal = !showCurlImportModal
-              sendOptions.tippy().hide()
-            "
           />
           <SmartItem
             :label="$t('show.code')"
             icon="code"
-            @click.native="
+            @click.native="showCodegenModal = !showCodegenModal"
-              showCodegenModal = !showCodegenModal
-              sendOptions.tippy().hide()
-            "
           />
           <SmartItem
             ref="clearAll"
             :label="$t('action.clear_all')"
             icon="clear_all"
-            @click.native="
+            @click.native="clearContent()"
-              clearContent()
-              sendOptions.tippy().hide()
-            "
           />
         </tippy>
       </span>
@@ -174,19 +165,13 @@
             ref="copyRequest"
             :label="$t('request.copy_link')"
             :icon="hasNavigatorShare ? 'share' : 'content_copy'"
-            @click.native="
+            @click.native="copyRequest()"
-              copyRequest()
-              saveOptions.tippy().hide()
-            "
           />
           <SmartItem
             ref="saveRequest"
             :label="$t('request.save_as')"
             icon="create_new_folder"
-            @click.native="
+            @click.native="showSaveRequestModal = true"
-              showSaveRequestModal = true
-              saveOptions.tippy().hide()
-            "
           />
         </tippy>
       </span>
@@ -207,14 +192,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
-  computed,
-  defineComponent,
-  ref,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -252,212 +231,180 @@ const methods = [
   "CUSTOM",
 ]
 
-export default defineComponent({
+const {
-  setup() {
+  $toast,
-    const {
+  app: { i18n },
-      $toast,
+} = useContext()
-      app: { i18n },
+const nuxt = useNuxt()
-    } = useContext()
+const t = i18n.t.bind(i18n)
-    const nuxt = useNuxt()
+const { subscribeToStream } = useStreamSubscriber()
-    const t = i18n.t.bind(i18n)
-    const { subscribeToStream } = useStreamSubscriber()
 
-    const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
+const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
-    const newMethod = useStream(restMethod$, "", updateRESTMethod)
+const newMethod = useStream(restMethod$, "", updateRESTMethod)
 
-    const loading = ref(false)
+const loading = ref(false)
 
-    const showCurlImportModal = ref(false)
+const showCurlImportModal = ref(false)
-    const showCodegenModal = ref(false)
+const showCodegenModal = ref(false)
-    const showSaveRequestModal = ref(false)
+const showSaveRequestModal = ref(false)
 
-    const hasNavigatorShare = !!navigator.share
+const hasNavigatorShare = !!navigator.share
 
-    // Template refs
+// Template refs
-    const methodOptions = ref<any | null>(null)
+const methodOptions = ref<any | null>(null)
-    const saveOptions = ref<any | null>(null)
+const saveOptions = ref<any | null>(null)
-    const sendOptions = ref<any | null>(null)
+const sendOptions = ref<any | null>(null)
 
-    // Update Nuxt Loading bar
+// Update Nuxt Loading bar
-    watch(loading, () => {
+watch(loading, () => {
-      if (loading.value) {
+  if (loading.value) {
-        nuxt.value.$loading.start()
+    nuxt.value.$loading.start()
-      } else {
+  } else {
-        nuxt.value.$loading.finish()
+    nuxt.value.$loading.finish()
-      }
+  }
-    })
-
-    const newSendRequest = () => {
-      loading.value = true
-
-      subscribeToStream(
-        runRESTRequest$(),
-        (responseState) => {
-          console.log(responseState)
-          if (loading.value) {
-            // Check exists because, loading can be set to false
-            // when cancelled
-            updateRESTResponse(responseState)
-          }
-        },
-        () => {
-          loading.value = false
-        },
-        () => {
-          loading.value = false
-        }
-      )
-    }
-
-    const cancelRequest = () => {
-      loading.value = false
-      updateRESTResponse(null)
-    }
-
-    const updateMethod = (method: string) => {
-      updateRESTMethod(method)
-    }
-
-    const onSelectMethod = (method: string) => {
-      updateMethod(method)
-      // Vue-tippy has no typescript support yet
-      methodOptions.value.tippy().hide()
-    }
-
-    const clearContent = () => {
-      resetRESTRequest()
-    }
-
-    const copyRequest = () => {
-      if (navigator.share) {
-        const time = new Date().toLocaleTimeString()
-        const date = new Date().toLocaleDateString()
-        navigator
-          .share({
-            title: "Hoppscotch",
-            text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
-            url: window.location.href,
-          })
-          .then(() => {})
-          .catch(() => {})
-      } else {
-        copyToClipboard(window.location.href)
-        $toast.success(t("state.copied_to_clipboard").toString(), {
-          icon: "content_paste",
-        })
-      }
-    }
-
-    const cycleUpMethod = () => {
-      const currentIndex = methods.indexOf(newMethod.value)
-      if (currentIndex === -1) {
-        // Most probs we are in CUSTOM mode
-        // Cycle up from CUSTOM is PATCH
-        updateMethod("PATCH")
-      } else if (currentIndex === 0) {
-        updateMethod("CUSTOM")
-      } else {
-        updateMethod(methods[currentIndex - 1])
-      }
-    }
-
-    const cycleDownMethod = () => {
-      const currentIndex = methods.indexOf(newMethod.value)
-      if (currentIndex === -1) {
-        // Most probs we are in CUSTOM mode
-        // Cycle down from CUSTOM is GET
-        updateMethod("GET")
-      } else if (currentIndex === methods.length - 1) {
-        updateMethod("GET")
-      } else {
-        updateMethod(methods[currentIndex + 1])
-      }
-    }
-
-    const saveRequest = () => {
-      const saveCtx = getRESTSaveContext()
-      if (!saveCtx) {
-        showSaveRequestModal.value = true
-        return
-      }
-
-      if (saveCtx.originLocation === "user-collection") {
-        editRESTRequest(
-          saveCtx.folderPath,
-          saveCtx.requestIndex,
-          getRESTRequest()
-        )
-      } else if (saveCtx.originLocation === "team-collection") {
-        const req = getRESTRequest()
-
-        // TODO: handle error case (NOTE: overwriteRequestTeams is async)
-        try {
-          overwriteRequestTeams(
-            apolloClient,
-            JSON.stringify(req),
-            req.name,
-            saveCtx.requestID
-          )
-        } catch (error) {
-          showSaveRequestModal.value = true
-          return
-        }
-      }
-      $toast.success(t("request.saved").toString(), {
-        icon: "playlist_add_check",
-      })
-    }
-
-    defineActionHandler("request.send-cancel", () => {
-      if (!loading.value) newSendRequest()
-      else cancelRequest()
-    })
-    defineActionHandler("request.reset", clearContent)
-    defineActionHandler("request.copy-link", copyRequest)
-    defineActionHandler("request.method.next", cycleDownMethod)
-    defineActionHandler("request.method.prev", cycleUpMethod)
-    defineActionHandler("request.save", saveRequest)
-    defineActionHandler(
-      "request.save-as",
-      () => (showSaveRequestModal.value = true)
-    )
-    defineActionHandler("request.method.get", () => updateMethod("GET"))
-    defineActionHandler("request.method.post", () => updateMethod("POST"))
-    defineActionHandler("request.method.put", () => updateMethod("PUT"))
-    defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
-    defineActionHandler("request.method.head", () => updateMethod("HEAD"))
-
-    const isCustomMethod = computed(() => {
-      return newMethod.value === "CUSTOM" || !methods.includes(newMethod.value)
-    })
-
-    return {
-      newEndpoint,
-      newMethod,
-      methods,
-      loading,
-      newSendRequest,
-      requestName: useRESTRequestName(),
-      showCurlImportModal,
-      showCodegenModal,
-      showSaveRequestModal,
-      hasNavigatorShare,
-      updateMethod,
-      cancelRequest,
-      clearContent,
-      copyRequest,
-      onSelectMethod,
-      saveRequest,
-
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-
-      // Template refs
-      methodOptions,
-      sendOptions,
-      saveOptions,
-
-      isCustomMethod,
-    }
-  },
 })
+
+const newSendRequest = () => {
+  loading.value = true
+
+  subscribeToStream(
+    runRESTRequest$(),
+    (responseState) => {
+      console.log(responseState)
+      if (loading.value) {
+        // Check exists because, loading can be set to false
+        // when cancelled
+        updateRESTResponse(responseState)
+      }
+    },
+    () => {
+      loading.value = false
+    },
+    () => {
+      loading.value = false
+    }
+  )
+}
+
+const cancelRequest = () => {
+  loading.value = false
+  updateRESTResponse(null)
+}
+
+const updateMethod = (method: string) => {
+  updateRESTMethod(method)
+}
+
+const onSelectMethod = (method: string) => {
+  updateMethod(method)
+  // Vue-tippy has no typescript support yet
+  methodOptions.value.tippy().hide()
+}
+
+const clearContent = () => {
+  resetRESTRequest()
+}
+
+const copyRequest = () => {
+  if (navigator.share) {
+    const time = new Date().toLocaleTimeString()
+    const date = new Date().toLocaleDateString()
+    navigator
+      .share({
+        title: "Hoppscotch",
+        text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
+        url: window.location.href,
+      })
+      .then(() => {})
+      .catch(() => {})
+  } else {
+    copyToClipboard(window.location.href)
+    $toast.success(t("state.copied_to_clipboard").toString(), {
+      icon: "content_paste",
+    })
+  }
+}
+
+const cycleUpMethod = () => {
+  const currentIndex = methods.indexOf(newMethod.value)
+  if (currentIndex === -1) {
+    // Most probs we are in CUSTOM mode
+    // Cycle up from CUSTOM is PATCH
+    updateMethod("PATCH")
+  } else if (currentIndex === 0) {
+    updateMethod("CUSTOM")
+  } else {
+    updateMethod(methods[currentIndex - 1])
+  }
+}
+
+const cycleDownMethod = () => {
+  const currentIndex = methods.indexOf(newMethod.value)
+  if (currentIndex === -1) {
+    // Most probs we are in CUSTOM mode
+    // Cycle down from CUSTOM is GET
+    updateMethod("GET")
+  } else if (currentIndex === methods.length - 1) {
+    updateMethod("GET")
+  } else {
+    updateMethod(methods[currentIndex + 1])
+  }
+}
+
+const saveRequest = () => {
+  const saveCtx = getRESTSaveContext()
+  if (!saveCtx) {
+    showSaveRequestModal.value = true
+    return
+  }
+
+  if (saveCtx.originLocation === "user-collection") {
+    editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
+  } else if (saveCtx.originLocation === "team-collection") {
+    const req = getRESTRequest()
+
+    // TODO: handle error case (NOTE: overwriteRequestTeams is async)
+    try {
+      overwriteRequestTeams(
+        apolloClient,
+        JSON.stringify(req),
+        req.name,
+        saveCtx.requestID
+      )
+    } catch (error) {
+      showSaveRequestModal.value = true
+      return
+    }
+  }
+  $toast.success(t("request.saved").toString(), {
+    icon: "playlist_add_check",
+  })
+}
+
+defineActionHandler("request.send-cancel", () => {
+  if (!loading.value) newSendRequest()
+  else cancelRequest()
+})
+defineActionHandler("request.reset", clearContent)
+defineActionHandler("request.copy-link", copyRequest)
+defineActionHandler("request.method.next", cycleDownMethod)
+defineActionHandler("request.method.prev", cycleUpMethod)
+defineActionHandler("request.save", saveRequest)
+defineActionHandler(
+  "request.save-as",
+  () => (showSaveRequestModal.value = true)
+)
+defineActionHandler("request.method.get", () => updateMethod("GET"))
+defineActionHandler("request.method.post", () => updateMethod("POST"))
+defineActionHandler("request.method.put", () => updateMethod("PUT"))
+defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
+defineActionHandler("request.method.head", () => updateMethod("HEAD"))
+
+const isCustomMethod = computed(() => {
+  return newMethod.value === "CUSTOM" || !methods.includes(newMethod.value)
+})
+
+const requestName = useRESTRequestName()
+
+const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
 </script>

nuxt.config.js

@@ -130,6 +130,8 @@ export default {
     "@nuxtjs/dotenv",
     // https://github.com/nuxt-community/composition-api
     "@nuxtjs/composition-api/module",
+    // https://github.com/antfu/unplugin-vue2-script-setup
+    "unplugin-vue2-script-setup/nuxt",
   ],
 
   // Modules (https://go.nuxtjs.dev/config-modules)

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "dev": "nuxt",
-    "build": "nuxt build",
+    "build": "vue-tsc --noEmit && nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate --modern",
     "analyze": "npx nuxt build -a",
@@ -77,6 +77,7 @@
     "@types/cookie": "^0.4.1",
     "@types/lodash": "^4.14.172",
     "@types/splitpanes": "^2.2.1",
+    "@vue/runtime-dom": "^3.2.6",
     "@vue/test-utils": "^1.2.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.6",
@@ -100,6 +101,7 @@
     "stylelint-config-standard": "^22.0.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.2",
+    "unplugin-vue2-script-setup": "^0.4.2",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   }

tsconfig.json

@@ -14,7 +14,7 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@types/node", "@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/toast"]
+    "types": ["@types/node", "@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/toast", "unplugin-vue2-script-setup/types"]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }