jqtree 1.6.0 → 1.6.3

package/lib/types.js

@@ -1,2 +1 @@
-"use strict";
-exports.__esModule = true;
+"use strict";

package/lib/typings.d.js

@@ -0,0 +1,2 @@
+/// <reference path="./tree.jquery.d.ts" />
+"use strict";

package/lib/util.js

@@ -1,13 +1,24 @@
 "use strict";
-exports.__esModule = true;
-exports.getBoolString = exports.isFunction = exports.isInt = void 0;
-var isInt = function (n) {
-    return typeof n === "number" && n % 1 === 0;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInt = exports.isFunction = exports.getBoolString = void 0;
+
+var isInt = function isInt(n) {
+  return typeof n === "number" && n % 1 === 0;
 };
+
 exports.isInt = isInt;
-var isFunction = function (v) { return typeof v === "function"; };
+
+var isFunction = function isFunction(v) {
+  return typeof v === "function";
+};
+
 exports.isFunction = isFunction;
-var getBoolString = function (value) {
-    return value ? "true" : "false";
+
+var getBoolString = function getBoolString(value) {
+  return value ? "true" : "false";
 };
-exports.getBoolString = getBoolString;
+
+exports.getBoolString = getBoolString;

package/lib/version.js

@@ -1,4 +1,9 @@
 "use strict";
-exports.__esModule = true;
-var version = "1.6.0";
-exports["default"] = version;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var version = "1.6.2";
+var _default = version;
+exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.6.0",
+    "version": "1.6.3",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -14,61 +14,68 @@
         "url": "https://github.com/mbraak/jqtree"
     },
     "scripts": {
-        "test": "start-server-and-test 'yarn devserver-with-coverage' http://localhost:8080 'jest --runInBand --coverage --no-cache --verbose'",
-        "test-with-server": "jest --runInBand --coverage",
-        "test-watch": "jest --watch",
+        "ci": "pnpm lint && pnpm tsc && pnpm test",
+        "jest": "jest --coverage --no-cache --verbose --config ./config/jest.config.js",
+        "jest-watch": "jest --watch",
         "lint": "eslint src/ --ext .ts,.tsx",
-        "production": "./production",
-        "jekyll-build": "bundle exec jekyll build",
-        "jekyll-serve": "bundle exec jekyll serve",
-        "devserver": "SERVE=true rollup -c -w rollup.config.js",
-        "devserver-with-coverage": "COVERAGE=true SERVE=true rollup -c rollup.config.js",
-        "prettier": "prettier src/*.ts src_test/*.ts --write --tab-width 4",
+        "production": "./config/production",
+        "devserver": "SERVE=true rollup --config config/rollup.config.js --watch",
+        "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.js",
+        "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.js",
+        "prettier": "prettier src/*.ts --write --tab-width 4",
         "coveralls": "nyc report --reporter=text-lcov | coveralls",
         "tsc": "tsc --noEmit --project tsconfig.json",
         "merge-coverage": "cp jest-coverage/coverage-final.json .nyc_output/coverage_jsdom.json",
-        "clean-coverage": "rm -rf coverage jest-coverage .nyc_output && jest --clearCache",
-        "print-coverage": "nyc report"
+        "clean-coverage": "rm -rf .nyc_output && jest --clearCache",
+        "print-coverage": "nyc report",
+        "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
+        "test": "pnpm jest && pnpm playwright"
     },
     "dependencies": {
-        "jquery": ">=1.9"
+        "jquery": "^3.6.0"
     },
     "devDependencies": {
-        "@rollup/plugin-typescript": "^8.0.0",
-        "@testing-library/dom": "^7.21.7",
-        "@types/jest": "^26.0.8",
-        "@types/jquery": "^3.5.0",
-        "@types/pngjs": "^6.0.0",
-        "@typescript-eslint/eslint-plugin": "^4.0.1",
-        "@typescript-eslint/parser": "^4.0.1",
-        "autoprefixer": "^10.0.0",
-        "coveralls": "^3.1.0",
-        "eslint": "^7.3.1",
-        "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-jest": "^24.0.0",
-        "expect-playwright": "^0.3.0",
-        "givens": "^1.3.4",
-        "jest": "^26.2.2",
-        "jest-extended": "^0.11.5",
-        "jest-playwright-preset": "^1.3.1",
-        "jsonfile": "^6.0.1",
+        "@babel/cli": "^7.18.10",
+        "@babel/core": "^7.18.10",
+        "@babel/preset-env": "^7.18.10",
+        "@babel/preset-typescript": "^7.18.6",
+        "@playwright/test": "^1.24.2",
+        "@rollup/plugin-babel": "^5.3.1",
+        "@rollup/plugin-node-resolve": "^13.3.0",
+        "@testing-library/dom": "^8.16.1",
+        "@types/debug": "^4.1.7",
+        "@types/jest": "^28.1.6",
+        "@types/jquery": "^3.5.14",
+        "@typescript-eslint/eslint-plugin": "^5.32.0",
+        "@typescript-eslint/parser": "^5.32.0",
+        "autoprefixer": "^10.4.8",
+        "babel-jest": "^28.1.3",
+        "babel-plugin-istanbul": "^6.1.1",
+        "coveralls": "^3.1.1",
+        "eslint": "^8.21.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jest": "^26.7.0",
+        "eslint-plugin-playwright": "^0.10.0",
+        "eslint-plugin-testing-library": "^5.6.0",
+        "givens": "^1.3.9",
+        "jest": "^28.1.3",
+        "jest-environment-jsdom": "^28.1.3",
+        "jest-extended": "^3.0.2",
+        "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^0.26.0",
-        "pixelmatch": "^5.2.1",
-        "playwright": "^1.4.1",
-        "pngjs": "^6.0.0",
-        "postcss": "^8.0.7",
-        "postcss-cli": "^8.0.0",
-        "postcss-load-config": "^3.0.0",
-        "postcss-nested": "^5.0.0",
-        "prettier": "^2.0.5",
-        "rollup": "^2.7.6",
-        "rollup-plugin-istanbul2": "^2.0.2",
-        "rollup-plugin-serve": "^1.0.4",
+        "msw": "^0.44.2",
+        "nyc": "^15.1.0",
+        "playwright": "^1.24.2",
+        "postcss": "^8.4.16",
+        "postcss-cli": "^10.0.0",
+        "postcss-import": "^14.1.0",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^5.0.6",
+        "prettier": "^2.7.1",
+        "rollup": "^2.77.2",
+        "rollup-plugin-serve": "^2.0.0",
         "rollup-plugin-terser": "^7.0.2",
-        "start-server-and-test": "^1.11.3",
-        "ts-jest": "^26.1.4",
-        "tslib": "^2.0.1",
-        "typescript": "^4.1.2"
+        "tslib": "^2.4.0",
+        "typescript": "^4.7.4"
     }
 }

