patriciogonzalezvivo · guidoschmidt · Oct 29, 2022 · Oct 29, 2022 · Oct 29, 2022 · Oct 29, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 ._.DS_Store
-node_modules
+node_modules
+yarn.lock
diff --git a/README.md b/README.md
@@ -84,20 +84,33 @@ This is a list of all the **options** you can set up:
 
 ![](http://patriciogonzalezvivo.com/images/glslEditor/debugger.gif)
 
-## Electron Version
 
-When developing use this to automatically reload Electron on every change
+## Browser Version
+Runs glslEditor in your favourite Browser™
 
 ```bash
-npm run dev
+npm run browser
 ```
 
-For use just do:
+or
 
 ```bash
-npm run start
+yarn browser
 ```
 
+## Electron Version
+Runs glslEditor in [electron](https://www.electronjs.org/)
+When developing use this to automatically reload Electron on every change
+
+```bash
+npm run electron
+```
+
+or 
+
+```bash
+yarn electron
+```
 
 ## TODOs
 

diff --git a/gulpfile.js b/gulpfile.js
diff --git a/index.html b/index.html
@@ -1,47 +1,49 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>GLSL Editor</title>
-		<link href="/favicon.gif" rel="shortcut icon"/>
-		<style>
-			body {
-				height: 100%;
-    			margin: 0;
-	  			background: #171e22;
-			}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GLSL Editor</title>
+    <link href="/favicon.gif" rel="shortcut icon" />
+    <style>
+        body {
+            height: 100%;
+            margin: 0;
+            background: #171e22;
+        }
 
-			#glsl_editor {
-				height: 100%;
-			}
-		</style>
-	</head>
-	<body>
-		<div id="glsl_editor"></div>
-	</body>
+        #glsl_editor {
+            height: 100%;
+        }
+    </style>
+    <link type="text/css" rel="stylesheet" href="./src/css/ElectronApp.css" />
+    <link type="text/css" rel="stylesheet" href="./src/css/glslEditor.css" />
+  </head>
+  <body>
+    <div id="glsl_editor"></div>
+  </body>
 
-	<link type="text/css" rel="stylesheet" href="build/glslEditor.css">
-    <script type="text/javascript" src="build/glslEditor.js"></script>
-    <script type="text/javascript">
-    	window.glslEditor = new GlslEditor('#glsl_editor', {
-    		canvas_size: 500,
-            canvas_draggable: true,
-            canvas_resizable: true,
-    		theme: 'monokai',
-            watchHash: true,
-            fileDrops: true,
-    		menu: true
-    	});
+  <script type="module">
+      import GlslEditor from './src/js/GlslEditor.js';
 
-        document.body.style.backgroundColor = window.getComputedStyle(glslEditor.editor.getWrapperElement(),null).getPropertyValue('background-color');
-    </script>
-    <script>
+      window.glslEditor = new GlslEditor("#glsl_editor", {
+          canvas_size: 500,
+          canvas_draggable: true,
+          canvas_resizable: true,
+          theme: 'monokai',
+          watchHash: true,
+          fileDrops: true,
+          menu: true
+      });
+
+      document.body.style.backgroundColor = window.getComputedStyle(glslEditor.editor.getWrapperElement(),null).getPropertyValue('background-color');
+  </script>
+  <script>
         (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,"script","//www.google-analytics.com/analytics.js","ga");
         ga("create", "UA-18824436-2", "auto");
         ga("send", "pageview");
-    </script>
+  </script>
 </html>
diff --git a/src/electron.js b/src/electron.js
@@ -0,0 +1,45 @@
+// Module to control application life.
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+
+function createWindow() {
+    // Create the browser window.
+    const mainWindow = new BrowserWindow({
+        title: 'GlslEditor',
+        width: 1000,
+        minWidth: 700,
+        height: 700,
+        minHeight: 700
+    });
+    mainWindow.setTitle('GlslEditor');
+    // and load the index.html of the app.
+    if (process.env.VITE_DEV_SERVER_URL) {
+        mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
+    }
+    else {
+        mainWindow.loadFile(path.join(__dirname, 'index.html'));
+    }
+}
+
+// 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.
+app.on('ready', () => {
+    createWindow();
+    app.on('activate', function () {
+        // On macOS it's common to re-create a window in the app when the
+        // dock icon is clicked and there are no other windows open.
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
diff --git a/src/main.js b/src/main.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import electron from 'vite-plugin-electron';
+
+export default defineConfig({
+    plugins: [
+        electron({ entry: 'src/electron.js' }),
+    ],
+});