Skip to content

Commit 280f882

Browse files
guzmanvigguzmanvig
committed
Upgrading dependencies
1 parent 8d05b85 commit 280f882

File tree

10 files changed

+9042
-15707
lines changed

10 files changed

+9042
-15707
lines changed

‎jest.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,12 @@ module.exports = {
33
roots: ["<rootDir>/src"],
44
setupFiles: ["<rootDir>/src/jest.js"],
55
testEnvironment: "jsdom",
6+
// Added this because react-resize-detector uses ES Modules which Jest doesn't support.
7+
transformIgnorePatterns: [
8+
"node_modules/(?!(react-resize-detector)/)",
9+
],
10+
transform: {
11+
"^.+\\.tsx?$": "ts-jest",
12+
"^.+\\.jsx?$": "ts-jest",
13+
},
614
};

‎package-lock.json‎

Lines changed: 8966 additions & 15656 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,48 +47,48 @@
4747
"not dead"
4848
],
4949
"dependencies": {
50-
"react-resize-detector": "^7.1.2",
50+
"react-resize-detector": "^12.3.0",
5151
"seqparse": "^0.2.1",
5252
"webfontloader": "^1.6.28"
5353
},
5454
"devDependencies": {
55-
"@testing-library/jest-dom": "^5.16.5",
56-
"@testing-library/react": "^13.4.0",
57-
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
58-
"@types/jest": "^28.1.4",
59-
"@types/react": "^18.0.0",
60-
"@types/react-dom": "^18.0.0",
61-
"@types/xml2js": "^0.4.9",
62-
"@typescript-eslint/eslint-plugin": "^5.10.1",
63-
"@typescript-eslint/parser": "^5.10.1",
64-
"csstype": "^3.1.2",
65-
"eslint": "^8.8.0",
66-
"eslint-plugin-react": "^7.28.0",
67-
"eslint-plugin-react-hooks": "^4.6.0",
68-
"eslint-plugin-sort-destructure-keys": "^1.4.0",
55+
"@testing-library/jest-dom": "^6.9.1",
56+
"@testing-library/react": "^16.3.0",
57+
"@trivago/prettier-plugin-sort-imports": "^5.2.2",
58+
"@types/jest": "^30.0.0",
59+
"@types/react": "^19.2.2",
60+
"@types/react-dom": "^19.2.2",
61+
"@types/xml2js": "^0.4.14",
62+
"@typescript-eslint/eslint-plugin": "^8.46.1",
63+
"@typescript-eslint/parser": "^8.46.1",
64+
"csstype": "^3.1.3",
65+
"eslint": "^8.57.1",
66+
"eslint-plugin-react": "^7.37.5",
67+
"eslint-plugin-react-hooks": "^7.0.0",
68+
"eslint-plugin-sort-destructure-keys": "^2.0.0",
6969
"eslint-plugin-sort-keys-fix": "^1.1.2",
70-
"eslint-plugin-typescript-sort-keys": "^2.1.0",
71-
"html-webpack-plugin": "^5.5.0",
72-
"jest": "^28.0.0",
73-
"jest-environment-jsdom": "^28.1.3",
74-
"next": "^14.1.0",
70+
"eslint-plugin-typescript-sort-keys": "^3.3.0",
71+
"html-webpack-plugin": "^5.6.4",
72+
"jest": "^30.2.0",
73+
"jest-environment-jsdom": "^30.2.0",
74+
"next": "^15.5.5",
7575
"path-browserify": "^1.0.1",
76-
"prettier": "^2.5.1",
77-
"react": "^18.0.0",
78-
"react-dom": "^18.0.0",
79-
"source-map-loader": "^1.1.3",
76+
"prettier": "^3.6.2",
77+
"react": "^19.2.0",
78+
"react-dom": "^19.2.0",
79+
"source-map-loader": "^5.0.0",
8080
"stream-browserify": "^3.0.0",
8181
"timers-browserify": "^2.0.12",
82-
"ts-jest": "^28.0.0",
83-
"ts-loader": "^8.3.0",
84-
"typescript": "^4.5.2",
85-
"webpack": "^5.73.0",
86-
"webpack-cli": "^4.10.0",
87-
"webpack-dev-server": "^4.9.3",
82+
"ts-jest": "^29.4.5",
83+
"ts-loader": "^9.5.4",
84+
"typescript": "^5.9.3",
85+
"webpack": "^5.102.1",
86+
"webpack-cli": "^6.0.1",
87+
"webpack-dev-server": "^5.2.2",
8888
"webpack-node-externals": "^3.0.0"
8989
},
9090
"peerDependencies": {
91-
"react": "^16.8.6 || ^17.0.0 || ^18.0.0",
92-
"react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
91+
"react": "^16.8.6 || ^17.0.0 || ^18.0.0 || ^19.2.0",
92+
"react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0 || ^19.2.0"
9393
}
9494
}

