add eslint

Author: elawad

.eslintrc.yml

@@ -0,0 +1,38 @@
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
+  - plugin:react/jsx-runtime
+  - plugin:import/recommended
+  - plugin:jsx-a11y/recommended
+  - prettier
+
+env:
+  es2022: true
+  browser: true
+
+parserOptions:
+  ecmaVersion: latest
+  # sourceType: module
+  ecmaFeatures:
+    jsx: true
+
+settings:
+  import/resolver:
+    node:
+      paths: src
+      extensions: [.js, .jsx]
+  react:
+    version: detect
+
+rules:
+  no-console: 1
+  quotes: [2, single, { avoidEscape: true }]
+  import/order:
+    [
+      2,
+      {
+        alphabetize: { order: asc, caseInsensitive: true },
+        groups: [builtin, external, internal, [parent, sibling, index]],
+        newlines-between: always,
+      },
+    ]

package.json

@@ -12,20 +12,27 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "format": "prettier --write src/ && eslint --fix src/",
     "deploy": "gh-pages -d dist",
     "predeploy": "yarn build"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "spectacle": "^9.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "gh-pages": "^5.0.0",
     "prettier": "^2.8.3",
-    "spectacle": "^9.6.0",
+    "prop-types": "^15.8.1",
     "vite": "^4.1.0"
   },
   "prettier": {

src/components/Image/index.jsx

@@ -1,8 +1,14 @@
-import { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
 
 import loadingImg from '../../assets/loading.svg';
 import './Image.css';
 
+const propTypes = {
+  image: PropTypes.object, // ImageBitmap type,
+  size: PropTypes.number,
+};
+
 function Image({ image, size }) {
   const canvasRef = useRef();
 
@@ -22,10 +28,11 @@ function Image({ image, size }) {
 
   return (
     <div className={`image ${done ? 'done' : ''}`}>
-      <img src={loadingImg} className="loading" />
+      <img src={loadingImg} className="loading" alt="Loading" />
       <canvas ref={canvasRef} style={{ width: `${w}px`, height: `${h}px` }} />
     </div>
   );
 }
 
+Image.propTypes = propTypes;
 export default Image;

src/components/Slides/index.jsx

@@ -59,7 +59,7 @@ function Slides() {
 
         <FlexBox alignItems="flex-end" justifyContent="unset" flexGrow={1}>
           <Text fontSize="0.85em" mb="0 !important" pb="0 !important">
-            Aymen Elawad / 2023
+            Aymen / 2023
           </Text>
         </FlexBox>
       </Slide>
@@ -137,7 +137,7 @@ function Slides() {
             <UnorderedList>
               <Appear>
                 <ListItem>
-                  Some can be moved as a "Transferable Object"
+                  Some can be moved as a &quot;Transferable Object&quot;
                 </ListItem>
               </Appear>
             </UnorderedList>
@@ -190,15 +190,15 @@ function Slides() {
 
         <FlexBox justifyContent="space-around">
           <CodePane language="js" theme={syntax} showLineNumbers={false}>{`
-              // main.js
-              const worker = new Worker('worker.js')
+            // main.js
+            const worker = new Worker('worker.js')
                 
-              worker.postMessage(10)
+            worker.postMessage(10)
                 
-              worker.onmessage = (e) => {
-                console.log(e.data)
-              }
-            `}</CodePane>
+            worker.onmessage = (e) => {
+              console.log(e.data)
+            }
+          `}</CodePane>
 
           <Appear>
             <CodePane language="js" theme={syntax} showLineNumbers={false}>{`
@@ -224,7 +224,7 @@ function Slides() {
       </Slide>
 
       <Slide>
-        <Heading>Info</Heading>
+        <Heading>Resources</Heading>
 
         <Text mb="2em !important">
           <Link
@@ -238,30 +238,28 @@ function Slides() {
 
         <Appear>
           <Text fontSize="1em">
-            Web Workers
+            Browser
             <br />
             <Link
               href="https://developer.mozilla.org/docs/Web/API/Web_Workers_API"
               textDecoration="none"
               color="inherit"
               fontSize="1.5em"
             >
-              developer.mozilla.org/docs/Web/API/Web_Workers_API
+              Web Workers
             </Link>
           </Text>
-        </Appear>
 
-        <Appear>
           <Text fontSize="1em">
-            Node Worker Threads
+            Node
             <br />
             <Link
               href="https://nodejs.org/api/worker_threads.html#worker-threads"
               textDecoration="none"
               color="inherit"
               fontSize="1.5em"
             >
-              nodejs.org/api/worker_threads.html
+              Worker Threads
             </Link>
           </Text>
         </Appear>

src/main.jsx

@@ -8,7 +8,5 @@ import Slides from './components/Slides';
 const app = window.location.search === '?app';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    {app ? <App /> : <Slides />}
-  </StrictMode>
+  <StrictMode>{app ? <App /> : <Slides />}</StrictMode>
 );

src/worker-pool.js

@@ -1,6 +1,5 @@
 import resize from './resize';
 
-const maxCount = navigator.hardwareConcurrency;
 const workers = [];
 const callbacks = new Map();
 let index = -1;
@@ -21,7 +20,8 @@ async function start(id, file, size, cb) {
 }
 
 function setCount(c = 0) {
-  const count = c > maxCount ? maxCount : c;
+  const max = counts.at(-1);
+  const count = c > max ? max : Math.max(0, c);
 
   // Remove Workers
   while (count < workers.length) {
@@ -54,9 +54,10 @@ function reset(count) {
 }
 
 const counts = (() => {
-  const sqrt = Math.ceil(Math.sqrt(maxCount) + 1);
-  const keys = Array(sqrt).keys();
-  return [...keys].map((i) => 2 ** i).filter((i) => i <= maxCount);
+  const limit = navigator.hardwareConcurrency;
+  const sqrt = Math.ceil(Math.sqrt(limit) + 1);
+  const keys = [...Array(sqrt).keys()];
+  return keys.map((i) => 2 ** i).filter((i) => i <= limit);
 })();
 
 export { start, setCount, reset, counts };

vite.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   base: './',