Moved fs and code formatting methods from renderer process to the main process

Author: tsully

app/electron/main.js

@@ -1,6 +1,7 @@
 const {
   app,
   protocol,
+  dialog,
   BrowserWindow,
   session,
   ipcMain,
@@ -13,6 +14,8 @@ const {
   default: installExtension,
   REACT_DEVELOPER_TOOLS
 } = require('electron-devtools-installer');
+const debug = require('electron-debug');
+
 const Protocol = require('./protocol');
 // menu from another file to modularize the code
 const MenuBuilder = require('./menu');
@@ -70,9 +73,9 @@ async function createWindow() {
       // Electron API only available from preload, not loaded page
       contextIsolation: true,
       // disables remote module. critical for ensuring that rendering process doesn't have access to node functionality
-      enableRemoteModule: false
+      enableRemoteModule: false,
       // path of preload script. preload is how the renderer page will have access to electron functionality
-      // preload: path.join(__dirname, "preload.js"),
+      preload: path.join(__dirname, 'preload.js')
     }
   });
 
@@ -112,8 +115,10 @@ async function createWindow() {
   // Only do these things when in development
   if (isDev) {
     // automatically open DevTools when opening the app
-    win.webContents.openDevTools();
-    require('electron-debug')(); // https://github.com/sindresorhus/electron-debug
+    win.webContents.once('dom-ready', () => {
+      debug();
+      win.webContents.openDevTools();
+    });
   }
 
   // Emitted when the window is closed.
@@ -212,8 +217,11 @@ app.on('activate', () => {
 app.on('web-contents-created', (event, contents) => {
   contents.on('will-navigate', (event, navigationUrl) => {
     const parsedUrl = new URL(navigationUrl);
-    const validOrigins = [selfHost];
-
+    const validOrigins = [
+      selfHost,
+      'https://localhost:8080',
+      'https://github.com/'
+    ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
     if (!validOrigins.includes(parsedUrl.origin)) {
       console.error(
@@ -227,7 +235,11 @@ app.on('web-contents-created', (event, contents) => {
 
   contents.on('will-redirect', (event, navigationUrl) => {
     const parsedUrl = new URL(navigationUrl);
-    const validOrigins = [];
+    const validOrigins = [
+      selfHost,
+      'https://localhost:8080',
+      'https://github.com/'
+    ];
 
     // Log and prevent the app from redirecting to a new page
     if (!validOrigins.includes(parsedUrl.origin)) {
@@ -288,3 +300,21 @@ app.on('remote-get-current-window', (event, webContents) => {
 app.on('remote-get-current-web-contents', (event, webContents) => {
   event.preventDefault();
 });
+
+// When a user selects "Export project", a function (chooseAppDir loaded via preload.js)
+// is triggered that sends a "choose_app_dir" message to the main process
+// when the "choose_app_dir" message is received it triggers this event listener
+ipcMain.on('choose_app_dir', event => {
+  // dialog displays the native system's dialogue for selecting files
+  // once a directory is chosen send a message back to the renderer with the path of the directory
+  dialog
+    .showOpenDialog(win, {
+      properties: ['openDirectory'],
+      buttonLabel: 'Export'
+    })
+    .then(directory => {
+      if (!directory) return;
+      event.sender.send('app_dir_selected', directory.filePaths[0]);
+    })
+    .catch(err => console.log('ERROR on "choose_app_dir" event: ', err));
+});

app/electron/preload.js

@@ -1,14 +1,12 @@
 // contextBridge is what allows context to be translated between the main process and the render process
 // ipcRenderer sends messsages between render process and the main process
 const { contextBridge, ipcRenderer } = require('electron');
-// const fs = require("fs");
-// const i18nextBackend = require("i18next-electron-fs-backend");
-// const Store = require("secure-electron-store").default;
-// const ContextMenu = require("secure-electron-context-menu").default;
-
-// Create the electron store to be made available in the renderer process
-// the store is a way to persist user preferences and data
-// let store = new Store();
+const { existsSync, writeFileSync, mkdirSync, writeFile } = require('fs');
+const formatCode = require('./preloadFunctions/format');
+const {
+  chooseAppDir,
+  appDirChosen
+} = require('./preloadFunctions/chooseAppDir');
 
 // Expose protected methods that allow the renderer process to use
 // the ipcRenderer without exposing the entire object
@@ -19,9 +17,11 @@ const { contextBridge, ipcRenderer } = require('electron');
 // the api object (second arg) can contain functions, strings, bools, numbers, arrays, obects in value
 // data primitives sent on the bridge are immutable and changes in one context won't carry over to another context
 contextBridge.exposeInMainWorld('api', {
-  // i18nextElectronBackend: i18nextBackend.preloadBindings(ipcRenderer),
-  // generally the store uses fs directly from the renderer to access the store
-  // this beinding will access the store using the
-  // store: store.preloadBindings(ipcRenderer, fs),
-  contextMenu: ContextMenu.preloadBindings(ipcRenderer)
+  formatCode: formatCode,
+  chooseAppDir: chooseAppDir,
+  appDirChosen: appDirChosen,
+  existsSync: existsSync,
+  writeFileSync: writeFileSync,
+  mkdirSync: mkdirSync,
+  writeFile: writeFile
 });

app/electron/preloadFunctions/chooseAppDir.js

@@ -0,0 +1,15 @@
+const { ipcRenderer } = require('electron');
+
+const chooseAppDir = () => {
+  return ipcRenderer.send('choose_app_dir');
+};
+
+// once an app directory is chosen, the main process will send an "app_dir_selected" event
+// when this event occurs, exucte the callback passed in by the user
+const appDirChosen = callback => {
+  return ipcRenderer.on('app_dir_selected', (event, path) => {
+    callback(path);
+  });
+};
+
+module.exports = { chooseAppDir, appDirChosen };

app/electron/preloadFunctions/format.js

@@ -0,0 +1,16 @@
+const { format } = require('prettier');
+
+// format code using prettier
+// this format function is used in the render process to format the code in the code preview
+const formatCode = code => {
+  return format(code, {
+    singleQuote: true,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    jsxBracketSameLine: true,
+    // parser: 'babel'
+    parser: 'typescript'
+  });
+};
+
+module.exports = formatCode;

app/src/components/main/Canvas.tsx

@@ -108,6 +108,3 @@ function Canvas() {
 }
 
 export default Canvas;
-
-
-

app/src/containers/LeftContainer.tsx

@@ -115,38 +115,28 @@ const LeftContainer = (): JSX.Element => {
         ))}
       </List>
     );
-
+    const chooseAppDir = () => window.api.chooseAppDir();
     // helper function called by showGenerateAppModal
     // this function will prompt the user to choose an app directory once they've chosen their export option
     const chooseGenOptions = (genOpt: number) => {
       // set export option: 0 --> export only components, 1 --> export full project
       console.log('in chooseGenOptions');
       setGenOption(genOpt);
       console.log('Gen option is ', genOpt);
-      // closeModal
-      exportProject('/Users', 'NEW PROJECT', genOpt, state.components);
-      closeModal();
       // Choose app dir
-      // NOTE: This functionality isn't working right now. Will upgrade Electron and see if that fixes it
-      //chooseAppDir();
+      // window.api.chooseAppDir;
+      chooseAppDir();
+      // closeModal
 
-      // exportProject('/Users/tylersullberg/', 'NEW PROJECT', 1);
+      closeModal();
     };
 
-    const chooseAppDir = () => IPC.send('choose_app_dir');
-
-    // when the user selects a directory from the modal,
-    // we're going to create the application in their chosen directory
-    IPC.on('app_dir_selected', (event: string, path: string) => {
-      // createApplication({
-      //   path,
-      //   components,
-      //   genOption,
-      //   appName: 'reactype_app',
-      //   exportAppBool: null
-      // });
-      // exportProject();
-      console.log('app directory selected!!!');
+    // add listener for when an app directory is chosen
+    // when a directory is chosen, the callback will export the project to the chosen folder
+    // Note: this listener is imported from the main process via preload.js
+    window.api.appDirChosen(path => {
+      console.log('App dir chosen : ', path);
+      exportProject(path, 'NEW PROJECT', genOption, state.components);
     });
 
     setModal(

app/src/helperFunctions/generateCode.ts

@@ -1,4 +1,3 @@
-// import { format } from 'prettier';
 import { Component, State, ChildElement } from '../interfaces/InterfacesNew';
 import HTMLTypes from '../context/HTMLTypes';
 
@@ -147,7 +146,8 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  return code;
+  return window.api.formatCode(code);
+  // return code;
   // return format(code, {
   //   singleQuote: true,
   //   trailingComma: 'es5',

app/src/index.js

@@ -22,7 +22,6 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
   />
 );
 
-// Temporarily removing private routes for the new electron build
 // ReactDOM.render(
 //   <Router>
 //     <Switch>