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,42 +231,40 @@ const methods = [
   "CUSTOM",
 ]
 
-export default defineComponent({
+const {
-  setup() {
-    const {
   $toast,
   app: { i18n },
-    } = useContext()
+} = useContext()
-    const nuxt = useNuxt()
+const nuxt = useNuxt()
-    const t = i18n.t.bind(i18n)
+const t = i18n.t.bind(i18n)
-    const { subscribeToStream } = useStreamSubscriber()
+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) {
     nuxt.value.$loading.start()
   } else {
     nuxt.value.$loading.finish()
   }
-    })
+})
 
-    const newSendRequest = () => {
+const newSendRequest = () => {
   loading.value = true
 
   subscribeToStream(
@@ -307,28 +284,28 @@ export default defineComponent({
       loading.value = false
     }
   )
-    }
+}
 
-    const cancelRequest = () => {
+const cancelRequest = () => {
   loading.value = false
   updateRESTResponse(null)
-    }
+}
 
-    const updateMethod = (method: string) => {
+const updateMethod = (method: string) => {
   updateRESTMethod(method)
-    }
+}
 
-    const onSelectMethod = (method: string) => {
+const onSelectMethod = (method: string) => {
   updateMethod(method)
   // Vue-tippy has no typescript support yet
   methodOptions.value.tippy().hide()
-    }
+}
 
-    const clearContent = () => {
+const clearContent = () => {
   resetRESTRequest()
-    }
+}
 
-    const copyRequest = () => {
+const copyRequest = () => {
   if (navigator.share) {
     const time = new Date().toLocaleTimeString()
     const date = new Date().toLocaleDateString()
@@ -346,9 +323,9 @@ export default defineComponent({
       icon: "content_paste",
     })
   }
-    }
+}
 
-    const cycleUpMethod = () => {
+const cycleUpMethod = () => {
   const currentIndex = methods.indexOf(newMethod.value)
   if (currentIndex === -1) {
     // Most probs we are in CUSTOM mode
@@ -359,9 +336,9 @@ export default defineComponent({
   } else {
     updateMethod(methods[currentIndex - 1])
   }
-    }
+}
 
-    const cycleDownMethod = () => {
+const cycleDownMethod = () => {
   const currentIndex = methods.indexOf(newMethod.value)
   if (currentIndex === -1) {
     // Most probs we are in CUSTOM mode
@@ -372,9 +349,9 @@ export default defineComponent({
   } else {
     updateMethod(methods[currentIndex + 1])
   }
-    }
+}
 
-    const saveRequest = () => {
+const saveRequest = () => {
   const saveCtx = getRESTSaveContext()
   if (!saveCtx) {
     showSaveRequestModal.value = true
@@ -382,11 +359,7 @@ export default defineComponent({
   }
 
   if (saveCtx.originLocation === "user-collection") {
-        editRESTRequest(
+    editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-          saveCtx.folderPath,
-          saveCtx.requestIndex,
-          getRESTRequest()
-        )
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 
@@ -406,58 +379,32 @@ export default defineComponent({
   $toast.success(t("request.saved").toString(), {
     icon: "playlist_add_check",
   })
-    }
+}
 
-    defineActionHandler("request.send-cancel", () => {
+defineActionHandler("request.send-cancel", () => {
   if (!loading.value) newSendRequest()
   else cancelRequest()
-    })
+})
-    defineActionHandler("request.reset", clearContent)
+defineActionHandler("request.reset", clearContent)
-    defineActionHandler("request.copy-link", copyRequest)
+defineActionHandler("request.copy-link", copyRequest)
-    defineActionHandler("request.method.next", cycleDownMethod)
+defineActionHandler("request.method.next", cycleDownMethod)
-    defineActionHandler("request.method.prev", cycleUpMethod)
+defineActionHandler("request.method.prev", cycleUpMethod)
-    defineActionHandler("request.save", saveRequest)
+defineActionHandler("request.save", saveRequest)
-    defineActionHandler(
+defineActionHandler(
   "request.save-as",
   () => (showSaveRequestModal.value = true)
-    )
+)
-    defineActionHandler("request.method.get", () => updateMethod("GET"))
+defineActionHandler("request.method.get", () => updateMethod("GET"))
-    defineActionHandler("request.method.post", () => updateMethod("POST"))
+defineActionHandler("request.method.post", () => updateMethod("POST"))
-    defineActionHandler("request.method.put", () => updateMethod("PUT"))
+defineActionHandler("request.method.put", () => updateMethod("PUT"))
-    defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
+defineActionHandler("request.method.delete", () => updateMethod("DELETE"))
-    defineActionHandler("request.method.head", () => updateMethod("HEAD"))
+defineActionHandler("request.method.head", () => updateMethod("HEAD"))
 
-    const isCustomMethod = computed(() => {
+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 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"]
 }