@tomjs/create-app 0.4.4 → 0.4.6

package/dist/index.mjs

@@ -4,5 +4,5 @@ import a,{renameSync as Ce}from"fs";import Oe from"os";import i from"path";impor
 Scaffolding project in ${s}...`);let Z=g||P?.name||n||"",D=t=>i.join(Ne(import.meta.url),"../..",`template-${t}`),we=D(Z),G=Z.includes("node");[we,D("config")].forEach(t=>{let r=a.readdirSync(t);for(let o of r){let p=o.startsWith("_")?o.replace("_","."):o;if(G&&!f.includes("examples")&&o.includes("stylelint"))continue;let u=i.join(s,p);M(i.join(t,o),u)}});let h=T||y(),j={name:"UserName",email:"name@github.com"};function ee(){let t=h.startsWith("@")?h.split("/")[0].substring(1):De(j.name);return`${xe||`https://github.com/${t}`}/${h.substring(h.indexOf("/")+1)}.git`}je(),G&&(Se(),ke(),Ee());let te=se(process.env.npm_config_user_agent),U=te?te.name:"npm";b.which("git")&&(b.exec(`cd ${s} && git init`),f.includes("publish")&&b.exec(`cd ${s} && git remote add origin ${ee()}`));let _=i.relative(H,s);switch(console.log(`
 Done. Now run:
 `),s!==H&&console.log(`  cd ${_.includes(" ")?`"${_}"`:_}`),U){case"yarn":console.log("  yarn"),console.log("  yarn dev");break;default:console.log(`  ${U} install`),console.log(`  ${U} run dev`);break}function Se(){["LICENSE","README.md","README.zh_CN.md"].forEach(t=>{let r=i.join(s,t);if(!f.includes("publish")&&a.existsSync(r)){a.rmSync(r),t==="README.md"&&a.writeFileSync(r,`# ${h}
