Merge pull request #1316 from acelaya-forks/feature/crypto-uuid

Remove dependency on uuid package, and use crypto.randomUUID() instead

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 * Update to `@shlinkio/shlink-web-component` 0.7 and use `ShlinkWebSettings` to replace local settings UI.
 * Update to `@shlinkio/eslint-config-js-coding-standard` 3.0, and migrate to ESLint flat config.
+* Remove dependency on `uuid` package, and use `crypto.randomUUID()` instead.
 
 ### Deprecated
 * *Nothing*

package-lock.json

@@ -32,7 +32,6 @@
         "react-router-dom": "^6.26.2",
         "reactstrap": "^9.2.3",
         "redux-localstorage-simple": "^2.5.1",
-        "uuid": "^10.0.0",
         "workbox-core": "^7.1.0",
         "workbox-expiration": "^7.1.0",
         "workbox-precaching": "^7.1.0",
@@ -3065,13 +3064,12 @@
       }
     },
     "node_modules/@shlinkio/shlink-frontend-kit": {
-      "version": "0.5.2",
+      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.5.3.tgz",
-      "integrity": "sha512-dj1Oly9I3TCtFn/DXHHSLLvS5RNibDWfVw5ATIMP6COzL+P6tUtkx7dLCXOgmahQjdnFBg6d+sHbwaY9KRGv6Q==",
+      "integrity": "sha512-g/lLrbVJifk5a2hjOlgNKfGJmYQ5BvtvEVqayIulEWkvKz3aP1vsGC2ON+jex0fKJl0gtlFdhFE8cBHm6aR0RA==",
       "license": "MIT",
       "dependencies": {
-        "clsx": "^2.1.1",
+        "clsx": "^2.1.1"
-        "uuid": "^10.0.0"
       },
       "peerDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.2",
@@ -11152,18 +11150,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -14019,12 +14005,11 @@
       "requires": {}
     },
     "@shlinkio/shlink-frontend-kit": {
-      "version": "0.5.2",
+      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.5.3.tgz",
-      "integrity": "sha512-dj1Oly9I3TCtFn/DXHHSLLvS5RNibDWfVw5ATIMP6COzL+P6tUtkx7dLCXOgmahQjdnFBg6d+sHbwaY9KRGv6Q==",
+      "integrity": "sha512-g/lLrbVJifk5a2hjOlgNKfGJmYQ5BvtvEVqayIulEWkvKz3aP1vsGC2ON+jex0fKJl0gtlFdhFE8cBHm6aR0RA==",
       "requires": {
-        "clsx": "^2.1.1",
+        "clsx": "^2.1.1"
-        "uuid": "^10.0.0"
       }
     },
     "@shlinkio/shlink-js-sdk": {
@@ -19598,11 +19583,6 @@
       "version": "1.0.2",
       "dev": true
     },
-    "uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="
-    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -49,7 +49,6 @@
     "react-router-dom": "^6.26.2",
     "reactstrap": "^9.2.3",
     "redux-localstorage-simple": "^2.5.1",
-    "uuid": "^10.0.0",
     "workbox-core": "^7.1.0",
     "workbox-expiration": "^7.1.0",
     "workbox-precaching": "^7.1.0",

src/servers/CreateServer.tsx

@@ -4,7 +4,6 @@ import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'reactstrap';
-import { v4 as uuid } from 'uuid';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -45,7 +44,7 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
   const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
   const [serverData, setServerData] = useState<ServerData>();
   const saveNewServer = useCallback((theServerData: ServerData) => {
-    const id = uuid();
+    const id = crypto.randomUUID();
 
     createServers([{ ...theServerData, id }]);
     navigate(`/server/${id}`);

src/servers/reducers/servers.ts

@@ -1,6 +1,5 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { v4 as uuid } from 'uuid';
 import type { ServerData, ServersMap, ServerWithId } from '../data';
 
 interface EditServer {
@@ -20,7 +19,7 @@ const serverWithId = (server: ServerWithId | ServerData): ServerWithId => {
     return server;
   }
 
-  return { ...server, id: uuid() };
+  return { ...server, id: crypto.randomUUID() };
 };
 
 const serversListToMap = (servers: ServerWithId[]): ServersMap => servers.reduce<ServersMap>(

test/servers/reducers/selectedServer.test.ts

@@ -1,6 +1,5 @@
 import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { v4 as uuid } from 'uuid';
 import type { ShlinkState } from '../../../src/container/types';
 import type { NonReachableServer, NotFoundServer, RegularServer } from '../../../src/servers/data';
 import {
@@ -41,7 +40,7 @@ describe('selectedServerReducer', () => {
       ['latest', MAX_FALLBACK_VERSION, 'latest'],
       ['%invalid_semver%', MIN_FALLBACK_VERSION, '%invalid_semver%'],
     ])('dispatches proper actions', async (serverVersion, expectedVersion, expectedPrintableVersion) => {
-      const id = uuid();
+      const id = crypto.randomUUID();
       const getState = createGetStateMock(id);
       const expectedSelectedServer = {
         id,
@@ -60,7 +59,7 @@ describe('selectedServerReducer', () => {
     });
 
     it('dispatches error when health endpoint fails', async () => {
-      const id = uuid();
+      const id = crypto.randomUUID();
       const getState = createGetStateMock(id);
       const expectedSelectedServer = fromPartial<NonReachableServer>({ id, serverNotReachable: true });
 
@@ -73,7 +72,7 @@ describe('selectedServerReducer', () => {
     });
 
     it('dispatches error when server is not found', async () => {
-      const id = uuid();
+      const id = crypto.randomUUID();
       const getState = vi.fn(() => fromPartial<ShlinkState>({ servers: {} }));
       const expectedSelectedServer: NotFoundServer = { serverNotFound: true };