Merge branch 'dev' into sean

Author: Skilzsz

app/.electron/main.ts

@@ -0,0 +1,248 @@
+import { Menu, BrowserWindow, Shell } from 'electron';
+const isMac = process.platform === 'darwin';
+import Protocol from './protocol';
+/* 
+DESCRIPTION: This file generates an array containing a menu based on the operating system the user is running.
+menuBuilder: The entire file is encompassed in menuBuilder. Ultimately, menuBuilder returns a function called
+  buildMenu that uses defaultTemplate to construct a menu at the top of the application (as invoked in main.js)
+
+  Standard menu roles (e.g., undo, redo, quit, paste, etc.) come from Electron API and need not be separately coded
+
+openTutorial: opens browser window containing tutorial on how to use the app
+  -Creates a browser window
+  -Tutorial is invoked within the "Help" menu
+
+defaultTemplate: returns an array of submenus (each an array)
+  -First, checks whether user is on a Mac (node returns 'darwin' for process.platform)
+    -Then generates a dropdown menu at the top of the screen (e.g., "File") accordingly
+    -The Mac check is necessary primarily for the first menu column, which is the name of the app
+  -If user is not on a Mac, alternative menus are generated
+  -Each menu:
+    -"label" is the field at the top of each menu (e.g., "File", "Edit", "View", etc.)
+    -"role" is a subitem within each menu (e.g., under "File," "Quit")
+    -"type: separator" creates a horizontal line in a menu (e.g., under "Redo" in the "Edit" menu)
+*/
+
+// Create a template for a menu and create menu using that template
+var MenuBuilder = function (mainWindow, appName) {
+  // https://electronjs.org/docs/api/menu#main-process
+  // "roles" are predefined by Electron and used for standard actions
+  // https://www.electronjs.org/docs/api/menu-item
+  // you can also create custom menu items with their own "on click" functionality if you need to
+  // different roles are available between mac and windows
+
+  function openTutorial(): void {
+    const tutorial = new BrowserWindow({
+      width: 1180,
+      height: 900,
+      minWidth: 665,
+      title: 'Tutorial',
+      webPreferences: {
+        nodeIntegration: true,
+        nodeIntegrationInWorker: false,
+        nodeIntegrationInSubFrames: false,
+        contextIsolation: true,
+        enableRemoteModule: true,
+        zoomFactor: 1.0,
+        devTools: false
+      }
+    });
+    if (process.env.NODE_ENV === 'development') {
+      tutorial.loadURL(`http://localhost:8080/#/tutorial`);
+    } else {
+      tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
+    }
+    tutorial.show();
+  }
+
+  const defaultTemplate= (): Electron.MenuItemConstructorOptions[] => [
+      ...(isMac
+        ? [
+            {
+              // on Mac, the first menu item name should be the name of the app
+              label: appName,
+              submenu: [
+                {role: 'about'},
+                {type: 'separator'},
+                {role: 'services'},
+                {type: 'separator'},
+                {role: 'hide'},
+                {role: 'hideothers'},
+                {role: 'unhide'},
+                {type: 'separator'},
+                {role: 'quit'}
+              ] as Electron.MenuItemConstructorOptions[],
+            } ,
+          ]
+        : []),Electron.MenuItemConstructorOptions[],
+      {
+        label: 'File',
+        submenu: [
+          isMac
+            ? {
+                role: 'close'
+              }
+            : {
+                role: 'quit'
+              }
+        ]
+      },
+      {
+        label: 'Edit',
+        submenu: [
+          {
+            role: 'undo'
+          },
+          {
+            role: 'redo'
+          },
+          {
+            type: 'separator'
+          },
+          {
+            role: 'cut'
+          },
+          {
+            role: 'copy'
+          },
+          {
+            role: 'paste'
+          },
+          ...(isMac
+            ? [
+                {
+                  role: 'pasteAndMatchStyle'
+                },
+                {
+                  role: 'delete'
+                },
+                {
+                  role: 'selectAll'
+                },
+                {
+                  type: 'separator'
+                },
+                {
+                  label: 'Speech',
+                  submenu: [
+                    {
+                      role: 'startspeaking'
+                    },
+                    {
+                      role: 'stopspeaking'
+                    }
+                  ]
+                }
+              ]
+            : [
+                {
+                  role: 'delete'
+                },
+                {
+                  type: 'separator'
+                },
+                {
+                  role: 'selectAll'
+                }
+              ])
+        ]
+      },
+      {
+        label: 'View',
+        submenu: [
+          {
+            role: 'reload'
+          },
+          {
+            role: 'forcereload'
+          },
+          {
+            role: 'toggledevtools'
+          },
+          {
+            type: 'separator'
+          },
+          {
+            role: 'resetzoom'
+          },
+          {
+            role: 'zoomin'
+          },
+          {
+            role: 'zoomout'
+          },
+          {
+            type: 'separator'
+          },
+          {
+            role: 'togglefullscreen'
+          }
+        ]
+      },
+
+      {
+        label: 'Window',
+        submenu: [
+          {
+            role: 'minimize'
+          },
+          {
+            role: 'zoom'
+          },
+          ...(isMac
+            ? [
+                {
+                  type: 'separator'
+                },
+                {
+                  role: 'front'
+                },
+                {
+                  type: 'separator'
+                },
+                {
+                  role: 'window'
+                }
+              ]
+            : [
+                {
+                  role: 'close'
+                }
+              ])
+        ]
+      },
+      {
+        role: 'help',
+        submenu: [
+          {
+            label: 'Learn More',
+            click: async () => {
+              const { shell } = require('electron');
+              await shell.openExternal(
+                'https://github.com/open-source-labs/ReacType'
+              );
+            }
+          },
+          {
+            label: 'Tutorial',
+            click: () => openTutorial()
+          }
+        ]
+      }
+    ];
+
+    return template;
+  }
+
+  // constructs menu from default template
+  return {
+    buildMenu: function () {
+      const menu = Menu.buildFromTemplate(defaultTemplate());
+      Menu.setApplicationMenu(menu);
+
+      return menu;
+    }
+  };
+};
+
+export { MenuBuilder };

