Merge pull request #114 from technote-space/release/next-v0.14.15

release: v0.14.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@technote-space/ga-framework",
-  "version": "0.14.15",
+  "version": "0.14.16",
   "description": "GA Framework",
   "keywords": [
     "genetic algorithm"
@@ -29,7 +29,7 @@
     "src/public"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm_config_yes=true npx tsc-alias",
     "lint": "eslint './src/**/*.{ts,tsx}' --cache",
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'",
     "test": "yarn lint",
@@ -43,47 +43,49 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@mui-treasury/layout": "^4.5.0",
-    "@technote-space/genetic-algorithms-js": "^0.8.17",
-    "@technote-space/worker-controller": "^0.5.25",
+    "@technote-space/genetic-algorithms-js": "^0.8.18",
+    "@technote-space/worker-controller": "^0.5.29",
     "chart.js": "^2.9.4",
     "clsx": "^1.1.1",
     "keycharm": "^0.4.0",
     "moment": "^2.29.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "styled-components": "^5.2.1",
     "vis-data": "^7.1.2",
-    "vis-network": "^9.0.2",
+    "vis-network": "^9.0.4",
     "vis-util": "^5.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.1",
+    "@babel/core": "^7.13.10",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-react-inline-elements": "^7.12.13",
-    "@babel/preset-env": "^7.13.5",
+    "@babel/preset-env": "^7.13.12",
     "@babel/preset-flow": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@commitlint/cli": "^12.0.0",
-    "@commitlint/config-conventional": "^12.0.0",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
     "@types/chart.js": "^2.9.31",
-    "@types/node": "^14.14.31",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@types/node": "^14.14.35",
+    "@types/react-helmet": "^6.1.0",
+    "@types/styled-components": "^5.1.9",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
     "babel-plugin-react-html-attrs": "^3.0.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "copy-webpack-plugin": "^7.0.0",
-    "eslint": "^7.20.0",
-    "eslint-plugin-react": "^7.22.0",
+    "copy-webpack-plugin": "^8.1.0",
+    "eslint": "^7.22.0",
+    "eslint-plugin-react": "^7.23.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^5.2.0",
-    "husky": "^5.1.1",
+    "html-webpack-plugin": "^5.3.1",
+    "husky": "^5.2.0",
     "lint-staged": "^10.5.4",
     "pinst": "^2.1.6",
-    "typescript": "^4.2.2",
-    "webpack": "^5.24.2"
+    "typescript": "^4.2.3",
+    "webpack": "^5.27.2"
   },
   "publishConfig": {
     "access": "public"

src/app/App.tsx

@@ -1,4 +1,7 @@
-import React, {useMemo, useEffect, FC} from 'react';
+import type {FC} from 'react';
+import type {AppOptions} from '$/types';
+import type {StatusResult} from '@technote-space/worker-controller';
+import React, {memo, useMemo, useEffect} from 'react';
 import {Helmet} from 'react-helmet';
 import styled from 'styled-components';
 import LayoutBuilder, {
@@ -21,8 +24,7 @@ import {
   NavContentEx,
 } from './templates';
 import {useDispatchContext, useStoreContext} from './Store';
-import {AppOptions} from '../types';
-import {Controller, StatusResult} from '@technote-space/worker-controller';
+import {Controller} from '@technote-space/worker-controller';
 import {getProcessContext, getTitle, updateStatus} from './common';
 
 const useStyles = makeStyles(() => createStyles({
@@ -69,7 +71,7 @@ const Content        = getContent(styled);
 
 const App: FC<{
   options: AppOptions;
-}> = ({options}: { options: AppOptions }) => {
+}> = memo(({options}: { options: AppOptions }) => {
   const {store: {themeColor, reloadWorker}, store} = useStoreContext();
   const {dispatch}                                 = useDispatchContext();
   const themeObject                                = useTheme(themeColor);
@@ -120,6 +122,7 @@ const App: FC<{
       {content}
     </Root>
   ), [title, classes, theme]);
-};
+});
 
+App.displayName = 'App';
 export default App;

src/app/Store.tsx

@@ -1,5 +1,6 @@
-import React, {useReducer, createContext, useContext, useCallback, useMemo, useEffect, FC} from 'react';
-import {AppOptions} from '../types';
+import type {FC} from 'react';
+import type {AppOptions} from '$/types';
+import React, {memo, useReducer, createContext, useContext, useCallback, useEffect} from 'react';
 import {getProcessContext} from './common';
 
 const StoreContext           = createContext({});
@@ -69,68 +70,66 @@ const resultReducer = (store, result) => {
   };
 };
 
-export const StoreContextProvider: FC<{
+const reducerActions             = {
+  PAGE: (store, action) => ({...store, page: action.page}),
+  THEME_COLOR: (store, action) => ({...store, themeColor: action.themeColor}),
+  WORKER: (store, action) => ({...store, worker: action.worker}),
+  UPDATE_STATUS: (store, action) => {
+    if (store.status === 'disabled') {
+      return store;
+    }
+
+    return {...store, status: action.result.status};
+  },
+  RELOAD_WORKER: (store) => ({...store, reloadWorker: !store.reloadWorker}),
+  SET_NOTICE: (store, action) => ({...store, notice: {...store.notice, ...{open: true, variant: 'success'}, ...action.notice}}),
+  SET_ERROR: (store, action) => ({...store, notice: {...store.notice, ...{open: true, variant: 'error'}, ...action.notice}}),
+  CLOSE_NOTICE: (store) => ({...store, notice: {...store.notice, ...{open: false}}}),
+  PAGINATION_INITIALIZED: (store) => ({
+    ...store,
+    pagination: {
+      ...store.pagination,
+      initialized: true,
+    },
+  }),
+  PAGINATION_PAGE: (store, action) => ({
+    ...store,
+    pagination: {
+      ...store.pagination,
+      page: action.page,
+    },
+  }),
+  PAGINATION_PER_PAGE: (store, action) => (
+    {
+      ...store,
+      pagination: {
+        ...store.pagination,
+        rowsPerPage: action.rowsPerPage,
+      },
+    }
+  ),
+  RESULT: (store, action, options) => {
+    store = resultReducer(store, action.result);
+    if (options.store?.reducer) {
+      return options.store.reducer(store, action);
+    }
+    return store;
+  },
+};
+const StoreContextProvider: FC<{
   options: AppOptions;
-}> = ({children, options}) => {
+}>                               = memo(({children, options}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getReducer        = useCallback((store, action): any => {
-    switch (action.type) {
-      case 'PAGE':
-        return {...store, page: action.page};
-      case 'THEME_COLOR':
-        return {...store, themeColor: action.themeColor};
-      case 'WORKER':
-        return {...store, worker: action.worker};
-      case 'UPDATE_STATUS':
-        if (store.status === 'disabled') {
-          return store;
-        }
-
-        return {...store, status: action.result.status};
-      case 'RELOAD_WORKER':
-        return {...store, reloadWorker: !store.reloadWorker};
-      case 'SET_NOTICE':
-        return {...store, notice: {...store.notice, ...{open: true, variant: 'success'}, ...action.notice}};
-      case 'SET_ERROR':
-        return {...store, notice: {...store.notice, ...{open: true, variant: 'error'}, ...action.notice}};
-      case 'CLOSE_NOTICE':
-        return {...store, notice: {...store.notice, ...{open: false}}};
-      case 'PAGINATION_INITIALIZED':
-        return {
-          ...store,
-          pagination: {
-            ...store.pagination,
-            initialized: true,
-          },
-        };
-      case 'PAGINATION_PAGE':
-        return {
-          ...store,
-          pagination: {
-            ...store.pagination,
-            page: action.page,
-          },
-        };
-      case 'PAGINATION_PER_PAGE':
-        return {
-          ...store,
-          pagination: {
-            ...store.pagination,
-            rowsPerPage: action.rowsPerPage,
-          },
-        };
-      case 'RESULT':
-      default:
-        if (action.type === 'RESULT') {
-          store = resultReducer(store, action.result);
-        }
-
-        if (options.store?.reducer) {
-          return options.store.reducer(store, action);
-        }
+    if (action.type in reducerActions) {
+      return reducerActions[action.type](store, action, options);
+    }
 
-        return store;
+    if (options.store?.reducer) {
+      return options.store.reducer(store, action);
     }
+
+    return store;
   }, [options]);
   const [store, dispatch] = useReducer(getReducer, getInitialState(options));
 
@@ -142,12 +141,11 @@ export const StoreContextProvider: FC<{
     onReloadNeeded().then();
   }, []);
 
-  return useMemo(
-    () =>
-      <StoreContext.Provider value={{store}}>
-        <DispatchContext.Provider value={{dispatch, onReloadNeeded}}>
-          {children}
-        </DispatchContext.Provider>
-      </StoreContext.Provider>
-    , [store]);
-};
+  return <StoreContext.Provider value={{store}}>
+    <DispatchContext.Provider value={{dispatch, onReloadNeeded}}>
+      {children}
+    </DispatchContext.Provider>
+  </StoreContext.Provider>;
+});
+StoreContextProvider.displayName = 'StoreContextProvider';
+export {StoreContextProvider};

src/app/common.tsx

@@ -1,4 +1,4 @@
-import {AppOptions} from '../types';
+import type {AppOptions} from '$/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
 export const getProcessContext = async(options: AppOptions, store: any): Promise<({ [key: string]: any }) | undefined> => ({

src/app/components/Graph.tsx

@@ -1,5 +1,7 @@
-import React, {useRef, useEffect, useMemo, FC} from 'react';
-import {Network, Node, Edge} from 'vis-network';
+import type {FC} from 'react';
+import type {Node, Edge} from 'vis-network';
+import React, {memo, useRef, useEffect} from 'react';
+import {Network} from 'vis-network';
 import {makeStyles, createStyles} from '@material-ui/core/styles';
 
 const useStyles = makeStyles(() => createStyles({
@@ -14,7 +16,7 @@ const Graph: FC<{
   edges: Array<Edge>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options?: any;
-}> = ({nodes, edges, options}) => {
+}> = memo(({nodes, edges, options}) => {
   const classes   = useStyles();
   const container = useRef<HTMLDivElement>(null);
 
@@ -33,7 +35,8 @@ const Graph: FC<{
     );
   }, [nodes, edges, options]);
 
-  return useMemo(() => <div className={classes.container} ref={container}/>, [classes]);
-};
+  return <div className={classes.container} ref={container}/>;
+});
 
+Graph.displayName = 'Graph';
 export default Graph;