Allow react 16 and 17 (#108)

* allow react 16 and 17

* bump version

* reinstall

* update vite deps

* fixed types

* bump version to min compatible ogma

* fixed tests

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 5.0.3
+current_version = 5.1.0
 commit = False
 tag = False
 serialize =

.version

@@ -1 +1 @@
-5.0.3
+5.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-react",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "A light adaptation of Ogma for React application",
   "keywords": [
     "ogma",
@@ -47,7 +47,7 @@
     "doc:publish": "npm run build:demo && gh-pages -d demo/dist"
   },
   "peerDependencies": {
-    "@linkurious/ogma": "^5.0.2",
+    "@linkurious/ogma": "^5.1.0",
     "react": "^18.0.8",
     "react-dom": "^18.0.8"
   },
@@ -65,8 +65,8 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
-    "@vitejs/plugin-react": "^2.2.0",
-    "@vitest/coverage-c8": "^0.24.5",
+    "@vitejs/plugin-react": "latest",
+    "@vitest/coverage-v8": "latest",
     "@vitest/ui": "latest",
     "canvas": "^2.11.0",
     "dts-bundle-generator": "^9.0.0",
@@ -90,4 +90,4 @@
   },
   "homepage": "https://github.com/linkurious/ogma-react#readme",
   "dependencies": {}
-}
+}

src/transformations/edgeFilter.tsx

@@ -13,17 +13,17 @@ import { useOgma } from "../context";
 import { TransformationProps } from "./types";
 import { toggle, useTransformationCallbacks } from "./utils";
 
