Merge pull request #96 from sectsect/feature/migrate-eslint-flat-config

chore: migrate ESLint config to flat config

Author: sectsect

assets/css/options.css

@@ -2,14 +2,10 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-anonymous-default-export */
 
-// Node.js path and URL utilities
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
 // ESLint core and compatibility utilities
 import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
-import { fixupPluginRules } from '@eslint/compat';
+// import { fixupPluginRules } from '@eslint/compat';
 import globals from 'globals';
 
 // ESLint plugins for various technologies and best practices
@@ -26,15 +22,12 @@ import prettier from 'eslint-plugin-prettier';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import testingLibrary from 'eslint-plugin-testing-library';
 import vitest from 'eslint-plugin-vitest';
-import deprecationPlugin from 'eslint-plugin-deprecation';
+import deprecation from 'eslint-plugin-deprecation';
 // import nextPlugin from '@next/eslint-plugin-next';
 import pluginQuery from '@tanstack/eslint-plugin-query';
 
-// Resolve current file and directory paths
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-  baseDirectory: __dirname,
+  baseDirectory: import.meta.dirname, // Added in: v21.2.0, v20.11.0 @ https://nodejs.org/api/esm.html#importmetadirname
   recommendedConfig: js.configs.recommended,
   allConfig: js.configs.all,
 });
@@ -72,7 +65,8 @@ export default [
       // '@next/next': nextPlugin,
       'unused-imports': unusedImports,
       '@tanstack/query': pluginQuery,
-      deprecation: fixupPluginRules(deprecationPlugin),
+      // deprecation: fixupPluginRules(deprecationPlugin),
+      deprecation,
       tailwindcss,
       tsdoc,
       import: _import,
@@ -118,6 +112,8 @@ export default [
           unnamedComponents: 'arrow-function',
         },
       ],
+      // Performance and optimization rules
+      'react/jsx-no-useless-fragment': 'error',
 
       // Accessibility rules
       'jsx-a11y/anchor-is-valid': 'off',
@@ -153,12 +149,16 @@ export default [
         },
       ],
       'import/prefer-default-export': 'off',
+      'import/no-duplicates': 'error',
 
       // TypeScript rules
       '@typescript-eslint/comma-dangle': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-unnecessary-condition': 'error',
+      // '@typescript-eslint/strict-boolean-expressions': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
       '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/prefer-optional-chain': 'error',
 
       // Unused imports/variables rules
       'unused-imports/no-unused-imports': 'error',
@@ -168,6 +168,7 @@ export default [
       'no-underscore-dangle': 'off',
       'tailwindcss/no-custom-classname': 'off',
       'tsdoc/syntax': 'warn',
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
     },
   },
 

assets/js/options.js

@@ -16,9 +16,28 @@ interface WtoOptionsResponse {
   count: number;
 }
 
-export const options = (): void => {
+/**
+ * Handles options page interaction and settings application
+ *
+ * @remarks
+ * Manages the process of applying settings with a confirmation dialog
+ * and AJAX request handling
+ *
+ * @example
+ * // Automatically initialized on options page load
+ * options();
+ */
+export const options = () => {
   const { nonce, action, ajax_url: url } = window.wto_options_data;
 
+  /**
+   * Prepares the UI before sending settings
+   *
+   * @remarks
+   * Disables the apply button and shows a processing message
+   *
+   * @returns A promise that resolves when preparation is complete
+   */
   const beforeSend = () =>
     new Promise<string>(resolve => {
       jQuery('#wpbody-content form input[name=apply]').prop('disabled', true);
@@ -28,6 +47,14 @@ export const options = (): void => {
       resolve('resolved');
     });
 
+  /**
+   * Performs asynchronous pre-confirmation request
+   *
+   * @remarks
+   * Sends an AJAX request to apply settings with error handling
+   *
+   * @returns Processed response data or throws an error
+   */
   const asyncPreConfirm = async () => {
     await beforeSend();
 

eslint.config.mjs

@@ -4,6 +4,12 @@ declare global {
   }
 }
 
+/**
+ * Represents the global data structure for WordPress post operations
+ *
+ * @remarks
+ * Contains essential information for AJAX synchronization and updates
+ */
 interface WtoData {
   post_id: string;
   nonce_sync: string;
@@ -22,10 +28,15 @@ const {
   action_update: actionUpdate,
 } = window.wto_data;
 
+/**
+ * Manages post-related tag synchronization and UI interactions
+ *
+ * @remarks
+ * Handles two primary functionalities:
+ * 1. Synchronizes tags across different taxonomy boxes
+ * 2. Enables drag-and-drop sorting of tags with AJAX updates
+ */
 export const post = () => {
-  /*= =================================================
-  Sync Tags to "#tagsdiv-post_tag" box
-  ================================================== */
   let flag = '';
   setTimeout(() => {
     const tagchecklists = document.querySelectorAll(
@@ -93,9 +104,7 @@ export const post = () => {
       observer.observe(tagchecklist, { childList: true, subtree: true });
     });
   }, 400);
-  /*= =================================================
-  jQuery UI Sortable
-  ================================================== */
+
   jQuery('.wpto_meta_box_panel .inside .inner ul').sortable({
     update() {
       const postboxid = jQuery(this).closest('.postbox').attr('id') ?? '';