-`,{encoding:"utf-8"});return}if(!a.existsSync(r))return;let o=a.readFileSync(r,"utf-8").replace(new RegExp("{{pkg.name}}","g"),h).replace(new RegExp("{{user.name}}","g"),j.name).replace(new RegExp("{{user.email}}","g"),j.email);a.writeFileSync(r,o)})}function k(t,...r){["dependencies","devDependencies"].forEach(o=>{Object.keys(t[o]||{}).forEach(p=>{r.find(u=>p.includes(u))&&delete t[o][p]})})}function je(){let t=v(i.join(s,"package.json"));t.name=h,f.includes("publish")?(b.which("git")&&(j.name=ye("user.name")||Oe.userInfo().username,j.email=ye("user.email")||"",t.author=Object.assign(t.author,j)),t.repository.url=`git+${ee()}`):(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),G&&(f.includes("electron")||(k(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),f.includes("vite")&&k(t,"vite")),x(i.join(s,"package.json"),t)}function I(t,r){let o=t.lastIndexOf("."),p=t.substring(0,o)+"."+r+t.substring(o),u=i.join(s,t),d=i.join(s,p);f.includes(r)?($(u),a.existsSync(d)&&Ce(d,u)):$(d)}function ke(){if(I("tsconfig.json","test"),I("jest.config.cjs","electron"),f.includes("test"))return;a.readdirSync(s).filter(o=>o.startsWith("jest.config")||["test"].includes(o)).forEach(o=>{$(i.join(s,o))});let t=i.join(s,"package.json"),r=v(t);delete r.scripts.test,r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",test",""),k(r,"jest"),x(t,r)}function Ee(){if(I(".lintstagedrc.cjs","examples"),!f.includes("examples")){let o=v(i.join(s,"package.json"));o.scripts.lint=o.scripts.lint.replace(" lint:stylelint",""),o.scripts["lint:eslint"]=o.scripts["lint:eslint"].replace(",examples",""),delete o.scripts["lint:stylelint"],k(o,"stylelint"),x(i.join(s,"package.json"),o);return}let t=i.join(s,"examples");a.mkdirSync(t);let r=f.includes("electron");["vue","react"].forEach(o=>{let p=D(r?`electron-${o}`:o),u=i.join(t,o);if(!a.existsSync(p)){console.log(`${X(p)} template is not exist`);return}a.cpSync(p,u,{recursive:!0});let d=v(i.join(u,"package.json"));Object.keys(d.scripts).forEach(E=>{(E.startsWith("lint")||["prepare"].includes(E))&&delete d.scripts[E]}),k(d,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged","npm-run-all"),x(i.join(u,"package.json"),d),["_lintstagedrc.cjs"].forEach(E=>{let ne=i.join(u,E);a.existsSync(ne)&&a.rmSync(ne,{recursive:!0})})}),a.writeFileSync(i.join(s,"pnpm-workspace.yaml"),`packages:
+`,{encoding:"utf-8"});return}if(!a.existsSync(r))return;let o=a.readFileSync(r,"utf-8").replace(new RegExp("{{pkg.name}}","g"),h).replace(new RegExp("{{user.name}}","g"),j.name).replace(new RegExp("{{user.email}}","g"),j.email);a.writeFileSync(r,o)})}function k(t,...r){["dependencies","devDependencies"].forEach(o=>{Object.keys(t[o]||{}).forEach(p=>{r.find(u=>p.includes(u))&&delete t[o][p]})})}function je(){let t=v(i.join(s,"package.json"));t.name=h,f.includes("publish")?(b.which("git")&&(j.name=ye("user.name")||Oe.userInfo().username,j.email=ye("user.email")||"",t.author=Object.assign(t.author,j)),t.repository.url=`git+${ee()}`):(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),G&&(f.includes("electron")||(k(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),f.includes("vite")||k(t,"vite")),x(i.join(s,"package.json"),t)}function I(t,r){let o=t.lastIndexOf("."),p=t.substring(0,o)+"."+r+t.substring(o),u=i.join(s,t),d=i.join(s,p);f.includes(r)?($(u),a.existsSync(d)&&Ce(d,u)):$(d)}function ke(){if(I("tsconfig.json","test"),I("jest.config.cjs","electron"),f.includes("test"))return;a.readdirSync(s).filter(o=>o.startsWith("jest.config")||["test"].includes(o)).forEach(o=>{$(i.join(s,o))});let t=i.join(s,"package.json"),r=v(t);delete r.scripts.test,r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",test",""),k(r,"jest"),x(t,r)}function Ee(){if(I(".lintstagedrc.cjs","examples"),!f.includes("examples")){let o=v(i.join(s,"package.json"));o.scripts.lint=o.scripts.lint.replace(" lint:stylelint",""),o.scripts["lint:eslint"]=o.scripts["lint:eslint"].replace(",examples",""),delete o.scripts["lint:stylelint"],k(o,"stylelint"),x(i.join(s,"package.json"),o);return}let t=i.join(s,"examples");a.mkdirSync(t);let r=f.includes("electron");["vue","react"].forEach(o=>{let p=D(r?`electron-${o}`:o),u=i.join(t,o);if(!a.existsSync(p)){console.log(`${X(p)} template is not exist`);return}a.cpSync(p,u,{recursive:!0});let d=v(i.join(u,"package.json"));Object.keys(d.scripts).forEach(E=>{(E.startsWith("lint")||["prepare"].includes(E))&&delete d.scripts[E]}),k(d,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged","npm-run-all"),x(i.join(u,"package.json"),d),["_lintstagedrc.cjs"].forEach(E=>{let ne=i.join(u,E);a.existsSync(ne)&&a.rmSync(ne,{recursive:!0})})}),a.writeFileSync(i.join(s,"pnpm-workspace.yaml"),`packages:
   - 'examples/*'`,{encoding:"utf-8"})}}K().then(async()=>_e().catch(e=>{e.message&&console.error(e)})).catch(e=>{e.message&&console.error(e)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/create-app",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "create tomjs web app",
   "keywords": [
     "tomjs",
@@ -64,7 +64,7 @@
     "eslint": "^8.55.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "np": "^9.1.0",
+    "np": "^9.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.1",
     "stylelint": "^15.11.0",

package/template-electron-react/.vscode/launch.json

@@ -5,16 +5,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Main Process",
+      "name": "Main Debug",
       "type": "node",
       "request": "launch",
-      "cwd": "${workspaceRoot}",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
       "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
-      "args": ["."],
-      "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+      "args": [
+        "."
+      ],
+      "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env",
+      "outputCapture": "std",
+      "console": "integratedTerminal"
     },
   ]
 }

package/template-electron-react/README.md

@@ -13,7 +13,7 @@ vite + electron + react
 |  |--preload
 |  |  |--index.ts
 |--src
-|  |--App.vue
+|  |--App.tsx
 |  |--main.ts
 ```
 
