Merge pull request #51 from technote-space/release/next-v0.1.14

release: v0.2.0

Author: technote-space

ThirdPartyNotices.txt

@@ -1,6 +1,6 @@
 {
   "name": "@technote-space/hello-genetic-algorithm",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "description": "Hello Genetic Algorithm",
   "keywords": [
     "genetic algorithm"
@@ -24,60 +24,60 @@
     "check-types": "tsc",
     "clean": "rm -rf node_modules* build*",
     "clear": "rm -rf build*",
-    "dev": "yarn clear && NODE_ENV=development  webpack --progress --config webpack.dev.js",
+    "dev": "yarn clear && NODE_ENV=development webpack --progress --config webpack.dev.js",
     "kill": "lsof -i:$npm_package_port -t | xargs kill -9",
     "lint": "eslint './src/**/*.{ts,js,jsx}' --cache",
     "lint:fix": "eslint './src/**/*.{ts,js,jsx}' --fix",
-    "update": "npx npm-check-updates -u && yarn install && yarn upgrade && yarn audit",
-    "watch": "yarn kill && NODE_ENV=none DEV_SERVER_PORT=$npm_package_port webpack serve"
+    "serve": "yarn kill && NODE_ENV=none DEV_SERVER_PORT=$npm_package_port webpack serve",
+    "update": "npm_config_yes=true npx npm-check-updates -u --timeout 100000 && yarn install && yarn upgrade && yarn audit"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@technote-space/ga-framework": "^0.14.19",
-    "@technote-space/genetic-algorithms-js": "^0.8.23",
-    "axios": "^0.21.1",
-    "encoding-japanese": "^1.0.30",
+    "@mui/material": "^5.11.2",
+    "@technote-space/ga-framework": "^0.15.1",
+    "@technote-space/genetic-algorithms-js": "^0.8.27",
+    "axios": "^1.2.1",
+    "encoding-japanese": "^2.0.0",
     "fast-levenshtein": "^3.0.0",
     "file-saver": "^2.0.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sprintf-js": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-react-inline-elements": "^7.14.5",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-flow": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@commitlint/cli": "^13.1.0",
-    "@commitlint/config-conventional": "^13.1.0",
-    "@types/encoding-japanese": "^1.0.18",
+    "@babel/core": "^7.20.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-react-inline-elements": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@types/encoding-japanese": "^2.0.1",
     "@types/fast-levenshtein": "^0.0.2",
-    "@types/file-saver": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "babel-loader": "^8.2.2",
+    "@types/file-saver": "^2.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "babel-loader": "^9.1.0",
     "babel-plugin-react-html-attrs": "^3.0.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "copy-webpack-plugin": "^9.0.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.30.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.2",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^8.0.2",
     "license-checker-webpack-plugin": "^0.2.1",
-    "lint-staged": "^11.1.2",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "^4.4.2",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.0.0",
+    "lint-staged": "^13.1.0",
+    "terser-webpack-plugin": "^5.3.6",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
   },
-  "port": 5000
+  "port": 5001
 }

package.json

@@ -1,4 +1,4 @@
-import {Ga} from './logic/ga/Algorithm/Ga';
+import { Ga } from './logic/ga/Algorithm/Ga';
 
 global['GeneticAlgorithm'] = class GeneticAlgorithm extends Ga {
 };

src/GeneticAlgorithm.ts

@@ -1,23 +1,10 @@
-import React, {useMemo, useCallback, FC} from 'react';
+import React, { useMemo, useCallback, FC } from 'react';
 import axios from 'axios';
-import {saveAs} from 'file-saver';
-import {makeStyles, createStyles} from '@material-ui/core/styles';
+import { saveAs } from 'file-saver';
+import Box from '@mui/material/Box';
 import license from '../../../ThirdPartyNotices.txt';
 
