@tomjs/create-app 0.4.5 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tomjs/create-app",
3
- "version": "0.4.5",
3
+ "version": "0.4.6",
4
4
  "description": "create tomjs web app",
5
5
  "keywords": [
6
6
  "tomjs",
@@ -42,16 +42,6 @@
42
42
  "access": "public",
43
43
  "registry": "https://registry.npmjs.org"
44
44
  },
45
- "scripts": {
46
- "dev": "tsup --watch",
47
- "build": "tsup --minify",
48
- "lint": "run-s lint:eslint lint:stylelint lint:prettier",
49
- "lint:eslint": "eslint \"{src,template-*}/**/*.{js,cjs,ts}\" *.{js,cjs,ts} --fix --cache",
50
- "lint:stylelint": "stylelint \"template-*/**/*.{css,scss,less,vue,html}\" --fix --cache",
51
- "lint:prettier": "prettier --write \"{src,template-*}/**/*.{js,cjs,ts,json,md}\" *.{js,cjs,ts,json,md}",
52
- "prepare": "husky install",
53
- "npv": "npm run build && np --any-branch --no-yarn --yolo --no-publish --message \"chore: release v%s\""
54
- },
55
45
  "dependencies": {
56
46
  "kolorist": "^1.8.0",
57
47
  "lodash-es": "^4.17.21",
@@ -74,11 +64,19 @@
74
64
  "eslint": "^8.55.0",
75
65
  "husky": "^8.0.3",
76
66
  "lint-staged": "^15.2.0",
77
- "np": "^9.1.0",
67
+ "np": "^9.2.0",
78
68
  "npm-run-all": "^4.1.5",
79
69
  "prettier": "^3.1.1",
80
70
  "stylelint": "^15.11.0",
81
71
  "tsup": "^8.0.1",
82
72
  "typescript": "~5.2.2"
73
+ },
74
+ "scripts": {
75
+ "dev": "tsup --watch",
76
+ "build": "tsup --minify",
77
+ "lint": "run-s lint:eslint lint:stylelint lint:prettier",
78
+ "lint:eslint": "eslint \"{src,template-*}/**/*.{js,cjs,ts}\" *.{js,cjs,ts} --fix --cache",
79
+ "lint:stylelint": "stylelint \"template-*/**/*.{css,scss,less,vue,html}\" --fix --cache",
80
+ "lint:prettier": "prettier --write \"{src,template-*}/**/*.{js,cjs,ts,json,md}\" *.{js,cjs,ts,json,md}"
83
81
  }
84
- }
82
+ }
@@ -5,16 +5,20 @@
5
5
  "version": "0.2.0",
6
6
  "configurations": [
7
7
  {
8
- "name": "Debug Main Process",
8
+ "name": "Main Debug",
9
9
  "type": "node",
10
10
  "request": "launch",
11
- "cwd": "${workspaceRoot}",
12
- "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
11
+ "cwd": "${workspaceFolder}",
12
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
13
13
  "windows": {
14
- "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
14
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
15
15
  },
16
- "args": ["."],
17
- "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
16
+ "args": [
17
+ "."
18
+ ],
19
+ "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env",
20
+ "outputCapture": "std",
21
+ "console": "integratedTerminal"
18
22
  },
19
23
  ]
20
24
  }
@@ -13,7 +13,7 @@ vite + electron + react
13
13
  | |--preload
14
14
  | | |--index.ts
15
15
  |--src
16
- | |--App.vue
16
+ | |--App.tsx
17
17
  | |--main.ts
18
18
  ```
19
19
 
@@ -31,6 +31,69 @@ vite + electron + react
31
31
  | | |--index.html
32
32
  ```
33
33
 
