Enable unplugin auto import for vue and vue-route imports

.eslintignore

@@ -4,4 +4,5 @@ dist/
 tokenlists.json
 public/data/tokenlists/*.json
 package-lock.json
-components.d.ts
+components.d.ts
+auto-imports.d.ts

.eslintrc-auto-import.json

@@ -0,0 +1,61 @@
+{
+  "globals": {
+    "EffectScope": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "resolveDirective": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
     'plugin:prettier-vue/recommended',
+    './.eslintrc-auto-import.json',
   ],
 
   plugins: ['simple-import-sort', 'tailwindcss'],

auto-imports.d.ts

@@ -0,0 +1,61 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}

src/components/_global/BalAccordion/BalAccordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ComponentPublicInstance, nextTick, onMounted, ref, watch } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 
 type Section = {
   title: string;

src/components/_global/BalActionSteps/BalActionSteps.vue

@@ -12,7 +12,6 @@ import {
   TransactionReceipt,
   TransactionResponse,
 } from '@ethersproject/abstract-provider';
-import { computed, ref, watch } from 'vue';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
 import useEthers from '@/composables/useEthers';

src/components/_global/BalAlert/BalAlert.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 
 import BalBtn from '../BalBtn/BalBtn.vue';
 import BalIcon from '../BalIcon/BalIcon.vue';

src/components/_global/BalAsset/BalAsset.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, toRefs, watch } from 'vue';
-
 import { useTokens } from '@/providers/tokens.provider';
 import useUrls from '@/composables/useUrls';
 import { TokenInfo } from '@/types/TokenList';

src/components/_global/BalBlankSlate/BalBlankSlate.vue

@@ -4,14 +4,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'BalBlankSlate',
-});
-</script>
-
 <style>
 .bal-blank-slate {
   @apply border dark:border-gray-700 border-dashed p-6 flex flex-col items-start justify-center rounded-lg;

src/components/_global/BalBreakdown/BalBreakdown.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 /**
  * TYPES
  */

src/components/_global/BalBtn/BalBtn.vue

@@ -20,8 +20,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 import BalLoadingIcon from '../BalLoadingIcon/BalLoadingIcon.vue';
 
 export default defineComponent({

src/components/_global/BalBtnGroup/BalBtnGroup.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import omit from 'lodash/omit';
-import { computed, defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 
 interface Option {
   value: string | number;

src/components/_global/BalCard/BalCard.vue

@@ -28,8 +28,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalCard',
 

src/components/_global/BalChart/BalChart.vue

@@ -4,7 +4,6 @@ import { GridOption } from 'echarts/types/dist/shared';
 import { last } from 'lodash';
 import { Dictionary } from 'lodash';
 import numeral from 'numeral';
-import { computed, onMounted, ref, watch } from 'vue';
 import ECharts from 'vue-echarts';
 
 import useDarkMode from '@/composables/useDarkMode';

src/components/_global/BalCheckbox/BalCheckbox.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { PropType } from 'vue';
 
 import { RuleFunction, Rules } from '@/types';
 

src/components/_global/BalChip/composables/useChipStyles.ts

@@ -1,5 +1,3 @@
-import { computed } from 'vue';
-
 export function useChipClasses(props) {
   const sizeClasses = () => {
     switch (props.size) {

src/components/_global/BalDropdown/BalDropdown.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-
 /**
  * TYPES
  */

src/components/_global/BalFlexGrid/BalFlexGrid.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, h, VNodeArrayChildren } from 'vue';
+import { VNodeArrayChildren } from 'vue';
 
 export default defineComponent({
   name: 'BalFlexGrid',

src/components/_global/BalForm/BalForm.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-
 function useFormValidations() {
   const errors = ref([] as Array<string>);
   const validatable = ref([] as Array<any>);

src/components/_global/BalHorizSteps/BalHorizSteps.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import useWeb3 from '@/services/web3/useWeb3';
 import { getConnectorLogo } from '@/services/web3/web3.plugin';
 import { Step, StepState } from '@/types';

src/components/_global/BalIcon/BalIcon.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import feather from 'feather-icons';
-import { computed, onMounted } from 'vue';
 
 /**
  * TYPES

src/components/_global/BalImage/BalImage.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-
 /**
  * TYPES
  */

src/components/_global/BalInlineInput/BalInlineInput.vue

@@ -7,7 +7,6 @@ export default {
 
 <script setup lang="ts">
 import { omit } from 'lodash';
-import { computed, ref, useAttrs } from 'vue';
 
 import useInputEvents from '@/components/_global/BalTextInput/composables/useInputEvents';
 import useInputValidation from '@/components/_global/BalTextInput/composables/useInputValidation';

src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts

@@ -1,4 +1,4 @@
-import { computed, Ref } from 'vue';
+import { Ref } from 'vue';
 
 export default function useInputStyles(props, isInvalid: Ref<boolean>, attrs) {
   const extPaddingClass = (): string => {

src/components/_global/BalLazy/BalLazy.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
 const shouldRender = ref(false);
 nextTick(() => {
   shouldRender.value = true;

src/components/_global/BalLink/BalLink.vue

@@ -5,8 +5,6 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-
 /**
  * TYPES
  */

src/components/_global/BalLoadingBlock/BalLoadingBlock.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import useDarkMode from '@/composables/useDarkMode';
 
 /**

src/components/_global/BalLoadingIcon/BalLoadingIcon.vue

@@ -6,8 +6,6 @@
 </template>
 
 <script>
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalLoadingIcon',
 

src/components/_global/BalLoadingNumber/BalLoadingNumber.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import { useUserSettings } from '@/providers/user-settings.provider';
 import { FiatSymbol } from '@/constants/currency';
 

src/components/_global/BalModal/BalModal.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-
 import BalCard from '../BalCard/BalCard.vue';
 
 /**

src/components/_global/BalPopover/BalPopover.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
 type PopoverTrigger = 'click' | 'hover';
 
 type Props = {

src/components/_global/BalProgressBar/BalProgressBar.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 /**
  * TYPES
  */

src/components/_global/BalRadio/BalRadio.vue

@@ -23,8 +23,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalRadio',
 

src/components/_global/BalRangeInput/BalRangeInput.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import 'vue-slider-component/theme/antd.css';
 
-import { computed } from 'vue';
 import VueSlider, { DefineComponent as TVueSlider } from 'vue-slider-component';
 
 // Note that we are explicitly importing from 'tailwind.config.js' which is a vite alias (see vite.config.ts)

src/components/_global/BalSelectInput/BalSelectInput.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { PropType } from 'vue';
 
 import { RuleFunction, Rules } from '@/types';
 

src/components/_global/BalStack/BalStack.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { PropType } from 'vue';
 
 type Spacing = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'none';
 type Alignment = 'center' | 'start' | 'end' | 'between';