Migrate packages/vue-components Utils files to TS

.eslintignore

@@ -48,8 +48,10 @@ packages/cli/dist/**/*.js
 
 packages/vue-components/src/directives/Closeable.js
 packages/vue-components/src/directives/Float.js
-packages/vue-components/src/utils/NodeList.js
-packages/vue-components/src/utils/utils.js
+
+# Legacy code with pre-existing lint issues
+packages/vue-components/src/utils/NodeList.ts
+packages/vue-components/src/utils/utils.ts
 
 # --- packages/vue-components end ---
 

.eslintrc.js

@@ -9,6 +9,13 @@ module.exports = {
   },
   "plugins": ["lodash"],
   "extends": ["airbnb-base", "plugin:lodash/recommended"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts", ".vue", ".json"],
+      },
+    },
+  },
   "rules": {
     "array-bracket-newline": ["error", { "multiline": true }],
     "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }],
@@ -32,6 +39,14 @@ module.exports = {
     "lodash/prefer-noop": [0],
     "max-len": ["error", { "code": 110 }],
     "no-param-reassign": ["error", { "props": false }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "ts": "never",
+      },
+    ],
     "operator-linebreak": ["error", "before"],
     // override airbnb-base dev dependencies, latest version does not white list __mocks__
     "import/no-extraneous-dependencies": [
@@ -55,6 +70,7 @@ module.exports = {
         "project": [
           "./tsconfig.lint.json",
           "./packages/core/tsconfig.lint.json",
+          "./packages/vue-components/tsconfig.json",
         ],
       },
       "plugins": ["@typescript-eslint", "lodash"],

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  presets: ['@babel/preset-env'],
+  presets: ['@babel/preset-env', '@babel/preset-typescript'],
   plugins: ['@babel/plugin-transform-runtime'],
 };

package.json

@@ -25,6 +25,7 @@
     "updatetest": "lerna run updatetest --stream"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.28.5",
     "@stylistic/stylelint-plugin": "^2.1.0",
     "@types/node": "^18.15.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -40,8 +41,8 @@
     "stylelint": "^16.2.1",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.3.3",
-    "walk-sync": "^2.0.2",
-    "tsx": "^4.21.0"
+    "walk-sync": "^2.0.2"
   }
 }

packages/core-web/webpack.common.js

@@ -12,6 +12,7 @@ module.exports = {
   },
   resolve: {
     modules: [path.resolve(__dirname), 'node_modules'],
+    extensions: ['.ts', '.js', '.vue', '.json'],
   },
   module: {
     rules: [
@@ -20,7 +21,7 @@ module.exports = {
         use: 'vue-loader',
       },
       {
-        test: /\.js$/,
+        test: /\.[jt]s$/,
         exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
         use: [
           {

packages/vue-components/.eslintrc.js

@@ -21,4 +21,15 @@ module.exports = {
     'vue/order-in-components': 'off',
     'vue/multi-word-component-names': 'off',
   },
+  'overrides': [
+    {
+      'files': '**/*.ts',
+      'parser': '@typescript-eslint/parser',
+      'rules': {
+        // vue-components uses default exports for single-function utility modules,
+        // consumed by .vue files via default imports
+        'import/no-default-export': 'off',
+      },
+    },
+  ],
 };

packages/vue-components/babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  presets: ['@babel/preset-env'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+  ],
 };

packages/vue-components/jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
   ],
   'moduleFileExtensions': [
     'js',
+    'ts',
     'json',
     'vue',
   ],
@@ -16,7 +17,7 @@ module.exports = {
   },
   'transform': {
     '.*\\.vue$': '@vue/vue3-jest',
-    '^.+\\.js$': ['babel-jest', { rootMode: 'upward' }],
+    '^.+\\.[jt]s$': ['babel-jest', { rootMode: 'upward' }],
   },
   'globals': {
     'vue-jest': {

packages/vue-components/package.json

@@ -21,13 +21,14 @@
     "directory": "packages/vue-components"
   },
   "scripts": {
-    "test": "jest --clearCache && jest --colors",
+    "test": "tsc && jest --clearCache && jest --colors",
     "updatetest": "jest --updateSnapshot"
   },
   "devDependencies": {
     "@babel/core": "^7.26.9",
     "@babel/plugin-transform-runtime": "^7.26.9",
     "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime": "^7.26.9",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",

packages/vue-components/src/Submenu.vue

@@ -25,7 +25,7 @@
 <script>
 import { toBoolean } from './utils/utils';
 import $ from './utils/NodeList';
-import positionSubmenu from './utils/submenu';
+import { isRightAlign, preventOverflow } from './utils/submenu';
 import preventOverflowOnMobile from './utils/dropdown';
 
 export default {
@@ -74,12 +74,12 @@ export default {
           return;
         }
 
-        if (positionSubmenu.isRightAlign(ul)) {
+        if (isRightAlign(ul)) {
           this.alignMenuRight();
         } else {
           this.alignMenuLeft();
         }
-        positionSubmenu.preventOverflow(ul);
+        preventOverflow(ul);
       });
     },
     alignMenuRight() {

packages/vue-components/src/TabGroup.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { coerce } from './utils/utils';
+import { toBoolean } from './utils/utils';
 
 export default {
   props: {
@@ -33,7 +33,7 @@ export default {
       return ~this.tabs.indexOf(this._tabset.show);
     },
     disabledBool() {
-      return coerce.boolean(this.disabled);
+      return toBoolean(this.disabled);
     },
   },
   mounted() {