@holochain/hc-spin 0.200.0

package/src/main/windows.ts

@@ -0,0 +1,178 @@
+import path from 'path';
+import fs from 'fs';
+import url from 'url';
+import { InstalledAppId } from '@holochain/client';
+import { BrowserWindow, NativeImage, nativeImage, net, session, shell } from 'electron';
+import { is } from '@electron-toolkit/utils';
+import { HappOrWebhappPath } from './validateArgs';
+
+export type UISource =
+  | {
+      type: 'path';
+      path: string;
+    }
+  | {
+      type: 'port';
+      port: number;
+    };
+
+export const createHappWindow = async (
+  uiSource: UISource,
+  happOrWebhappPath: HappOrWebhappPath,
+  appId: InstalledAppId,
+  agentNum: number,
+  appPort: number,
+  appDataRootDir: string,
+): Promise<BrowserWindow> => {
+  // TODO create mapping between installed-app-id's and window ids
+  if (!appPort) throw new Error('App port not defined.');
+
+  const partition = `persist:${agentNum}:${appId}`;
+
+  if (uiSource.type === 'path') {
+    const ses = session.fromPartition(partition);
+    ses.protocol.handle('webhapp', async (request) => {
+      const uriWithoutProtocol = request.url.slice('webhapp://'.length);
+      const filePathComponents = uriWithoutProtocol.split('/').slice(1);
+      const filePath = path.join(...filePathComponents);
+      return net.fetch(url.pathToFileURL(path.join(uiSource.path, filePath)).toString());
+    });
+  }
+
+  // Extend preload script to add window.__HC_LAUNCHER_ENV__
+  let preloadScript = fs.readFileSync(path.join(__dirname, '../preload/index.js')).toString();
+
+  preloadScript += `
+electron.contextBridge.exposeInMainWorld("__HC_LAUNCHER_ENV__", {
+  APP_INTERFACE_PORT: ${appPort},
+  INSTALLED_APP_ID: "${appId}",
+  FRAMEWORK: "electron"
+});
+    `;
+
+  const preloadPath = path.join(appDataRootDir, `preload-${agentNum}-${appId}.js`);
+
+  fs.writeFileSync(preloadPath, preloadScript);
+
+  let icon: NativeImage | undefined;
+
+  if (uiSource.type === 'path') {
+    const iconPath = path.join(uiSource.path, 'icon.png');
+    if (!fs.existsSync(iconPath) && agentNum === 1) {
+      console.warn(
+        '\n\n+++++ WARNING +++++\n[hc-spin] No icon.png found. It is recommended to put an icon.png file (1024x1024 pixel) in the root of your UI assets directory which can be used by the Holochain Launcher.\n+++++++++++++++++++\n\n',
+      );
+    }
+    icon = nativeImage.createFromPath(iconPath);
+  } else {
+    try {
+      const iconResponse = await net.fetch(`http://127.0.0.1:${uiSource.port}/icon.png`);
+      const buffer = await iconResponse.arrayBuffer();
+      if (buffer.byteLength === 0 && agentNum === 1) {
+        console.warn(
+          '\n\n+++++ WARNING +++++\n[hc-spin] No icon.png found. It is recommended to put an icon.png file (1024x1024 pixel) in the root of your UI assets directory which can be used by the Holochain Launcher.\n+++++++++++++++++++\n\n',
+        );
+      }
+      icon = nativeImage.createFromBuffer(Buffer.from(buffer));
+    } catch (e) {
+      console.error('Failed to get icon.png: ', e);
+    }
+  }
+
+  const happWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    show: false,
+    icon,
+    title: `Agent ${agentNum} - ${appId}`,
+    webPreferences: {
+      preload: preloadPath,
+      partition,
+    },
+  });
+
+  const [windowPositionX, windowPositionY] = happWindow.getPosition();
+  const windowPositionXMoved = windowPositionX + agentNum * 20;
+  const windowPositionYMoved = windowPositionY + agentNum * 20;
+  happWindow.setPosition(windowPositionXMoved, windowPositionYMoved);
+
+  happWindow.menuBarVisible = false;
+
+  setLinkOpenHandlers(happWindow);
+
+  happWindow.on('page-title-updated', (evt) => {
+    evt.preventDefault();
+  });
+
+  happWindow.webContents.openDevTools();
+
+  if (uiSource.type === 'port') {
+    try {
+      // Check whether dev server is responsive and index.html exists
+      await net.fetch(`http://127.0.0.1:${uiSource.port}/index.html`);
+    } catch (e) {
+      console.error(`No index.html file found at http://127.0.0.1:${uiSource.port}/index.html`, e);
+      if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+        happWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
+      } else {
+        happWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
+      }
+      happWindow.show();
+      return happWindow;
+    }
+    await happWindow.loadURL(`http://127.0.0.1:${uiSource.port}`);
+  } else if (uiSource.type === 'path') {
+    try {
+      await happWindow.loadURL(`webhapp://webhappwindow/index.html`);
+    } catch (e) {
+      console.error('[ERROR] Failed to fetch index.html');
+
+      if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+        happWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
+      } else {
+        const notFoundPath =
+          happOrWebhappPath.type === 'webhapp'
+            ? path.join(__dirname, '../renderer/indexNotFound1.html')
+            : path.join(__dirname, '../renderer/indexNotFound2.html');
+        happWindow.loadFile(notFoundPath);
+      }
+
+      happWindow.show();
+      return happWindow;
+    }
+  } else {
+    throw new Error('Unsupported uiSource type: ', (uiSource as any).type);
+  }
+
+  happWindow.show();
+
+  return happWindow;
+};
+
+export function setLinkOpenHandlers(browserWindow: BrowserWindow): void {
+  // links in happ windows should open in the system default application
+  // instead of the webview
+  browserWindow.webContents.on('will-navigate', (e) => {
+    if (e.url.startsWith('http://localhost') || e.url.startsWith('http://127.0.0.1')) {
+      // ignore dev server reload
+      return;
+    }
+    if (
+      e.url.startsWith('http://') ||
+      e.url.startsWith('https://') ||
+      e.url.startsWith('mailto://')
+    ) {
+      e.preventDefault();
+      shell.openExternal(e.url);
+    }
+  });
+
+  // Links with target=_blank should open in the system default browser and
+  // happ windows are not allowed to spawn new electron windows
+  browserWindow.webContents.setWindowOpenHandler((details) => {
+    if (details.url.startsWith('http://') || details.url.startsWith('https://')) {
+      shell.openExternal(details.url);
+    }
+    return { action: 'deny' };
+  });
+}

