From 25535c0aab0a8916d6a51d771d6123c09e692127 Mon Sep 17 00:00:00 2001
From: Gregor MacLennan <gmaclennan@digital-democracy.org>
Date: Wed, 11 Dec 2024 22:41:07 +0000
Subject: [PATCH 1/3] chore(WIP): synchronous init of comapeo client

---
 src/main/app.js                          |  9 ++---
 src/preload/main-window.js               | 24 +++++------
 src/preload/runtime.d.ts                 |  1 -
 src/renderer/src/comapeo-client.ts       |  9 +++++
 src/renderer/src/contexts/ApiContext.tsx | 51 ++++--------------------
 src/renderer/src/routes/__root.tsx       |  4 +-
 6 files changed, 32 insertions(+), 66 deletions(-)
 create mode 100644 src/renderer/src/comapeo-client.ts

diff --git a/src/main/app.js b/src/main/app.js
index e5ef2af..892ba01 100644
--- a/src/main/app.js
+++ b/src/main/app.js
@@ -4,7 +4,6 @@ import { defineMessages } from '@formatjs/intl'
 import debug from 'debug'
 import {
 	BrowserWindow,
-	MessageChannelMain,
 	app,
 	ipcMain,
 	safeStorage,
@@ -213,17 +212,17 @@ function initMainWindow({ appMode, services }) {
 
 	// Set up communication channel between window and core service
 	// https://www.electronjs.org/docs/latest/tutorial/message-ports/#messageports-in-the-main-process
-	mainWindow.webContents.ipc.on('request-comapeo-port', (event) => {
-		const { port1, port2 } = new MessageChannelMain()
+	mainWindow.webContents.ipc.on('comapeo-port', (event) => {
+		const [port] = event.ports
+		if (!port) return // TODO: throw/report error
 		services.core.postMessage(
 			/** @satisfies {NewClientMessage} */
 			{
 				type: 'core:new-client',
 				payload: { clientId: `window-${mainWindow.id}` },
 			},
-			[port1],
+			[port],
 		)
-		event.senderFrame?.postMessage('provide-comapeo-port', null, [port2])
 	})
 
 	APP_STATE.browserWindows.set(mainWindow, {
diff --git a/src/preload/main-window.js b/src/preload/main-window.js
index b282182..eb41855 100644
--- a/src/preload/main-window.js
+++ b/src/preload/main-window.js
@@ -1,25 +1,19 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
-// We need to wait until the main world is ready to receive the message before
-// sending the port. We create this promise in the preload so it's guaranteed
-// to register the onload listener before the load event is fired.
-const windowLoaded = new Promise((resolve) => {
-	window.onload = resolve
-})
+window.onmessage = (event) => {
+	// event.source === window means the message is coming from the preload
+	// script, as opposed to from an <iframe> or other source.
+	if (event.source !== window) return
+	if (event.data !== 'comapeo-port') return
+	const [port] = event.ports
+	if (!port) return // TODO: throw/report error
+	ipcRenderer.postMessage('comapeo-port', null, [port])
+}
 
 /**
  * @type {import('./runtime.js').RuntimeApi}
  */
 const runtimeApi = {
-	// Setup
-	init() {
-		ipcRenderer.send('request-comapeo-port')
-		ipcRenderer.once('provide-comapeo-port', async (event) => {
-			await windowLoaded
-			window.postMessage('comapeo-port', '*', event.ports)
-		})
-	},
-
 	// Locale
 	async getLocale() {
 		const locale = await ipcRenderer.invoke('locale:get')
diff --git a/src/preload/runtime.d.ts b/src/preload/runtime.d.ts
index 64d25be..e6504f6 100644
--- a/src/preload/runtime.d.ts
+++ b/src/preload/runtime.d.ts
@@ -1,5 +1,4 @@
 export type RuntimeApi = {
-	init: () => void
 	getLocale: () => Promise<string>
 	updateLocale: (locale: string) => void
 }
diff --git a/src/renderer/src/comapeo-client.ts b/src/renderer/src/comapeo-client.ts
new file mode 100644
index 0000000..feb0f30
--- /dev/null
+++ b/src/renderer/src/comapeo-client.ts
@@ -0,0 +1,9 @@
+import { createMapeoClient } from '@comapeo/ipc'
+
+export function initComapeoClient() {
+	const { port1, port2 } = new MessageChannel()
+	window.postMessage('comapeo-port', '*', [port2])
+	const client = createMapeoClient(port1, { timeout: Infinity })
+	port1.start()
+	return client
+}
diff --git a/src/renderer/src/contexts/ApiContext.tsx b/src/renderer/src/contexts/ApiContext.tsx
index 6e3ef99..5657008 100644
--- a/src/renderer/src/contexts/ApiContext.tsx
+++ b/src/renderer/src/contexts/ApiContext.tsx
@@ -1,50 +1,13 @@
-import {
-	createContext,
-	useContext,
-	useEffect,
-	useState,
-	type PropsWithChildren,
-} from 'react'
-import { createMapeoClient, type MapeoClientApi } from '@comapeo/ipc'
+import { createContext, useContext, type PropsWithChildren } from 'react'
+import { type MapeoClientApi } from '@comapeo/ipc'
 
 const ApiContext = createContext<MapeoClientApi | null>(null)
 
-export function ApiProvider({ children }: PropsWithChildren) {
-	const [api, setApi] = useState<MapeoClientApi | null>(null)
-
-	useEffect(() => {
-		window.runtime.init()
-
-		function onWindowMessage(event: MessageEvent) {
-			// event.source === window means the message is coming from the preload
-			// script, as opposed to from an <iframe> or other source.
-			console.log('WINDOW EVENT', event)
-			if (event.source === window && event.data === 'comapeo-port') {
-				const [port] = event.ports
-
-				// Shouldn't happen but maybe log error?
-				if (!port) return
-
-				const client = createMapeoClient(port, { timeout: Infinity })
-
-				port.start()
-
-				setApi(client)
-
-				window.removeEventListener('message', onWindowMessage)
-			}
-		}
-
-		window.addEventListener('message', onWindowMessage)
-
-		return () => {
-			window.removeEventListener('message', onWindowMessage)
-		}
-	}, [])
-
-	if (!api) return null
-
-	return <ApiContext.Provider value={api}>{children}</ApiContext.Provider>
+export const ApiProvider = ({
+	client,
+	children,
+}: PropsWithChildren<{ client: MapeoClientApi }>) => {
+	return <ApiContext.Provider value={client}>{children}</ApiContext.Provider>
 }
 
 export function useApi() {
diff --git a/src/renderer/src/routes/__root.tsx b/src/renderer/src/routes/__root.tsx
index 9946ccc..8660fd6 100644
--- a/src/renderer/src/routes/__root.tsx
+++ b/src/renderer/src/routes/__root.tsx
@@ -4,10 +4,12 @@ import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
 import { theme } from '../Theme'
+import { initComapeoClient } from '../comapeo-client.js'
 import { ApiProvider } from '../contexts/ApiContext'
 import { IntlProvider } from '../contexts/IntlContext'
 
 const queryClient = new QueryClient()
+const comapeoClient = initComapeoClient()
 
 export const Route = createRootRoute({
 	component: () => (
@@ -15,7 +17,7 @@ export const Route = createRootRoute({
 			<CssBaseline />
 			<IntlProvider>
 				<QueryClientProvider client={queryClient}>
-					<ApiProvider>
+					<ApiProvider client={comapeoClient}>
 						<Outlet />
 						<TanStackRouterDevtools />
 					</ApiProvider>

From 0c4e6f2a0fb0ac702a6c5ffb4a5f88f2e6d5c7bc Mon Sep 17 00:00:00 2001
From: Andrew Chou <andrewchou@fastmail.com>
Date: Thu, 19 Dec 2024 15:41:47 -0500
Subject: [PATCH 2/3] remove router devtools

---
 src/renderer/src/routes/__root.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/src/routes/__root.tsx b/src/renderer/src/routes/__root.tsx
index f32b8b3..40cdd50 100644
--- a/src/renderer/src/routes/__root.tsx
+++ b/src/renderer/src/routes/__root.tsx
@@ -23,7 +23,6 @@ export const Route = createRootRoute({
 						<Suspense fallback={<CircularProgress />}>
 							<Outlet />
 						</Suspense>
-						<TanStackRouterDevtools />
 					</ClientApiProvider>
 				</QueryClientProvider>
 			</IntlProvider>

From 8dfcec7758085f7d9ddb3a65ff277e33d591f760 Mon Sep 17 00:00:00 2001
From: Andrew Chou <andrewchou@fastmail.com>
Date: Thu, 19 Dec 2024 15:57:14 -0500
Subject: [PATCH 3/3] fix merge issues

---
 src/renderer/src/App.tsx           | 13 +++++++------
 src/renderer/src/routes/__root.tsx | 25 +++----------------------
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index eb67abb..5bbeaa0 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,18 +1,19 @@
+import { ClientApiProvider } from '@comapeo/core-react'
 import { CssBaseline, ThemeProvider } from '@mui/material'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 
 import { theme } from './Theme'
+import { initComapeoClient } from './comapeo-client'
 import {
 	ActiveProjectIdProvider,
 	createActiveProjectIdStore,
 } from './contexts/ActiveProjectIdProvider'
-import { ApiProvider } from './contexts/ApiContext'
 import { IntlProvider } from './contexts/IntlContext'
 import { routeTree } from './routeTree.gen'
 
 const queryClient = new QueryClient()
-
+const clientApi = initComapeoClient()
 const router = createRouter({ routeTree })
 
 declare module '@tanstack/react-router' {
@@ -30,11 +31,11 @@ export const App = () => (
 		<CssBaseline />
 		<IntlProvider>
 			<QueryClientProvider client={queryClient}>
-				<ActiveProjectIdProvider store={PersistedProjectIdStore}>
-					<ApiProvider>
+				<ClientApiProvider clientApi={clientApi}>
+					<ActiveProjectIdProvider store={PersistedProjectIdStore}>
 						<RouterProvider router={router} />
-					</ApiProvider>
-				</ActiveProjectIdProvider>
+					</ActiveProjectIdProvider>
+				</ClientApiProvider>
 			</QueryClientProvider>
 		</IntlProvider>
 	</ThemeProvider>
diff --git a/src/renderer/src/routes/__root.tsx b/src/renderer/src/routes/__root.tsx
index 016a86d..c2132ca 100644
--- a/src/renderer/src/routes/__root.tsx
+++ b/src/renderer/src/routes/__root.tsx
@@ -1,30 +1,11 @@
 import { Suspense } from 'react'
-import { ClientApiProvider } from '@comapeo/core-react'
-import { CssBaseline, ThemeProvider } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Outlet, createRootRoute } from '@tanstack/react-router'
 
-import { theme } from '../Theme'
-import { initComapeoClient } from '../comapeo-client.js'
-import { IntlProvider } from '../contexts/IntlContext'
-
-const queryClient = new QueryClient()
-const comapeoClient = initComapeoClient()
-
 export const Route = createRootRoute({
 	component: () => (
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<IntlProvider>
-				<QueryClientProvider client={queryClient}>
-					<ClientApiProvider clientApi={comapeoClient}>
-						<Suspense fallback={<CircularProgress />}>
-							<Outlet />
-						</Suspense>
-					</ClientApiProvider>
-				</QueryClientProvider>
-			</IntlProvider>
-		</ThemeProvider>
+		<Suspense fallback={<CircularProgress />}>
+			<Outlet />
+		</Suspense>
 	),
 })