Skip to content

Commit 7a5cac7

Browse files
tonyitotonyito
authored
Merge pull request #2 from tonyito/staging
Initial Debugging for webpack compiler errors
2 parents 78380ae + b0450f2 commit 7a5cac7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2041
-2983
lines changed

‎main.js

Lines changed: 131 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,127 @@
11
const path = require('path');
22

3-
const {
4-
app,
5-
// The app module controls the application lifecycle (like reacting to the ready state of the application).
6-
BrowserWindow,
7-
// BrowserWindow - allows for window creation via Electron. This is what actually shows something for the user. T
8-
Menu,
9-
// Menu - allows you to create native application menus and context menus.
10-
shell,
11-
// shell - Manage files and URLs using their default applications — The shell module provides functions related to desktop integration. An example of opening a URL in the user's default browser.
12-
dialog,
13-
// dialog - Display native system dialogs for opening and saving files, alerting, etc
14-
ipcMain
15-
// ipcMain - Communicate asynchronously from the main process to renderer processes. It is an event emitter.
16-
// IPC stands for Inter-Process Communication. Electron uses IPC to send serialized JSON messages between the main and renderer processes.
17-
} = require('electron');
3+
const { app, BrowserWindow, Menu, shell, dialog, ipcMain } = require('electron');
184

19-
// ** Uncomment below for hot reloading during development **
20-
21-
// below hard-resets the entire electron process so is more of a catch-all in terms of dev mode:
22-
require('electron-reload')(__dirname, {
23-
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
24-
});
25-
26-
// below loads contents of all active BrowserWindows within electron when the source files are changed.
27-
// ** You'll want to use this one when working in most files other than main.js
5+
// Uncomment below for hot reloading during development
286
// require('electron-reload')(__dirname);
297

30-
const isDev =
31-
process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
8+
// const isDev = true;
9+
const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
3210

33-
// Keep a global reference of the window object, if you don't, the window will be closed automatically when the JavaScript object is garbage collected.
34-
// We'll be working with one Window (mainWindow) in our application
11+
// Keep a global reference of the window object, if you don't, the window will
12+
// be closed automatically when the JavaScript object is garbage collected.
3513
let mainWindow;
3614