34
+ ## Debug
35
+
36
+ ### Web debugging
37
+
38
+ Use [@tomjs/electron-devtools-installer](https://npmjs.com/package/@tomjs/electron-devtools-installer) to install the `Chrome Devtools` plugins and use it like web development
39
+
40
+ ```ts
41
+ import { app } from 'electron';
42
+
43
+ app.whenReady().then(() => {
44
+ const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
45
+ '@tomjs/electron-devtools-installer'
46
+ );
47
+
48
+ installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
49
+ .then(exts => {
50
+ console.log(
51
+ 'Added Extension: ',
52
+ exts.map(s => s.name),
53
+ );
54
+ })
55
+ .catch(err => {
56
+ console.log('Failed to install extensions');
57
+ console.error(err);
58
+ });
59
+ });
60
+ ```
61
+
62
+ ### Main thread debugging
63
+
64
+ #### Turn on debugging
65
+
66
+ Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
67
+
68
+ - Enable by setting `APP_ELECTRON_DEBUG=1` in `.env.development` file
69
+ - `vite.config.js` configures `electron({ debug: true })` to be turned on
70
+
71
+ #### VSCODE
72
+
73
+ Run `Debug Main Process` through `vscode` to debug the main thread. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)
74
+
75
+ `launch.json` is configured as follows:
76
+
77
+ ```json
78
+ {
79
+ "version": "0.2.0",
80
+ "configurations": [
81
+ {
82
+ "name": "Debug Main Process",
83
+ "type": "node",
84
+ "request": "launch",
85
+ "cwd": "${workspaceFolder}",
86
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
87
+ "windows": {
88
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
89
+ },
90
+ "args": ["."],
91
+ "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
92
+ }
93
+ ]
94
+ }
95
+ ```
96
+
34
97
  ## Reference project
35
98
 
