feat(desktop): initial desktop electron

Novout · Oct 20, 2021 · cde7d76 · cde7d76 · vercel · Oct 20, 2021
1 parent 0db5a34
commit cde7d76
Show file tree

Hide file tree

Showing 13 changed files with 1,394 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
+build
 dist
 dist-ssr
 *.local

diff --git a/FEATURES.md b/FEATURES.md
@@ -90,6 +90,13 @@ Here will contain all the features that Better Write offers.
 - ➖ - Dropbox Integration
 - ❌ - Notion Integration
 
+### Desktop
+
+- ➖ - Basic Features
+- ➖ - Save/Load
+- ❌ - Integrations
+- ✅ - Shortcuts and Alerts
+
 ## Landing
 
 - ❌ - Not exists at moment.

diff --git a/desktop/index.ts b/desktop/index.ts
@@ -0,0 +1,72 @@
+const { app, BrowserWindow, protocol, globalShortcut } = require('electron')
+const { join } = require('path')
+
+const isDev = process.env.NODE_ENV === 'development'
+const WinURL = isDev
+  ? `http://localhost:3000`
+  : 'file://' + join(__dirname, '../render/index.html')
+
+let mainWindow: any = null
+let willQuitApp = false
+
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+function createWindow () {
+  mainWindow = new BrowserWindow({
+    minWidth: 1140,
+    minHeight: 700,
+    width: 1240,
+    height: 700,
+    center: true,
+    titleBarStyle: 'hidden',
+    webPreferences: {
+      contextIsolation: false,
+      enableRemoteModule: false,
+      webSecurity: true,
+      nodeIntegration: true
+    },
+  })
+
+  mainWindow.webContents.openDevTools()
+  // and load the index.html of the app.
+  mainWindow.loadURL(WinURL)
+  mainWindow.on('close', function (event: any) {
+    if (!willQuitApp) {
+      event.preventDefault()
+      // mainWindow?.hide()
+    }
+  })
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    mainWindow = null
+  })
+  mainWindow.once('ready-to-show', () => {
+    mainWindow?.show()
+  })
+}
+
+
+app.on('ready', createWindow)
+
+app.on("ready", () => {
+  globalShortcut.register("CmdOrCtrl+D", () => {
+    mainWindow.webContents.openDevTools();
+  });
+});
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (!mainWindow) {
+    createWindow()
+  } else {
+    mainWindow.show()
+  }
+})
+app.on('before-quit', () => willQuitApp = true)
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
   <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="r4tb6iv2jguoauy"></script>
 </html>
diff --git a/package.json b/package.json
@@ -2,8 +2,13 @@
   "name": "better-write",
   "version": "0.3.5",
   "author": "novout",
+  "description": "A editor for creative writers.",
+  "main": "dist/main/index.js",
   "scripts": {
     "dev": "vite",
+    "desktop:dev": "cross-env NODE_ENV=development electron-dev-runner desktop/index.ts --vite",
+    "desktop:start": "cross-env NODE_ENV=development electron dist/main/index.js",
+    "desktop:build": "cross-env NODE_ENV=production tsc desktop/index.ts --moduleResolution Node --removeComments -t esnext --outDir dist/main && yarn build && electron-builder",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "rm -rf ./dist && yarn build && vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src && yarn format",
@@ -14,7 +19,9 @@
     "release:initial": "standard-version -- --first-release",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch",
-    "release:major": "standard-version --release-as major"
+    "release:major": "standard-version --release-as major",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
   },
   "dependencies": {
     "@headlessui/vue": "1.4.1",
@@ -28,6 +35,7 @@
     "autoprefixer": "10.3.4",
     "date-fns": "2.25.0",
     "dropbox": "10.12.0",
+    "is-electron": "^2.2.0",
     "keyboardjs": "2.6.4",
     "mitt": "^3.0.0",
     "pdfmake": "0.2.2",
@@ -39,7 +47,7 @@
     "vue-i18n": "9.1.7",
     "vue-router": "4.0.11",
     "vue-toastification": "2.0.0-rc.1",
-    "vuex": "4.0.2"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "2.4.0",
@@ -52,6 +60,10 @@
     "@vitejs/plugin-vue": "1.9.3",
     "@vue/compiler-sfc": "3.2.20",
     "@vue/eslint-config-typescript": "7.0.0",
+    "cross-env": "^7.0.3",
+    "electron": "^13.1.7",
+    "electron-builder": "^22.11.7",
+    "electron-dev-runner": "^1.0.1",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-vue": "7.18.0",
@@ -78,6 +90,7 @@
         "date-fns",
         "date-fns/locale",
         "dropbox",
+        "is-electron",
         "keyboardjs",
         "mitt",
         "pdfmake/build/pdfmake",
@@ -89,5 +102,18 @@
         "vuex"
       ]
     }