37-
const createWindow = () => {
38-
// Creates the browser window. This is triggered in an event listener that ensures that the content is fully loaded before creating the Window.
39-
const { width, height } = require('electron').
40-
screen.getPrimaryDisplay().size;
41-
// screen is an event emitter in electron. It can grant you information about the user's screen (or screens in the case that they have external monitors)
42-
// getPrimaryDisplay() - returns the display object which contains properties like size (which gives us the size of the screen)
15+
// Open image file
16+
function openFile() {
17+
// Opens file dialog looking for markdown
18+
const files = dialog.showOpenDialog(mainWindow, {
19+
properties: ['openFile'],
20+
filters: [
21+
{
22+
name: 'Images',
23+
extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
24+
},
25+
],
26+
});
27+
28+
// if no files
29+
if (!files) return;
30+
const file = files[0];
31+
32+
// Send fileContent to renderer
33+
mainWindow.webContents.send('new-file', file);
34+
}
4335

44-
// create a new BrowserWindow within the createWindow function
36+
// Choose directory
37+
ipcMain.on('choose_app_dir', event => {
38+
const directory = dialog.showOpenDialog(mainWindow, {
39+
properties: ['openDirectory'],
40+
buttonLabel: 'Export',
41+
});
42+
43+
if (!directory) return;
44+
event.sender.send('app_dir_selected', directory[0]);
45+
});
46+
47+
ipcMain.on('view_app_dir', (event, appDir) => {
48+
shell.openItem(appDir);
49+
});
50+
51+
// Update file
52+
ipcMain.on('update-file', () => {
53+
openFile();
54+
});
55+
56+
const createWindow = () => {
57+
// Create the browser window.
58+
// eslint-disable-next-line
59+
const { width, height } = require('electron').screen.getPrimaryDisplay().size;
4560
mainWindow = new BrowserWindow({
46-
// width & height have been extracted from the call to screen.getPrimaryDisplay() so that they match the full size of the users screen
4761
width,
4862
height,
4963
webPreferences: {
50-
// webFactor: default is 1.0 which is 100%
51-
zoomFactor: 0.8,
64+
zoomFactor: 0.7,
65+
'node-Integration': false,
5266
},
53-
// if show is set to true, a blank window will appear at first until the rest of the application has loaded.
5467
show: false,
55-
5668
icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
5769
win: {
5870
icon: path.join(__dirname, '/src/public/icons/win/icon.ico'),
59-
target: ['portable']
60-
}
71+
target: ['portable'],
72+
},
6173
});
6274

63-
64-
// mainWindow.loadURL returns a promise that then loads the local index.html file once the page has finished loading
75+
// and load the index.html of the app.
6576
mainWindow.loadURL(`file://${__dirname}/build/index.html`);
66-
// mainWindow.once adds a one time listener function for the 'ready-to-show' event. The event listener is removed after it is invoked once.
77+
// load page once window is loaded
6778
mainWindow.once('ready-to-show', () => {
68-
// .show - shows and gives focus to the window it's called on.
6979
mainWindow.show();
7080
});
7181

72-
// this template will be used when creating the menu for our app - the template allows us to add additional menu items to the default menu item set
7382
const template = [
74-
{
75-
// label appears along the top of the menu on mac
76-
label: 'About',
77-
submenu: [
78-
{
79-
label: 'ReacType Info',
80-
// click() executes a function you've defined when the user clicks on the specific submenu item
81-
click() {
82-
// shell.openExternal - returns a promise and then opens an external link in the user's default browser
83-
shell.openExternal('https://github.com/oslabs-beta/ReacType');
84-
}
85-
}
86-
]
87-
},
8883
{
8984
label: 'File',
9085
submenu: [
9186
{
9287
label: 'Open File',
93-
// The process.platform property returns a string identifying the operating system platform on which the Node.js process is running.
94-
// accelerator is used to define keyboard shortcuts
9588
accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
96-
// click() allows you to define the functionality that will occur when the user clicks on an item in the submenu
9789
click() {
98-
9990
openFile();
100-
}
101-
}
102-
]
91+
},
92+
},
93+
],
10394
},
95+
// {
96+
// label: 'Edit',
97+
// submenu: [
98+
// { role: 'undo' },
99+
// { role: 'redo' },
100+
// { type: 'separator' },
101+
// { role: 'cut' },
102+
// { role: 'copy' },
103+
// { role: 'paste' },
104+
// { role: 'pasteandmatchstyle' },
105+
// { role: 'delete' },
106+
// { role: 'selectall' },
107+
// ],
108+
// },
104109
{
105110
label: 'View',
106111
submenu: [
107-
// role can be set to many different strings: https://www.electronjs.org/docs/api/menu-item
108112
{ role: 'reload' },
109113
{ role: 'forcereload' },
110114
{ type: 'separator' },
111115
{ role: 'resetzoom' },
112116
{ role: 'zoomin' },
113117
{ role: 'zoomout' },
114118
{ type: 'separator' },
115-
{ role: 'togglefullscreen' }
116-
]
119+
{ role: 'togglefullscreen' },
120+
],
117121
},
118122
{
119123
role: 'window',
120-
submenu: [{ role: 'minimize' }, { role: 'close' }]
124+
submenu: [{ role: 'minimize' }, { role: 'close' }],
121125
},
122126
{
123127
role: 'help',
@@ -126,30 +130,26 @@ const createWindow = () => {
126130
label: 'Learn More',
127131
click() {
128132
shell.openExternal('https://electronjs.org');
129-
}
130-
}
131-
]
133+
},
134+
},
135+
],
132136
},
133137
{
134-
label: 'Developer Tools',
138+
label: 'Developer',
135139
submenu: [
136140
{
137141
label: 'Toggle Developer Tools',
138-
accelerator:
139-
process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
142+
accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
140143
click() {
141-
// open the console in the right side of the window
142144
mainWindow.webContents.toggleDevTools();
143-
}
144-
}
145-
]
146-
}
145+
},
146+
},
147+
],
148+
},
147149
];
148150

149151
if (process.platform === 'darwin') {
150-
// if this isn't triggered, the app won't properly load on Mac but I haven't found a solid answer as to why that is.
151152
template.unshift({
152-
// app.getName() - returns a string that is the current application's name as found in the package.json file
153153
label: app.getName(),
154154
submenu: [
155155
{ role: 'about' },
@@ -160,108 +160,73 @@ const createWindow = () => {
160160
{ role: 'hideothers' },
161161
{ role: 'unhide' },
162162
{ type: 'separator' },
163-
{ role: 'quit' }
164-
]
163+
{ role: 'quit' },
164+
],
165165
});
166+
167+
// Edit menu
168+
template[2].submenu.push(
169+
{
170+
type: 'separator',
171+
},
172+
{
173+
label: 'Speech',
174+
submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
175+
},
176+
);
177+
178+
// Window menu
179+
template[4].submenu = [
180+
{ role: 'close' },
181+
{ role: 'minimize' },
182+
{ role: 'zoom' },
183+
{ type: 'separator' },
184+
{ role: 'front' },
185+
];
166186
}
167187

