jqtree 1.6.1 → 1.6.2

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.1";
-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.1",
+    "version": "1.6.2",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -14,6 +14,7 @@
         "url": "https://github.com/mbraak/jqtree"
     },
     "scripts": {
+        "ci": "pnpm run lint && yarn run tsc && pnpm run test",
         "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",
@@ -31,44 +32,51 @@
         "print-coverage": "nyc report"
     },
     "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.5.0",
-        "givens": "^1.3.4",
-        "jest": "^27.0.1",
-        "jest-extended": "^0.11.5",
-        "jest-playwright-preset": "^1.6.0",
-        "jsonfile": "^6.0.1",
+        "@babel/cli": "^7.16.0",
+        "@babel/core": "^7.16.5",
+        "@babel/preset-env": "^7.16.5",
+        "@babel/preset-typescript": "^7.16.5",
+        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-node-resolve": "^13.1.1",
+        "@testing-library/dom": "^8.11.1",
+        "@types/jest": "^27.0.3",
+        "@types/jquery": "^3.5.10",
+        "@types/pngjs": "^6.0.1",
+        "@typescript-eslint/eslint-plugin": "^5.7.0",
+        "@typescript-eslint/parser": "^5.7.0",
+        "autoprefixer": "^10.4.0",
+        "babel-jest": "^27.4.5",
+        "babel-plugin-istanbul": "^6.1.1",
+        "coveralls": "^3.1.1",
+        "eslint": "^8.4.1",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jest": "^25.3.0",
+        "eslint-plugin-playwright": "^0.6.0",
+        "eslint-plugin-testing-library": "^5.0.1",
+        "expect-playwright": "^0.8.0",
+        "givens": "^1.3.9",
+        "jest": "^27.4.5",
+        "jest-extended": "^1.2.0",
+        "jest-playwright-preset": "^1.7.0",
+        "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^0.29.0",
+        "msw": "^0.36.3",
         "pixelmatch": "^5.2.1",
-        "playwright": "^1.4.1",
+        "playwright": "^1.17.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",
+        "postcss": "^8.4.5",
+        "postcss-cli": "^9.1.0",
+        "postcss-load-config": "^3.1.0",
+        "postcss-nested": "^5.0.6",
+        "prettier": "^2.5.1",
+        "rollup": "^2.61.1",
+        "rollup-plugin-serve": "^1.1.0",
         "rollup-plugin-terser": "^7.0.2",
-        "start-server-and-test": "^1.11.3",
-        "ts-jest": "^27.0.0",
-        "tslib": "^2.0.1",
-        "typescript": "^4.1.2"
+        "start-server-and-test": "^1.14.0",
+        "tslib": "^2.3.1",
+        "typescript": "^4.5.4"
     }
 }

package/production

@@ -1,5 +1,5 @@
-rollup -c rollup.config.js
-DEBUG_BUILD=true rollup -c rollup.config.js
-tsc --outDir lib --noEmit false --project tsconfig.json &&
-postcss -o jqtree.css jqtree.postcss
+rollup -c rollup.config.js &&
+DEBUG_BUILD=true rollup -c rollup.config.js &&
+babel src --out-dir lib --extensions .ts &&
+postcss -o jqtree.css jqtree.postcss &&
 postcss -o static/example.css static/example.postcss

package/rollup.config.js

@@ -2,10 +2,10 @@ import fs from "fs";
 import path from "path";
 import jsonfile from "jsonfile";
 import template from "lodash.template";
-import typescript from "@rollup/plugin-typescript";
-import { terser } from "rollup-plugin-terser";
+import { babel } from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
 import serve from "rollup-plugin-serve";
-import coverage from "rollup-plugin-istanbul2";
+import { terser } from "rollup-plugin-terser";
 
 const getBanner = () => {
     const headerTemplate = fs.readFileSync("./src/header.txt", "utf8");
@@ -24,7 +24,19 @@ const debugBuild = Boolean(process.env.DEBUG_BUILD);
 const devServer = Boolean(process.env.SERVE);
 const includeCoverage = Boolean(process.env.COVERAGE);
 
-const plugins = [typescript()];
+const resolvePlugin = resolve({ extensions: [".ts"] });
+
+const babelConfigFile = includeCoverage
+    ? "babel.coverage.config.json"
+    : "babel.config.json";
+
+const babelPlugin = babel({
+    babelHelpers: "bundled",
+    configFile: path.resolve(__dirname, babelConfigFile),
+    extensions: [".ts"],
+});
+
+const plugins = [resolvePlugin, babelPlugin];
 
 if (!debugBuild) {
     const terserPlugin = terser({
@@ -35,13 +47,6 @@ if (!debugBuild) {
     plugins.push(terserPlugin);
 }
 
-if (includeCoverage) {
-    const coveragePlugin = coverage({
-        esModules: true,
-    });
-    plugins.push(coveragePlugin);
-}
-
 if (devServer) {
     const servePlugin = serve({
         contentBase: [

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;

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,

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/jest-playwright"
+  ]
+}

package/src/playwright/playwright.test.ts

@@ -51,15 +51,15 @@ afterEach(async () => {
 });
 
 it("displays a tree", async () => {
-    await expect(page).toHaveText("Saurischia");
-    await expect(page).toHaveText("Ornithischians");
-    await expect(page).toHaveText("Coelophysoids");
+    await expect(page).toMatchText(/.*Saurischia.*/);
+    await expect(page).toMatchText(/.*Ornithischians.*/);
+    await expect(page).toMatchText(/.*Coelophysoids.*/);
 
     await matchScreenshot("displays_a_tree");
 });
 
 it("selects a node", async () => {
-    await expect(page).toHaveText("Saurischia");
+    await expect(page).toMatchText(/.*Saurischia.*/);
     const saurischia = await findNodeElement("Saurischia");
     await selectNode(saurischia);
     await expectToBeSelected(saurischia);
@@ -68,7 +68,7 @@ it("selects a node", async () => {
 });
 
 it("opens a node", async () => {
-    await expect(page).toHaveText("Saurischia");
+    await expect(page).toMatchText(/.*Saurischia.*/);
 
     const theropods = await findNodeElement("Theropods");
     await expectToBeClosed(theropods);
@@ -84,30 +84,30 @@ describe("dragAndDrop", () => {
     it("moves a node", async () => {
         await dragAndDrop("Herrerasaurians", "Ornithischians");
 
-        await getTreeStructure().then((structure) => {
-            expect(structure).toEqual([
-                expect.objectContaining({
-                    name: "Saurischia",
-                    children: [
-                        expect.objectContaining({ name: "Theropods" }),
-                        expect.objectContaining({ name: "Sauropodomorphs" }),
-                    ],
-                }),
-                expect.objectContaining({
-                    name: "Ornithischians",
-                    children: [
-                        expect.objectContaining({ name: "Herrerasaurians" }),
-                        expect.objectContaining({ name: "Heterodontosaurids" }),
-                        expect.objectContaining({ name: "Thyreophorans" }),
-                        expect.objectContaining({ name: "Ornithopods" }),
-                        expect.objectContaining({
-                            name: "Pachycephalosaurians",
-                        }),
-                        expect.objectContaining({ name: "Ceratopsians" }),
-                    ],
-                }),
-            ]);
-        });
+        const structure = await getTreeStructure();
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
 
         await matchScreenshot("moves_a_node");
     });