+  },
+  "build": {
+    "appId": "com.https://better-write.vercel.app.bw",
+    "productName": "Better Write",
+    "directories": {
+      "output": "build/dist"
+    },
+    "copyright": "Copyright © 2021 ${author}",
+    "files": [
+      "dist/**/*",
+      "package.json",
+      "components.d.ts"
+    ]
   }
 }
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
@@ -15,7 +15,6 @@
   import { useHead } from '@vueuse/head'
   import { computed, onUnmounted } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useRouter } from 'vue-router'
   import { useStore } from 'vuex'
 
   const store = useStore()

diff --git a/src/router.ts b/src/router.ts
@@ -1,15 +1,25 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router'
+import isElectron from 'is-electron'
 import Landing from '@/pages/Landing.vue'
 import Editor from '@/pages/Editor.vue'
 import ErrorPage from '@/pages/404.vue'
 
-const routes = [
+const electronRoutes = [
+  { path: '/', component: Editor },
+  { path: '/:pathMatch(.*)*', redirect: '/' },
+]
+
+const webRoutes = [
   { path: '/', component: Editor },
   { path: '/landing', component: Landing },
   { path: '/:pathMatch(.*)*', component: ErrorPage },
 ]
 
 export default createRouter({
-  history: createWebHistory(),
-  routes,
+  history: isElectron() ? createWebHashHistory() : createWebHistory(),
+  routes: isElectron() ? electronRoutes : webRoutes,
 })
diff --git a/src/use/google/fonts.ts b/src/use/google/fonts.ts
@@ -2,6 +2,7 @@ import axios from 'axios'
 import { GoogleFont } from '@/types/google'
 import { useEnv } from '../env'
 import { useDefines } from '../defines'
+import isElectron from 'is-electron'
 
 export const useFonts = () => {
   const setGlobal = (vfs: Record<any, any>) => {
@@ -30,6 +31,13 @@ export const useFonts = () => {
   }
 
   const get = async () => {
+    if (isElectron()) {
+      const normalize = {}
+      const names: Array<any> = []
+
+      return { normalize, names }
+    }
+
     let normalize: Record<string, any> = {}
     const names: Array<string> = []
 

diff --git a/src/use/pdf.ts b/src/use/pdf.ts
@@ -506,7 +506,7 @@ export const usePDF = () => {
     if (store.state.pdf.normalize['Roboto'])
       set['Roboto'] = store.state.pdf.normalize['Roboto']
 
-    // @ts-ignore
+      // @ts-ignore
     ;(<any>pdfMake).fonts = set
   }
 

diff --git a/src/use/start.ts b/src/use/start.ts
@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { useEnv } from './env'
 import i18n from '@/lang'
+import isElectron from 'is-electron'
 
 export const useStart: Callback<void> = () => {
   const store = useStore()
@@ -132,10 +133,13 @@ export const useStart: Callback<void> = () => {
   }
 
   const init = () => {
-    initial()
-    global()
     dark()
     lang()
+
+    if (isElectron()) return
+
+    initial()
+    global()
     auth()
     pdf.init()
   }

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,6 @@
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "desktop/**/*.ts"],
   "exclude": ["node_modules", "/pdfmake.js$/", "**/*.test.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,4 @@
-import path from "path";
+import { resolve } from "path";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
@@ -7,12 +7,12 @@ import vueI18n from "@intlify/vite-plugin-vue-i18n";
 import vitePersist from 'vite-plugin-optimize-persist'
 import vitePackageConfig from 'vite-plugin-package-config'
 
-
 export default defineConfig({
+  base: './',
   plugins: [
     vue(),
     vueI18n({
-      include: path.resolve(__dirname, "./src/lang/**"),
+      include: resolve(__dirname, "./src/lang/**"),
       runtimeOnly: false
     }),
     Components({
@@ -22,10 +22,13 @@ export default defineConfig({
     vitePersist(),
     vitePackageConfig()
   ],
-
+  build: {
+    outDir: resolve(__dirname, 'dist/render'),
+    emptyOutDir: true
+  },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": resolve(__dirname, "./src"),
     },
   },