Set up electron-builder for new app (#113)

Adds electron-builder, which we will use to package and distribute our
application, same as in the existing app.
Replaces explicit port assignments with dynamic ones, which are then
stored into environment variables.
Adds a ~/.w2-dev folder for use when running a dev build.

The build-helper pipeline from the old repo is included here too, but it
is not updated yet so it will fail.

Also removes some redundant utility functions and cleans up some let vs.
const usage.

The packaging can be run using the `package:prod` and `package:dev`
tasks.

---------

Co-authored-by: sawka <mike.sawka@gmail.com>

frontend/util/endpoints.ts

@@ -0,0 +1,9 @@
+import { getEnv } from "./getenv";
+import { lazy } from "./util";
+
+export const WebServerEndpointVarName = "WAVE_SERVER_WEB_ENDPOINT";
+export const WSServerEndpointVarName = "WAVE_SERVER_WS_ENDPOINT";
+
+export const getServerWebEndpoint = lazy(() => `http://${getEnv(WebServerEndpointVarName)}`);
+
+export const getServerWSEndpoint = lazy(() => `ws://${getEnv(WSServerEndpointVarName)}`);

frontend/util/getenv.ts

@@ -0,0 +1,26 @@
+import { getApi } from "@/app/store/global";
+
+function getWindow(): Window {
+    return globalThis.window;
+}
+
+function getProcess(): NodeJS.Process {
+    return globalThis.process;
+}
+
+/**
+ * Gets an environment variable from the host process, either directly or via IPC if called from the browser.
+ * @param paramName The name of the environment variable to attempt to retrieve.
+ * @returns The value of the environment variable or null if not present.
+ */
+export function getEnv(paramName: string): string {
+    const win = getWindow();
+    if (win != null) {
+        return getApi().getEnv(paramName);
+    }
+    const proc = getProcess();
+    if (proc != null) {
+        return proc.env[paramName];
+    }
+    return null;
+}

frontend/util/isdev.ts

@@ -0,0 +1,17 @@
+import { getEnv } from "./getenv";
+import { lazy } from "./util";
+
+export const WaveDevVarName = "WAVETERM_DEV";
+export const WaveDevViteVarName = "WAVETERM_DEV_VITE";
+
+/**
+ * Determines whether the current app instance is a development build.
+ * @returns True if the current app instance is a development build.
+ */
+export const isDev = lazy(() => !!getEnv(WaveDevVarName));
+
+/**
+ * Determines whether the current app instance is running via the Vite dev server.
+ * @returns True if the app is running via the Vite dev server.
+ */
+export const isDevVite = lazy(() => !!getEnv(WaveDevViteVarName));

frontend/util/util.ts

@@ -162,15 +162,45 @@ function useAtomValueSafe<T>(atom: jotai.Atom<T>): T {
     return jotai.useAtomValue(atom);
 }
 
+/**
+ * Simple wrapper function that lazily evaluates the provided function and caches its result for future calls.
+ * @param callback The function to lazily run.
+ * @returns The result of the function.
+ */
+const lazy = <T extends (...args: any[]) => any>(callback: T) => {
+    let res: ReturnType<T>;
+    let processed = false;
+    return (...args: Parameters<T>): ReturnType<T> => {
+        if (processed) return res;
+        res = callback(...args);
+        processed = true;
+        return res;
+    };
+};
+
+/**
+ * Workaround for NodeJS compatibility. Will attempt to resolve the Crypto API from the browser and fallback to NodeJS if it isn't present.
+ * @returns The Crypto API.
+ */
+function getCrypto() {
+    try {
+        return window.crypto;
+    } catch {
+        return crypto;
+    }
+}
+
 export {
     base64ToArray,
     base64ToString,
     fireAndForget,
+    getCrypto,
     getPromiseState,
     getPromiseValue,
     isBlank,
     jotaiLoadableValue,
     jsonDeepEqual,
+    lazy,
     makeIconClass,
     stringToBase64,
     useAtomValueSafe,