36
99
  - [electron-vite-react](https://github.com/electron-vite/electron-vite-react)
@@ -1,6 +1,7 @@
1
1
  import { release } from 'node:os';
2
2
  import { join } from 'node:path';
3
3
  import { app, BrowserWindow, ipcMain, shell } from 'electron';
4
+ import '../polyfills';
4
5
 
5
6
  const isDev = process.env.NODE_ENV === 'development';
6
7
 
@@ -22,7 +23,7 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
22
23
 
23
24
  let win: BrowserWindow | null = null;
24
25
  // package.json "type":"module", must use mjs extension
25
- const preload = join(__dirname, '../preload/index.js');
26
+ const preload = join(__dirname, '../preload/index.mjs');
26
27
  const serverUrl = process.env.APP_DEV_SERVER_URL as string;
27
28
  const rendererDist = join(__dirname, '../renderer');
28
29
  const indexHtml = join(rendererDist, 'index.html');
@@ -0,0 +1,4 @@
1
+ import { dirname } from 'path';
2
+ import { fileURLToPath } from 'url';
3
+
4
+ global.__dirname = dirname(fileURLToPath(import.meta.url));
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "electron-app",
3
3
  "version": "0.0.0",
4
+ "type": "module",
4
5
  "description": "vite + electron + vue",
5
6
  "engines": {
6
7
  "node": ">=18"
7
8
  },
8
- "main": "dist/main/index.js",
9
+ "main": "dist/main/index.mjs",
9
10
  "scripts": {
10
11
  "dev": "vite",
11
12
  "build": "npm run clean && vite build && npm run release",
@@ -29,7 +30,7 @@
29
30
  "@tomjs/prettier": "^1.0.6",
30
31
  "@tomjs/stylelint": "^1.1.1",
31
32
  "@tomjs/tsconfig": "^1.1.2",
32
- "@tomjs/vite-plugin-electron": "^1.3.6",
33
+ "@tomjs/vite-plugin-electron": "^1.3.8",
33
34
  "@types/node": "^18.19.3",
34
35
  "@types/react": "^18.2.43",
35
36
  "@types/react-dom": "^18.2.17",
@@ -5,16 +5,20 @@
5
5
  "version": "0.2.0",
6
6
  "configurations": [
7
7
  {
8
- "name": "Debug Main Process",
8
+ "name": "Main Debug",
9
9
  "type": "node",
10
10
  "request": "launch",
11
- "cwd": "${workspaceRoot}",
12
- "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
11
+ "cwd": "${workspaceFolder}",
12
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
13
13
  "windows": {
14
- "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
14
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
15
15
  },
16
- "args": ["."],
17
- "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
16
+ "args": [
17
+ "."
18
+ ],
19
+ "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env",
20
+ "outputCapture": "std",
21
+ "console": "integratedTerminal"
18
22
  },
19
23
  ]
20
24
  }
@@ -31,6 +31,64 @@ vite + electron + vue
31
31
  | | |--index.html
32
32
  ```
33
33
 
34
+ ## Debug
35
+
36
+ ### Web debugging
37
+
38
+ Use [@tomjs/electron-devtools-installer](https://npmjs.com/package/@tomjs/electron-devtools-installer) to install the `Chrome Devtools` plugins and use it like web development
39
+
40
+ ```ts
41
+ import { app } from 'electron';
42
+
43
+ app.whenReady().then(() => {
44
+ const { installExtension, VUEJS_DEVTOOLS } = await import('@tomjs/electron-devtools-installer');
45
+
46
+ installExtension(VUEJS_DEVTOOLS)
47
+ .then(ext => {
48
+ console.log('Added Extension: ', ext.name);
49
+ })
50
+ .catch(err => {
51
+ console.log('Failed to install extensions');
52
+ console.error(err);
53
+ });
54
+ });
55
+ ```
56
+
57
+ ### Main thread debugging
58
+
59
+ #### Turn on debugging
60
+
61
+ Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
62
+
63
+ - Enable by setting `APP_ELECTRON_DEBUG=1` in `.env.development` file
64
+ - `vite.config.js` configures `electron({ debug: true })` to be turned on
65
+
66
+ #### VSCODE
67
+
68
+ Run `Debug Main Process` through `vscode` to debug the main thread. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)
69
+
70
+ `launch.json` is configured as follows:
71
+
72
+ ```json
73
+ {
74
+ "version": "0.2.0",
75
+ "configurations": [
76
+ {
77
+ "name": "Debug Main Process",
78
+ "type": "node",
79
+ "request": "launch",
80
+ "cwd": "${workspaceFolder}",
81
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
82
+ "windows": {
83
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
84
+ },
85
+ "args": ["."],
86
+ "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
87
+ }
88
+ ]
89
+ }
90
+ ```
91
+
34
92
  ## Reference project
35
93
 
36
94
  - [electron-vite-vue](https://github.com/electron-vite/electron-vite-vue)
@@ -1,6 +1,7 @@
1
1
  import { release } from 'node:os';
2
2
  import { join } from 'node:path';
3
3
  import { app, BrowserWindow, ipcMain, shell } from 'electron';
4
+ import '../polyfills';
4
5
 
5
6
  const isDev = process.env.NODE_ENV === 'development';
6
7
 
@@ -22,7 +23,7 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
22
23
 
23
24
  let win: BrowserWindow | null = null;
24
25
  // package.json "type":"module", must use mjs extension
25
- const preload = join(__dirname, '../preload/index.js');
26
+ const preload = join(__dirname, '../preload/index.mjs');
26
27
  const serverUrl = process.env.APP_DEV_SERVER_URL as string;
27
28
  const rendererDist = join(__dirname, '../renderer');
28
29
  const indexHtml = join(rendererDist, 'index.html');
@@ -0,0 +1,4 @@
1
+ import { dirname } from 'path';
2
+ import { fileURLToPath } from 'url';
3
+
4
+ global.__dirname = dirname(fileURLToPath(import.meta.url));
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "electron-app",
3
3
  "version": "0.0.0",
4
+ "type": "module",
4
5
  "description": "vite + electron + vue",
5
6
  "engines": {
6
7
  "node": ">=18"
7
8
  },
8
- "main": "dist/main/index.js",
9
+ "main": "dist/main/index.mjs",
9
10
  "scripts": {
10
11
  "dev": "vite",
11
12
  "build": "npm run clean && vue-tsc --noEmit && vite build && npm run release",
@@ -28,7 +29,7 @@
28
29
  "@tomjs/prettier": "^1.0.6",
29
30
  "@tomjs/stylelint": "^1.1.1",
30
31
  "@tomjs/tsconfig": "^1.1.2",
31
- "@tomjs/vite-plugin-electron": "^1.3.6",
32
+ "@tomjs/vite-plugin-electron": "^1.3.8",
32
33
  "@types/node": "^18.19.3",
33
34
  "@types/shelljs": "^0.8.15",
34
35
  "@vitejs/plugin-vue": "^4.5.2",
@@ -65,7 +65,7 @@
65
65
  "husky": "^8.0.3",
66
66
  "jest": "^29.7.0",
67
67
  "lint-staged": "^15.2.0",
68
- "np": "^9.1.0",
68
+ "np": "^9.2.0",
69
69
  "npm-run-all": "^4.1.5",
70
70
  "prettier": "^3.1.1",
71
71
  "rimraf": "^5.0.5",