refactor: remove filelist-utils and jszip for better alternatives (#3615)

targos · web-flow · commit c110206d7444 · 2025-07-24T13:46:29.000Z
BREAKING-CHANGE: `file-collection` is now used to manage data sources
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,45 +57,45 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@blueprintjs/core": "^6.0.0",
+    "@blueprintjs/core": "^6.1.0",
     "@blueprintjs/icons": "^6.0.0",
-    "@blueprintjs/select": "^6.0.0",
+    "@blueprintjs/select": "^6.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.1.1",
-    "@zakodium/nmr-types": "^0.0.1",
-    "@zakodium/nmrium-core": "^0.1.3",
-    "@zakodium/nmrium-core-plugins": "^0.1.4",
+    "@zakodium/nmr-types": "^0.1.0",
+    "@zakodium/nmrium-core": "^0.1.4",
+    "@zakodium/nmrium-core-plugins": "^0.1.7",
+    "@zip.js/zip.js": "^2.7.68",
     "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.1",
     "clipboard-polyfill": "^4.1.1",
     "d3": "^7.9.0",
     "dlv": "^1.1.3",
     "eventemitter3": "^5.0.1",
     "fifo-logger": "^2.0.0",
+    "file-collection": "^5.1.0",
     "file-saver": "^2.0.5",
-    "filelist-utils": "^1.11.3",
     "immer": "^10.1.1",
-    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "mf-parser": "^3.4.2",
     "ml-array-mean": "^1.1.6",
     "ml-array-median": "^1.1.6",
     "ml-conrec": "^5.0.3",
     "ml-gsd": "^13.0.1",
     "ml-signal-processing": "^2.0.0",
-    "ml-spectra-processing": "^14.13.0",
+    "ml-spectra-processing": "^14.14.0",
     "ml-tree-similarity": "^2.2.0",
     "nmr-correlation": "2.3.3",
-    "nmr-processing": "^19.0.1",
+    "nmr-processing": "^19.0.3",
     "numeral": "^2.0.6",
     "openchemlib": "^9.6.0",
     "openchemlib-utils": "^8.2.0",
     "papaparse": "^5.5.3",
     "react-d3-utils": "^3.1.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^6.0.0",
-    "react-hook-form": "^7.60.0",
+    "react-hook-form": "^7.61.1",
     "react-icons": "^5.5.0",
     "react-inspector": "^6.0.2",
     "react-mf": "^3.1.0",
@@ -114,37 +114,37 @@
     "@types/d3": "^7.4.3",
     "@types/dlv": "^1.1.5",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.1.0",
     "@types/papaparse": "^5.3.16",
     "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.1",
     "@types/react-table": "^7.7.20",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@zakodium/tsconfig": "^1.0.2",
     "cross-env": "^7.0.3",
-    "cspell": "^9.1.5",
+    "cspell": "^9.2.0",
     "eslint": "^9.31.0",
     "eslint-config-cheminfo-react": "^17.0.0",
     "eslint-config-cheminfo-typescript": "^19.0.0",
-    "knip": "^5.61.3",
+    "knip": "^5.62.0",
     "modern-normalize": "^3.0.1",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.6.2",
     "rc-menu": "^9.16.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.6.3",
+    "react-router-dom": "^7.7.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.2.4",
-    "stylelint": "^16.21.1",
+    "stylelint": "^16.22.0",
     "stylelint-config-standard": "^38.0.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.4",
+    "vite": "^7.0.6",
     "vitest": "^3.2.4"
   },
   "volta": {
-    "node": "24.4.0"
+    "node": "24.4.1"
   }
 }
diff --git a/src/component/loader/useLoadFiles.ts b/src/component/loader/useLoadFiles.ts
@@ -1,4 +1,4 @@
-import { fileCollectionFromFileList } from 'filelist-utils';
+import { FileCollection } from 'file-collection';
 import type { ParseResult } from 'papaparse';
 import { useCallback } from 'react';
 