-export interface EdgeFilterProps<ED, ND>
-  extends EdgeFilterOptions<ED, ND>,
-    TransformationProps<ED, ND, EdgeFilterOptions<ED, ND>> {}
+export interface EdgeFilterProps<ND, ED>
+  extends EdgeFilterOptions<ND, ED>,
+    TransformationProps<ND, ED, EdgeFilterOptions<ND, ED>> {}
 
 function EdgeFilterComponent<ND = any, ED = any>(
-  props: EdgeFilterProps<ED, ND>,
-  ref?: Ref<EdgeFilterTransformation<ED, ND>>
+  props: EdgeFilterProps<ND, ED>,
+  ref?: Ref<EdgeFilterTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
-    useState<EdgeFilterTransformation<ED, ND>>();
+    useState<EdgeFilterTransformation<ND, ED>>();
 
   useImperativeHandle(ref, () => transformation!, [transformation]);
 
@@ -32,6 +32,7 @@ function EdgeFilterComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/edgeGrouping.tsx

@@ -19,7 +19,7 @@ export interface EdgeGroupingProps<ED, ND>
 
 function EdgeGroupingComponent<ND = any, ED = any>(
   props: EdgeGroupingProps<ED, ND>,
-  ref?: Ref<EdgeGroupingTransformation<ED, ND>>,
+  ref?: Ref<EdgeGroupingTransformation<ED, ND>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function EdgeGroupingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/neighborGeneration.tsx

@@ -19,7 +19,7 @@ export interface NeighborGenerationProps<ND, ED>
 
 function NeighborGenerationComponent<ND = any, ED = any>(
   props: NeighborGenerationProps<ND, ED>,
-  ref: Ref<NeighborGenerationTransformation<ND, ED>>,
+  ref: Ref<NeighborGenerationTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NeighborGenerationComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/neighborMerging.tsx

@@ -19,7 +19,7 @@ export interface NeighborMergingProps<ND, ED>
 
 function NeighborMergingComponent<ND = any, ED = any>(
   props: NeighborMergingProps<ND, ED>,
-  ref: Ref<NeighborMergingTransformation<ND, ED>>,
+  ref: Ref<NeighborMergingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NeighborMergingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/nodeCollapsing.tsx

@@ -19,7 +19,7 @@ export interface NodeCollapsingProps<ND, ED>
 
 export function NodeCollapsingComponent<ND = any, ED = any>(
   props: NodeCollapsingProps<ND, ED>,
-  ref: Ref<NodeCollapsingTransformation<ND, ED>>,
+  ref: Ref<NodeCollapsingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ export function NodeCollapsingComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
 

src/transformations/nodeFilter.tsx

@@ -19,7 +19,7 @@ export interface NodeFilterProps<ED, ND>
 
 function NodeFilterComponent<ND = any, ED = any>(
   props: NodeFilterProps<ND, ED>,
-  ref?: Ref<NodeFilterTransformation<ND, ED>>,
+  ref?: Ref<NodeFilterTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -32,6 +32,7 @@ function NodeFilterComponent<ND = any, ED = any>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/nodeGrouping.tsx

@@ -19,7 +19,7 @@ export interface NodeGroupingProps<ND, ED>
 
 function NodeGroupingComponent<ND, ED>(
   props: NodeGroupingProps<ND, ED>,
-  ref?: Ref<NodeGroupingTransformation<ND, ED>>,
+  ref?: Ref<NodeGroupingTransformation<ND, ED>>
 ) {
   const ogma = useOgma<ND, ED>();
   const [transformation, setTransformation] =
@@ -31,6 +31,7 @@ function NodeGroupingComponent<ND, ED>(
       ...props,
       enabled: !props.disabled,
     });
+    // @ts-expect-error transformation is generic
     useTransformationCallbacks(props, newTransformation, ogma);
     setTransformation(newTransformation);
     return () => {

src/transformations/types.ts

@@ -1,5 +1,6 @@
 import { Transformation } from "@linkurious/ogma";
 
+export interface TransformationContext {}
 /** TODO: expose that in Ogma */
 export interface TransformationOptions {
   duration?: number;
@@ -9,15 +10,15 @@ export interface TransformationOptions {
 export interface TransformationProps<
   ND,
   ED,
-  O extends TransformationOptions = TransformationOptions,
+  C extends TransformationContext = TransformationContext,
 > {
   disabled?: boolean;
-  onEnabled?: (transformation: Transformation<ND, ED, O>) => void;
-  onDisabled?: (transformation: Transformation<ND, ED, O>) => void;
-  onDestroyed?: (transformation: Transformation<ND, ED, O>) => void;
-  onUpdated?: (transformation: Transformation<ND, ED, O>) => void;
+  onEnabled?: (transformation: Transformation<ND, ED, C>) => void;
+  onDisabled?: (transformation: Transformation<ND, ED, C>) => void;
+  onDestroyed?: (transformation: Transformation<ND, ED, C>) => void;
+  onUpdated?: (transformation: Transformation<ND, ED, C>) => void;
   onSetIndex?: (
-    transformation: Transformation<ND, ED, O>,
-    index: number,
+    transformation: Transformation<ND, ED, C>,
+    index: number
   ) => void;
 }

src/transformations/utils.ts

@@ -1,10 +1,9 @@
 import Ogma, { Transformation } from "@linkurious/ogma";
-import { TransformationProps, TransformationOptions } from "./types";
-
-export function toggle<ND, ED, O extends TransformationOptions>(
+import { TransformationProps, TransformationContext } from "./types";
+export function toggle<ND, ED, O extends TransformationContext>(
   transformation: Transformation<ND, ED, O>,
   disabled: boolean,
-  duration?: number,
+  duration?: number
 ) {
   if (disabled === transformation.isEnabled()) {
     if (disabled) transformation.disable(duration as number);
@@ -15,32 +14,32 @@ export function toggle<ND, ED, O extends TransformationOptions>(
 export function useTransformationCallbacks<
   ND,
   ED,
-  O extends TransformationOptions,
+  C extends TransformationContext,
 >(
-  props: TransformationProps<ND, ED, O>,
-  transformation: Transformation<ND, ED, O>,
-  ogma: Ogma,
+  props: TransformationProps<ND, ED, C>,
+  transformation: Transformation<ND, ED, C>,
+  ogma: Ogma<ND, ED>
 ) {
   const enabledListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onEnabled && props.onEnabled(transformation);
   };
   const disabledListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onDisabled && props.onDisabled(transformation);
   };
   const updatedListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onUpdated && props.onUpdated(transformation);
@@ -49,7 +48,7 @@ export function useTransformationCallbacks<
     target,
     index,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
     index: number;
   }) => {
     if (target !== transformation) return;
@@ -58,7 +57,7 @@ export function useTransformationCallbacks<
   const destroyedListener = ({
     target,
   }: {
-    target: Transformation<ND, ED, O>;
+    target: Transformation<ND, ED, C>;
   }) => {
     if (target !== transformation) return;
     props.onDestroyed && props.onDestroyed(transformation);
@@ -70,10 +69,15 @@ export function useTransformationCallbacks<
       .off(destroyedListener);
   };
   ogma.events
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationEnabled", enabledListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationDisabled", disabledListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationDestroyed", destroyedListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationSetIndex", setIndexListener)
+    // @ts-expect-error TODO: expose that in Ogma
     .on("transformationRefresh", updatedListener);
   const cleanup = () => {
     ogma.events

test/transformations/nodeGrouping.test.tsx

@@ -60,12 +60,12 @@ describe("Node grouping", () => {
           count = count | 8;
         }}
       />,
-      div,
+      div
     );
     return (ref.current as OgmaLib).transformations
       .afterNextUpdate()
       .then(() => {
-        expect(count).toEqual(2);
+        expect(count).toEqual(10);
       })
       .then(() => userEvent.click(screen.getByText("setGrouping")))
       .then(() => ref.current?.transformations.afterNextUpdate())

test/transformations/test-components.tsx

@@ -25,7 +25,7 @@ import { createRef, forwardRef, useState } from "react";
 export const ref = createRef<OgmaLib>();
 
 function EdgeFilterTestC(
-  filter: Partial<EdgeFilterProps<unknown, unknown>> = {},
+  filter: Partial<EdgeFilterProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<EdgeFilterProps<unknown, unknown>>({
     criteria: (edge) => edge.getId() === 0,
@@ -55,7 +55,7 @@ function EdgeFilterTestC(
   );
 }
 function NodeFilterTestC(
-  filter: Partial<NodeFilterProps<unknown, unknown>> = {},
+  filter: Partial<NodeFilterProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<NodeFilterProps<unknown, unknown>>({
     criteria: (node) => node.getId() === 0,
@@ -86,7 +86,7 @@ function NodeFilterTestC(
 }
 
 function EdgeGroupingTestC(
-  grouping: Partial<EdgeGroupingProps<unknown, unknown>> = {},
+  grouping: Partial<EdgeGroupingProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<EdgeGroupingProps<unknown, unknown>>({
     selector: (edge) => !!(+edge.getId() % 2),
@@ -133,7 +133,7 @@ function EdgeGroupingTestC(
 }
 
 function NodeGroupingTestC(
-  grouping: Partial<NodeGroupingProps<unknown, unknown>> = {},
+  grouping: Partial<NodeGroupingProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<NodeGroupingProps<unknown, unknown>>({
     selector: (node) => !!(+node.getId() % 2),
@@ -172,7 +172,7 @@ function NodeGroupingTestC(
           disabled={props.disabled}
           selector={props.selector}
           nodeGenerator={props.nodeGenerator}
-          onCreated={props.onCreated}
+          onGroupUpdate={props.onGroupUpdate}
           onDestroyed={props.onDestroyed}
           onEnabled={props.onEnabled}
           onDisabled={props.onDisabled}
@@ -186,15 +186,15 @@ function NodeGroupingTestC(
 }
 
 function NeighborGenerationTestC(
-  generator: Partial<NeighborGenerationProps<unknown, unknown>> = {},
+  generator: Partial<NeighborGenerationProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<NeighborGenerationProps<unknown, unknown>>(
     {
       selector: (node) => +node.getId() % 2 === 0,
       neighborIdFunction: () => `even`,
       disabled: false,
       ...generator,
-    },
+    }
   );
   function updateGenerator() {
     setProps({
@@ -226,7 +226,7 @@ function NeighborGenerationTestC(
 }
 
 function NeighborMergingTestC(
-  generator: Partial<NeighborMergingProps<unknown, unknown>> = {},
+  generator: Partial<NeighborMergingProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<NeighborMergingProps<unknown, unknown>>({
     selector: (node) => +node.getId() === 1,
@@ -263,7 +263,7 @@ function NeighborMergingTestC(
 }
 
 function NodeCollapsingTestC(
-  generator: Partial<NodeCollapsingProps<unknown, unknown>> = {},
+  generator: Partial<NodeCollapsingProps<unknown, unknown>> = {}
 ) {
   const [props, setProps] = useState<NodeCollapsingProps<unknown, unknown>>({
     selector: (node) => +node.getId() === 0,