-const useStyles = makeStyles(() => createStyles({
-  wrap: {
-    background: '#555',
-    marginTop: 10,
-    padding: 5,
-    textAlign: 'center',
-  },
-  link: {
-    cursor: 'pointer',
-  },
-}));
-
 const License: FC = () => {
-  const classes     = useStyles();
   const handleClick = useCallback(async() => {
     const res  = await axios.get(license, {
       responseType: 'blob',
@@ -26,9 +13,11 @@ const License: FC = () => {
     saveAs(blob, 'ThirdPartyNotices.txt');
   }, []);
 
-  return useMemo(() => <div className={classes.wrap}>
-    <a onClick={handleClick} className={classes.link}>License</a>
-  </div>, [classes]);
+  return useMemo(() => <Box sx={{ background: '#555', marginTop: '10px', padding: '5px', textAlign: 'center' }}>
+    <Box sx={{ cursor: 'pointer' }}>
+      <a onClick={handleClick}>License</a>
+    </Box>
+  </Box>, []);
 };
 
 export default License;

src/app/components/License.tsx

@@ -1,33 +1,21 @@
-import React, {useMemo, FC} from 'react';
-import {makeStyles, createStyles} from '@material-ui/core/styles';
-import {useStoreContext} from '@technote-space/ga-framework';
-import {sprintf} from 'sprintf-js';
-
-const useStyles = makeStyles(() => createStyles({
-  wrap: {
-    background: '#555',
-    marginTop: 10,
-    padding: 5,
-  },
-  param: {
-    margin: 5,
-  },
-}));
+import React, { useMemo, FC } from 'react';
+import { useStoreContext } from '@technote-space/ga-framework';
+import { sprintf } from 'sprintf-js';
+import Box from '@mui/material/Box';
 
 const Statistics: FC = () => {
-  const {store: {logic: {fitness, progress}}} = useStoreContext();
-  const classes                               = useStyles();
+  const { store: { logic: { fitness, progress } } } = useStoreContext();
 
-  return useMemo(() => <div className={classes.wrap}>
+  return useMemo(() => <Box sx={{ background: '#555', marginTop: '10px', padding: '5px' }}>
     <div>
-      <div className={classes.param}>
+      <Box sx={{ margin: '5px' }}>
         Progress: {sprintf('%.4f', progress)}
-      </div>
-      <div className={classes.param}>
+      </Box>
+      <Box sx={{ margin: '5px' }}>
         Fitness: {sprintf('%.3f', fitness)}
-      </div>
+      </Box>
     </div>
-  </div>, [progress, classes]);
+  </Box>, [progress]);
 };
 
 export default Statistics;

src/app/components/Statistics.tsx

@@ -1,20 +1,21 @@
-import React, {FC} from 'react';
-import {List, useStoreContext} from '@technote-space/ga-framework';
-import {TableCell} from '@material-ui/core';
-import {sprintf} from 'sprintf-js';
+import React, { FC } from 'react';
+import { List, useStoreContext } from '@technote-space/ga-framework';
+import { TableCell } from '@mui/material';
+import { sprintf } from 'sprintf-js';
 
 const ListPage: FC = () => {
-  const {store: {logic: {population}}} = useStoreContext();
+  const { store: { logic: { population } } } = useStoreContext();
 
   return <List
     population={population}
     render={row => <>
-      <TableCell component="th" scope="row" style={{width: 160}}>
+      <TableCell component="th" scope="row" style={{ width: 160 }}>
         {sprintf('%.3f', row.fitness)}
       </TableCell>
       <TableCell>
         {row.value}
-      </TableCell></>}
+      </TableCell>
+    </>}
     defaultPerPage={30}
   />;
 };

src/app/pages/ListPage.tsx

@@ -1,8 +1,8 @@
-import React, {FC} from 'react';
-import {Timeline, useStoreContext} from '@technote-space/ga-framework';
+import React, { FC } from 'react';
+import { Timeline, useStoreContext } from '@technote-space/ga-framework';
 
 const TimelinePage: FC = () => {
-  const {store: {histories}} = useStoreContext();
+  const { store: { histories } } = useStoreContext();
 
   return <Timeline data={histories}/>;
 };

src/app/pages/TimelinePage.tsx

@@ -0,0 +1,4 @@
+declare module '*.txt' {
+  const value: string;
+  export default value;
+}

src/global.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import {GaFramework} from '@technote-space/ga-framework';
+import { createRoot } from 'react-dom/client';
+import { GaFramework } from '@technote-space/ga-framework';
 import {
   ListPage,
   TimelinePage,
 } from './app/pages';
-import {Statistics, License} from './app/components';
+import { Statistics, License } from './app/components';
 
 const resultReducer = (store, result) => {
   return {
@@ -69,7 +69,7 @@ const options = {
     },
   },
   controllerListener: (dispatch, result) => {
-    dispatch({type: 'RESULT', result});
+    dispatch({ type: 'RESULT', result });
   },
   getWorkerContext: async store => {
     return {
@@ -88,7 +88,5 @@ const options = {
   },
 };
 
-ReactDOM.render(
-  <GaFramework options={options}/>,
-  document.getElementById('root'),
-);
+const root = createRoot(document.getElementById('root'));
+root.render(<GaFramework options={options}/>);

src/index.tsx

@@ -1,14 +1,14 @@
-import {GeneticAlgorithmBase} from '@technote-space/ga-framework/dist/app/logic/Algorithm';
-import {ITermination, IMigration} from '@technote-space/genetic-algorithms-js';
-import {Genotype} from '../Genotype';
-import {Phenotype} from '../Phenotype';
-import {Termination} from '../Termination';
-import {Migration} from '../Migration';
-import {UpdateResult, Context} from '../../types';
-import {MggIsland} from '../Island/MggIsland';
-import {CulturalIsland} from '../Island/CulturalIsland';
-import {GaIsland} from '../Island/GaIsland';
-import {TestData} from '../TestData/TestData';
+import { GeneticAlgorithmBase } from '@technote-space/ga-framework/dist/app/logic/Algorithm';
+import { ITermination, IMigration } from '@technote-space/genetic-algorithms-js';
+import { Genotype } from '../Genotype';
+import { Phenotype } from '../Phenotype';
+import { Termination } from '../Termination';
+import { Migration } from '../Migration';
+import { UpdateResult, Context } from '../../types';
+import { MggIsland } from '../Island/MggIsland';
+import { CulturalIsland } from '../Island/CulturalIsland';
+import { GaIsland } from '../Island/GaIsland';
+import { TestData } from '../TestData/TestData';
 
 export abstract class Ga extends GeneticAlgorithmBase<UpdateResult> {
   private readonly _islands: Array<GaIsland>;