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,8 +231,6 @@ const methods = [
   "CUSTOM",
 ]
 
-export default defineComponent({
-  setup() {
 const {
   $toast,
   app: { i18n },
@@ -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()
 
@@ -431,33 +404,7 @@ export default defineComponent({
   return newMethod.value === "CUSTOM" || !methods.includes(newMethod.value)
 })
 
-    return {
+const requestName = useRESTRequestName()
-      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"),
+const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
-
-      // Template refs
-      methodOptions,
-      sendOptions,
-      saveOptions,
-
-      isCustomMethod,
-    }
-  },
-})
 </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"]
 }