chore: init

Author: antonreshetov

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+dist
+build

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/vue3-recommended', '@vue/eslint-config-standard'],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    'arrow-parens': ['error', 'as-needed'],
+    'import/order': 0
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+build
+
+.vscode
+.idea
+.DS_Store

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Anton Reshetov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,42 @@
+
+<p align="center">
+  <img src="logo.png" width="150px">
+</p>
+<h1 align="center">Image Optimizer</h1>
+<p align="center">
+  <strong>Built with Electron, Vue & Vite.</strong>
+</p>
+
+A free and open source tool for optimizing images and vector graphics.
+
+<p align="center">
+  <img src="demo.gif">
+</p>
+
+## Core libs
+ - [mozjpeg](https://github.com/mozilla/mozjpeg)
+ - [pngquant](https://pngquant.org)
+ - [SVGO](https://github.com/svg/svgo)
+
+## Download and Installation on macOS
+
+Go to [Releases](https://github.com/antonreshetov/image-optimizer/releases) get the latest build, download and install.
+
+## Development
+```bash
+# install dependencies
+yarn
+# serve with hot reload
+yarn dev
+```
+
+## Build
+```bash
+# build application for production
+yarn build
+```
+
+## Related
+- [Electron Vue Vite Boilerplate](https://github.com/antonreshetov/electron-vue-vite-boilerplate)
+
+Copyright (c) 2021-present, Anton Reshetov.

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+}

config/electron-builder.js

@@ -0,0 +1,46 @@
+const path = require('path')
+
+/**
+ * https://www.electron.build/configuration/configuration
+ */
+const config = {
+  productName: 'Image Optimizer',
+  appId: 'com.antonreshetov.image-optimizer',
+  directories: {
+    output: path.resolve(__dirname, '../dist')
+  },
+  nsis: {
+    oneClick: false,
+    perMachine: false,
+    allowToChangeInstallationDirectory: true,
+    shortcutName: 'Image Optimizer'
+  },
+  mac: {
+    icon: 'build/icons/icon.icns'
+  },
+  win: {
+    target: 'nsis'
+  },
+  linux: {
+    target: ['snap']
+  },
+  files: [
+    '!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}',
+    '!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}',
+    '!**/node_modules/*.d.ts',
+    '!**/node_modules/.bin',
+    '!src/renderer',
+    '!config',
+    '!README.md',
+    '!scripts',
+    '!build',
+    '!dist',
+    {
+      from: 'build/renderer',
+      to: 'renderer',
+      filter: ['**/*']
+    }
+  ]
+}
+
+module.exports = config

config/vite.js

@@ -0,0 +1,27 @@
+const path = require('path')
+const vuePlugin = require('@vitejs/plugin-vue')
+const { defineConfig } = require('vite')
+
+/**
+ * https://vitejs.dev/config
+ */
+const config = defineConfig({
+  root: path.resolve(__dirname, '../src/renderer'),
+  publicDir: 'public',
+  server: {
+    port: 8080
+  },
+  open: false,
+  build: {
+    outDir: path.resolve(__dirname, '../build/renderer'),
+    emptyOutDir: true
+  },
+  plugins: [vuePlugin()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../src/renderer')
+    }
+  }
+})
+
+module.exports = config

demo.gif

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/renderer/*"],
+      "@@/*": ["./src/main/*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

jsconfig.json

@@ -0,0 +1,59 @@
+{
+  "name": "image-optimization",
+  "version": "1.0.0",
+  "description": "Electron & Vue 3 application",
+  "main": "src/main/index.js",
+  "scripts": {
+    "dev": "node scripts/dev-server.js",
+    "build": "node scripts/build.js",
+    "lint": "npm run prettier && eslint --ext .js,.vue . --fix src",
+    "prettier": "prettier --write src/**/*.{vue,js}"
+  },
+  "repository": "https://github.com/antonreshetov/electron-vue-vite-boilerplate",
+  "author": {
+    "name": "Anton Reshetov",
+    "url": "https://github.com/antonreshetov"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@vitejs/plugin-vue": "^1.9.3",
+    "@vue/cli": "^4.5.14",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "babel-eslint": "^10.1.0",
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.2",
+    "electron": "^16.0.1",
+    "electron-builder": "^22.13.1",
+    "electron-devtools-installer": "^3.2.0",
+    "eslint": "^7.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^8.1.1",
+    "husky": "^6.0.0",
+    "lint-staged": "^12.0.3",
+    "prettier": "^2.4.1",
+    "sass": "^1.43.4",
+    "vite": "^2.6.10"
+  },
+  "dependencies": {
+    "electron-store": "^8.0.1",
+    "fs-extra": "^10.0.0",
+    "junk": "3.1.0",
+    "mime-types": "^2.1.34",
+    "mozjpeg": "^7.0.0",
+    "pngquant-bin": "^6.0.0",
+    "queue": "^6.0.2",
+    "svgo": "^2.8.0",
+    "vue": "^3.0.6"
+  }
+}

logo.png

@@ -0,0 +1,10 @@
+function build () {
+  const electronBuilder = require('electron-builder')
+  const config = require('../config/electron-builder')
+
+  return electronBuilder.build({
+    config: config
+  })
+}
+
+module.exports = build

package.json

@@ -0,0 +1,12 @@
+function build () {
+  const vite = require('vite')
+  const viteConfig = require('../config/vite')
+
+  return vite.build({
+    ...viteConfig,
+    base: './',
+    mode: 'production'
+  })
+}
+
+module.exports = build

scripts/build-electron.js

@@ -0,0 +1,20 @@
+process.env.NODE_ENV = 'production'
+
+async function build () {
+  const chalk = require('chalk')
+  const buildVue = require('./build-vue')
+  const buildElectron = require('./build-electron')
+
+  console.log(`${chalk.blueBright('===============================')}`)
+  console.log(`${chalk.blueBright('Build started...')}`)
+  console.log(`${chalk.blueBright('===============================')}`)
+
+  await buildVue()
+  await buildElectron()
+
+  console.log(`${chalk.greenBright('===============================')}`)
+  console.log(`${chalk.greenBright('Build success!')}`)
+  console.log(`${chalk.greenBright('===============================')}`)
+}
+
+build()

scripts/build-vue.js

@@ -0,0 +1,69 @@
+process.env.NODE_ENV = 'development'
+
+const vite = require('vite')
+const { spawn } = require('child_process')
+const path = require('path')
+const chalk = require('chalk')
+const chokidar = require('chokidar')
+const electron = require('electron')
+
+let electronProcess = null
+let rendererPort = 0
+
+async function startRenderer () {
+  const config = require('../config/vite.js')
+
+  const server = await vite.createServer({
+    ...config,
+    mode: 'development'
+  })
+
+  return server.listen()
+}
+
+function startElectron () {
+  if (electronProcess) {
+    return
+  }
+
+  const args = [
+    path.resolve(__dirname, '../src/main/index.dev.js'),
+    rendererPort
+  ]
+
+  electronProcess = spawn(electron, args)
+
+  electronProcess.stdout.on('data', data => {
+    console.log(chalk.blueBright('[Electron] ') + chalk.white(data.toString()))
+  })
+
+  electronProcess.stderr.on('data', data => {
+    console.log(chalk.redBright('[Electron] ') + chalk.white(data.toString()))
+  })
+}
+
+function restartElectron () {
+  if (electronProcess) {
+    electronProcess.kill()
+    electronProcess = null
+  }
+
+  startElectron()
+}
+
+async function start () {
+  console.log(`${chalk.blueBright('===============================')}`)
+  console.log(`${chalk.blueBright('Starting Electron + vite Dev Server...')}`)
+  console.log(`${chalk.blueBright('===============================')}`)
+
+  const devServer = await startRenderer()
+  rendererPort = devServer.config.server.port
+
+  startElectron()
+
+  chokidar.watch(path.resolve(__dirname, '../src/main')).on('change', () => {
+    restartElectron()
+  })
+}
+
+start()