jqtree 1.8.4 → 1.8.6

package/.tool-versions

@@ -0,0 +1,2 @@
+nodejs 20.18.0
+ruby 3.3.5

package/README.md

@@ -15,7 +15,7 @@ JqTree is a tree widget. Read more in the [documentation](https://mbraak.github.
 -   Works on all modern browsers
 -   Written in Typescript
 
-The project is hosted on [github](https://github.com/mbraak/jqTree), has a [test suite](http://mbraak.github.io/jqTree/test/test.html).
+The project is hosted on [github](https://github.com/mbraak/jqTree).
 
 ## Examples
 

package/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jqTree",
-    "version": "1.8.4",
+    "version": "1.8.6",
     "main": [
         "jqtree.css",
         "jqtree-circle.png",

package/eslint.config.mjs

@@ -0,0 +1,69 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import importPlugin from "eslint-plugin-import";
+import jestPlugin from "eslint-plugin-jest";
+import jestDomPlugin from "eslint-plugin-jest-dom";
+import perfectionistPlugin from "eslint-plugin-perfectionist";
+import playwrightPlugin from "eslint-plugin-playwright";
+
+export default [
+    eslint.configs.recommended,
+    ...tseslint.configs.strictTypeChecked,
+    ...tseslint.configs.stylisticTypeChecked,
+    importPlugin.flatConfigs.recommended,
+    importPlugin.flatConfigs.typescript,
+    perfectionistPlugin.configs["recommended-natural"],
+    {
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        rules: {
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                },
+            ],
+            "@typescript-eslint/non-nullable-type-assertion-style": "off",
+            "@typescript-eslint/prefer-includes": "off",
+            "@typescript-eslint/triple-slash-reference": "off",
+            "@typescript-eslint/prefer-string-starts-ends-with": "off",
+            "@typescript-eslint/restrict-template-expressions": [
+                "error",
+                {
+                    allowNumber: true,
+                    allowBoolean: true,
+                    allowAny: false,
+                    allowNullish: false,
+                },
+            ],
+            "@typescript-eslint/unified-signatures": "off",
+        },
+    },
+    {
+        files: ["src/test/**/*.ts"],
+        ...jestPlugin.configs["flat/recommended"],
+    },
+    {
+        files: ["src/test/**/*.ts"],
+        rules: {
+            "jest/no-identical-title": "off",
+        },
+    },
+    {
+        files: ["src/test/jqTree/**/*.ts"],
+        ...jestDomPlugin.configs["flat/recommended"],
+    },
+    {
+        files: ["src/playwright/**/*.ts"],
+        ...playwrightPlugin.configs["flat/recommended"],
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.4",
+    "version": "1.8.6",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -18,7 +18,7 @@
         "ci": "pnpm lint && pnpm tsc && pnpm test",
         "jest": "jest --coverage --no-cache --verbose --config ./config/jest.config.js",
         "jest-watch": "jest --watch --config ./config/jest.config.js",
-        "lint": "eslint src/ --ext .ts,.tsx",
+        "lint": "eslint src",
         "production": "./config/production",
         "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
         "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
@@ -35,53 +35,51 @@
         "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.8",
-        "@babel/core": "^7.24.9",
-        "@babel/preset-env": "^7.24.8",
-        "@babel/preset-typescript": "^7.24.7",
-        "@codecov/rollup-plugin": "0.0.1-beta.10",
-        "@playwright/test": "^1.45.2",
+        "@babel/cli": "^7.25.7",
+        "@babel/core": "^7.25.7",
+        "@babel/preset-env": "^7.25.7",
+        "@babel/preset-typescript": "^7.25.7",
+        "@playwright/test": "^1.47.2",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-terser": "^0.4.4",
-        "@testing-library/dom": "^10.3.2",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.2",
         "@testing-library/user-event": "^14.5.2",
         "@types/debug": "^4.1.12",
-        "@types/jest": "^29.5.12",
+        "@types/jest": "^29.5.13",
         "@types/jest-axe": "^3.5.9",
-        "@types/jquery": "^3.5.30",
-        "@types/node": "^20.14.11",
-        "@typescript-eslint/eslint-plugin": "^7.16.1",
-        "@typescript-eslint/parser": "^7.16.1",
-        "autoprefixer": "^10.4.19",
+        "@types/jquery": "^3.5.31",
+        "@types/node": "^22.7.4",
+        "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^7.0.0",
-        "eslint": "^8.57.0",
-        "eslint-import-resolver-typescript": "^3.6.1",
-        "eslint-plugin-deprecation": "^3.0.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^28.6.0",
+        "eslint": "^9",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jest": "^28.8.3",
+        "eslint-plugin-jest-dom": "^5.4.0",
+        "eslint-plugin-perfectionist": "^3.8.0",
         "eslint-plugin-playwright": "^1.6.2",
-        "eslint-plugin-testing-library": "^6.2.2",
         "givens": "^1.3.9",
         "graphql": "^16.9.0",
         "jest": "^29.7.0",
         "jest-axe": "^9.0.0",
-        "jest-environment-jsdom": "^29.7.0",
         "jest-extended": "^4.0.2",
+        "jest-fixed-jsdom": "^0.0.4",
         "jsonfile": "^6.1.0",
         "lodash": "^4.17.21",
-        "msw": "^2.3.2",
-        "postcss": "^8.4.39",
+        "msw": "^2.4.9",
+        "postcss": "^8.4.47",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.1.0",
         "postcss-load-config": "^6.0.1",
-        "postcss-nested": "^6.0.1",
+        "postcss-nested": "^6.2.0",
         "prettier": "^3.3.3",
-        "rollup": "^4.18.1",
+        "rollup": "^4.24.0",
         "rollup-plugin-serve": "^3.0.0",
-        "tslib": "^2.6.3",
-        "typescript": "^5.5.3",
+        "tslib": "^2.7.0",
+        "typescript": "^5.6.2",
+        "typescript-eslint": "^8.8.0",
         "undici": "^5.28.4"
     }
 }

package/src/dataLoader.ts

@@ -1,6 +1,6 @@
-import { Node } from "./node";
-import { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
 import { LoadData, TriggerEvent } from "./jqtreeMethodTypes";
+import { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
+import { Node } from "./node";
 
 export type HandleFinishedLoading = () => void;
 
@@ -37,54 +37,12 @@ export default class DataLoader {
         this.triggerEvent = triggerEvent;
     }
 
-    public loadFromUrl(
-        urlInfo: string | JQuery.AjaxSettings | null,
-        parentNode: Node | null,
-        onFinished: HandleFinishedLoading | null,
-    ): void {
-        if (!urlInfo) {
-            return;
-        }
-
-        const element = this.getDomElement(parentNode);
-        this.addLoadingClass(element);
-        this.notifyLoading(true, parentNode, element);
-
-        const stopLoading = (): void => {
-            this.removeLoadingClass(element);
-            this.notifyLoading(false, parentNode, element);
-        };
-
-        const handleSuccess = (data: string | NodeData[]): void => {
-            stopLoading();
-            this.loadData(this.parseData(data), parentNode);
-
-            if (onFinished && typeof onFinished === "function") {
-                onFinished();
-            }
-        };
-
-        const handleError = (jqXHR: JQuery.jqXHR): void => {
-            stopLoading();
-
-            if (this.onLoadFailed) {
-                this.onLoadFailed(jqXHR);
-            }
-        };
-
-        this.submitRequest(urlInfo, handleSuccess, handleError);
-    }
-
     private addLoadingClass(element: HTMLElement): void {
         element.classList.add("jqtree-loading");
     }
 
-    private removeLoadingClass(element: HTMLElement): void {
-        element.classList.remove("jqtree-loading");
-    }
-
     private getDomElement(parentNode: Node | null): HTMLElement {
-        if (parentNode) {
+        if (parentNode?.element) {
             return parentNode.element;
         } else {
             return this.treeElement;
@@ -103,14 +61,36 @@ export default class DataLoader {
         }
 
         this.triggerEvent("tree.loading_data", {
+            $el,
             isLoading,
             node,
-            $el,
         });
     }
 
+    private parseData(data: NodeData[] | string): NodeData[] {
+        const getParsedData = () => {
+            if (typeof data === "string") {
+                return JSON.parse(data) as NodeData[];
+            } else {
+                return data;
+            }
+        };
+
+        const parsedData = getParsedData();
+
+        if (this.dataFilter) {
+            return this.dataFilter(parsedData);
+        } else {
+            return parsedData;
+        }
+    }
+
+    private removeLoadingClass(element: HTMLElement): void {
+        element.classList.remove("jqtree-loading");
+    }
+
     private submitRequest(
-        urlInfoInput: string | JQuery.AjaxSettings,
+        urlInfoInput: JQuery.AjaxSettings | string,
         handleSuccess: JQuery.Ajax.SuccessCallback<any>,
         handleError: JQuery.Ajax.ErrorCallback<any>,
     ): void {
@@ -120,34 +100,54 @@ export default class DataLoader {
                 : urlInfoInput;
 
         const ajaxSettings: JQuery.AjaxSettings = {
-            method: "GET",
             cache: false,
             dataType: "json",
-            success: handleSuccess,
             error: handleError,
+            method: "GET",
+            success: handleSuccess,
             ...urlInfo,
         };
 
-        ajaxSettings.method = ajaxSettings.method?.toUpperCase() || "GET";
+        ajaxSettings.method = ajaxSettings.method?.toUpperCase() ?? "GET";
 
         void jQuery.ajax(ajaxSettings);
     }
 
-    private parseData(data: string | NodeData[]): NodeData[] {
-        const getParsedData = () => {
-            if (typeof data === "string") {
-                return JSON.parse(data) as NodeData[];
-            } else {
-                return data;
+    public loadFromUrl(
+        urlInfo: JQuery.AjaxSettings | null | string,
+        parentNode: Node | null,
+        onFinished: HandleFinishedLoading | null,
+    ): void {
+        if (!urlInfo) {
+            return;
+        }
+
+        const element = this.getDomElement(parentNode);
+        this.addLoadingClass(element);
+        this.notifyLoading(true, parentNode, element);
+
+        const stopLoading = (): void => {
+            this.removeLoadingClass(element);
+            this.notifyLoading(false, parentNode, element);
+        };
+
+        const handleSuccess = (data: NodeData[] | string): void => {
+            stopLoading();
+            this.loadData(this.parseData(data), parentNode);
+
+            if (onFinished && typeof onFinished === "function") {
+                onFinished();
             }
         };
 
-        const parsedData = getParsedData();
+        const handleError = (jqXHR: JQuery.jqXHR): void => {
+            stopLoading();
 
-        if (this.dataFilter) {
-            return this.dataFilter(parsedData);
-        } else {
-            return parsedData;
-        }
+            if (this.onLoadFailed) {
+                this.onLoadFailed(jqXHR);
+            }
+        };
+
+        this.submitRequest(urlInfo, handleSuccess, handleError);
     }
 }

package/src/dragAndDropHandler/dragElement.ts

@@ -7,9 +7,9 @@ interface DragElementParams {
 }
 
 class DragElement {
+    private element: HTMLElement;
     private offsetX: number;
     private offsetY: number;
-    private element: HTMLElement;
 
     constructor({
         autoEscape,
@@ -26,15 +26,6 @@ class DragElement {
         treeElement.appendChild(this.element);
     }
 
-    public move(pageX: number, pageY: number): void {
-        this.element.style.left = `${pageX - this.offsetX}px`;
-        this.element.style.top = `${pageY - this.offsetY}px`;
-    }
-
-    public remove(): void {
-        this.element.remove();
-    }
-
     private createElement(nodeName: string, autoEscape: boolean) {
         const element = document.createElement("span");
         element.classList.add("jqtree-title", "jqtree-dragging");
@@ -49,6 +40,15 @@ class DragElement {
 
         return element;
     }
+
+    public move(pageX: number, pageY: number): void {
+        this.element.style.left = `${pageX - this.offsetX}px`;
+        this.element.style.top = `${pageY - this.offsetY}px`;
+    }
+
+    public remove(): void {
+        this.element.remove();
+    }
 }
 
 export default DragElement;

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -1,13 +1,13 @@
-import { HitArea } from "./types";
 import { Node } from "../node";
 import { Position } from "../position";
 import { getOffsetTop } from "../util";
 import iterateVisibleNodes from "./iterateVisibleNodes";
+import { HitArea } from "./types";
 
 interface HitPosition {
-    top: number;
     node: Node;
     position: Position;
+    top: number;
 }
 
 export const generateHitPositions = (
@@ -19,9 +19,9 @@ export const generateHitPositions = (
 
     const addHitPosition = (node: Node, position: number, top: number) => {
         hitPositions.push({
-            top,
             node,
             position,
+            top,
         });
         lastTop = top;
     };
@@ -56,7 +56,7 @@ export const generateHitPositions = (
     };
 
     const handleFirstNode = (node: Node) => {
-        if (node !== currentNode) {
+        if (node !== currentNode && node.element) {
             addHitPosition(node, Position.Before, getOffsetTop(node.element));
         }
     };
@@ -138,10 +138,10 @@ export const generateHitAreasForGroup = (
 
         if (position.position !== Position.None) {
             hitAreas.push({
-                top: areaTop,
                 bottom: areaTop + areaHeight,
                 node: position.node,
                 position: position.position,
+                top: areaTop,
             });
         }