Added react and tanstack router for very basic project listing via IPC core method. Using hash based routing

Author: Nils-Kolvenbach

index.html

@@ -12,6 +12,7 @@ <h1>💖 Hello World!</h1>
     >
       Test IPC
     </button>
+    <div id="app"></div>
     <script type="module" src="/src/renderer/index.ts"></script>
   </body>
 </html>

package.json

@@ -26,8 +26,12 @@
     "@elek-io/core": "^0.1.1",
     "@sentry/electron": "^4.17.0",
     "@sentry/vite-plugin": "^2.13.0",
+    "@tanstack/react-router": "^1.15.23",
+    "@tanstack/router-devtools": "^1.15.23",
     "dugite": "^2.5.2",
-    "electron-squirrel-startup": "^1.0.0"
+    "electron-squirrel-startup": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
@@ -39,6 +43,9 @@
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
     "@electron-forge/publisher-github": "^7.2.0",
+    "@tanstack/router-vite-plugin": "^1.15.22",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "electron": "^28.2.1",

src/main/index.ts

@@ -10,9 +10,6 @@ import {
   protocol,
   screen,
 } from 'electron';
-import installExtension, {
-  REACT_DEVELOPER_TOOLS,
-} from 'electron-devtools-installer';
 import Path from 'path';
 
 Sentry.init({
@@ -132,7 +129,7 @@ class Main {
 
     if (app.isPackaged) {
       // Uncomment to debug a production build
-      // window.webContents.openDevTools();
+      window.webContents.openDevTools();
       // installExtension(REACT_DEVELOPER_TOOLS)
       //   .then((name) => console.log(`Added Chrome extension:  ${name}`))
       //   .catch((err) =>
@@ -147,11 +144,11 @@ class Main {
     } else {
       // Client is in development
       window.webContents.openDevTools();
-      installExtension(REACT_DEVELOPER_TOOLS)
-        .then((name) => console.log(`Added Chrome extension:  ${name}`))
-        .catch((err) =>
-          console.log('An error occurred adding Chrome extension: ', err)
-        );
+      // installExtension(REACT_DEVELOPER_TOOLS)
+      //   .then((name) => console.log(`Added Chrome extension:  ${name}`))
+      //   .catch((err) =>
+      //     console.log('An error occurred adding Chrome extension: ', err)
+      //   );
 
       console.log(
         'Loading frontend in development by URL:',

src/renderer/index.ts

@@ -26,6 +26,7 @@
  * ```
  */
 import * as Sentry from '@sentry/electron/renderer';
+import './react/app';
 
 Sentry.init({
   dsn: 'https://c839d5cdaec666911ba459803882d9d0@o4504985675431936.ingest.sentry.io/4506688843546624',

src/renderer/react/app.tsx

@@ -0,0 +1,37 @@
+import {
+  RouterProvider,
+  createHashHistory,
+  createRouter,
+} from '@tanstack/react-router';
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen';
+
+// Create a new router instance
+const hashHistory = createHashHistory(); // Use hash based routing since in production electron just loads the index.html via the file protocol
+const router = createRouter({
+  routeTree,
+  history: hashHistory,
+  context: { core: window.ipc.core },
+});
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('app')!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      Current URL: "{window.location.href}"
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}

src/renderer/react/routeTree.gen.ts

@@ -0,0 +1,48 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as ProjectsImport } from './routes/projects'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const ProjectsRoute = ProjectsImport.update({
+  path: '/projects',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/projects': {
+      preLoaderRoute: typeof ProjectsImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexRoute, ProjectsRoute])
+
+/* prettier-ignore-end */

src/renderer/react/routes/__root.tsx

@@ -0,0 +1,30 @@
+import {
+  createRootRouteWithContext,
+  Link,
+  Outlet,
+} from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+import { ContextBridgeApi } from '../../preload';
+
+interface RouterContext {
+  core: ContextBridgeApi['core'];
+}
+
+// Use the routerContext to create your root route
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: () => (
+    <>
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>{' '}
+        <Link to="/projects" className="[&.active]:font-bold">
+          Projects
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});

src/renderer/react/routes/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  );
+}

src/renderer/react/routes/projects.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/projects')({
+  component: About,
+  loader: ({ context }) => context.core.projects.list(),
+});
+
+function About() {
+  const projects = Route.useLoaderData();
+
+  return (
+    <div className="p-2">
+      Hello from Projects page!{' '}
+      <ul>
+        {projects.list.map((project) => {
+          return <li key={project.id}>{project.name}</li>;
+        })}
+      </ul>
+    </div>
+  );
+}

src/types.d.ts

@@ -3,3 +3,13 @@
 // whether you're running in development or production).
 declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
 declare const MAIN_WINDOW_VITE_NAME: string;
+
+// This file should augment the properties of the `Window` with the type of the
+// `ContextBridgeApi` from `Electron.contextBridge` declared in `./preload.ts`.
+import type { ContextBridgeApi } from './renderer/preload';
+
+declare global {
+  interface Window {
+    ipc: ContextBridgeApi;
+  }
+}

tsconfig.json

@@ -10,7 +10,8 @@
     "baseUrl": ".",
     "outDir": "dist",
     "moduleResolution": "node",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
   },
   "include": ["src"]
 }

vite.renderer.config.ts

@@ -1,4 +1,12 @@
+import { TanStackRouterVite } from '@tanstack/router-vite-plugin';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config
-export default defineConfig({});
+export default defineConfig({
+  plugins: [
+    TanStackRouterVite({
+      routesDirectory: './src/renderer/react/routes',
+      generatedRouteTree: './src/renderer/react/routeTree.gen.ts',
+    }),
+  ],
+});