@neo4j-nvl/react 1.2.1 → 2.0.0-1e695738

package/lib/utils/graph-comparison.js

@@ -1,72 +1,57 @@
-import { isEqual, isNil, keyBy, keys, sortBy, transform } from 'lodash';
+import { isEqual, isNil, keyBy, keys, sortBy, transform } from "lodash-es";
+// src/utils/graph-comparison.ts
 const getMapDifferences = (prevGraphElements, newGraphElements) => {
-    const prevMap = keyBy(prevGraphElements, 'id');
-    const currentMap = keyBy(newGraphElements, 'id');
-    const prevIds = sortBy(keys(prevMap));
-    const currentIds = sortBy(keys(currentMap));
-    const added = [];
-    const removed = [];
-    const updated = [];
-    let i = 0;
-    let j = 0;
-    while (i < prevIds.length && j < currentIds.length) {
-        const prevId = prevIds[i];
-        const currId = currentIds[j];
-        if (prevId === undefined || currId === undefined) {
-            continue;
-        }
-        if (prevId === currId) {
-            if (!isEqual(prevMap[prevId], currentMap[currId])) {
-                updated.push(currId);
-            }
-            i += 1;
-            j += 1;
-        }
-        else if (prevId < currId) {
-            removed.push(prevId);
-            i += 1;
-        }
-        else {
-            added.push(currId);
-            j += 1;
-        }
-    }
-    while (i < prevIds.length) {
-        const prevId = prevIds[i];
-        if (prevId === undefined) {
-            continue;
-        }
-        removed.push(prevId);
-        i += 1;
-    }
-    while (j < currentIds.length) {
-        const currId = currentIds[j];
-        if (currId === undefined) {
-            continue;
-        }
-        added.push(currId);
-        j += 1;
-    }
-    return {
-        added: added.map((id) => currentMap[id]).filter((n) => !isNil(n)),
-        removed: removed.map((id) => prevMap[id]).filter((n) => !isNil(n)),
-        updated: updated.map((id) => currentMap[id]).filter((n) => !isNil(n))
-    };
+	const prevMap = keyBy(prevGraphElements, "id");
+	const currentMap = keyBy(newGraphElements, "id");
+	const prevIds = sortBy(keys(prevMap));
+	const currentIds = sortBy(keys(currentMap));
+	const added = [];
+	const removed = [];
+	const updated = [];
+	let i = 0;
+	let j = 0;
+	while (i < prevIds.length && j < currentIds.length) {
+		const prevId = prevIds[i];
+		const currId = currentIds[j];
+		if (prevId === void 0 || currId === void 0) continue;
+		if (prevId === currId) {
+			if (!isEqual(prevMap[prevId], currentMap[currId])) updated.push(currId);
+			i += 1;
+			j += 1;
+		} else if (prevId < currId) {
+			removed.push(prevId);
+			i += 1;
+		} else {
+			added.push(currId);
+			j += 1;
+		}
+	}
+	while (i < prevIds.length) {
+		const prevId = prevIds[i];
+		if (prevId === void 0) continue;
+		removed.push(prevId);
+		i += 1;
+	}
+	while (j < currentIds.length) {
+		const currId = currentIds[j];
+		if (currId === void 0) continue;
+		added.push(currId);
+		j += 1;
+	}
+	return {
+		added: added.map((id) => currentMap[id]).filter((n) => !isNil(n)),
+		removed: removed.map((id) => prevMap[id]).filter((n) => !isNil(n)),
+		updated: updated.map((id) => currentMap[id]).filter((n) => !isNil(n))
+	};
 };
 const getNodeAttributeDifferences = (prevNodes, newNodes) => {
-    const prevNodeMap = keyBy(prevNodes, 'id');
-    return newNodes
-        .map((nodeToUpdate) => {
-        const previousNode = prevNodeMap[nodeToUpdate.id];
-        if (previousNode === undefined) {
-            return null;
-        }
-        return transform(nodeToUpdate, (result, value, key) => {
-            if (key === 'id' || value !== previousNode[key]) {
-                Object.assign(result, { [key]: value });
-            }
-        });
-    })
-        .filter((n) => n !== null && Object.keys(n).length > 1);
+	const prevNodeMap = keyBy(prevNodes, "id");
+	return newNodes.map((nodeToUpdate) => {
+		const previousNode = prevNodeMap[nodeToUpdate.id];
+		if (previousNode === void 0) return null;
+		return transform(nodeToUpdate, (result, value, key) => {
+			if (key === "id" || value !== previousNode[key]) Object.assign(result, { [key]: value });
+		});
+	}).filter((n) => n !== null && Object.keys(n).length > 1);
 };
