chore: restrict duplicated imports, support Vue SFC for eslint

eslint.config.js

@@ -2,6 +2,7 @@ import importX from 'eslint-plugin-import-x'
 import tseslint from 'typescript-eslint'
 import vitest from 'eslint-plugin-vitest'
 import { builtinModules } from 'node:module'
+import vueParser from 'vue-eslint-parser'
 
 const DOMGlobals = ['window', 'document']
 const NodeGlobals = ['module', 'require']
@@ -14,7 +15,7 @@ const banConstEnum = {
 
 export default tseslint.config(
   {
-    files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+    files: ['**/*.js', '**/*.ts', '**/*.tsx', '**/*.vue'],
     extends: [tseslint.configs.base],
     plugins: {
       'import-x': importX,
@@ -54,6 +55,7 @@ export default tseslint.config(
       ],
       'sort-imports': ['error', { ignoreDeclarationSort: true }],
 
+      'import-x/no-duplicates': 'error',
       'import-x/no-nodejs-modules': [
         'error',
         { allow: builtinModules.map(mod => `node:${mod}`) },
@@ -74,6 +76,16 @@ export default tseslint.config(
     },
   },
 
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  },
+
   // tests, no restrictions (runs in Node / Vitest with jsdom)
   {
     files: ['**/__tests__/**', 'packages/dts-test/**'],

package.json

@@ -111,7 +111,8 @@
     "typescript": "~5.4.5",
     "typescript-eslint": "^7.10.0",
     "vite": "^5.2.12",
-    "vitest": "^1.5.2"
+    "vitest": "^1.5.2",
+    "vue-eslint-parser": "^9.4.2"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/dts-test/defineComponent.test-d.tsx

@@ -1,12 +1,19 @@
 import {
+  type AllowedComponentProps,
   type Component,
+  type ComponentCustomProps,
   type ComponentOptions,
+  type ComponentOptionsMixin,
   type ComponentPublicInstance,
+  type DefineComponent,
+  type EmitsOptions,
+  type ExtractPropTypes,
   type PropType,
   type SetupContext,
   type Slots,
   type SlotsType,
   type VNode,
+  type VNodeProps,
   createApp,
   defineComponent,
   h,
@@ -1505,16 +1512,6 @@ describe('withKeys and withModifiers as pro', () => {
   ;<input onKeydown={onKeydown} onClick={onClick} />
 })
 
-import type {
-  AllowedComponentProps,
-  ComponentCustomProps,
-  ComponentOptionsMixin,
-  DefineComponent,
-  EmitsOptions,
-  ExtractPropTypes,
-  VNodeProps,
-} from 'vue'
-
 // code generated by tsc / vue-tsc, make sure this continues to work
 // so we don't accidentally change the args order of DefineComponent
 declare const MyButton: DefineComponent<

packages/runtime-core/src/apiWatch.ts

@@ -38,8 +38,11 @@ import {
 } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
-import { DeprecationTypes } from './compat/compatConfig'
-import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
+import {
+  DeprecationTypes,
+  checkCompatEnabled,
+  isCompatEnabled,
+} from './compat/compatConfig'
 import type { ObjectWatchOptionItem } from './componentOptions'
 import { useSSRContext } from './helpers/useSsrContext'
 

packages/runtime-core/src/componentOptions.ts

@@ -18,7 +18,13 @@ import {
   isPromise,
   isString,
 } from '@vue/shared'
-import { type Ref, isRef } from '@vue/reactivity'
+import {
+  type ComputedGetter,
+  type Ref,
+  type WritableComputedOptions,
+  isRef,
+  reactive,
+} from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
   type WatchCallback,
@@ -43,11 +49,6 @@ import {
   onUnmounted,
   onUpdated,
 } from './apiLifecycle'
-import {
-  type ComputedGetter,
-  type WritableComputedOptions,
-  reactive,
-} from '@vue/reactivity'
 import type {
   ComponentObjectPropsOptions,
   ComponentPropsOptions,

packages/runtime-core/src/componentProps.ts

@@ -35,8 +35,11 @@ import {
 import { isEmitListener } from './componentEmits'
 import type { AppContext } from './apiCreateApp'
 import { createPropsDefaultThis } from './compat/props'
-import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig'
-import { DeprecationTypes } from './compat/compatConfig'
+import {
+  DeprecationTypes,
+  isCompatEnabled,
+  softAssertCompatEnabled,
+} from './compat/compatConfig'
 import { shouldSkipAttr } from './compat/attrsFallthrough'
 import { createInternalObject } from './internalObject'
 

packages/runtime-core/src/index.ts

@@ -384,17 +384,17 @@ export const ssrUtils = (__SSR__ ? _ssrUtils : null) as typeof _ssrUtils
 
 // 2.x COMPAT ------------------------------------------------------------------
 
-import { DeprecationTypes as _DeprecationTypes } from './compat/compatConfig'
-export type { CompatVue } from './compat/global'
-export type { LegacyConfig } from './compat/globalConfig'
-
-import { warnDeprecation } from './compat/compatConfig'
-import { createCompatVue } from './compat/global'
 import {
+  DeprecationTypes as _DeprecationTypes,
   checkCompatEnabled,
   isCompatEnabled,
   softAssertCompatEnabled,
+  warnDeprecation,
 } from './compat/compatConfig'
+export type { CompatVue } from './compat/global'
+export type { LegacyConfig } from './compat/globalConfig'
+
+import { createCompatVue } from './compat/global'
 import { resolveFilter as _resolveFilter } from './helpers/resolveAssets'
 import { NOOP } from '@vue/shared'
 

packages/runtime-core/src/renderer.ts

@@ -70,8 +70,7 @@ import {
 } from './devtools'
 import { initFeatureFlags } from './featureFlags'
 import { isAsyncWrapper } from './apiAsyncComponent'
-import { isCompatEnabled } from './compat/compatConfig'
-import { DeprecationTypes } from './compat/compatConfig'
+import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
 import type { TransitionHooks } from './components/BaseTransition'
 
 export interface Renderer<HostElement = RendererElement> {

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -1,19 +1,17 @@
 import {
   escapeHtml,
-  isRenderableAttrValue,
-  isSVGTag,
-  stringifyStyle,
-} from '@vue/shared'
-import {
   includeBooleanAttr,
   isBooleanAttr,
   isOn,
+  isRenderableAttrValue,
   isSSRSafeAttrName,
+  isSVGTag,
   isString,
   makeMap,
   normalizeClass,
   normalizeStyle,
   propsToAttrMap,
+  stringifyStyle,
 } from '@vue/shared'
 
 // leading comma for empty string ""

packages/sfc-playground/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Header from './Header.vue'
-import { Repl, useStore, SFCOptions, useVueImportMap } from '@vue/repl'
+import { Repl, type SFCOptions, useStore, useVueImportMap } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import { ref, watchEffect, onMounted, computed } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 
 const replRef = ref<InstanceType<typeof Repl>>()
 

pnpm-lock.yaml

@@ -167,6 +167,9 @@ importers:
       vitest:
         specifier: ^1.5.2
         version: 1.5.2(@types/node@20.14.0)(jsdom@24.0.0)(sass@1.77.4)(terser@5.31.0)
+      vue-eslint-parser:
+        specifier: ^9.4.2
+        version: 9.4.2(eslint@9.3.0)
 
   packages/compiler-core:
     dependencies:
@@ -1798,6 +1801,10 @@ packages:
       vitest:
         optional: true
 
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   eslint-scope@8.0.1:
     resolution: {integrity: sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1819,6 +1826,10 @@ packages:
     resolution: {integrity: sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -3440,6 +3451,12 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
+  vue-eslint-parser@9.4.2:
+    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -4904,7 +4921,7 @@ snapshots:
 
   eslint-plugin-vitest@0.5.4(eslint@9.3.0)(typescript@5.4.5)(vitest@1.5.2(@types/node@20.14.0)(jsdom@24.0.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
-      '@typescript-eslint/utils': 7.8.0(eslint@9.3.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.10.0(eslint@9.3.0)(typescript@5.4.5)
       eslint: 9.3.0
     optionalDependencies:
       vitest: 1.5.2(@types/node@20.14.0)(jsdom@24.0.0)(sass@1.77.4)(terser@5.31.0)
@@ -4912,6 +4929,11 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-scope@8.0.1:
     dependencies:
       esrecurse: 4.3.0
@@ -4966,6 +4988,12 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.11.3)
       eslint-visitor-keys: 4.0.0
 
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
+      eslint-visitor-keys: 3.4.3
+
   esprima@4.0.1: {}
 
   esquery@1.5.0:
@@ -6643,6 +6671,19 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  vue-eslint-parser@9.4.2(eslint@9.3.0):
+    dependencies:
+      debug: 4.3.4
+      eslint: 9.3.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      lodash: 4.17.21
+      semver: 7.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0