Merge pull request #31 from elusive/24-migrate-to-vite

24 migrate to vite from CRA/Webpack

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4 
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore

.github/workflows/electron.js.yml

@@ -29,13 +29,13 @@ jobs:
       run: npm install --force
 
     - name: Build electron package
-      run: npm run electron:package:win
+      run: npm run build:win
       env:
          CI: false
 
     - name: Upload Artifacts
       uses: actions/upload-artifact@v3
       with:
         name: windows-x64-installer
-        path: 'dist/diagrammable*.msi'
+        path: 'dist/diagrammable*.exe'
 

.gitignore

@@ -11,6 +11,7 @@
 # production
 /build
 /dist
+/out
 
 # misc
 .DS_Store

.prettierignore

@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json

.prettierrc.yaml

@@ -0,0 +1,4 @@
+singleQuote: true
+semi: true
+printWidth: 100
+trailingComma: es5

README.md

@@ -1,7 +1,7 @@
-
-![diagrammable logo](public/diagrammable_title.png)
+![diagrammable logo](src/renderer/src/assets/diagrammable_title.png)
 
 [![.github/workflows/electron.js.yml](https://github.com/elusive/diagrammable/actions/workflows/electron.js.yml/badge.svg?branch=main)](https://github.com/elusive/diagrammable/actions/workflows/electron.js.yml)
+
 # Getting Started with Diagrammable
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). The main 
@@ -56,34 +56,44 @@ If you wish to run from source or develop and contribute to the application you
 
 4. Run the application in developer mode:
     ```
-    yarn install    # installs the dependencies from NPM
-    yarn start      # will run app in a browser window <https://localhost:3000>
+    npm install    # installs the dependencies from NPM
+    npm start      # will run app in a browser window <https://localhost:4000>
     # or
-    yarn dev        # will run the app in Electron (and open dev tools)
+    npm run dev        # will run the app in Electron (and open dev tools)
     ```
 
 5. Once there are tests to run you can execute the tests using this command:
-    `yarn test`
+    `npm run test`
 
 ## Electron Integration
 Electron is an instance of the Chromium browser and Nodejs running in a single process. This allows the use of a web app and a server backend (Node) together in the same application, locally on your desktop. The electron window hosts the web application instance and behaves just like a typical software window.
 
 The process of compiling and packaging the application has been somewhat simplified by the use of the NPM scripts (or Yarn). In order to produce the artifacts for installing the application and its Electron host, you can follow these steps:
 
-    ```
-    yarn build
-    yarn electron:package:[win|mac|linux]
-    ```
 
-## Learn More
+## Development
+
+### Install
+
+```bash
+$ npm install
+```
+
+### Local Server
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+```bash
+$ npm run dev
+```
 
-You can learn more about MermaidJs from the [MermaidJs documentation](https://mermaid-js.github.io/mermaid/#/).
+### Build
 
-You can learn specifically how to create diagrams from the diagram reference available [**here**](https://mermaid-js.github.io/mermaid/#/./n00b-syntaxReference). 
+```bash
+# For windows
+$ npm run build:win
 
-#### Questions
-You can email me with questions about the code: me *at* johng *dot* info.
+# For macOS
+$ npm run build:mac
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# For Linux
+$ npm run build:linux
+```

electron-builder.yml

@@ -0,0 +1,42 @@
+appId: com.electron.app
+productName: diagrammable
+directories:
+    buildResources: build
+files:
+    - '!**/.vscode/*'
+    - '!src/*'
+    - '!electron.vite.config.{js,ts,mjs,cjs}'
+    - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+    - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+asarUnpack:
+    - resources/**
+#afterSign: build/notarize.js
+win:
+    executableName: diagrammable
+nsis:
+    artifactName: ${name}-${version}-setup.${ext}
+    shortcutName: ${productName}
+    uninstallDisplayName: ${productName}
+    createDesktopShortcut: always
+mac:
+    entitlementsInherit: build/entitlements.mac.plist
+    extendInfo:
+        - NSCameraUsageDescription: Application requests access to the device's camera.
+        - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+        - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+        - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+dmg:
+    artifactName: ${name}-${version}.${ext}
+linux:
+    target:
+        - AppImage
+        - snap
+        - deb
+    maintainer: electronjs.org
+    category: Utility
+appImage:
+    artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+    provider: generic
+    url: https://example.com/auto-updates

electron.vite.config.js

@@ -0,0 +1,30 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    build: {
+        outDir: 'build',
+    },
+    server: {
+        open: true,
+        port: 4000,
+    },
+    main: {
+        plugins: [externalizeDepsPlugin()],
+    },
+    preload: {
+        plugins: [externalizeDepsPlugin()],
+    },
+    renderer: {
+        resolve: {
+            alias: {
+                '@renderer': resolve('src/renderer/src'),
+            },
+        },
+        plugins: [react()] 
+    },
+    define: {
+        global: {},
+    },
+})