Add eslint-plugin-react-refresh (#2831)

* Add eslint-plugin-react-refresh * Fix warnings --------- Co-authored-by: Michael Schmidt <[email protected]>
chaiNNer-org · May 21, 2024 · d634e15 · d634e15
1 parent 9795e7f
commit d634e15
Show file tree

Hide file tree

Showing 35 changed files with 546 additions and 571 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
         'prefer-arrow-functions',
         'eslint-plugin-react-memo',
         'unused-imports',
+        'react-refresh',
     ],
     globals: {
         MAIN_WINDOW_VITE_DEV_SERVER_URL: true,
@@ -64,6 +65,7 @@ module.exports = {
         'react/function-component-definition': 'off',
         'react-memo/require-memo': ['error', { strict: true }],
         'unused-imports/no-unused-imports': 'error',
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     },
     settings: {
         'import/core-modules': ['electron'],
@@ -94,6 +96,7 @@ module.exports = {
                 'react-hooks',
                 'unused-imports',
                 'regexp',
+                'react-refresh',
             ],
             parserOptions: {
                 project: './tsconfig.json',
@@ -140,6 +143,7 @@ module.exports = {
                 'react-hooks/exhaustive-deps': ['warn', { additionalHooks: '(useAsyncEffect)' }],
                 'unused-imports/no-unused-imports': 'error',
                 'regexp/prefer-d': ['warn', { insideCharacterClass: 'ignore' }],
+                'react-refresh/only-export-components': 'warn',
             },
         },
         {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-memo": "^0.0.3",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-regexp": "^2.3.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "nodemon": "^2.0.16",

diff --git a/src/renderer/components/CustomEdge/CustomEdge.tsx b/src/renderer/components/CustomEdge/CustomEdge.tsx
@@ -10,7 +10,6 @@ import { assertNever, parseSourceHandle } from '../../../common/util';
 import { BackendContext } from '../../contexts/BackendContext';
 import { ExecutionContext, NodeExecutionStatus } from '../../contexts/ExecutionContext';
 import { GlobalContext, GlobalVolatileContext } from '../../contexts/GlobalNodeState';
-import { useSettings } from '../../contexts/SettingsContext';
 import { shadeColor } from '../../helpers/colorTools';
 import {
     BREAKPOINT_RADIUS,
@@ -19,8 +18,9 @@ import {
     getCustomBezierPath,
 } from '../../helpers/graphUtils';
 import { useEdgeMenu } from '../../hooks/useEdgeMenu';
-import './CustomEdge.scss';
+import { useSettings } from '../../hooks/useSettings';
 import { useTypeColor } from '../../hooks/useTypeColor';
+import './CustomEdge.scss';
 
 const EDGE_CLASS = {
     RUNNING: 'running',

diff --git a/src/renderer/components/CustomIcons.tsx b/src/renderer/components/CustomIcons.tsx
@@ -46,44 +46,6 @@ export const PyTorchIcon = createIcon({
     ),
 });
 
-// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
-export const _OnnxIcon = createIcon({
-    displayName: 'OnnxIcon',
-    viewBox: '-1.89 2.11 64 64',
-    path: (
-        <>
-            <path
-                d="M59.48 32.229c-.278.02-.504-.141-.63-.393L48.58 12.842a.804.804 0 0 1-.065-.71 2.592 2.592 0 0 0-3.969-2.95 1.057 1.057 0 0 1-.939.192l-20.194-4.05a.701.701 0 0 1-.637-.553c-.989-3.358-6.028-1.797-4.945 1.535a.876.876 0 0 1-.136.866L1.67 30.16c-.216.312-.427.445-.747.327a2.586 2.586 0 0 0-2.784 2.225 2.542 2.542 0 0 0 2.21 2.922c.315.01.584.232.655.541l8.624 21.242c.101.226.121.488.05.755-.742 2.428 2.09 4.366 4.083 2.793a.906.906 0 0 1 .697-.204l25.986 2.537a.68.68 0 0 1 .66.453c1.479 3.383 6.505.78 4.592-2.383a.643.643 0 0 1-.007-.745l13.112-22.764a.705.705 0 0 1 .687-.426c3.504.04 3.524-5.234-.007-5.184zm-40.126-20.52.735-3.17c.06-.267.144-.428.488-.449a2.235 2.235 0 0 0 1.654-.863c.161-.251.458-.317.717-.216l20.298 4.052c.055.01.108.038.315.116l-6.388 2.768-19.26 8.388a13.263 13.263 0 0 1-.295.124c-.207.083-.403.277-.64.075-.221-.189-.057-.395-.012-.589l2.39-10.263zm-1.46-1.776.106.07-2.73 11.688a.67.67 0 0 1-.504.559 2.441 2.441 0 0 0-1.784 2.19.723.723 0 0 1-.353.629L3.977 30.16a1.08 1.08 0 0 1-.217.05zm-6.832 45.604a7.344 7.344 0 0 1-.126.503L2.648 35.66a.88.88 0 0 1 .136-1.078 1.938 1.938 0 0 0 .48-1.485.742.742 0 0 1 .461-.795l9.476-5.587c.176-.106.352-.348.614-.101.234.221.554.327.496.79l-.851 7.306-2.401 20.844zm2.962 1.61a1.963 1.963 0 0 0-1-.662c-.233-.075-.392-.168-.314-.39l.742-6.478 1.485-12.9 1.027-9.026c.063-.596.504-.579.856-.798s.468.108.63.252l21.497 18.674a1.002 1.002 0 0 1-.264 1.586l-23.96 9.886c-.284.118-.478.15-.704-.141zm28.05 3.398a1.103 1.103 0 0 0-.48.413c-.331.697-.905.611-1.51.553L15.21 59.058l-.04-.116 3.86-1.606 20.185-8.33c.378-.159.614-.02.967.1 1.006.353 1.026 1.133 1.117 1.956l1.012 8.892c.03.251.025.445-.24.583zm-.857-16.374c-.04.317-.188.408-.44.523s-.559.058-.735-.16l-5.164-4.493-16.37-14.23a1.787 1.787 0 0 1-.437-1.573c.11-.226.385-.252.594-.342l24.833-10.82c.362-.163.644-.251.923.136a1.208 1.208 0 0 0 .521.36c.244.1.345.232.29.395l-.72 5.487-3.267 24.722zm2.824 15.818-.402-3.282-.725-6.292c-.07-.579-.119-1.057.493-1.51a2.215 2.215 0 0 0 .826-2.172c-.026-.24-.02-.39.193-.536l12.159-8.28c.063-.02.126-.036.189-.046zM57.25 33.588a1.888 1.888 0 0 0-.307 1.465.68.68 0 0 1-.355.78L43.556 44.76c-.144.1-.262.282-.504.146-.264-.151-.168-.368-.143-.561l3.956-29.92c.03-.221.08-.438.151-.805l2.353 4.321 7.87 14.555c.26.314.267.77.015 1.092z"
-                fill="#DD6B20"
-            />
-            <path
-                d="M45.204 13.965c.055-.161-.045-.297-.29-.396a1.208 1.208 0 0 1-.52-.36c-.277-.384-.562-.301-.924-.135l-3.86 1.686-20.945 9.128c-.207.09-.484.111-.594.34a1.79 1.79 0 0 0 .438 1.573l21.533 18.725a.596.596 0 0 0 .735.16c.252-.115.403-.2.44-.523l1.641-12.422q.816-6.149 1.624-12.3l.72-5.486z"
-                fill="#fefefe"
-            />
-            <path
-                d="M38.952 45.814Q28.206 36.477 17.454 27.14c-.166-.144-.302-.473-.63-.252s-.79.202-.855.798l-1.027 9.025-1.485 12.901-.742 6.478c-.08.222.08.317.315.39a1.966 1.966 0 0 1 .999.662c.221.292.415.257.704.141q11.98-4.948 23.96-9.883a1 1 0 0 0 .264-1.583z"
-                fill="#f4f5f6"
-            />
-            <path
-                d="m49.362 17.941-2.353-4.321-.151.805-1.334 10.208-2.618 19.712c-.025.193-.12.412.144.56.241.137.357-.05.503-.145l13.032-8.927a.68.68 0 0 0 .355-.78 1.885 1.885 0 0 1 .307-1.465.87.87 0 0 0-.015-1.092q-3.952-7.274-7.87-14.555z"
-                fill="#dedfdf"
-            />
-            <path
-                d="M16.976 22.56c.239.2.433.007.642-.076l.294-.126q9.632-4.193 19.261-8.388l6.388-2.769-.315-.116q-10.15-2.026-20.3-4.057a.612.612 0 0 0-.718.217 2.227 2.227 0 0 1-1.653.863c-.347.025-.428.181-.488.448q-.363 1.586-.735 3.171L16.96 21.991c-.045.193-.21.402.012.588zm24.327 28.507c-.09-.823-.113-1.606-1.117-1.956-.353-.126-.587-.261-.967-.1q-10.087 4.177-20.184 8.305l-3.861 1.606.04.115 24.876 2.454c.604.06 1.175.146 1.51-.553a1.095 1.095 0 0 1 .476-.413c.264-.141.269-.327.239-.584a1365.764 1365.764 0 0 1-1.012-8.892z"
-                fill="#d1d1d1"
-            />
-            <path
-                d="M14.316 27.381c.058-.465-.265-.568-.496-.79-.257-.246-.436-.005-.614.1L3.73 32.28a.742.742 0 0 0-.46.795 1.935 1.935 0 0 1-.481 1.485.883.883 0 0 0-.136 1.077q2.7 6.594 5.368 13.196l2.92 7.188a4.918 4.918 0 0 0 .126-.478q.594-5.114 1.182-10.231.612-5.305 1.219-10.613l.85-7.306z"
-                fill="#d8d8d8"
-            />
-            <path
-                d="M44.434 46.222c-.217.151-.222.297-.194.536a2.217 2.217 0 0 1-.825 2.17c-.612.427-.564.906-.494 1.51l.725 6.292.403 3.281L56.784 37.89a1.266 1.266 0 0 0-.19.045q-6.075 4.158-12.15 8.31zM12.622 25.061a.72.72 0 0 0 .355-.63 2.444 2.444 0 0 1 1.784-2.189.667.667 0 0 0 .506-.558q1.36-5.844 2.73-11.688l-.105-.07L3.752 30.2a1.195 1.195 0 0 0 .217-.048q4.324-2.547 8.653-5.091z"
-                fill="#b2b2b2"
-            />
-        </>
-    ),
-});
-
 export const OnnxIcon = createIcon({
     displayName: 'OnnxIcon',
     viewBox: '-1.89 2.11 64 64',

diff --git a/src/renderer/components/Handle.tsx b/src/renderer/components/Handle.tsx
@@ -3,9 +3,10 @@ import React, { memo } from 'react';
 import { Connection, Position, Handle as RFHandle } from 'reactflow';
 import { useContext } from 'use-context-selector';
 import { Validity } from '../../common/Validity';
-import { useIsCollapsedNode } from '../contexts/CollapsedNodeContext';
 import { FakeNodeContext } from '../contexts/FakeExampleContext';
+import { createConicGradient } from '../helpers/colorTools';
 import { noContextMenu } from '../hooks/useContextMenu';
+import { useIsCollapsedNode } from '../hooks/useIsCollapsedNode';
 import { Markdown } from './Markdown';
 
 export type HandleType = 'input' | 'output';
@@ -101,19 +102,6 @@ export interface HandleProps {
     isIterated: boolean;
 }
 
-export const getBackground = (colors: readonly string[]): string => {
-    if (colors.length === 1) return colors[0];
-
-    const handleColorString = colors
-        .map((color, index) => {
-            const percent = index / colors.length;
-            const nextPercent = (index + 1) / colors.length;
-            return `${color} ${percent * 100}% ${nextPercent * 100}%`;
-        })
-        .join(', ');
-    return `conic-gradient(from 90deg, ${handleColorString})`;
-};
-
 export const Handle = memo(
     ({
         id,
@@ -161,7 +149,7 @@ export const Handle = memo(
                     borderWidth: isConnected ? '2px' : '0px',
                     borderColor: isConnected ? connectedColor : 'transparent',
                     transition: '0.15s ease-in-out',
-                    background: isConnected ? connectedBg : getBackground(handleColors),
+                    background: isConnected ? connectedBg : createConicGradient(handleColors),
                     boxShadow: `${type === 'input' ? '+' : '-'}2px 2px 2px #00000014`,
                     filter: validity.isValid ? undefined : 'grayscale(100%)',
                     opacity: validity.isValid ? 1 : 0.3,

diff --git a/src/renderer/components/Header/AppInfo.tsx b/src/renderer/components/Header/AppInfo.tsx
@@ -26,9 +26,9 @@ import {
 import { memo, useEffect, useRef, useState } from 'react';
 import semver from 'semver';
 import logo from '../../../public/icons/png/256x256.png';
-import { useSettings } from '../../contexts/SettingsContext';
 import { GitHubRelease, getLatestVersionIfUpdateAvailable } from '../../helpers/github';
 import { useAsyncEffect } from '../../hooks/useAsyncEffect';
+import { useSettings } from '../../hooks/useSettings';
 import { useStored } from '../../hooks/useStored';
 import { ipcRenderer } from '../../safeIpc';
 import { Markdown } from '../Markdown';