168-
// Menu.buildFromTemplate adds to the default Menu using properties from the template passed into it
169-
// the default menu props: File, Edit, View, Window and Help
170188
const menu = Menu.buildFromTemplate(template);
171-
// Menu.setApplicationMenu - Sets menu as the application menu on macOS. On Windows and Linux, the menu will be set as each window's top menu.
172189
Menu.setApplicationMenu(menu);
173190

191+
// Emitted when the window is closed.
174192
mainWindow.on('closed', () => {
175-
// Emitted when the window is going to be closed. It's emitted before the beforeunload and unload event of the DOM.
193+
// Dereference the window object, usually you would store windows
194+
// in an array if your app supports multi windows, this is the time
195+
// when you should delete the corresponding element.
176196
mainWindow = null;
177197
});
178-
179198
};
180199

181-
// Open local image file for prototyping
182-
function openFile() {
183-
// Opens file dialog looking for markdown
184-
const files = dialog.showOpenDialog(mainWindow, {
185-
// dialog.showOpenDialog - allows you to open files / folders
186-
// properties: ['openFile'] - allows files to be selected
187-
properties: ['openFile'],
188-
filters: [
189-
{
190-
// ensure only image files with specific extensions can be selected and uploaded into the app
191-
name: 'Images',
192-
extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf']
193-
}
194-
]
195-
});
196-
197-
// if no files
198-
if (!files) return;
199-
const file = files[0];
200-
201-
// Send fileContent to renderer
202-
mainWindow.webContents.send('new-file', file);
203-
// webContents is an EventEmitter. It is responsible for rendering and controlling a web page and is a property of the BrowserWindow object
204-
}
205-
206-
// Update file
207-
ipcMain.on('update-file', () => {
208-
// openFile defined above - allows user to open a file from their local file system
209-
openFile();
210-
});
211-
212-
// Choose directory to save / export your project
213-
ipcMain.on('choose_app_dir', (event) => {
214-
const directory = dialog.showOpenDialog(mainWindow, {
215-
// openDirectory allows directories to be opened - 'Export' button appears from the directory selection pop-up after the user has clicked `export project` and selected their preferred export type (`Export components` or `Export components with application files`)
216-
properties: ['openDirectory'],
217-
buttonLabel: 'Export'
218-
});
219-
// if no directory is selected, do not export the files
220-
if (!directory) return;
221-
// event.sender.send sends to the main frame. Allows user to send the file to their file system / save it locally
222-
event.sender.send('app_dir_selected', directory[0]);
223-
});
224-
225-
ipcMain.on('view_app_dir', (event, appDir) => {
226-
// shell.openItem - opens the given file in the desktop's default manner
227-
shell.openItem(appDir);
228-
});
229-
230-
231-
// This method will be called when Electron has finished initialization and is ready to create browser windows. Some APIs can only be used after this event occurs.
200+
// This method will be called when Electron has finished
201+
// initialization and is ready to create browser windows.
202+
// Some APIs can only be used after this event occurs.
232203
app.on('ready', () => {
233204
if (isDev) {
234-
const {
235-
default: installExtension,
236-
REACT_DEVELOPER_TOOLS,
237-
REDUX_DEVTOOLS
238-
} = require('electron-devtools-installer');
239-
[REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS].forEach(extension => {
240-
installExtension(extension)
241-
// uncomment code below to test whether extensions have been installed correctly
242-
.then(/*(name) => console.log(`Added Extension: ${name}`)*/)
243-
.catch((err) => console.log('An error occurred: ', err));
244-
});
245-
createWindow();
246-
} else {
247-
// if not working in dev, we still want to create our window
248-
createWindow();
249-
}
250-
});
251-
205+
const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
252206

253-
app.on('activate', () => {
254-
// activate can be triggered when launching the application for the first time, attempting to re-launch the application when it's already running, or clicking on the application's dock or taskbar icon.
255-
if (mainWindow === null) {
256-
// we're only working with one main window in our application, so if that is set to null it means the window is not open. We want to open it when the user clicks on the icon in the dock.
207+
installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
208+
.then(() => {
209+
createWindow();
210+
})
211+
.catch(err => err);
212+
} else {
257213
createWindow();
258214
}
259215
});
260216

261217
// Quit when all windows are closed.
262218
app.on('window-all-closed', () => {
263-
// On OS X it is common for applications and their menu bar to stay active until the user quits explicitly with Cmd + Q
219+
// On OS X it is common for applications and their menu bar
220+
// to stay active until the user quits explicitly with Cmd + Q
264221
if (process.platform !== 'darwin') {
265222
app.quit();
266223
}
267224
});
225+
226+
app.on('activate', () => {
227+
// On OS X it's common to re-create a window in the app when the
228+
// dock icon is clicked and there are no other windows open.
229+
if (mainWindow === null) {
230+
createWindow();
231+
}
232+
});

0 commit comments

Comments
 (0)