@@ -31,6 +31,69 @@ vite + electron + react
 |  |  |--index.html
 ```
 
+## Debug
+
+### Web debugging
+
+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
+
+```ts
+import { app } from 'electron';
+
+app.whenReady().then(() => {
+  const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
+    '@tomjs/electron-devtools-installer'
+  );
+
+  installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+    .then(exts => {
+      console.log(
+        'Added Extension: ',
+        exts.map(s => s.name),
+      );
+    })
+    .catch(err => {
+      console.log('Failed to install extensions');
+      console.error(err);
+    });
+});
+```
+
+### Main thread debugging
+
+#### Turn on debugging
+
+Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
+
+- Enable by setting `APP_ELECTRON_DEBUG=1` in `.env.development` file
+- `vite.config.js` configures `electron({ debug: true })` to be turned on
+
+#### VSCODE
+
+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)
+
+`launch.json` is configured as follows:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "args": ["."],
+      "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+    }
+  ]
+}
+```
+
 ## Reference project
 
 - [electron-vite-react](https://github.com/electron-vite/electron-vite-react)

package/template-electron-react/electron/main/index.ts

@@ -1,6 +1,7 @@
 import { release } from 'node:os';
 import { join } from 'node:path';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
+import '../polyfills';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -22,7 +23,7 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
 let win: BrowserWindow | null = null;
 // package.json "type":"module", must use mjs extension
-const preload = join(__dirname, '../preload/index.js');
+const preload = join(__dirname, '../preload/index.mjs');
 const serverUrl = process.env.APP_DEV_SERVER_URL as string;
 const rendererDist = join(__dirname, '../renderer');
 const indexHtml = join(rendererDist, 'index.html');

package/template-electron-react/electron/polyfills.ts

@@ -0,0 +1,4 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+global.__dirname = dirname(fileURLToPath(import.meta.url));

package/template-electron-react/package.json

@@ -1,11 +1,12 @@
 {
   "name": "electron-app",
   "version": "0.0.0",
+  "type": "module",
   "description": "vite + electron + vue",
   "engines": {
     "node": ">=18"
   },
-  "main": "dist/main/index.js",
+  "main": "dist/main/index.mjs",
   "scripts": {
     "dev": "vite",
     "build": "npm run clean && vite build && npm run release",
@@ -29,7 +30,7 @@
     "@tomjs/prettier": "^1.0.6",
     "@tomjs/stylelint": "^1.1.1",
     "@tomjs/tsconfig": "^1.1.2",
-    "@tomjs/vite-plugin-electron": "^1.3.6",
+    "@tomjs/vite-plugin-electron": "^1.3.8",
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",

package/template-electron-vue/.vscode/launch.json

@@ -5,16 +5,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Main Process",
+      "name": "Main Debug",
       "type": "node",
       "request": "launch",
-      "cwd": "${workspaceRoot}",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
       "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
       },
-      "args": ["."],
-      "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+      "args": [
+        "."
+      ],
+      "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env",
+      "outputCapture": "std",
+      "console": "integratedTerminal"
     },
   ]
 }

package/template-electron-vue/README.md

@@ -31,6 +31,64 @@ vite + electron + vue
 |  |  |--index.html
 ```
 
+## Debug
+
+### Web debugging
+
+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
+
+```ts
+import { app } from 'electron';
+
+app.whenReady().then(() => {
+  const { installExtension, VUEJS_DEVTOOLS } = await import('@tomjs/electron-devtools-installer');
+
+  installExtension(VUEJS_DEVTOOLS)
+    .then(ext => {
+      console.log('Added Extension: ', ext.name);
+    })
+    .catch(err => {
+      console.log('Failed to install extensions');
+      console.error(err);
+    });
+});
+```
+
+### Main thread debugging
+
+#### Turn on debugging
+
+Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
+
+- Enable by setting `APP_ELECTRON_DEBUG=1` in `.env.development` file
+- `vite.config.js` configures `electron({ debug: true })` to be turned on
+
+#### VSCODE
+
+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)
+
+`launch.json` is configured as follows:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "args": ["."],
+      "envFile": "${workspaceFolder}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+    }
+  ]
+}
+```
+
 ## Reference project
 
 - [electron-vite-vue](https://github.com/electron-vite/electron-vite-vue)

package/template-electron-vue/electron/main/index.ts

@@ -1,6 +1,7 @@
 import { release } from 'node:os';
 import { join } from 'node:path';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
+import '../polyfills';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -22,7 +23,7 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
 let win: BrowserWindow | null = null;
 // package.json "type":"module", must use mjs extension
-const preload = join(__dirname, '../preload/index.js');
+const preload = join(__dirname, '../preload/index.mjs');
 const serverUrl = process.env.APP_DEV_SERVER_URL as string;
 const rendererDist = join(__dirname, '../renderer');
 const indexHtml = join(rendererDist, 'index.html');

package/template-electron-vue/electron/polyfills.ts

@@ -0,0 +1,4 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+global.__dirname = dirname(fileURLToPath(import.meta.url));

package/template-electron-vue/package.json

@@ -1,11 +1,12 @@
 {
   "name": "electron-app",
   "version": "0.0.0",
+  "type": "module",
   "description": "vite + electron + vue",
   "engines": {
     "node": ">=18"
   },
-  "main": "dist/main/index.js",
+  "main": "dist/main/index.mjs",
   "scripts": {
     "dev": "vite",
     "build": "npm run clean && vue-tsc --noEmit && vite build && npm run release",
@@ -28,7 +29,7 @@
     "@tomjs/prettier": "^1.0.6",
     "@tomjs/stylelint": "^1.1.1",
     "@tomjs/tsconfig": "^1.1.2",
-    "@tomjs/vite-plugin-electron": "^1.3.6",
+    "@tomjs/vite-plugin-electron": "^1.3.8",
     "@types/node": "^18.19.3",
     "@types/shelljs": "^0.8.15",
     "@vitejs/plugin-vue": "^4.5.2",

package/template-node/package.json

@@ -65,7 +65,7 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.0",
-    "np": "^9.1.0",
+    "np": "^9.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",