Initial commit

Project skeleton based on
https://github.com/cawa-93/vite-electron-builder
but we use react instead of vue and yarn instead of npm.

13 files changed, 366 insertions, 0 deletions

diff --git a/packages/main/package.json b/packages/main/package.json
new file mode 100644
index 0000000..1eba6c1
--- /dev/null
+++ b/packages/main/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@sophie/main",
+  "version": "0.1.0",
+  "dependencies": {
+    "electron": "^16.0.5"
+  },
+  "devDependencies": {
+    "@types/electron-devtools-installer": "^2.2.0",
+    "electron-devtools-installer": "^3.2.0",
+    "vite": "^2.7.6"
+  }
+}
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
new file mode 100644
index 0000000..ef954e1
--- /dev/null
+++ b/packages/main/src/index.ts
@@ -0,0 +1,95 @@
+import { app, BrowserWindow } from 'electron';
+import { join } from 'path';
+import { URL } from 'url';
+
+const isSingleInstance = app.requestSingleInstanceLock();
+const isDevelopment = import.meta.env.MODE === 'development';
+
+if (!isSingleInstance) {
+  app.quit();
+  process.exit(0);
+}
+
+app.enableSandbox();
+
+if (isDevelopment) {
+  app.whenReady().then(async () => {
+    const {
+      default: installExtension,
+      MOBX_DEVTOOLS,
+      REACT_DEVELOPER_TOOLS,
+    } = await import('electron-devtools-installer');
+    installExtension(
+      [
+        MOBX_DEVTOOLS,
+        REACT_DEVELOPER_TOOLS,
+      ],
+      {
+        forceDownload: false,
+        loadExtensionOptions: {
+          allowFileAccess: true,
+        },
+      },
+    );
+  }).catch((err) => {
+    console.error('Failed to install devtools extension', err);
+  });
+}
+
+let mainWindow: BrowserWindow | null = null;
+
+function createWindow(): Promise<void> {
+  mainWindow = new BrowserWindow({
+    show: false,
+    webPreferences: {
+      nativeWindowOpen: true,
+      webviewTag: false,
+      sandbox: true,
+      preload: join(__dirname, '../../preload/dist/index.cjs'),
+    }
+  });
+
+  // See https://github.com/MarshallOfSound/electron-devtools-installer/issues/195#issuecomment-998872878
+  if (isDevelopment) {
+    const { webContents } = mainWindow;
+    webContents.once('dom-ready', () => {
+      webContents.once('devtools-opened', () => {
+        mainWindow?.focus();
+      });
+      webContents.openDevTools();
+    });
+  }
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow?.show();
+  });
+
+  const pageUrl = (isDevelopment && import.meta.env.VITE_DEV_SERVER_URL !== undefined)
+    ? import.meta.env.VITE_DEV_SERVER_URL
+    : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString();
+
+  return mainWindow.loadURL(pageUrl);
+}
+
+app.on('second-instance', () => {
+  if (mainWindow !== null) {
+    if (!mainWindow.isVisible()) {
+      mainWindow.show();
+    }
+    if (mainWindow.isMinimized()) {
+      mainWindow.restore();
+    }
+    mainWindow.focus();
+  }
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.whenReady().then(createWindow).catch((err) => {
+  console.error('Failed to create window', err);
+  process.exit(1);
+});
diff --git a/packages/main/tsconfig.json b/packages/main/tsconfig.json
new file mode 100644
index 0000000..7181228
--- /dev/null
+++ b/packages/main/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "/@/*": [
+        "src/*"
+      ]
+    },
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src/**/*",
+    "../../types/**/*.d.ts"
+  ]
+}
diff --git a/packages/main/vite.config.js b/packages/main/vite.config.js
new file mode 100644
index 0000000..45c2c8c
--- /dev/null
+++ b/packages/main/vite.config.js
@@ -0,0 +1,51 @@
+// @ts-check
+
+import { builtinModules } from 'module';
+import { join } from 'path';
+
+// `resolveJsonModule` is disabled for this package, but vite will load the json nevertheless.
+// @ts-expect-error
+import { node } from '../../.electron-vendors.cache.json';
+
+/** @type string */
+const PACKAGE_ROOT = __dirname;
+
+/**
+ * @type {import('vite').UserConfig}
+ * @see https://vitejs.dev/config/
+ */
+const config = {
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  envDir: process.cwd(),
+  resolve: {
+    alias: {
+      '/@/': join(PACKAGE_ROOT, 'src') + '/',
+    },
+  },
+  build: {
+    sourcemap: 'inline',
+    target: `node${node}`,
+    outDir: 'dist',
+    assetsDir: '.',
+    minify: process.env.MODE !== 'development',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      external: [
+        'electron',
+        'electron-devtools-installer',
+        ...builtinModules,
+      ],
+      output: {
+        entryFileNames: '[name].cjs',
+      },
+    },
+    emptyOutDir: true,
+    brotliSize: false,
+  },
+};
+
+export default config;
diff --git a/packages/preload/package.json b/packages/preload/package.json
new file mode 100644
index 0000000..538c583
--- /dev/null
+++ b/packages/preload/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@sophie/preload",
+  "version": "0.1.0",
+  "dependencies": {
+    "electron": "^16.0.5"
+  },
+  "devDependencies": {
+    "vite": "^2.7.6"
+  }
+}
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
new file mode 100644
index 0000000..7d5eff5
--- /dev/null
+++ b/packages/preload/src/index.ts
@@ -0,0 +1,4 @@
+import { contextBridge } from 'electron';
+
+contextBridge.exposeInMainWorld('sophieRenderer', {
+});
diff --git a/packages/preload/tsconfig.json b/packages/preload/tsconfig.json
new file mode 100644
index 0000000..580d63a
--- /dev/null
+++ b/packages/preload/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "/@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "../../types/**/*.d.ts"
+  ]
+}
diff --git a/packages/preload/vite.config.js b/packages/preload/vite.config.js
new file mode 100644
index 0000000..8f11028
--- /dev/null
+++ b/packages/preload/vite.config.js
@@ -0,0 +1,50 @@
+// @ts-check
+
+import { builtinModules } from 'module';
+import { join } from 'path';
+
+// `resolveJsonModule` is disabled for this package, but vite will load the json nevertheless.
+// @ts-expect-error
+import { chrome } from '../../.electron-vendors.cache.json';
+
+/** @type string */
+const PACKAGE_ROOT = __dirname;
+
+/**
+ * @type {import('vite').UserConfig}
+ * @see https://vitejs.dev/config/
+ */
+const config = {
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  envDir: process.cwd(),
+  resolve: {
+    alias: {
+      '/@/': join(PACKAGE_ROOT, 'src') + '/',
+    },
+  },
+  build: {
+    sourcemap: 'inline',
+    target: `chrome${chrome}`,
+    outDir: 'dist',
+    assetsDir: '.',
+    minify: process.env.MODE !== 'development',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      external: [
+        'electron',
+        ...builtinModules,
+      ],
+      output: {
+        entryFileNames: '[name].cjs',
+      },
+    },
+    emptyOutDir: true,
+    brotliSize: false,
+  },
+};
+
+export default config;
diff --git a/packages/renderer/index.html b/packages/renderer/index.html
new file mode 100644
index 0000000..7c6771f
--- /dev/null
+++ b/packages/renderer/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Sophie</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
new file mode 100644
index 0000000..89a87b2
--- /dev/null
+++ b/packages/renderer/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@sophie/renderer",
+  "version": "0.1.0",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@vitejs/plugin-react": "^1.1.3",
+    "vite": "^2.7.6"
+  }
+}
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
new file mode 100644
index 0000000..21ad152
--- /dev/null
+++ b/packages/renderer/src/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+const app = (
+  <React.StrictMode>
+    <h1>Hello Sophie!</h1>
+  </React.StrictMode>
+);
+
+render(app, document.getElementById('app'));
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
new file mode 100644
index 0000000..ff4fe7c
--- /dev/null
+++ b/packages/renderer/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "paths": {
+      "/@/*": [
+        "src/*"
+      ]
+    },
+    "types": [
+      "dom",
+      "dom.iterable"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../types/**/*.d.ts"
+  ]
+}
diff --git a/packages/renderer/vite.config.js b/packages/renderer/vite.config.js
new file mode 100644
index 0000000..c10b81f
--- /dev/null
+++ b/packages/renderer/vite.config.js
@@ -0,0 +1,52 @@
+// @ts-check
+
+/* eslint-env node */
+
+import { builtinModules } from 'module';
+import { join } from 'path';
+import react from '@vitejs/plugin-react';
+
+// `resolveJsonModule` is disabled for this package, but vite will load the json nevertheless.
+// @ts-expect-error
+import { chrome } from '../../.electron-vendors.cache.json';
+
+/** @type string */
+const PACKAGE_ROOT = __dirname;
+
+/**
+ * @type {import('vite').UserConfig}
+ * @see https://vitejs.dev/config/
+ */
+const config = {
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  resolve: {
+    alias: {
+      '/@/': join(PACKAGE_ROOT, 'src') + '/',
+    },
+  },
+  plugins: [
+    react(),
+  ],
+  base: '',
+  server: {
+    fs: {
+      strict: true,
+    },
+  },
+  build: {
+    sourcemap: true,
+    target: `chrome${chrome}`,
+    outDir: 'dist',
+    assetsDir: '.',
+    rollupOptions: {
+      external: [
+        ...builtinModules,
+      ],
+    },
+    emptyOutDir: true,
+    brotliSize: false,
+  },
+};
+
+export default config;