v1.1.0

.gitignore

@@ -2,6 +2,9 @@ target
 index.node
 **/node_modules
 **/.DS_Store
-npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 dist
+/resources/windows/chromium
+chrome_data
 release

.prettierrc

@@ -7,6 +7,6 @@
   "useTabs": false,
   "printWidth": 100,
   "semi": true,
-  "importOrder": ["electron", "react", "^[^.~]+", "^~.+$", "^\\..+$"],
+  "importOrder": ["^electron", "^react", "^[^.~@]+", "^@app", "^~.+$", "^\\..+$"],
   "importOrderSeparation": true
 }

.vscode/typescript.code-snippets

@@ -1,11 +1,45 @@
 {
-  "Styled Components Props": {
+  "Styled Components Export": {
+    "prefix": [
+      "sc"
+    ],
+    "body": [
+      "import styled from 'styled-components';",
+      "\n",
+      "export const ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Styled = styled.div`",
+      "  $0",
+      "`"
+    ],
+    "description": "Styled Components 내보내기"
+  },
+  "Styled Components Props Theme": {
     "prefix": [
       "pro"
     ],
     "body": [
-      "${props => props${0}}"
+      "${props => props.theme${0}}"
+    ],
+    "description": "Styled Components Props 자동완성"
+  },
+  "Component styled": {
+    "prefix": [
+      "cs"
+    ],
+    "body": [
+      "import clsx from 'clsx';\n",
+      "import { ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Styled } from './styled';\n",
+      "interface ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props {",
+      "  className?: string;",
+      "}\n",
+      "const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = ({ className }: ${TM_DIRECTORY/^.+\\/(.*)$/$1/}Props) => {",
+      "  return (",
+      "    <${TM_DIRECTORY/^.+\\/(.*)$/$1/}Styled className={clsx('${TM_DIRECTORY/^.+\\/(.*)$/$1/}', className)}>",
+      "      $0",
+      "    </${TM_DIRECTORY/^.+\\/(.*)$/$1/}Styled>",
+      "  )",
+      "}\n",
+      "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
     ],
-    "description": "Styled Components Props"
+    "description": "컴포넌트 생성 & Styled Components 사용"
   }
 }

app/app.ts

@@ -0,0 +1,132 @@
+import { app, BrowserWindow, Menu, nativeImage, Tray } from 'electron';
+
+import { join } from 'path';
+
+import { productName, protocols } from '../electron-builder.json';
+
+export type MyAppType = InstanceType<typeof MyApp>;
+export type ModuleFunction = (app: MyAppType) => void | Promise<void>;
+
+class MyApp {
+  // deep link protocol
+  readonly PROTOCOL = protocols.name;
+
+  // is mac os
+  readonly IS_MAC = process.platform === 'darwin';
+
+  // dev mode - url
+  readonly DEV_URL = `http://localhost:3000/#`;
+
+  // production mode - load file
+  readonly PROD_LOAD_FILE_PATH = join(__dirname, '../index.html');
+  readonly PROD_LOAD_FILE_HASH = '#';
+
+  // resources directory
+  readonly RESOURCES_PATH = app.isPackaged
+    ? join(process.resourcesPath, 'resources')
+    : join(app.getAppPath(), 'resources');
+
+  // native icon
+  readonly ICON = nativeImage.createFromPath(
+    `${this.RESOURCES_PATH}/icons/${this.IS_MAC ? 'logo@512.png' : 'logo@256.ico'}`,
+  );
+
+  // electron window
+  window: BrowserWindow | null = null;
+
+  async bootstrap() {
+    await this.initliazeElectron();
+    await this.autoload();
+  }
+
+  async initliazeElectron() {
+    const gotTheLock = app.requestSingleInstanceLock();
+
+    if (!gotTheLock) {
+      app.quit();
+      process.exit(0);
+    }
+
+    app.setAsDefaultProtocolClient(this.PROTOCOL);
+
+    app.on('activate', () => {
+      this.createWindow();
+    });
+
+    app.on('window-all-closed', () => {
+      this.window = null;
+    });
+
+    await app.whenReady();
+    await this.createWindow();
+    await this.createTray();
+  }
+
+  // create electron window
+  async createWindow() {
+    if (this.window) {
+      if (this.window.isMinimized()) this.window.restore();
+      this.window.focus();
+      return;
+    }
+
+    this.window = new BrowserWindow({
+      width: 1800,
+      height: 1000,
+      backgroundColor: '#36393F',
+      darkTheme: true,
+      show: false,
+      autoHideMenuBar: true,
+      frame: false,
+      icon: this.ICON,
+      webPreferences: {
+        preload: join(__dirname, 'preload/index.js'),
+      },
+    });
+
+    if (app.isPackaged) {
+      this.window.loadFile(this.PROD_LOAD_FILE_PATH, {
+        hash: this.PROD_LOAD_FILE_HASH,
+      });
+
+      this.window.webContents.openDevTools(); // FIXME: Remove this line
+    } else {
+      this.window.loadURL(this.DEV_URL);
+      this.window.webContents.openDevTools(); // FIXME: Remove this line
+    }
+
+    this.window.on('ready-to-show', () => {
+      this.window?.show();
+    });
+  }
+
+  async createTray() {
+    let tray = new Tray(this.ICON.resize({ width: 20, height: 20 }));
+
+    const contextMenu = Menu.buildFromTemplate([
+      { label: 'view app screen', type: 'normal', click: () => this.createWindow() },
+      { type: 'separator' },
+      { label: 'quit', role: 'quit', type: 'normal' },
+    ]);
+
+    tray.on('double-click', () => this.createWindow());
+    tray.setToolTip(productName);
+    tray.setContextMenu(contextMenu);
+  }
+
+  async register(module: ModuleFunction) {
+    await module(this);
+  }
+
+  async autoload() {
+    const modules = import.meta.glob<{ default: ModuleFunction }>('./modules/**/index.ts', {
+      eager: true,
+    });
+
+    for (const module of Object.values(modules)) {
+      await this.register(module.default);
+    }
+  }
+}
+
+export default MyApp;

app/index.ts

@@ -1,105 +1,6 @@
-import { protocols } from '../electron-builder.json';
-import { app, BrowserWindow, Menu, nativeImage, Tray } from 'electron';
+import MyApp from './app';
 
-import { join, resolve } from 'path';
-
-import './ipcs/general';
-import './ipcs/store';
-import './ipcs/update';
-import { runDeepLinkResolver } from './utils/deepLink';
-
-global.win = null;
-
-const PROTOCOL = protocols.name;
-const IS_MAC = process.platform === 'darwin';
-const DEV_URL = `http://localhost:3000`;
-const PROD_FILE_PATH = join(__dirname, '../index.html');
-
-const RESOURCES_PATH = app.isPackaged
-  ? join(process.resourcesPath, 'resources')
-  : join(app.getAppPath(), 'resources');
-
-const icon = nativeImage.createFromPath(
-  `${RESOURCES_PATH}/icons/${IS_MAC ? 'logo@512.png' : 'logo@256.ico'}`,
-);
-
-const trayIcon = icon.resize({ width: 20, height: 20 });
-
-app.setAsDefaultProtocolClient(PROTOCOL);
-
-const gotTheLock = app.requestSingleInstanceLock();
-
-if (!gotTheLock) {
-  app.quit();
-  process.exit(0);
-}
-
-const createWindow = () => {
-  if (global.win) {
-    if (global.win.isMinimized()) global.win.restore();
-    global.win.focus();
-    return;
-  }
-
-  global.win = new BrowserWindow({
-    icon,
-    width: 800,
-    height: 600,
-    show: false,
-    webPreferences: {
-      preload: join(__dirname, 'preload/index.js'),
-    },
-  });
-
-  if (app.isPackaged) {
-    global.win.loadFile(PROD_FILE_PATH);
-  } else {
-    global.win.loadURL(DEV_URL);
-    global.win?.webContents.toggleDevTools();
-  }
-
-  global.win.on('ready-to-show', () => {
-    global.win?.show();
-  });
-};
-
-app.on('activate', () => {
-  createWindow();
-});
-
-app.on('second-instance', (_, argv) => {
-  console.log('second-instance');
-  if (!IS_MAC) {
-    const url = argv.find(arg => arg.startsWith(`${PROTOCOL}://`));
-
-    if (url) {
-      runDeepLinkResolver(url);
-    }
-  }
-
-  createWindow();
-});
-
-app.on('window-all-closed', () => {
-  global.win = null;
-});
-
-app.on('open-url', (_, url) => {
-  runDeepLinkResolver(url);
-});
-
-app.whenReady().then(() => {
-  createWindow();
-
-  let tray = new Tray(trayIcon);
-
-  const contextMenu = Menu.buildFromTemplate([
-    { label: 'view app screen', type: 'normal', click: () => createWindow() },
-    { type: 'separator' },
-    { label: 'quit', role: 'quit', type: 'normal' },
-  ]);
-
-  tray.on('double-click', () => createWindow());
-  tray.setToolTip('TemplateApp');
-  tray.setContextMenu(contextMenu);
-});
+(async () => {
+  const myApp = new MyApp();
+  await myApp.bootstrap();
+})();