Rewrite using hyperHTML (#1)

* Basic list items, and preview

Co-authored-by: Ram Damera <ramdamera@outlook.com>

* Organize everything into directories

* Fix linting issues

* Add basic switch component

- Change font-size to 16px

- Use `event.code` instead of `event.key`

* Use system fonts

- Generate sourcemaps in dev mode only

- Clean dist files

* Use copy-webpack-plugin to copy [tray|fav]icon

* Update dependencies and re-organize main.js

* Move all events into constants.js and add stylelint

* Fix some missing event references

* Fix transitions of settings view

* Fix keyboard shortcut handling on settings view

* Add `updateView` option while handling views

* Fix build and move view.js to @ramlmn/view

- Fix settings dialog race condition

- Move view.js to @ramlmn/view Node module

- Update package dependencies

- Fix build script

* Fix some race conditions in opening settings view

* Update deps, and fix some more race conditions

* Finally made startup setting work :yay:

* (feat): add support for persistent history, and clearing items

* (refactor) refactor items and previewer components, and fix some bugs

* Use event.preventDefault() for some keys

* (refactor) rename ITEM_SELECT to ITEM_COPY

* Use md5 instead of sha256 for item hashes

* Fix rendering items when clearing

* Add CSP to load `data:` images

* Use MD5 for hashes

* Clear system clipboard content too on clearing items

* Update readme with screenshots

.editorconfig

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

.gitignore

@@ -2,3 +2,6 @@ node_modules
 dist
 npm-debug.log
 .vscode
+
+build/*
+!build/assets

README.md

@@ -6,42 +6,28 @@
 </h1>
 
 # Clippy
-> A clipboard manager built on [electron](https://github.com/electron/electron/), using [WebComponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
 
-## Installation
-_Linux, and Windows 7+ are supported (64-bit only)_
+> A simple clipboard manager built on [electron](https://github.com/electron/electron/)
 
-### Linux
-[**Download**](https://github.com/ramlmn/electron-clippy/releases/latest) the `.AppImage` or `.deb` file
 
-_The AppImage needs to be [made executable](http://discourse.appimage.org/t/how-to-make-an-appimage-executable/80) after download_
+## Screenshots
+![Snippet view](media/screenshot-1.png)
+![Image view](media/screenshot-2.png)
+![Settings view](media/screenshot-3.png)
 
-### Windows
-[**Download**](https://github.com/ramlmn/electron-clippy/releases/latest) the `.exe` file
 
-## Usage
-By default the app would be running in the background and can be accessed by the keyboard shortcut: `Ctrl+Shift+V`
+## Installation
 
-## Dev
-### Run
-```
-$ npm install && npm start
-```
+Prebuilt images can be found on the [releases](https://github.com/ramlmn/electron-clippy/releases/latest) page
 
-### Build
-```
-$ npm run build
-```
-or check [`electron-builder` docs](https://www.electron.build/multi-platform-build) 
 
-## Acknowledgements
-* UI inspired from [Alfred app](https://www.alfredapp.com/)
-* Custom elements source inspired from [Polymer](https://github.com/Polymer/polymer)
-* Installer icon inspired from icon made by [Roundicons](http://www.flaticon.com/authors/roundicons) from [www.flaticon.com](http://www.flaticon.com) is licensed by [CC 3.0 BY](https://creativecommons.org/licenses/by/3.0/) (_modified_)
+## Usage/features
+
+- Persistent data storage across restarts (disabled by default)
+- Delete individual items using the <kbd>Delete</kbd> key
+- Clear whole clipboard at once
+- Bring the app to forground the keyboard shortcut <kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>
 
-## Screenshots
-![Clippy screenshot snippet](media/clippy-snap1.png)
-![Clippy screenshot image](media/clippy-snap2.png)
 
 ## License
 [MIT](LICENSE)

package.json

@@ -1,48 +1,70 @@
 {
-  "name": "clippy",
-  "version": "1.0.0-alpha.4",
-  "description": "A clipboard manager built on electron",
+  "name": "electron-clippy",
+  "version": "0.1.0",
+  "description": "A simple clipboard manager build on Electron",
   "license": "MIT",
   "repository": "ramlmn/electron-clippy",
   "author": {
     "name": "Ram Lmn",
     "email": "ramlmn@outlook.com",
     "url": "https://ramlmn.github.io/"
   },
-  "homepage": "https://github.com/ramlmn/electron-clippy",
-  "main": "./src/main/main.js",
+  "homepage": "https://github.com/ramlmn/electron-clippy#readme",
+  "main": "build/main/main.js",
   "scripts": {
-    "lint": "eslint src",
+    "lint": "xo && stylelint src/**/*.css",
+    "lint-fix": "xo --fix; stylelint --fix src/**/*.css",
     "start": "electron .",
-    "build": "build"
+    "watch": "webpack --watch",
+    "dev": "concurrently \"npm run watch\" \"npm run start\"",
+    "build": "cross-env NODE_ENV=production webpack && build"
+  },
+  "dependencies": {
+    "@ramlmn/view": "^1.0.0",
+    "auto-launch": "^5.0.5",
+    "global-dispatcher": "^1.0.0",
+    "hyperhtml": "^2.23.0",
+    "just-debounce-it": "^1.1.0"
   },
   "devDependencies": {
-    "electron": "^1.8.4",
-    "electron-builder": "^20.6.2",
-    "eslint": "^4.19.1",
-    "eslint-config-google": "^0.9.1",
-    "eslint-plugin-html": "^4.0.2"
+    "clean-webpack-plugin": "^1.0.0",
+    "concurrently": "^4.1.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.0.2",
+    "cssnano": "^4.1.8",
+    "electron": "^4.0.0",
+    "electron-builder": "^20.38.4",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "stylelint": "^9.9.0",
+    "stylelint-config-xo-space": "^0.11.0",
+    "webpack": "^4.28.2",
+    "webpack-cli": "^3.1.2",
+    "xo": "^0.23.0"
   },
   "build": {
+    "appId": "com.ramlmn.electron-clippy",
     "productName": "Clippy",
-    "appId": "com.ramlmn.clippy",
+    "artifactName": "electron-clippy-${version}.${ext}",
     "files": [
-      "src/**/*",
-      "node_modules",
-      "!(*.markdown|*.md|*.txt|.*|LICENSE|README|test)"
+      "build/**/*",
+      "node_modules"
     ],
     "linux": {
       "category": "Productivity",
-      "icon": "src/build-assets/icon/png",
+      "icon": "build/assets/icon/png",
       "target": [
         "AppImage",
         "deb"
       ]
     },
     "win": {
-      "icon": "src/build-assets/icon/win/win.ico",
+      "icon": "build/assets/icon/win/win.ico",
       "target": [
-        "nsis"
+        "nsis",
+        "msi"
       ]
     },
     "nsis": {
@@ -52,7 +74,38 @@
       "deleteAppDataOnUninstall": true
     }
   },
