Merge pull request #88 from meowtec/dev

Version 0.6.0

README.md

@@ -43,23 +43,10 @@ chmod a+x Imagine-x.y.z-x86_64.AppImage # make executable
  - Batch optimization
  - i18n (English, 简体中文, Nederlands, Español, Français, Italiano, Deutsch)
 
-## 'ImageMagick required'
-
-Since version 0.3.0, you can choose the format that you want to convert to. For example, if you pick a PNG file, you can convert it to JPEG and compress it with MozJPEG optimizer.
-
-But there is an exception: pngquant on windows can't read JPEG files, so if you want to convert JPEG to PNG, you should install ImageMagick firstly, and add it to your PATH environment variable.
-
-Imagine use this command below to check if ImageMagick installed, so make sure it work.
-
-```bash
-magick -version
-```
-
 ## Build and Contribute
 
 ```bash
 git clone https://github.com/meowtec/Imagine.git
-# node 8 is recommended
 npm install
 npm run dev
 ```

index.html

@@ -8,9 +8,9 @@
 <div id="app"></div>
 <script>
 (() => {
-  const url = process.env.NODE_ENV === 'development'
+  const url = process.env.IMAGINE_ENV === 'development'
     ? 'http://localhost:9999/dist/app.js'
-    : 'dist/app.js'
+    : 'dist/web/app.js'
   const script = `<script src="${url}"><\/script>`
   document.write(script)
 })()

modules/__tests__/backend/optimize.test.ts

@@ -4,7 +4,7 @@ import * as path from 'path'
 import optimize from '../../backend/optimize'
 import { saveFilesTmp, getFilePath } from '../../common/file-utils'
 import { fullDiff } from '../_tools/image-diff'
-import { IImageFile, SupportedExt } from '../../common/constants'
+import { IImageFile, SupportedExt } from '../../common/types'
 
 const relPath = (file: string) => path.resolve(__dirname, file)
 

modules/__tests__/common/file-utils.test.ts

@@ -12,7 +12,7 @@ import {
   flattenFiles,
   reext,
 } from '../../common/file-utils'
-import { IImageFile, SupportedExt } from '../../common/constants'
+import { IImageFile, SupportedExt } from '../../common/types'
 
 const relPath = (file: string) => path.resolve(__dirname, file)
 

modules/__tests__/renderer/deamon.test.ts → modules/__tests__/renderer/job-runner.test.ts

@@ -2,23 +2,22 @@ import '../_tools/before-test'
 
 import * as path from 'path'
 import { createStore } from '../../renderer/store/store'
-import Daemon from '../../renderer/store/daemon'
+import JobRunner from '../../renderer/store/job-runner'
 import actions from '../../renderer/store/actionCreaters'
-import app from '../../backend/app'
 import { saveFilesTmp } from '../../common/file-utils'
 import { sleep } from '../../common/utils'
 import {
-  IImageFile, IOptimizeOptions, ITaskItem, TaskStatus,
-} from '../../common/constants'
+  IImageFile, TaskStatus,
+} from '../../common/types'
 
 jest.mock('../../renderer/apis/')
 
