@react-spa-scaffold/mcp 2.3.0 → 2.4.0

package/templates/src/main.tsx

@@ -1,7 +1,19 @@
 import { I18nProvider } from '@lingui/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router';
+import { BrowserRouter, HashRouter } from 'react-router';
+
+/**
+ * Detect if running in Electron environment.
+ * Uses the electronAPI exposed by preload script.
+ */
+const isElectron = typeof window !== 'undefined' && window.electronAPI?.isElectron === true;
+
+/**
+ * Router selection: HashRouter for Electron (file:// protocol compatibility),
+ * BrowserRouter for web.
+ */
+const Router = isElectron ? HashRouter : BrowserRouter;
 
 import './index.css';
 import { ErrorBoundary } from '@/components/shared';
@@ -57,7 +69,7 @@ initI18n().then(() => {
     <StrictMode>
       <QueryProvider>
         <I18nProvider i18n={i18n}>
-          <BrowserRouter>
+          <Router>
             <ClerkThemeProvider publishableKey={CLERK_CONFIG.publishableKey!}>
               <SupabaseProvider>
                 <MobileProvider>
@@ -70,7 +82,7 @@ initI18n().then(() => {
                 </MobileProvider>
               </SupabaseProvider>
             </ClerkThemeProvider>
-          </BrowserRouter>
+          </Router>
         </I18nProvider>
       </QueryProvider>
     </StrictMode>,

package/templates/src/preload.ts

@@ -0,0 +1,26 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+// Define the API shape
+export interface ElectronAPI {
+  window: {
+    setAlwaysOnTop: (enable: boolean) => Promise<boolean>;
+    setContentProtection: (enable: boolean) => Promise<boolean>;
+    getState: () => Promise<{
+      alwaysOnTop: boolean;
+      contentProtection: boolean;
+    }>;
+  };
+  platform: NodeJS.Platform;
+  isElectron: true;
+}
+
+// Expose protected methods via contextBridge
+contextBridge.exposeInMainWorld('electronAPI', {
+  window: {
+    setAlwaysOnTop: (enable: boolean) => ipcRenderer.invoke('window:setAlwaysOnTop', enable),
+    setContentProtection: (enable: boolean) => ipcRenderer.invoke('window:setContentProtection', enable),
+    getState: () => ipcRenderer.invoke('window:getState'),
+  },
+  platform: process.platform,
+  isElectron: true,
+} satisfies ElectronAPI);

package/templates/src/types/global.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Global type declarations for Electron integration.
+ * These types are automatically available in the renderer process
+ * when running inside Electron.
+ */
+
+interface ElectronWindowAPI {
+  setAlwaysOnTop: (enable: boolean) => Promise<boolean>;
+  setContentProtection: (enable: boolean) => Promise<boolean>;
+  getState: () => Promise<{
+    alwaysOnTop: boolean;
+    contentProtection: boolean;
+  }>;
+}
+
+interface ElectronAPI {
+  window: ElectronWindowAPI;
+  platform: NodeJS.Platform;
+  isElectron: true;
+}
+
+declare global {
+  interface Window {
+    electronAPI?: ElectronAPI;
+  }
+}
+
+export {};

package/templates/vite.main.config.mjs

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: '.vite/build',
+    lib: {
+      entry: 'src/main.ts',
+      formats: ['es'],
+      fileName: () => 'main.js',
+    },
+    rollupOptions: {
+      external: ['electron'],
+    },
+    minify: false,
+    sourcemap: true,
+  },
+  resolve: {
+    conditions: ['node'],
+  },
+});

package/templates/vite.preload.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: '.vite/build',
+    lib: {
+      entry: 'src/preload.ts',
+      formats: ['cjs'],
+      fileName: () => 'preload.js',
+    },
+    rollupOptions: {
+      external: ['electron'],
+    },
+    minify: false,
+    sourcemap: true,
+  },
+});

package/templates/vite.renderer.config.mjs

@@ -0,0 +1,52 @@
+import path from 'node:path';
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+import { lingui } from '@lingui/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Support both flat layout (config at root) and packages/electron layout
+// Flat: __dirname is project root, packages: __dirname is packages/electron
+const isPackagesLayout = existsSync(path.join(__dirname, '..', '..', 'package.json')) &&
+  __dirname.includes('packages/electron');
+const rootDir = isPackagesLayout ? path.resolve(__dirname, '../..') : __dirname;
+
+export default defineConfig({
+  root: rootDir,
+  plugins: [
+    react({
+      babel: {
+        plugins: ['@lingui/babel-plugin-lingui-macro'],
+      },
+    }),
+    lingui(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(rootDir, './src'),
+    },
+  },
+  base: './', // Critical: Use relative paths for file:// protocol
+  build: {
+    outDir: path.resolve(__dirname, '.vite/renderer/main_window'),
+    emptyOutDir: true,
+    rollupOptions: {
+      input: path.resolve(rootDir, 'index.html'),
+    },
+  },
+  // Dev server configuration for HMR
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+  // Dependency optimization settings
+  optimizeDeps: {
+    // Include problematic ESM/CJS packages
+    include: ['cookie'],
+  },
+});