-export { getNodeAttributeDifferences, getMapDifferences };
+export { getMapDifferences, getNodeAttributeDifferences };

package/lib/utils/hooks.d.ts

@@ -1,2 +1,2 @@
-import type { EffectCallback } from 'react';
-export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: unknown[]) => void;
+import { EffectCallback } from "react";
+export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: unknown[]) => void;

package/lib/utils/hooks.js

@@ -1,16 +1,15 @@
-import { isEqual } from 'lodash';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
+import { isEqual } from "lodash-es";
+// src/utils/hooks.ts
 const deepCompareEquals = (a, b) => {
-    return isEqual(a, b);
+	return isEqual(a, b);
 };
 const useDeepCompareMemoize = (value) => {
-    const ref = useRef();
-    if (!deepCompareEquals(value, ref.current)) {
-        ref.current = value;
-    }
-    return ref.current;
+	const ref = useRef();
+	if (!deepCompareEquals(value, ref.current)) ref.current = value;
+	return ref.current;
 };
-export const useDeepCompareEffect = (callback, dependencies) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+const useDeepCompareEffect = (callback, dependencies) => {
+	useEffect(callback, dependencies.map(useDeepCompareMemoize));
 };
+export { useDeepCompareEffect };

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.2.1",
+  "version": "2.0.0-1e695738",
+  "type": "module",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "description": "React wrappers for the Neo4j Visualization Library",
@@ -15,8 +25,8 @@
     "url": "https://community.neo4j.com/c/neo4j-graph-platform/neo4j-bloom"
   },
   "scripts": {
-    "build": "yarn global:tsc",
-    "watch": "yarn global:tsc -w",
+    "build": "yarn global:tsc --noEmit && tsdown",
+    "watch": "tsdown --watch",
     "test": " yarn global:jest",
     "prepack": "cp ../../LICENSE.txt ./ && cp ../../CHANGELOG.md ./",
     "postpack": "rm LICENSE.txt && rm CHANGELOG.md",
@@ -26,22 +36,27 @@
     "LICENSE.txt",
     "lib"
   ],
+  "skills": [
+    "npm:@neo4j-nvl/base"
+  ],
   "devDependencies": {
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "16.3.0",
-    "@types/lodash": "4.17.21",
+    "@types/lodash-es": "4.17.12",
     "@types/react": "18.3.27",
     "react": "19.2.1",
-    "react-dom": "19.2.1"
+    "react-dom": "19.2.1",
+    "tsdown": "0.23.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.2.1",
-    "@neo4j-nvl/interaction-handlers": "1.2.1",
-    "lodash": "4.18.1"
+    "@neo4j-nvl/base": "2.0.0-1e695738",
+    "@neo4j-nvl/interaction-handlers": "2.0.0-1e695738",
+    "lodash-es": "4.18.1"
   },
   "peerDependencies": {
-    "react": "18.0.0 || ^19.0.0",
-    "react-dom": "18.0.0 || ^19.0.0"
-  }
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "stableVersion": "2.0.0"
 }