-test('optimize daemon', async () => {
+test('optimize JobRunner', async () => {
   const images = await saveFilesTmp(
     ['600_600.png', 'qr.png'].map((x) => path.resolve(__dirname, '../_files', x)),
   )
   const store = createStore()
-  new Daemon().watch(store)
+  new JobRunner().watch(store)
   let state
 
   store.dispatch(actions.taskAdd(images as IImageFile[]))

modules/__tests__/renderer/store.test.ts

@@ -10,7 +10,7 @@ import {
   ITaskItem,
   TaskStatus,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 
 const image1: IImageFile = {
   id: '01',

modules/backend/app.ts

@@ -10,22 +10,20 @@ import {
   IpcChannel,
   SaveType,
   IBackendState,
-} from '../common/constants'
+} from '../common/types'
 import * as fu from '../common/file-utils'
 import { listenIpc } from '../ipc-bridge/backend'
 import optimize from './optimize'
 import { saveFiles, saveFile } from './save'
 import Menu from './menu'
-import { detectImageMagick } from './imagemagick'
-import __ from '../locales'
-import { isDev } from '../common/env'
+import { IS_DEV } from '../common/env'
 
-if (isDev) {
+if (IS_DEV) {
   // eslint-disable-next-line global-require
   require('./dev')
 }
 
-const url = `file://${path.resolve('index.html')}`
+const url = `file://${path.resolve(app.getAppPath(), 'index.html')}`
 
 class App {
   private windows: number[] = []
@@ -173,8 +171,6 @@ class App {
   listenIpc() {
     listenIpc<IOptimizeRequest, IImageFile>(IpcChannel.OPTIMIZE, ({ image, exportExt, options }) => optimize(image, options))
 
-    listenIpc<void, boolean>(IpcChannel.DETECT_IMAGEMAGICK, detectImageMagick)
-
     ipcMain.on(IpcChannel.FILE_SELECT, () => {
       this.menu.open()
     })

modules/backend/convert.ts

@@ -0,0 +1,5 @@
+import Jimp from 'jimp'
+
+export default function imageConvert(sourceFile: string, targetFile: string) {
+  return Jimp.read(sourceFile).then((image) => image.write(targetFile))
+}

modules/backend/menu.ts

@@ -1,8 +1,8 @@
 import * as os from 'os'
 import { EventEmitter } from 'events'
 import { dialog, Menu, shell } from 'electron'
-import { SaveType } from '../common/constants'
-import { isDev } from '../common/env'
+import { SaveType } from '../common/types'
+import { IS_DEV } from '../common/env'
 import __ from '../locales'
 import pkg from '../../package.json'
 
@@ -125,7 +125,7 @@ class AppMenu extends EventEmitter {
       },
     ]
 
-    if (isDev) {
+    if (IS_DEV) {
       menuTemplates.push({
         label: 'Debug',
         submenu: [

modules/backend/optimize.ts

@@ -1,14 +1,13 @@
 import * as os from 'os'
-import * as path from 'path'
 import * as fs from 'fs-extra'
 import log from 'electron-log'
-import { IImageFile, IOptimizeOptions, SupportedExt } from '../common/constants'
+import { IImageFile, IOptimizeOptions, SupportedExt } from '../common/types'
 import * as fu from '../common/file-utils'
 import {
   pngquant, mozjpeg, cwebp, IOptimizeMethod,
 } from '../optimizers'
-import { convert } from './imagemagick'
 import { getFileUrl } from '../common/file-utils'
+import convert from './convert'
 
 const platform = os.platform()
 

modules/backend/save.ts

@@ -2,7 +2,7 @@ import * as path from 'path'
 import * as fs from 'fs-extra'
 import { noop } from '../common/utils'
 import * as fu from '../common/file-utils'
-import { SaveType, IImageFile } from '../common/constants'
+import { SaveType, IImageFile } from '../common/types'
 
 export async function saveFiles(images: IImageFile[], type: SaveType, dirname?: string) {
   if (type === SaveType.NEW_DIR && !dirname) return

modules/backend/updater.ts

@@ -4,7 +4,7 @@ import log from 'electron-log'
 import {
   IpcChannel,
   IUpdateInfo,
-} from '../common/constants'
+} from '../common/types'
 import __ from '../locales'
 import app from './app'
 

modules/common/env.ts

@@ -1 +1 @@
-export const isDev = process.env.NODE_ENV === 'development'
+export const IS_DEV = process.env.IMAGINE_ENV === 'development'

modules/common/file-utils.ts

@@ -5,17 +5,14 @@ import * as crypto from 'crypto'
 import FileType from 'file-type'
 import rawBody from 'raw-body'
 import log from 'electron-log'
-import { IImageFile, IOptimizeOptions, SupportedExt } from './constants'
-import { isDev } from './env'
+import { IImageFile, SupportedExt, SupportedExtAlias } from './types'
 
 export const tmpdir = path.resolve(os.tmpdir(), 'imageOptimizer')
 
 export const isSupportedExt = (type: string): type is SupportedExt => type in SupportedExt
 
 export const cleanTmpdir = () => fs.emptyDirSync(tmpdir)
 
-const takeSubHash = (hash: string) => hash.replace(/[/+=]/g, '').slice(0, 32)
-
 export function md5(text: string) {
   return crypto.createHash('md5').update(text).digest('hex')
 }
@@ -116,7 +113,7 @@ export const reext = (filename: string, ext: SupportedExt) => filename.replace(/
   $1 = $1.toLowerCase()
 
   // make sure `x.PNG` not be transformed to `x.png`
-  if ($1 === ext) {
+  if ($1 === ext || SupportedExtAlias[$1] === ext) {
     return $0
   }
 

modules/common/task.ts

@@ -0,0 +1,5 @@
+import { ITaskItem } from './types'
+
+export const isTaskSizeIncreased = ({ image, optimized }: ITaskItem) => (
+  optimized && optimized.size >= image.size
+)

modules/common/constants.ts → modules/common/types.ts

@@ -4,6 +4,10 @@ export enum SupportedExt {
   webp = 'webp',
 }
 
+export const SupportedExtAlias: Record<string, SupportedExt> = {
+  jpeg: SupportedExt.jpg,
+}
+
 export const enum TaskStatus {
   PENDING = 'PENDING',
   PROCESSING = 'PROCESSING',
@@ -21,7 +25,6 @@ export const enum IpcChannel {
   SYNC = 'SYNC',
   APP_UPDATE = 'APP_UPDATE',
   READY = 'READY',
-  DETECT_IMAGEMAGICK = 'DETECT_IMAGEMAGICK',
 }
 
 export const enum SaveType {
@@ -88,3 +91,21 @@ export interface IUpdateInfo {
   stagingPercentage: number
   version: string
 }
+
+export interface IDefaultOptions {
+  jpg: IOptimizeOptions
+  png: IOptimizeOptions
+  webp: IOptimizeOptions
+}
+
+export interface IGlobals {
+  activeId?: string
+  updateInfo?: IUpdateInfo
+  optionsVisible: boolean
+  defaultOptions: IDefaultOptions
+}
+
+export interface IState {
+  tasks: ITaskItem[]
+  globals: IGlobals
+}

modules/ipc-bridge/backend.ts

@@ -1,6 +1,6 @@
 import { ipcMain } from 'electron'
 import log from 'electron-log'
-import { IElectronResponse, IpcChannel } from '../common/constants'
+import { IElectronResponse, IpcChannel } from '../common/types'
 
 /**
  * make cross process method call easier.

modules/ipc-bridge/renderer.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron'
 import { randomId } from '../common/utils'
-import { IElectronResponse, IpcChannel } from '../common/constants'
+import { IElectronResponse, IpcChannel } from '../common/types'
 
 /**
  * make cross process method call easier.

modules/locales/ar-SA.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'بعد',
   new_version: 'تحديث',
   apply_now: 'تطبيق التغييرات',
-  imagemagick_required: 'ImageMagick مطلوب',
 }

modules/locales/de-DE.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Nachher',
   new_version: 'Aktualisieren',
   apply_now: 'Anwenden',
-  imagemagick_required: 'ImageMagick benötigt',
 }

modules/locales/en-US.ts

@@ -10,6 +10,7 @@ export default {
   save_as: 'Save as',
   save_success: 'Save successfully',
   clear: 'Clear all',
+  clear_increased: 'Clear increased files',
   choose_images: 'Choose images',
   drag_files: 'Drag pictures here from the local folder',
   colors: 'Colors',
@@ -20,5 +21,4 @@ export default {
   after_optimized: 'After',
   new_version: 'Upgrade',
   apply_now: 'Apply now',
-  imagemagick_required: 'ImageMagick required',
 }

modules/locales/es-ES.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Después',
   new_version: 'Actualizar',
   apply_now: 'Apply now', // TODO: translate
-  imagemagick_required: 'ImageMagick required', // TODO: translate
 }

modules/locales/fr-FR.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'optimisé',
   new_version: 'Mettre à jour',
   apply_now: 'Appliquer maintenant',
-  imagemagick_required: 'ImageMagick requis',
 }

modules/locales/it-IT.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Dopo',
   new_version: 'Aggiorna',
   apply_now: 'Applica',
-  imagemagick_required: 'ImageMagick richiesto',
 }

modules/locales/nl-NL.ts

@@ -20,5 +20,4 @@ export default {
   after_optimized: 'na',
   new_version: 'Nieuwe versie beschikbaar!', // TODO: shorter || Note: In Dutch, this can't be shorter :(
   apply_now: 'Meld je nu aan!', // TODO: translate
-  imagemagick_required: 'ImageMagick is verplicht', // TODO: translate
 }

modules/locales/zh-CN.ts

@@ -10,6 +10,7 @@ export default {
   save_as: '另存为',
   save_success: '保存成功',
   clear: '清空',
+  clear_increased: '清空增大的文件',
   choose_images: '选择图片文件',
   drag_files: '从本地文件夹拖动图片到这里',
   colors: '色彩',
@@ -20,5 +21,4 @@ export default {
   after_optimized: '优化后',
   new_version: '有新版本',
   apply_now: '立即应用',
-  imagemagick_required: '需要安装 ImageMagick',
 }

modules/optimizers/index.ts

@@ -1,7 +1,7 @@
 import { spawn } from 'child-process-promise'
 import log from 'electron-log'
 import * as bins from './bin'
-import { IOptimizeOptions, SupportedExt } from '../common/constants'
+import { IOptimizeOptions, SupportedExt } from '../common/types'
 
 const createEnv = () => ({
   ...process.env,

modules/renderer/App.less

@@ -4,6 +4,8 @@
   position: absolute;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   &.-drag::after {
     content: '';