chore: bump version to 34; fix several errors (#45)

* docs: correct the invalid link in README demo

* refactor: filename typo

* fix: missing key and illegal fixed (left after right) in tsx

* chore: bump version to 34 and electron 34 and update dev script

Author: z0gSh1u

README.md

@@ -44,7 +44,7 @@ npm i electrom --save-dev
 Please visit the demo code
 
 - [./example/main.ts](./example/main.ts)
-- [electron-modules/electron-windows/blob/master/app/electrom.js](https://github.com/electron-modules/electron-windows/blob/master/app/electrom.js)
+- [electron-modules/electron-modules-sample/main/src/electrom.ts](https://github.com/electron-modules/electron-modules-sample/blob/main/src/electrom.ts)
 
 ```typescript
 // main process: import electrom

example/bootstrap.js

@@ -0,0 +1,5 @@
+// New version Electron CLI passes the script directly to the internal Node VM
+// without ensuring pre-transpilation with `-r ts-node/register/transpile-only`.
+// This bootstrap file is a workaround then.
+require('ts-node/register/transpile-only');
+require('./main.ts');

package.json

@@ -1,12 +1,12 @@
 {
   "name": "electrom",
-  "version": "19.3.1",
+  "version": "34.0.0",
   "description": "Electrom is a resource management solution for Electron applications, which is convenient for performance management and friendly debugging of multiple windows",
   "scripts": {
     "build": "sh ./build.sh",
     "build:web": "cross-env NODE_ENV=production webpack",
     "dev": "concurrently npm:dev:*",
-    "dev:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./example/main.ts",
+    "dev:main": "cross-env NODE_ENV=development electron ./example/bootstrap.js",
     "dev:web": "cross-env NODE_ENV=development webpack-dev-server",
     "test": "jest",
     "lint": "eslint --fix --quiet --ext .js,.jsx ./src",
@@ -61,8 +61,8 @@
     "css-loader": "^0.28.8",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "detect-port": "1",
-    "electron": "22",
-    "electron-windows": "18",
+    "electron": "34",
+    "electron-windows": "34",
     "eslint": "^7.32.0",
     "git-contributor": "*",
     "html-webpack-plugin": "^5.5.0",
@@ -113,4 +113,4 @@
     ]
   },
   "license": "MIT"
-}
+}

src/renderer/StatusBoard.tsx

@@ -93,8 +93,8 @@ const useViewModel = (props: StatusBoardProps) => {
             <span className={styles.desc}>
               <span>id:{webContentInfo.id}</span>
               <span>type:{webContentInfo.type}</span>
-              {display.map((item) => (
-                <span>{item}</span>
+              {display.map((textOrElement, index) => (
+                <span key={index}>{textOrElement}</span>
               ))}
             </span>
           </>
@@ -173,7 +173,7 @@ const useViewModel = (props: StatusBoardProps) => {
       title: 'Action',
       dataIndex: 'type',
       width: '60px',
-      fixed: 'left',
+      fixed: 'right',
       render: (type: string, item) => {
         const isDevtoolsSelf = !!item.webContentInfo?.url.startsWith('devtools://devtools');
         return (