package/lib/__tests__/BasicNvlWrapper.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
-import { StrictMode } from 'react';
-import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
-jest.mock('@neo4j-nvl/base');
-jest.mock('@neo4j-nvl/layout-workers');
-describe('BasicNvlWrapper', () => {
-    let setZoom;
-    let setPan;
-    let setZoomAndPan;
-    beforeEach(() => {
-        setZoom = jest.fn();
-        setPan = jest.fn();
-        setZoomAndPan = jest.fn();
-        jest.spyOn(NVL.prototype, 'setZoom').mockImplementation(setZoom);
-        jest.spyOn(NVL.prototype, 'setPan').mockImplementation(setPan);
-        jest.spyOn(NVL.prototype, 'setZoomAndPan').mockImplementation(setZoomAndPan);
-    });
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-    test('initialises NVL expectedly with an empty graph object and no other properties', () => {
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [], [], {}, {});
-    });
-    test('initialises NVL expectedly with a graph object and properties', () => {
-        const mockLayoutDoneFunction = jest.fn();
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }) }));
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
-            onLayoutDone: mockLayoutDoneFunction
-        });
-    });
-    test('destroys NVL on unmount', () => {
-        const destroy = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
-        const { unmount } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
-        unmount();
-        expect(NVL).toHaveBeenCalledTimes(1);
-        expect(destroy).toHaveBeenCalledTimes(1);
-    });
-    test('successfully re-initialises NVL when using React StrictMode', () => {
-        const destroy = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
-        render(_jsx(StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
-        expect(NVL).toHaveBeenCalledTimes(2);
-        expect(destroy).toHaveBeenCalledTimes(1);
-    });
-    test('reapplies zoom and pan when re-initialising NVL with React StrictMode', () => {
-        const destroy = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
-        render(_jsx(StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }) }));
-        expect(NVL).toHaveBeenCalledTimes(2);
-        expect(destroy).toHaveBeenCalledTimes(1);
-        expect(setZoomAndPan).toHaveBeenCalledTimes(2);
-        expect(setZoomAndPan).toHaveBeenNthCalledWith(1, 1.5, 10, 20);
-        expect(setZoomAndPan).toHaveBeenNthCalledWith(2, 1.5, 10, 20);
-    });
-    test('calls setZoom when zoom property is provided', () => {
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
-        expect(setZoom).toHaveBeenCalledWith(1.5);
-        expect(setZoom).toHaveBeenCalledTimes(1);
-    });
-    test('calls setPan when pan property is provided', () => {
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
-        expect(setPan).toHaveBeenCalledWith(10, 20);
-        expect(setPan).toHaveBeenCalledTimes(1);
-    });
-    test('calls setZoomAndPan when both zoom and pan properties are provided', () => {
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledWith(1.5, 10, 20);
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-    });
-    test('does not call zoom/pan methods when properties are undefined', () => {
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
-        expect(setZoom).not.toHaveBeenCalled();
-        expect(setPan).not.toHaveBeenCalled();
-        expect(setZoomAndPan).not.toHaveBeenCalled();
-    });
-    test('only calls setZoom when zoom changes', () => {
-        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
-        expect(setZoom).toHaveBeenCalledTimes(1);
-        expect(setZoom).toHaveBeenCalledWith(1.5);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
-        expect(setZoom).toHaveBeenCalledTimes(1);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0 }) }));
-        expect(setZoom).toHaveBeenCalledTimes(2);
-        expect(setZoom).toHaveBeenCalledWith(2.0);
-        expect(setPan).not.toHaveBeenCalled();
-        expect(setZoomAndPan).not.toHaveBeenCalled();
-    });
-    test('only calls setPan when pan changes', () => {
-        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
-        expect(setPan).toHaveBeenCalledTimes(1);
-        expect(setPan).toHaveBeenCalledWith(10, 20);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
-        expect(setPan).toHaveBeenCalledTimes(1);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 30, y: 40 } }) }));
-        expect(setPan).toHaveBeenCalledTimes(2);
-        expect(setPan).toHaveBeenCalledWith(30, 40);
-        expect(setZoom).not.toHaveBeenCalled();
-        expect(setZoomAndPan).not.toHaveBeenCalled();
-    });
-    test('calls setZoomAndPan when both zoom and pan change', () => {
-        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        expect(setZoomAndPan).toHaveBeenCalledWith(1.5, 10, 20);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0, pan: { x: 30, y: 40 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledTimes(2);
-        expect(setZoomAndPan).toHaveBeenCalledWith(2.0, 30, 40);
-        expect(setZoom).not.toHaveBeenCalled();
-        expect(setPan).not.toHaveBeenCalled();
-    });
-    test('calls appropriate methods when only zoom changes while both are set', () => {
-        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0, pan: { x: 10, y: 20 } }) }));
-        expect(setZoom).toHaveBeenCalledTimes(1);
-        expect(setZoom).toHaveBeenCalledWith(2.0);
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        expect(setPan).not.toHaveBeenCalled();
-    });
-    test('calls appropriate methods when only pan changes while both are set', () => {
-        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 30, y: 40 } }) }));
-        expect(setPan).toHaveBeenCalledTimes(1);
-        expect(setPan).toHaveBeenCalledWith(30, 40);
-        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
-        expect(setZoom).not.toHaveBeenCalled();
-    });
-});

package/lib/__tests__/InteractiveNvlWrapper.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';