‎src/Circular/Index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export class Index extends React.PureComponent<IndexProps> {
9292
lastBase += seqLength;
9393
}
9494

95-
const basepairsToRender: JSX.Element[] = [];
95+
const basepairsToRender: React.ReactElement[] = [];
9696
for (let i = firstBase; i <= lastBase; i += 1) {
9797
basepairsToRender.push(
9898
<text
@@ -186,7 +186,7 @@ export class Index extends React.PureComponent<IndexProps> {
186186
const subtitleStyle = {
187187
fill: "gray",
188188
fontSize: 12,
189-
textAnchor: "middle",
189+
textAnchor: "middle" as const,
190190
};
191191

192192
// generate the full circle around the edge of the plasmid

‎src/Linear/InfiniteScroll.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import CentralIndexContext from "../centralIndexContext";
44
import { Size } from "../elements";
55
import { isEqual } from "../isEqual";
66
import { linearScroller } from "../style";
7+
import { SeqBlockProps } from "./SeqBlock";
78

89
interface InfiniteScrollProps {
910
blockHeights: number[];
1011
bpsPerBlock: number;
11-
seqBlocks: JSX.Element[];
12+
seqBlocks: React.ReactElement<SeqBlockProps>[];
1213
size: Size;
1314
totalHeight: number;
1415
}
@@ -34,8 +35,8 @@ export class InfiniteScroll extends React.PureComponent<InfiniteScrollProps, Inf
3435
static context: React.ContextType<typeof CentralIndexContext>;
3536
declare context: React.ContextType<typeof CentralIndexContext>;
3637

37-
scroller: React.RefObject<HTMLDivElement> = React.createRef(); // ref to a div for scrolling
38-
insideDOM: React.RefObject<HTMLDivElement> = React.createRef(); // ref to a div inside the scroller div
38+
scroller: React.RefObject<HTMLDivElement | null> = React.createRef(); // ref to a div for scrolling
39+
insideDOM: React.RefObject<HTMLDivElement | null> = React.createRef(); // ref to a div inside the scroller div
3940
timeoutID;
4041

4142
constructor(props: InfiniteScrollProps) {

‎src/Linear/Linear.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { createMultiRows, createSingleRows, stackElements } from "../elementsToR
66
import { isEqual } from "../isEqual";
77
import { createTranslations } from "../sequence";
88
import { InfiniteScroll } from "./InfiniteScroll";
9-
import { SeqBlock } from "./SeqBlock";
9+
import { SeqBlock, SeqBlockProps } from "./SeqBlock";
1010

1111
export interface LinearProps {
1212
annotations: Annotation[];
@@ -177,7 +177,7 @@ export default class Linear extends React.Component<LinearProps> {
177177
blockHeights[i] = blockHeight;
178178
}
179179

180-
const seqBlocks: JSX.Element[] = [];
180+
const seqBlocks: React.ReactElement<SeqBlockProps>[] = [];
181181
let yDiff = 0;
182182
for (let i = 0; i < arrSize; i += 1) {
183183
const firstBase = i * bpsPerBlock;

‎src/Linear/Selection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ class Block extends React.PureComponent<BlockProps> {
173173

174174
let x: number | null = null;
175175
let width: number | null = null;
176-
let secondBlock: JSX.Element | null = null;
176+
let secondBlock: React.ReactElement | null = null;
177177
if (clockwise && end > start) {
178178
// does not cross the zero index, FWD direction
179179
if (start <= lastBase && end > firstBase) {

‎src/Linear/SeqBlock.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export type FindXAndWidthElementType = (
2626
elements: NameRange[]
2727
) => { overflowLeft: boolean; overflowRight: boolean; width: number; x: number };
2828

29-
interface SeqBlockProps {
29+
export interface SeqBlockProps {
3030
annotationRows: Annotation[][];
3131
blockHeight: number;
3232
bpColors?: { [key: number | string]: string };
@@ -251,7 +251,7 @@ export class SeqBlock extends React.PureComponent<SeqBlockProps> {
251251
const textProps = {
252252
fontSize: seqFontSize,
253253
lengthAdjust: "spacing",
254-
textAnchor: "start",
254+
textAnchor: "start" as const,
255255
textLength: size.width >= 0 ? size.width : 1,
256256
textRendering: "optimizeLegibility",
257257
};

‎src/SeqViewerContainer.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { withResizeDetector } from "react-resize-detector";
2+
import { useResizeDetector } from "react-resize-detector";
33

44
import Circular, { CircularProps } from "./Circular/Circular";
55
import { EventHandler } from "./EventHandler";
@@ -51,7 +51,7 @@ interface SeqViewerContainerProps {
5151
seqType: SeqType;
5252
showComplement: boolean;
5353
showIndex: boolean;
54-
targetRef: React.LegacyRef<HTMLDivElement>;
54+
targetRef?: React.LegacyRef<HTMLDivElement>;
5555
/** testSize is a forced height/width that overwrites anything from sizeMe. For testing */
5656
testSize?: { height: number; width: number };
5757
translations: NameRange[];
@@ -366,4 +366,18 @@ class SeqViewerContainer extends React.Component<SeqViewerContainerProps, SeqVie
366366
}
367367
}
368368

369-
export default withResizeDetector(SeqViewerContainer);
369+
// Wrapper component to use the modern useResizeDetector hook
370+
const SeqViewerContainerWithResize: React.FC<Omit<SeqViewerContainerProps, 'height' | 'width' | 'targetRef'>> = (props) => {
371+
const { height, ref, width } = useResizeDetector();
372+
373+
return (
374+
<SeqViewerContainer
375+
{...props}
376+
height={height || 0}
377+
targetRef={ref}
378+
width={width || 0}
379+
/>
380+
);
381+
};
382+
383+
export default SeqViewerContainerWithResize;

‎src/index.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import * as ReactDOM from "react-dom";
2+
import { createRoot, Root } from "react-dom/client";
33
import { renderToString as reactRenderToString } from "react-dom/server";
44

55
import Circular from "./Circular/Circular";
@@ -28,7 +28,7 @@ export type { LinearProps } from "./Linear/Linear";
2828
*/
2929
const Viewer = (element: string | HTMLElement = "root", options: SeqVizProps) => {
3030
// used to keep track of whether to re-render after a "set" call
31-
let rendered = false;
31+
let root: Root | null = null;
3232
// get the HTML element by ID or use as is if passed directly
3333
let domElement: HTMLElement | null;
3434
if (!document) return;
@@ -48,8 +48,10 @@ const Viewer = (element: string | HTMLElement = "root", options: SeqVizProps) =>
4848
* Render the Viewer to the element passed
4949
*/
5050
const render = () => {
51-
rendered = true;
52-
ReactDOM.render(viewer, domElement);
51+
if (!root && domElement) {
52+
root = createRoot(domElement);
53+
}
54+
root?.render(viewer);
5355
return viewer;
5456
};
5557

@@ -67,8 +69,8 @@ const Viewer = (element: string | HTMLElement = "root", options: SeqVizProps) =>
6769
options = { ...options, ...state };
6870
viewer = React.createElement(SeqViz, options, null);
6971

70-
if (rendered) {
71-
ReactDOM.render(viewer, domElement);
72+
if (root) {
73+
root.render(viewer);
7274
}
7375
return viewer;
7476
};

0 commit comments

Comments
 (0)