package/src/dataLoader.ts

@@ -1,4 +1,4 @@
-import { DefaultRecord, Node, NodeData } from "./node";
+import { Node } from "./node";
 import { JqTreeWidget } from "./tree.jquery";
 
 export type HandleFinishedLoading = () => void;
@@ -28,7 +28,7 @@ export default class DataLoader {
             this.notifyLoading(false, parentNode, $el);
         };
 
-        const handleSuccess = (data: any): void => {
+        const handleSuccess = (data: string | NodeData[]): void => {
             stopLoading();
             this.treeWidget.loadData(this.parseData(data), parentNode);
 
@@ -108,12 +108,12 @@ export default class DataLoader {
         void jQuery.ajax(ajaxSettings);
     }
 
-    private parseData(data: NodeData): NodeData[] {
+    private parseData(data: string | NodeData[]): NodeData[] {
         const { dataFilter } = this.treeWidget.options;
 
-        const getParsedData = (): unknown => {
+        const getParsedData = () => {
             if (typeof data === "string") {
-                return JSON.parse(data) as unknown;
+                return JSON.parse(data) as NodeData[];
             } else {
                 return data;
             }
@@ -124,7 +124,7 @@ export default class DataLoader {
         if (dataFilter) {
             return dataFilter(parsedData);
         } else {
-            return parsedData as DefaultRecord[];
+            return parsedData;
         }
     }
 }

package/src/dragAndDropHandler.ts

@@ -1,12 +1,8 @@
-import * as jQueryProxy from "jquery";
 import { getPositionName, Node, Position } from "./node";
 import { DropHint, HitArea, PositionInfo } from "./types";
 import { NodeElement } from "./nodeElement";
 import { JqTreeWidget } from "./tree.jquery";
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-const jQuery: JQueryStatic = (<any>jQueryProxy).default || jQueryProxy;
-
 interface Dimensions {
     left: number;
     top: number;
@@ -316,10 +312,14 @@ export class DragAndDropHandler {
 
         this.stopOpenFolderTimer();
 
-        this.openFolderTimer = window.setTimeout(
-            openFolder,
-            this.treeWidget.options.openFolderDelay
-        );
+        const openFolderDelay = this.treeWidget.options.openFolderDelay;
+
+        if (openFolderDelay !== false) {
+            this.openFolderTimer = window.setTimeout(
+                openFolder,
+                openFolderDelay
+            );
+        }
     }
 
     private stopOpenFolderTimer(): void {

package/src/elementsRenderer.ts

@@ -248,6 +248,10 @@ export default class ElementsRenderer {
             classes += " jqtree-title-folder";
         }
 
+        classes += ` jqtree-title-button-${
+            this.treeWidget.options.buttonLeft ? "left" : "right"
+        }`;
+
         titleSpan.className = classes;
 
         titleSpan.setAttribute("role", "treeitem");

package/src/jqtreeOptions.ts

@@ -1,4 +1,4 @@
-import { Node, NodeData } from "./node";
+import { Node } from "./node";
 
 type CanMoveNodeTo = (
     node: Node,
@@ -40,7 +40,7 @@ export interface JQTreeOptions {
     onLoading: HandleLoadingMethod | undefined;
     onSetStateFromStorage: ((data: string) => void) | undefined;
     openedIcon: string | Element;
-    openFolderDelay: number;
+    openFolderDelay: number | false;
     rtl: boolean | undefined;
     selectable: boolean;
     saveState: boolean | string;

package/src/mouse.widget.ts

@@ -22,7 +22,6 @@ const getPositionInfoFromTouch = (
 });
 
 abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
-    public $el: JQuery<HTMLElement>;
     protected isMouseStarted: boolean;
     protected mouseDownInfo: PositionInfo | null;
     private mouseDelayTimer: number | null;
@@ -30,12 +29,15 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
 
     public init(): void {
         const element = this.$el.get(0);
-        element.addEventListener("mousedown", this.mouseDown, {
-            passive: false,
-        });
-        element.addEventListener("touchstart", this.touchStart, {
-            passive: false,
-        });
+
+        if (element) {
+            element.addEventListener("mousedown", this.mouseDown, {
+                passive: false,
+            });
+            element.addEventListener("touchstart", this.touchStart, {
+                passive: false,
+            });
+        }
 
         this.isMouseStarted = false;
         this.mouseDelayTimer = null;
@@ -46,15 +48,17 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
     public deinit(): void {
         const el = this.$el.get(0);
 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        (el as any).removeEventListener("mousedown", this.mouseDown, {
-            passive: false,
-        });
+        if (el) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            (el as any).removeEventListener("mousedown", this.mouseDown, {
+                passive: false,
+            });
 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-        (el as any).removeEventListener("touchstart", this.touchStart, {
-            passive: false,
-        });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            (el as any).removeEventListener("touchstart", this.touchStart, {
+                passive: false,
+            });
+        }
 
         this.removeMouseMoveEventListeners();
     }

package/src/node.ts

@@ -1,7 +1,6 @@
-export type NodeId = number | string;
-
-export type DefaultRecord = Record<string, unknown>;
-export type NodeData = string | DefaultRecord;
+interface NodeRecordWithChildren extends NodeRecord {
+    children: NodeData[];
+}
 
 export enum Position {
     Before = 1,
@@ -34,6 +33,13 @@ export const getPositionName = (position: Position): string => {
 export const getPosition = (name: string): Position | undefined =>
     positionNames[name];
 
+const isNodeRecordWithChildren = (
+    data: NodeData
+): data is NodeRecordWithChildren =>
+    typeof data === "object" &&
+    "children" in data &&
+    data["children"] instanceof Array;
+
 export class Node implements INode {
     public id?: NodeId;
     public name: string;
@@ -131,15 +137,11 @@ export class Node implements INode {
             const node = this.createNode(o);
             this.addChild(node);
 
-            if (
-                typeof o === "object" &&
-                o["children"] &&
-                o["children"] instanceof Array
-            ) {
-                if (o["children"].length === 0) {
+            if (isNodeRecordWithChildren(o)) {
+                if (o.children.length === 0) {
                     node.isEmptyFolder = true;
                 } else {
-                    node.loadFromData(o["children"]);
+                    node.loadFromData(o.children);
                 }
             }
         }
@@ -299,7 +301,7 @@ export class Node implements INode {
     /*
     Get the tree as data.
     */
-    public getData(includeParent = false): DefaultRecord[] {
+    public getData(includeParent = false): NodeRecord[] {
         const getDataFromNodes = (nodes: Node[]): Record<string, unknown>[] => {
             return nodes.map((node) => {
                 const tmpNode: Record<string, unknown> = {};
@@ -379,12 +381,10 @@ export class Node implements INode {
             this.parent.addChildAtPosition(node, childIndex + 1);
 
             if (
-                typeof nodeInfo === "object" &&
-                nodeInfo["children"] &&
-                nodeInfo["children"] instanceof Array &&
-                nodeInfo["children"].length
+                isNodeRecordWithChildren(nodeInfo) &&
+                nodeInfo.children.length
             ) {
-                node.loadFromData(nodeInfo["children"]);
+                node.loadFromData(nodeInfo.children);
             }
 
             return node;
@@ -401,12 +401,10 @@ export class Node implements INode {
             this.parent.addChildAtPosition(node, childIndex);
 
             if (
-                typeof nodeInfo === "object" &&
-                nodeInfo["children"] &&
-                nodeInfo["children"] instanceof Array &&
-                nodeInfo["children"].length
+                isNodeRecordWithChildren(nodeInfo) &&
+                nodeInfo.children.length
             ) {
-                node.loadFromData(nodeInfo["children"]);
+                node.loadFromData(nodeInfo.children);
             }
 
             return node;
@@ -445,13 +443,8 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChild(node);
 
-        if (
-            typeof nodeInfo === "object" &&
-            nodeInfo["children"] &&
-            nodeInfo["children"] instanceof Array &&
-            nodeInfo["children"].length
-        ) {
-            node.loadFromData(nodeInfo["children"]);
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            node.loadFromData(nodeInfo.children);
         }
 
         return node;
@@ -461,13 +454,8 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChildAtPosition(node, 0);
 
-        if (
-            typeof nodeInfo === "object" &&
-            nodeInfo["children"] &&
-            nodeInfo["children"] instanceof Array &&
-            nodeInfo["children"].length
-        ) {
-            node.loadFromData(nodeInfo["children"]);
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            node.loadFromData(nodeInfo.children);
         }
 
         return node;
@@ -641,12 +629,10 @@ export class Node implements INode {
             this.setData(nodeData);
 
             if (
-                typeof nodeData === "object" &&
-                nodeData["children"] &&
-                nodeData["children"] instanceof Array &&
-                nodeData["children"].length
+                isNodeRecordWithChildren(nodeData) &&
+                nodeData.children.length
             ) {
-                addChildren(nodeData["children"]);
+                addChildren(nodeData.children);
             }
         };
 

package/src/nodeElement.ts

@@ -18,10 +18,16 @@ export class NodeElement {
         this.treeWidget = treeWidget;
 
         if (!node.element) {
-            node.element = this.treeWidget.element.get(0);
+            const element = this.treeWidget.element.get(0);
+
+            if (element) {
+                node.element = element;
+            }
         }
 
-        this.$element = jQuery(node.element);
+        if (node.element) {
+            this.$element = jQuery(node.element);
+        }
     }
 
     public addDropHint(position: number): DropHint {
@@ -99,9 +105,8 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon = this.treeWidget.renderer.openedIconElement.cloneNode(
-                true
-            );
+            const icon =
+                this.treeWidget.renderer.openedIconElement.cloneNode(true);
 
             buttonEl.appendChild(icon);
         }
@@ -147,9 +152,8 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon = this.treeWidget.renderer.closedIconElement.cloneNode(
-                true
-            );
+            const icon =
+                this.treeWidget.renderer.closedIconElement.cloneNode(true);
 
             buttonEl.appendChild(icon);
         }
@@ -248,7 +252,11 @@ class GhostDropHint implements DropHint {
     }
 
     public moveInsideOpenFolder(): void {
-        jQuery(this.node.children[0].element).before(this.$ghost);
+        const childElement = this.node.children[0].element;
+
+        if (childElement) {
+            jQuery(childElement).before(this.$ghost);
+        }
     }
 
     public moveInside(): void {

package/src/playwright/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "plugin:playwright/playwright-test"
+  ]
+}

package/src/playwright/coverage.ts

@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+import { BrowserContext } from "@playwright/test";
+
+const istanbulCLIOutput = path.join(process.cwd(), ".nyc_output");
+
+const generateUUID = () => crypto.randomBytes(16).toString("hex");
+
+export const initCoverage = async (context: BrowserContext) => {
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+
+    await context.exposeFunction(
+        "collectIstanbulCoverage",
+        (coverageJSON: string) => {
+            if (!coverageJSON) {
+                console.log("No coverage");
+            } else {
+                const filename = path.join(
+                    istanbulCLIOutput,
+                    `playwright_coverage_${generateUUID()}.json`
+                );
+                console.log(`Writing coverage to ${filename}`);
+                fs.writeFileSync(filename, coverageJSON);
+            }
+        }
+    );
+};
+
+export const saveCoverage = async (context: BrowserContext) => {
+    for (const page of context.pages()) {
+        await page.evaluate(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const anyWindow = window as any;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+            const coverageData = anyWindow.__coverage__;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            anyWindow.collectIstanbulCoverage(JSON.stringify(coverageData));
+        });
+    }
+};