package/src/preload/index.ts

@@ -0,0 +1,8 @@
+// See the Electron documentation for details on how to use preload scripts:
+// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+import { contextBridge, ipcRenderer } from 'electron';
+import { ZomeCallUnsignedNapi } from 'hc-spin-rust-utils';
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  signZomeCall: (zomeCall: ZomeCallUnsignedNapi) => ipcRenderer.invoke('sign-zome-call', zomeCall),
+});

package/src/renderer/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Holochain dev CLI</title>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>index.html not found.</h1>
+      <div style="margin-bottom: 100px">
+        Is your dev server running at the port specified with the
+        <span class="code">--ui-port</span> option?
+      </div>
+    </div>
+    <script type="module" src="./src/renderer.ts"></script>
+  </body>
+</html>
+<style>
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .code {
+    background-color: lightgray;
+    border-radius: 3px;
+    padding: 1px 3px;
+  }
+</style>

package/src/renderer/indexNotFound1.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Holochain dev CLI</title>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>index.html not found.</h1>
+      <div style="margin-bottom: 100px">
+        Make sure the UI assets in your .webhapp file contain an index.html file at the asset
+        folder's root level.
+      </div>
+    </div>
+    <script type="module" src="./src/renderer.ts"></script>
+  </body>
+</html>
+<style>
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .code {
+    background-color: lightgray;
+    border-radius: 3px;
+    padding: 1px 3px;
+  }
+</style>

package/src/renderer/indexNotFound2.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Holochain dev CLI</title>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>index.html not found.</h1>
+      <div style="margin-bottom: 100px">
+        Make sure that the path you provided via the <span class="code">--ui-path</span> option
+        contains an index.html file.
+      </div>
+    </div>
+    <script type="module" src="./src/renderer.ts"></script>
+  </body>
+</html>
+<style>
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .code {
+    background-color: lightgray;
+    border-radius: 3px;
+    padding: 1px 3px;
+  }
+</style>

package/src/renderer/src/renderer.ts

@@ -0,0 +1 @@
+console.error('index.html not found.');

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
+  "include": ["electron.vite.config.*", "src/main/*", "src/preload/*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["electron-vite/node"]
+  }
+}

package/tsconfig.web.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
+  "include": ["src/renderer/**/*.ts", "src/preload/*.d.ts"],
+  "compilerOptions": {
+    "composite": true
+  }
+}