-  "dependencies": {
-    "auto-launch": "^5.0.5"
+  "xo": {
+    "space": true,
+    "rules": {
+      "no-unused-expressions": [
+        2,
+        {
+          "allowTaggedTemplates": true
+        }
+      ],
+      "import/no-unassigned-import": [
+        1,
+        {
+          "allow": [
+            "**/*.css"
+          ]
+        }
+      ]
+    },
+    "env": [
+      "node",
+      "browser"
+    ],
+    "ignore": [
+      "app"
+    ]
+  },
+  "stylelint": {
+    "extends": "stylelint-config-xo-space",
+    "rules": {
+      "declaration-colon-newline-after": null,
+      "selector-list-comma-newline-after": null,
+      "selector-type-no-unknown": null
+    }
   }
 }

src/constants.js

@@ -0,0 +1,24 @@
+export const EVENT = {
+  APP_CLOSE: 'app-close',
+  APP_HIDE: 'app-hide',
+  APP_INIT: 'app-init',
+  APP_SHOW: 'app-show',
+  APP_STATS: 'app-stats',
+
+  ITEM_DELETE: 'item-delete',
+  ITEM_NEW: 'item-new',
+  ITEM_NEXT: 'item-next',
+  ITEM_PREVIOUS: 'item-previous',
+  ITEM_RENDER: 'item-render',
+  ITEM_SEARCH: 'item-search',
+  ITEM_COPY: 'item-copy',
+
+  ITEMS_SAVE: 'items-save',
+  ITEMS_RESTORE: 'items-restore',
+  ITEMS_CLEAR: 'items-clear',
+
+  SETTINGS_UPDATE: 'settings-update', // main -> renderer
+  SETTINGS_CHANGE: 'settings-change', // renderer -> main
+  SETTINGS_HIDE: 'settings-hide',
+  SETTINGS_SHOW: 'settings-show'
+};