@quick-start/create-electron - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

index.js

@@ -7,3 +7,3 @@ #!/usr/bin/env node
 const prompts = require('prompts')
-const { yellow, green, blue, red, reset } = require('kolorist')
+const { yellow, green, blue, red, lightBlue, reset } = require('kolorist')
 const {
@@ -34,3 +34,3 @@ copy,
     name: 'react',
-    color: blue
+    color: lightBlue
   },
@@ -40,2 +40,6 @@ {
     color: red
+  },
+  {
+    name: 'solid',
+    color: blue
   }
@@ -42,0 +46,0 @@ ]

package.json

 {
   "name": "@quick-start/create-electron",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "An easy way to start an Electron project",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -54,2 +54,3 @@ # create-electron
 |  [svelte](playground/svelte)  |  [svelte-ts](playground/svelte-ts)  |
+|   [solid](playground/solid)   |  [solid-ts](playground/solid-ts)    |
 
@@ -59,5 +60,5 @@ ## Features
 - Use `ESLint + Prettier` to better lint and style your code, help you to write high-quality code.
-- Use [electron-vite](https://github.com/alex8088/electron-vite), a fast build tooling integrated with [Vite 3](https://vitejs.dev), and you don't need to worry about configuration.
-- Use [electron-toolkit](https://github.com/alex8088/electron-toolkit) that make you easy to develop. For example: TSconfigs extends, expose common Electron APIs to renderers in preload scripts and effective utils for the main process.
-- Use [electron-builder](https://www.electron.build) and preset common configuration, allows you to easily pack Electron app.
+- Use [electron-vite](https://github.com/alex8088/electron-vite), a fast build tooling integrated with [Vite 3](https://vitejs.dev), support for `HMR`, `hot reloading`, `debugging` and `source code protection`.
+- Use [electron-toolkit](https://github.com/alex8088/electron-toolkit) to help you develop. For example: TSconfig extends, easily expose Electron APIs to renderers in preload scripts, etc.
+- Use [electron-builder](https://www.electron.build) and pre-configured to pack your app.
 - Use [electron-updater](https://www.electron.build) for auto-update, based on electron-builder.

template/react-ts/package.json

@@ -11,6 +11,8 @@ {
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "typecheck": "tsc --noEmit",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "tsc --noEmit && electron-vite build",
+    "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
@@ -28,15 +30,15 @@ "build:win": "npm run build && electron-builder --win --config",
     "@types/node": "16.11.22",
-    "@types/react": "18.0.17",
+    "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "@vitejs/plugin-react": "^2.0.1",
-    "electron": "^19.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "@vitejs/plugin-react": "^2.1.0",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.0",
+    "eslint-plugin-react": "^7.31.8",
     "prettier": "^2.7.1",
@@ -46,4 +48,4 @@ "react": "^18.2.0",
     "typescript": "^4.7.4",
-    "vite": "^3.0.9"
+    "vite": "^3.1.6"
   }
 }

template/react-ts/src/main/index.ts

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

template/react/package.json

@@ -24,16 +24,16 @@ {
   "devDependencies": {
-    "@vitejs/plugin-react": "^2.0.1",
-    "electron": "^19.0.14",
+    "@vitejs/plugin-react": "^2.1.0",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.0",
+    "eslint-plugin-react": "^7.31.8",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^3.0.9"
+    "vite": "^3.1.6"
   }
 }

template/react/src/main/index.js

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

template/react/src/renderer/src/App.jsx

@@ -8,91 +8,133 @@ import Versions from './components/Versions'
       <Versions></Versions>
-      <svg viewBox="0 0 900 300">
+
+      <svg className="hero-logo" viewBox="0 0 900 300">
         <use xlinkHref={`${icons}#electron`} />
       </svg>
-      <h2>You{"'"}ve successfully created an Electron project with React</h2>
-      <p className="desc">
+      <h2 className="hero-text">You{"'"}ve successfully created an Electron project with React</h2>
+      <p className="hero-tagline">
         Please try pressing <code>F12</code> to open the devTool
       </p>
-      <p className="desc">
-        What features are being added to the project to help you develop, build and pack Electron
-        app
-      </p>
+
+      <div className="links">
+        <div className="link-item">
+          <a target="_blank" href="https://evite.netlify.app" rel="noopener noreferrer">
+            Documentation
+          </a>
+        </div>
+        <div className="link-item link-dot">•</div>
+        <div className="link-item">
+          <a
+            target="_blank"
+            href="https://github.com/alex8088/electron-vite"
+            rel="noopener noreferrer"
+          >
+            Getting Help
+          </a>
+        </div>
+        <div className="link-item link-dot">•</div>
+        <div className="link-item">
+          <a
+            target="_blank"
+            href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"
+            rel="noopener noreferrer"
+          >
+            create-electron
+          </a>
+        </div>
+      </div>
+
       <div className="features">
-        <ul>
-          <li>
-            <p>
-              ● Use
+        <div className="feature-item">
+          <article>
+            <h2 className="title">Configuring</h2>
+            <p className="detail">
+              Config with <span>electron.vite.config.ts</span> and refer to the{' '}
+              <a target="_blank" href="https://evite.netlify.app/config/" rel="noopener noreferrer">
+                config guide
+              </a>
+              .
+            </p>
+          </article>
+        </div>
+        <div className="feature-item">
+          <article>
+            <h2 className="title">HMR</h2>
+            <p className="detail">
+              Edit <span>src/renderer</span> files to test HMR. See{' '}
               <a
                 target="_blank"
-                href="https://eslint.org/docs/user-guide/getting-started"
+                href="https://evite.netlify.app/guide/hmr-in-renderer.html"
                 rel="noopener noreferrer"
               >
-                ESLint
+                docs
               </a>
-              and
-              <a target="_blank" href="https://prettier.io" rel="noopener noreferrer">
-                Prettier
+              .
+            </p>
+          </article>
+        </div>
+        <div className="feature-item">
+          <article>
+            <h2 className="title">Hot Reloading</h2>
+            <p className="detail">
+              Run{' '}
+              <span>
+                {"'"}electron-vite dev --watch{"'"}
+              </span>{' '}
+              to enable. See{' '}
+              <a
+                target="_blank"
+                href="https://evite.netlify.app/guide/hot-reloading.html"
+                rel="noopener noreferrer"
+              >
+                docs
               </a>
-              to better lint and style your code, help you to write high-quality code.
+              .
             </p>
-          </li>
-          <li>
-            <p>
-              ● Use
+          </article>
+        </div>
+        <div className="feature-item">
+          <article>
+            <h2 className="title">Debugging</h2>
+            <p className="detail">
+              Check out <span>.vscode/launch.json</span>. See{' '}
               <a
                 target="_blank"
-                href="https://github.com/alex8088/electron-vite"
+                href="https://evite.netlify.app/guide/debugging.html"
                 rel="noopener noreferrer"
               >
-                electron-vite
+                docs
               </a>
-              , a fast build tooling integrated with
-              <a target="_blank" href="https://vitejs.dev" rel="noopener noreferrer">
-                Vite
-              </a>
-              , and you don{"'"}t need to worry about configuration.
+              .
             </p>
-          </li>
-          <li>
-            <p>
-              ● Use
+          </article>
+        </div>
+        <div className="feature-item">
+          <article>
+            <h2 className="title">Source Code Protection</h2>
+            <p className="detail">
+              Supported via built-in plugin <span>bytecodePlugin</span>. See{' '}
               <a
                 target="_blank"
-                href="https://github.com/alex8088/electron-toolkit"
+                href="https://evite.netlify.app/guide/source-code-protection.html"
                 rel="noopener noreferrer"
               >
-                electron-toolkit
+                docs
               </a>
-              that make you easy to develop. For example: TSconfigs extends, expose common Electron
-              APIs to renderers in preload scripts and effective utils for the main process.
+              .
             </p>
-          </li>
-          <li>
-            <p>
-              ● Use
+          </article>
+        </div>
+        <div className="feature-item">
+          <article>
+            <h2 className="title">Packaging</h2>
+            <p className="detail">
+              Use{' '}
               <a target="_blank" href="https://www.electron.build" rel="noopener noreferrer">
                 electron-builder
-              </a>
-              and preset common configuration, allows you to easily pack Electron app.
+              </a>{' '}
+              and pre-configured to pack your app.
             </p>
-          </li>
-          <li>
-            <p>● More instructions are available in README.md.</p>
-          </li>
-        </ul>
+          </article>
+        </div>
       </div>
-      <p className="footer">
-        See
-        <a
-          target="_blank"
-          href="https://github.com/alex8088/quick-start/blob/master/packages/create-electron"
-          rel="noopener noreferrer"
-        >
-          create-electron
-        </a>
-        for more details on each supported template:
-        <br />
-        <code>vanilla</code>, <code>vanilla-ts</code>, <code>vue</code>, <code>vue-ts</code>,
-        <code>react</code>, <code>react-ts</code>, <code>svelte</code>, <code>svelte-ts</code>
-      </p>
     </div>
@@ -99,0 +141,0 @@ )

template/react/src/renderer/src/main.jsx

 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './assets/index.css'
 import App from './App'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )

template/svelte-ts/package.json

@@ -11,7 +11,8 @@ {
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "typecheck": "tsc --noEmit",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
+    "typecheck": "npm run typecheck:node && npm run svelte-check",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "tsc --noEmit && electron-vite build",
+    "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
@@ -28,11 +29,11 @@ "build:win": "npm run build && electron-builder --win --config",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@sveltejs/vite-plugin-svelte": "^1.0.2",
+    "@sveltejs/vite-plugin-svelte": "^1.0.9",
     "@types/node": "16.11.22",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "electron": "^19.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
@@ -42,9 +43,9 @@ "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.1",
+    "svelte": "^3.50.1",
+    "svelte-check": "^2.9.1",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^3.0.9"
+    "vite": "^3.1.6"
   }
 }

template/svelte-ts/src/main/index.ts

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -28,3 +28,3 @@ autoHideMenuBar: true,
 
-  mainWindow.webContents.setWindowOpenHandler(details => {
+  mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url)
@@ -31,0 +31,0 @@ return { action: 'deny' }

template/svelte-ts/src/renderer/src/main.ts

@@ -0,1 +1,2 @@
+import './assets/style.css'
 import App from './App.svelte'
@@ -2,0 +3,0 @@

template/svelte/package.json

@@ -25,7 +25,7 @@ {
     "@sveltejs/vite-plugin-svelte": "^1.0.2",
-    "electron": "^19.0.14",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
@@ -35,5 +35,5 @@ "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
-    "svelte": "^3.49.0",
-    "vite": "^3.0.9"
+    "svelte": "^3.50.1",
+    "vite": "^3.1.6"
   }
 }

template/svelte/src/main/index.js

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

template/svelte/src/renderer/src/main.js

@@ -0,1 +1,2 @@
+import './assets/style.css'
 import App from './App.svelte'
@@ -2,0 +3,0 @@

template/vanilla-ts/package.json

@@ -11,6 +11,8 @@ {
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "typecheck": "tsc --noEmit",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "tsc --noEmit && electron-vite build",
+    "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
@@ -28,9 +30,9 @@ "build:win": "npm run build && electron-builder --win --config",
     "@types/node": "16.11.22",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "electron": "^19.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
@@ -40,4 +42,4 @@ "eslint-plugin-prettier": "^4.2.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.9"
+    "vite": "^3.1.6"
   }
 }

template/vanilla-ts/src/main/index.ts

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

template/vanilla/package.json

@@ -22,6 +22,6 @@ {
   "devDependencies": {
-    "electron": "^19.0.14",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "eslint": "^8.22.0",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
@@ -28,0 +28,0 @@ "eslint-plugin-prettier": "^4.2.1",

template/vanilla/src/main.js

@@ -9,4 +9,4 @@ // Modules to control application life and create native browser window
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -13,0 +13,0 @@ autoHideMenuBar: true,

template/vue-ts/package.json

@@ -10,7 +10,9 @@ {
     "format": "prettier --write .",
-    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
-    "build": "tsc --noEmit && electron-vite build",
+    "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
@@ -27,19 +29,20 @@ "build:win": "npm run build && electron-builder --win --config",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@rushstack/eslint-patch": "^1.1.4",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/node": "16.11.22",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "electron": "^19.0.14",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
+    "eslint-plugin-vue": "^9.6.0",
     "less": "^4.1.3",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.9",
-    "vue": "^3.2.37"
+    "vite": "^3.1.6",
+    "vue": "^3.2.40",
+    "vue-tsc": "^0.40.13"
   }
 }

template/vue-ts/src/main/index.ts

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

template/vue/package.json

@@ -24,16 +24,16 @@ {
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.4",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
-    "electron": "^19.0.14",
+    "electron": "^20.3.1",
     "electron-builder": "^22.14.13",
     "electron-notarize": "^1.2.1",
-    "electron-vite": "^1.0.8",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "electron-vite": "^1.0.10",
+    "eslint": "^8.24.0",
+    "eslint-plugin-vue": "^9.6.0",
     "less": "^4.1.3",
     "prettier": "^2.7.1",
-    "vite": "^3.0.9",
-    "vue": "^3.2.37"
+    "vite": "^3.1.6",
+    "vue": "^3.2.40"
   }
 }

template/vue/src/main/index.js

@@ -8,4 +8,4 @@ import { app, shell, BrowserWindow } from 'electron'
   const mainWindow = new BrowserWindow({
-    width: 960,
-    height: 720,
+    width: 900,
+    height: 670,
     show: false,
@@ -12,0 +12,0 @@ autoHideMenuBar: true,

utils/mergeReadme.js

@@ -10,3 +10,5 @@ module.exports = (projectName, tempalte) => {
     svelte: 'An Electron application with Svelte',
-    'svelte-ts': 'An Electron application with Svelte and TypeScript'
+    'svelte-ts': 'An Electron application with Svelte and TypeScript',
+    solid: 'An Electron application with Solid',
+    'solid-ts': 'An Electron application with Solid and TypeScript'
   }
@@ -13,0 +15,0 @@ const description = descriptions[tempalte]

No alert changes

Improved metrics

Total package byte prevSize

498342

14.68%

Number of package files

161

23.85%

Lines of code

3600

61.29%

Number of lines in readme file

63

1.61%

Worsened metrics

Number of high supply chain risk alerts

10

25%

Number of low supply chain risk alerts

17

13.33%

No dependency changes