app/.electron/menu.ts

@@ -0,0 +1,54 @@
+// contextBridge is what allows context to be translated between the main process and the render process
+import { contextBridge } from 'electron';
+import { existsSync, writeFileSync, mkdirSync, writeFile } from 'fs';
+import formatCode from './preloadFunctions/format';
+import {
+  chooseAppDir,
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners
+} from './preloadFunctions/chooseAppDir';
+import {
+  setCookie,
+  getCookie,
+  delCookie,
+  github,
+  tutorial
+} from './preloadFunctions/cookies';
+
+/* 
+DESCRIPTION: This file appears to limit the node methods the Electron app can access.
+
+Per the docs:
+  -Main World is the JavaScript context in which the renderer code runs (that is, the page)
+  -Isolated World is where preload scripts run
+  -contextBridge is a module that safely exposes APIs from the isolated context in which preload scripts run
+    to the context in which the website or application runs (i.e., from Isolated World to Main World) 
+
+We likely should not change this file unless we determine additional methods are necessary
+or some methods are not used.
+
+*/
+
+// Expose protected methods that allow the renderer process to use select node methods
+// without exposing all node functionality. This is a critical security feature
+// 'mainWorld" is the context that the main renderer runs in
+// with contextIsolation on (see webpreferences on main.js), this preload script runs isolated
+// "api" is the key that injects the api into the window
+// to access these keys in the renderer process, we'll do window.api
+// 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', {
+  formatCode,
+  chooseAppDir,
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners,
+  existsSync,
+  writeFileSync,
+  mkdirSync,
+  writeFile,
+  setCookie,
+  getCookie,
+  delCookie,
+  github,
+  tutorial
+});

app/.electron/preload.ts

@@ -0,0 +1,31 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+import { type } from 'os';
+
+type AppDirSelectedCallback = (path: string) => void;
+
+const chooseAppDir = (): void => {
+  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 addAppDirChosenListener = (callback: AppDirSelectedCallback): void => {
+  ipcRenderer.on(
+    'app_dir_selected',
+    (event: IpcRendererEvent, path: string) => {
+      callback(path);
+    }
+  );
+};
+
+// removes all listeners for the app_dir_selected event
+// this is important because otherwise listeners will pile up and events will trigger multiple events
+const removeAllAppDirChosenListeners = (): void => {
+  ipcRenderer.removeAllListeners('app_dir_selected');
+};
+
+export {
+  chooseAppDir,
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners
+};

app/.electron/preloadFunctions/chooseAppDir.ts

@@ -0,0 +1,27 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+
+type GetCookieCallback = (cookie: string) => void;
+
+const setCookie = (): void => {
+  ipcRenderer.send('set_cookie');
+};
+
+const getCookie = (callback: GetCookieCallback): void => {
+  ipcRenderer.on('give_cookie', (event: IpcRendererEvent, cookie: string) => {
+    callback(cookie);
+  });
+};
+
+const delCookie = (): void => {
+  ipcRenderer.send('delete_cookie');
+};
+
+const github = (): void => {
+  ipcRenderer.send('github');
+};
+
+const tutorial = (): void => {
+  ipcRenderer.send('tutorial');
+};
+
+export { setCookie, getCookie, delCookie, github, tutorial };

app/.electron/preloadFunctions/cookies.ts

@@ -0,0 +1,16 @@
+import { format } from 'prettier';
+
+// format code using prettier
+// this format function is used in the render process to format the code in the code preview
+// the format function is defined in the main process because it needs to access node functionality ('fs')
+const formatCode = (code: string): string => {
+  return format(code, {
+    singleQuote: true,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+    jsxBracketSameLine: true,
+    parser: 'typescript'
+  });
+};
+
+export default formatCode;