@@ -24,15 +24,17 @@ export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
     (files: File[]) => {
       dispatch({ type: 'SET_LOADING_FLAG', payload: { isLoading: true } });
 
-      async function loadFiles(files) {
+      async function loadFiles(files: File[]) {
         if (
           onOpenMetaInformation &&
           files.length === 1 &&
           isMetaFile(files[0])
         ) {
           onOpenMetaInformation(files[0]);
         } else {
-          const fileCollection = await fileCollectionFromFileList(files);
+          const fileCollection = await new FileCollection().appendFileList(
+            files,
+          );
           const metaFile = Object.values(fileCollection.files).find((file) =>
             isMetaFile(file),
           );
@@ -52,11 +54,11 @@ export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
             },
           );
 
-          if ((nmriumState as any)?.settings) {
+          if (nmriumState.settings) {
             dispatchPreferences({
               type: 'SET_WORKSPACE',
               payload: {
-                data: (nmriumState as any).settings,
+                data: nmriumState.settings,
                 workspaceSource: 'nmriumFile',
               },
             });
diff --git a/src/component/main/types.ts b/src/component/main/types.ts
@@ -3,15 +3,15 @@ import type {
   Spectrum,
   WorkspacePreferences as NMRiumPreferences,
 } from '@zakodium/nmrium-core';
-import type { WebSource } from 'filelist-utils';
+import type { Source } from 'file-collection';
 import type { CorrelationData } from 'nmr-correlation';
 
 type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
 
 interface NMRiumData {
-  source?: WebSource;
+  source?: Source;
   molecules?: NMRiumMolecules;
   spectra: Array<DeepPartial<Spectrum>>;
   correlations?: CorrelationData;
diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts
@@ -1,6 +1,6 @@
 import type { BaselineCorrectionZone } from '@zakodium/nmr-types';
 import type { Spectrum, ViewState } from '@zakodium/nmrium-core';
-import type { WebSource as Source } from 'filelist-utils';
+import type { Source } from 'file-collection';
 import type { Draft } from 'immer';
 import { original, produce } from 'immer';
 import type { CorrelationData } from 'nmr-correlation';
diff --git a/src/component/utility/export.ts b/src/component/utility/export.ts
@@ -4,9 +4,9 @@ import type {
   JpathTableColumn,
   SpectraTableColumn,
 } from '@zakodium/nmrium-core';
+import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
 import dlv from 'dlv';
 import fileSaver from 'file-saver';
-import JSZip from 'jszip';
 
 export const browserNotSupportedErrorToast: ToastProps = {
   message:
@@ -38,15 +38,9 @@ async function exportAsJSON(
     fileSaver.saveAs(blob, `${fileName}.nmrium`);
   } else {
     try {
-      const zip = new JSZip();
-      zip.file(`${fileName}.nmrium`, fileData);
-      const blob = await zip.generateAsync({
-        type: 'blob',
-        compression: 'DEFLATE',
-        compressionOptions: {
-          level: 9,
-        },
-      });
+      const zip = new ZipWriter(new BlobWriter());
+      await zip.add(`${fileName}.nmrium`, new TextReader(fileData));
+      const blob = await zip.close();
       fileSaver.saveAs(blob, `${fileName}.nmrium`);
     } catch (error) {
       // TODO: handle error.
diff --git a/src/data/SpectraManager.ts b/src/data/SpectraManager.ts
@@ -9,8 +9,8 @@ import {
   processJCAMPDX,
   spectrum1DToJCAMPDX,
 } from '@zakodium/nmrium-core-plugins';
+import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
 import fileSaver from 'file-saver';
-import JSZip from 'jszip';
 import * as OCL from 'openchemlib';
 
 import type { State } from '../component/reducer/Reducer.js';
@@ -202,24 +202,17 @@ export async function exportForCT(options: ExportForCTOptions) {
     throw new Error('Failed to convert the 1D spectrum to JCAMP');
   }
   const name = spectrum.info.name;
-  const zip = new JSZip();
+  const zip = new ZipWriter(new BlobWriter());
 
   //add jcamp file
-  zip.file(`${name}.dx`, jcamp);
+  await zip.add(`${name}.dx`, new TextReader(jcamp));
   //add mol file
   const { molfile } = molecules[0];
   const molecule = OCL.Molecule.fromMolfile(molfile);
   const molFileName = molecule.getMolecularFormula().formula;
 
-  zip.file(`${molFileName}.mol`, molecule.toMolfile());
-
-  const blob = await zip.generateAsync({
-    type: 'blob',
-    compression: 'DEFLATE',
-    compressionOptions: {
-      level: 9,
-    },
-  });
+  await zip.add(`${molFileName}.mol`, new TextReader(molecule.toMolfile()));
 
+  const blob = await zip.close();
   fileSaver.saveAs(blob, name);
 }
diff --git a/src/data/parseMeta/isMetaFile.ts b/src/data/parseMeta/isMetaFile.ts
@@ -1,6 +1,6 @@
-import type { FileCollectionItem } from 'filelist-utils';
+import type { FileItem } from 'file-collection';
 
-export function isMetaFile(file: File | FileCollectionItem) {
+export function isMetaFile(file: File | FileItem) {
   if (file instanceof File) {
     return ['text/csv', 'text/tsv', 'text/plain'].includes(file?.type);
   }
diff --git a/src/data/parseMeta/parseMetaFile.ts b/src/data/parseMeta/parseMetaFile.ts
@@ -1,9 +1,9 @@
-import type { FileCollectionItem } from 'filelist-utils';
+import type { FileItem } from 'file-collection';
 import type { ParseResult } from 'papaparse';
 import papa from 'papaparse';
 
 export async function parseMetaFile(
-  file: FileCollectionItem | File,
+  file: FileItem | File,
 ): Promise<ParseResult<any>> {
   const data = file instanceof File ? file : await file.text();
   return new Promise((complete, error) => {
diff --git a/src/demo/views/AuoProcessingView.tsx b/src/demo/views/AuoProcessingView.tsx
@@ -1,5 +1,5 @@
 import type { NMRiumCore } from '@zakodium/nmrium-core';
-import { fileCollectionFromWebSource } from 'filelist-utils';
+import { FileCollection } from 'file-collection';
 import { useEffect, useState } from 'react';
 
 import { useCore } from '../../component/context/CoreContext.js';
@@ -23,7 +23,7 @@ async function loadSpectrumFromURL(core: NMRiumCore, url: string) {
     ],
     baseURL,
   };
-  const fileCollection = await fileCollectionFromWebSource(source, {});
+  const fileCollection = await new FileCollection().appendSource(source);
 
   const { nmriumState } = await core.read(fileCollection, {
     experimentalFeatures: true,
diff --git a/test-e2e/core/import.test.ts b/test-e2e/core/import.test.ts
@@ -49,6 +49,7 @@ test('should load and migrate .nmrium data from version 1 to version 2', async (
     await expect(ranges).toHaveCount(3);
   });
 });
+
 test('should load and migrate .nmrium data from version 2 to version 3', async ({
   page,
 }) => {
@@ -66,6 +67,7 @@ test('should load and migrate .nmrium data from version 2 to version 3', async (
     ),
   ).toBeVisible();
 });
+
 test('should load .nmrium data from version 3', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
   await nmrium.dropFile('1h-version-3-1d.nmrium');
@@ -117,18 +119,7 @@ test('should load .zip files', async ({ page }) => {
   // If the file was loaded successfully, there should be a 1H tab.
   await expect(nmrium.page.locator('_react=Tab[tabid = "1H"]')).toBeVisible();
 });
-test('should load multiple files', async ({ page }) => {
-  const nmrium = await NmriumPage.create(page);
-  await nmrium.dropFile([
-    'ethylvinylether.zip',
-    '1h-version-0.nmrium',
-    '1h-version-1-datasource.nmrium',
-    '13c-version-2.nmrium',
-  ]);
-
-  // If the file was loaded successfully, there should be many tabs.
-  await expect(nmrium.page.locator('_react=Tab[tabid = "13C"]')).toBeVisible();
-});
+
 test('should load file using drag and drop .nmrium', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
   await nmrium.dropFile('1h-version-1-datasource.nmrium');
@@ -144,20 +135,16 @@ test('should load file using drag and drop .zip', async ({ page }) => {
   // If the file was loaded successfully, there should be a 1H tab.
   await expect(nmrium.page.locator('_react=Tab[tabid = "1H"]')).toBeVisible();
 });
+
 test('should load multiple files using drag and drop', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
-  await nmrium.dropFile([
-    'ethylvinylether.zip',
-    '1h-version-0.nmrium',
-    '1h-version-1-datasource.nmrium',
-    '13c-version-2.nmrium',
-  ]);
-  // If the file was loaded successfully, there should be many tabs.
-  await expect(nmrium.page.locator('_react=Tab[tabid = "13C"]')).toBeVisible();
+  await nmrium.dropFile(['ethylbenzene-1h.jdx', 'ethylvinylether.zip']);
+  // If the file was loaded successfully, there should be many spectra.
+  await expect(nmrium.page.locator('_react=SpectrumName')).toHaveCount(2);
 });
+
 test('should load JCAMP-DX file', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
   await nmrium.dropFile('ethylbenzene-1h.jdx');
-  // If the file was loaded successfully, there should be many tabs.
   await expect(nmrium.page.locator('_react=Tab[tabid = "1H"]')).toBeVisible();
 });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`		`-import type { FileCollectionItem } from 'filelist-utils';`
	`1`	`+import type { FileItem } from 'file-collection';`
`2`	`2`
`3`		`-export function isMetaFile(file: File \| FileCollectionItem) {`
	`3`	`+export function isMetaFile(file: File \| FileItem) {`
`4`	`4`	`if (file instanceof File) {`
`5`	`5`	`return ['text/csv', 'text/tsv', 'text/plain'].includes(file?.type);`
`6`	`6`	`}`