refactor: path-references refactoring and using 'import' instead of 'require' (#1752)

* refactor references to 'userData' and 'appData' directories to move hardcoding into single location
* convert to es6 for lower memory usage as per https://codesource.io/the-difference-between-import-and-require-in-javascript/

3 files changed, 18 insertions, 20 deletions

diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
index ab629435c..7435d6404 100644
--- a/src/webview/darkmode.js
+++ b/src/webview/darkmode.js
@@ -1,7 +1,7 @@
 /* eslint no-bitwise: ["error", { "int32Hint": true }] */
 
-import path from 'path';
-import fs from 'fs-extra';
+import { join } from 'path';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:DarkMode');
 
@@ -10,9 +10,9 @@ const chars = [...'abcdefghijklmnopqrstuvwxyz'];
 const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
 
 export function injectDarkModeStyle(recipePath) {
-  const darkModeStyle = path.join(recipePath, 'darkmode.css');
-  if (fs.pathExistsSync(darkModeStyle)) {
-    const data = fs.readFileSync(darkModeStyle);
+  const darkModeStyle = join(recipePath, 'darkmode.css');
+  if (pathExistsSync(darkModeStyle)) {
+    const data = readFileSync(darkModeStyle);
     const styles = document.createElement('style');
     styles.id = ID;
     styles.innerHTML = data.toString();
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 305e79882..96caa125e 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import { exists, pathExistsSync, readFile } from 'fs-extra';
+import { exists, pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
@@ -55,9 +55,8 @@ class RecipeWebview {
   injectCSS(...files) {
     files.forEach(async (file) => {
       if (pathExistsSync(file)) {
-        const data = await readFile(file, 'utf8');
         const styles = document.createElement('style');
-        styles.innerHTML = data;
+        styles.innerHTML = readFileSync(file, 'utf8');
 
         document.querySelector('head').appendChild(styles);
 
@@ -69,8 +68,7 @@ class RecipeWebview {
   injectJSUnsafe(...files) {
     Promise.all(files.map(async (file) => {
       if (await exists(file)) {
-        const data = await readFile(file, 'utf8');
-        return data;
+        return readFileSync(file, 'utf8');
       }
       debug('Script not found', file);
       return null;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 598c3eb9a..a45c34002 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,8 +1,8 @@
 /* eslint-disable import/first */
 import { contextBridge, ipcRenderer } from 'electron';
-import path from 'path';
+import { join } from 'path';
 import { autorun, computed, observable } from 'mobx';
-import fs from 'fs-extra';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 import { debounce } from 'lodash';
 
 // For some services darkreader tries to use the chrome extension message API
@@ -189,7 +189,7 @@ class RecipeController {
 
   loadRecipeModule(event, config, recipe) {
     debug('loadRecipeModule');
-    const modulePath = path.join(recipe.path, 'webview.js');
+    const modulePath = join(recipe.path, 'webview.js');
     debug('module path', modulePath);
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
@@ -214,15 +214,15 @@ class RecipeController {
     const styles = document.createElement('style');
     styles.innerHTML = screenShareCss;
 
-    const userCss = path.join(recipe.path, 'user.css');
-    if (fs.existsSync(userCss)) {
-      const data = await fs.readFile(userCss);
+    const userCss = join(recipe.path, 'user.css');
+    if (pathExistsSync(userCss)) {
+      const data = readFileSync(userCss);
       styles.innerHTML += data.toString();
     }
     document.querySelector('head').appendChild(styles);
 
-    const userJs = path.join(recipe.path, 'user.js');
-    if (fs.existsSync(userJs)) {
+    const userJs = join(recipe.path, 'user.js');
+    if (pathExistsSync(userJs)) {
       const loadUserJs = () => {
         // eslint-disable-next-line
         const userJsModule = require(userJs);
@@ -308,11 +308,11 @@ class RecipeController {
       debug('Enable dark mode');
 
       // Check if recipe has a darkmode.css
-      const darkModeStyle = path.join(
+      const darkModeStyle = join(
         this.settings.service.recipe.path,
         'darkmode.css',
       );
-      const darkModeExists = fs.pathExistsSync(darkModeStyle);
+      const darkModeExists = pathExistsSync(darkModeStyle);
 
       debug('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');