support multiple steps such as rename with a specific column (#38)

* dependencies are updated

* update version of the app

* process items batched instead of one by one, enabled contextIsolation and disable Node Integration, add CSP for renderer security, preload ipcRenderer based communication event bus mechanism

* add another column to the sample excel file on readme

Author: btargac

.babelrc

@@ -1,7 +1,17 @@
 {
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env"]
-    }
-  }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": {
+          "version": "3.3" }
+      }
+    ]
+  ],
+  "plugins": [
+    ["@babel/plugin-transform-runtime", { "corejs": 3 }],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-optional-chaining"
+  ]
 }

.browserslistrc

@@ -0,0 +1 @@
+electron >= 7.1.7

README.md

@@ -2,40 +2,40 @@
 
 ### A Cross-Platform Desktop App for processing all rows of excel files
 
-Simply generates an array of items from the rows of an excel file and does the repetitive tedious operations step by step 
+Simply generates an array of items from the rows of an excel file and does the repetitive tedious operations step by step
 recursively till every item of the array is processed. For example downloading all the URL's in an excel file.
 
 [![Dependency Status][david_img]][david_site]
 [![Build Status][travis_img]][travis_site]
 [![Github Tag][github-tag-image]][github-tag-url]
 [![codecov][codecov-image]][codecov-url]
 [![Backers on Open Collective](https://opencollective.com/excel-parser-processor/backers/badge.svg)](#backers)
-[![Sponsors on Open Collective](https://opencollective.com/excel-parser-processor/sponsors/badge.svg)](#sponsors) 
+[![Sponsors on Open Collective](https://opencollective.com/excel-parser-processor/sponsors/badge.svg)](#sponsors)
 [![Open Source Helpers](https://www.codetriage.com/btargac/excel-parser-processor/badges/users.svg)](https://www.codetriage.com/btargac/excel-parser-processor)
 
 #### How to use
 
 You can [download the latest release](https://github.com/btargac/excel-parser-processor/releases) for your operating system
 or build it yourself (see [Development](#development)).
 
-Just select or drag & drop an excel file, then select the output folder for the downloaded images or files. All of the 
+Just select or drag & drop an excel file, then select the output folder for the downloaded images or files. All of the
 items in the excel file will be downloaded into the selected folder and you will be notified about the state of ongoing
 progress.
 
 #### Sample Excel file structure
 
-|               | A                                                                 |
-| ------------- | :---------------------------------------------------------------- |
-| 1             | https://www.buraktargac.com/sample_image.gif                       |
-| 2             | https://www.buraktargac.com/sample_image.png                       |
-| 3             | https://www.buraktargac.com/sample_image.jpg                       |
-| .             | ...                                                               |
-| .             | ...                                                               |
-| n             | Asset URL ( can be any type of file jpg, jpeg, png, txt, doc, etc)|
+|               | A                                                                 | B                         |
+| ------------- | :---------------------------------------------------------------- | :-------------------------|
+| 1             | https://www.buraktargac.com/sample_image.gif                      | optional-sample-file-name |
+| 2             | https://www.buraktargac.com/sample_image.png                      | optional-sample-file-name |
+| 3             | https://www.buraktargac.com/sample_image.jpg                      |                           |
+| .             | ...                                                               |                           |
+| .             | ...                                                               |                           |
+| n             | Asset URL ( can be any type of file jpg, jpeg, png, txt, doc, etc)|                           |
 
 <br/>
 
-Currently there is no limit for `n`, I tested with 4000 items and unless your IP is banned from the publisher there 
+Currently there is no limit for `n`, I tested with 4000 items and unless your IP is banned from the publisher there
 is no problem to download as much as you can.
 
 #### Demo

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "excel-parser-processor",
   "productName": "Excel Parser Processor",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Does the tedious processing over all items of a given excel file by converting the rows to an array and process all items of that array recursively",
   "main": "./dist/index.bundle.js",
   "scripts": {
     "build-main": "cross-env NODE_ENV=production PROCESS_TYPE=main webpack --config webpack.prod.js",
     "build-renderer": "cross-env NODE_ENV=production PROCESS_TYPE=renderer webpack --config webpack.prod.js",
     "build": "npm-run-all build-main build-renderer",
     "generate-icons": "electron-icon-maker --input=./build-assets/icon.png --output=./build/",
-    "start-renderer-dev": "cross-env NODE_ENV=development PROCESS_TYPE=renderer webpack --watch --config webpack.dev.js",
+    "start-renderer-dev": "cross-env NODE_ENV=development PROCESS_TYPE=renderer webpack --config webpack.dev.js",
     "start": "electron ./dist/index.bundle.js",
     "test": "jest",
     "test-watch": "jest --coverage --watch",
@@ -52,41 +52,42 @@
   },
   "homepage": "https://github.com/btargac/excel-parser-processor#readme",
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/runtime": "^7.2.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "clean-webpack-plugin": "^1.0.0",
-    "copy-webpack-plugin": "^4.6.0",
-    "cross-env": "^5.2.0",
-    "css-loader": "^2.1.0",
-    "electron": "^2.0.14",
-    "electron-builder": "^20.38.4",
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/preset-env": "^7.7.7",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.4.0",
+    "electron": "^7.1.7",
+    "electron-builder": "^21.2.0",
     "electron-icon-maker": "^0.0.4",
     "html-webpack-exclude-assets-plugin": "^0.0.7",
-    "html-webpack-plugin": "^4.0.0-beta.5",
-    "jest": "^24.0.0-alpha.9",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.12.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.0",
     "npm-run-all": "^4.1.5",
-    "sass-loader": "^7.1.0",
-    "script-ext-html-webpack-plugin": "^2.1.3",
-    "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "webpack": "^4.28.3",
-    "webpack-cli": "^3.1.2",
-    "webpack-merge": "^4.1.5"
+    "sass-loader": "^8.0.0",
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "style-loader": "^1.1.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@babel/runtime-corejs3": "^7.7.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "electron-fetch": "^1.3.0",
+    "electron-fetch": "^1.4.0",
     "is-url": "^1.2.4",
     "jquery": "^3.4.0",
-    "node-xlsx": "^0.12.1",
+    "node-xlsx": "^0.15.0",
     "normalize.css": "^8.0.1",
     "opencollective": "^1.0.3"
   },

package.json

@@ -6,11 +6,11 @@ export const showOpenDialog = (browserWindow, defaultPath, cb) => {
     defaultPath,
     title: "Choose an output folder",
     properties: ['openDirectory', 'createDirectory']
-  }, (filePaths) => {
-    if(filePaths && filePaths.length) {
-
+  }).then(({ canceled, filePaths }) => {
+    if( !canceled && filePaths?.length) {
       cb(defaultPath, filePaths[0], browserWindow);
-
     }
-  });
+  }).catch(err => {
+    console.log(err);
+  })
 };

src/dialogs.js

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src	https://fonts.gstatic.com;">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
@@ -17,7 +17,7 @@ <h1 class="app__title">
         Excel processor
       </h1>
       <p class="app__description">
-        Select the excel file, and the output folder, Excel Processor wil handle the rest.
+        Select the excel file, and the output folder, Excel Processor will handle the rest.
       </p>
     </div>
   </div>

src/index.html

@@ -11,7 +11,13 @@ const createWindow = () => {
   win = new BrowserWindow({
     width: 800,
     height: 600,
-    show: false
+    show: false,
+    webPreferences: {
+      contextIsolation: true,
+      enableRemoteModule: false,
+      nodeIntegration: false,
+      preload: path.join(__dirname, 'preload.js')
+    }
   });
 
   // and load the index.html of the app.
@@ -21,7 +27,7 @@ const createWindow = () => {
     slashes: true
   }));
 
-  win.on('ready-to-show', () => {
+  win.once('ready-to-show', () => {
     win.show();
   });
 
@@ -37,10 +43,11 @@ const createWindow = () => {
 };
 
 app.on('ready', () => {
-  createWindow();
   ipcMain.on('file-dropped', (event, filePath) => {
     showOpenDialog(win, filePath, processFile);
-  })
+  });
+
+  createWindow();
 });
 
 // Quit when all windows are closed.

src/index.js

@@ -0,0 +1,21 @@
+const { ipcRenderer } = require('electron');
+
+process.once('loaded', () => {
+  // ipc communication is handled with postMessage and event listeners since ipcRenderer cannot be imported to renderer
+  // process for security reasons
+  window.addEventListener('message', event => {
+    const message = event.data;
+    const { data, type } = message;
+
+    ipcRenderer.send(type, data);
+  });
+
+  ipcRenderer.on('main-message', (event, payload) => {
+    const { data, type } = payload;
+
+    window.postMessage({
+      type,
+      data
+    }, '*');
+  });
+});

src/preload.js

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron';
 import $ from 'jquery';
 
 // we also need to process some styles with webpack
@@ -46,7 +45,7 @@ const outEvents = ['dragleave', 'dragend', 'mouseout', 'drop'];
 inEvents.forEach(event => drop.addEventListener(event, handleIn));
 outEvents.forEach(event => drop.addEventListener(event, handleOut));
 
-const handleFileSelect = (event) => {
+const handleFileSelect = event => {
   const files = event.target.files;
 
   for (let file of files) {
@@ -56,7 +55,10 @@ const handleFileSelect = (event) => {
       continue;
     }
 
-    ipcRenderer.send('file-dropped', file.path);
+    window.postMessage({
+      type: 'file-dropped',
+      data: file.path
+    }, '*');
   }
 
   event.preventDefault();
@@ -125,13 +127,13 @@ const processStartHandler = () => {
 
 };
 
-const progressHandler = (event, percentage) => update(percentage);
+const progressHandler = percentage => update(percentage);
 
-const processCompletedHandler = (event, { processedItemsCount, incompatibleItems, erroneousItems, logFilePath }) => {
+const processCompletedHandler = ({ processedItemsCount, incompatibleItems, erroneousItems, logFilePath }) => {
 
   $(notificationArea).find('.text').text(
     [
-      `${processedItemsCount} item(s) processed,`,
+      `${processedItemsCount} item(s) successfully processed,`,
       `${incompatibleItems.length} item(s) skipped,`,
       `${erroneousItems.length} item(s) erroneous,`,
       `Log file ${logFilePath} is written on disk.`
@@ -144,7 +146,7 @@ const processCompletedHandler = (event, { processedItemsCount, incompatibleItems
 
 };
 
-const processErrorHandler = (event, data) => {
+const processErrorHandler = data => {
 
   const oldText = $(errorArea).find('.text').text();
 
@@ -161,9 +163,9 @@ const processErrorHandler = (event, data) => {
 
 };
 
-const fileErrorHandler = (event, data) => {
+const fileErrorHandler = data => {
 
-  $(errorArea).find('.text').text(`${data.message}`);
+  $(errorArea).find('.text').text(`${data}`);
 
   $(errorArea).show().animate({
     bottom: '10%'
@@ -214,8 +216,24 @@ const disableDrop = event => {
   document.addEventListener(event, disableDrop);
 });
 
-ipcRenderer.on('process-started', processStartHandler);
-ipcRenderer.on('process-completed', processCompletedHandler);
-ipcRenderer.on('progress', progressHandler);
-ipcRenderer.on('process-error', processErrorHandler);
-ipcRenderer.on('file-error', fileErrorHandler);
+window.addEventListener('message', event => {
+  const message = event.data;
+  const { data, type } = message;
+
+  switch (type) {
+    case 'process-started':
+      processStartHandler();
+      break;
+    case 'process-completed':
+      processCompletedHandler(data);
+      break;
+    case 'progress':
+      progressHandler(data);
+      break;
+    case 'process-error':
+      processErrorHandler(data);
+      break;
+    case 'file-error':
+      fileErrorHandler(data);
+  }
+});