fix white screen

CynToolkit · Aug 16, 2024 · ab24ba7 · ab24ba7
1 parent 0869fd8
commit ab24ba7
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 66 deletions.
diff --git a/src/shared/supabase.ts b/src/shared/supabase.ts
@@ -2,8 +2,6 @@ import { createClient } from '@supabase/supabase-js'
 import { Database } from './database.types'
 
 export const supabase = createClient<Database>(
-  // @ts-expect-error supabase
-  import.meta.env.VITE_SUPABASE_URL,
-  // @ts-expect-error supabase
-  import.meta.env.VITE_SUPABASE_ANON_KEY
+  __SUPABASE_URL__,
+  __SUPABASE_ANON_KEY__
 )
diff --git a/vite.base.config.ts b/vite.base.config.ts
@@ -1,14 +1,17 @@
-import { builtinModules } from 'node:module';
-import type { AddressInfo } from 'node:net';
-import type { ConfigEnv, Plugin, UserConfig } from 'vite';
-import pkg from './package.json';
+import { builtinModules } from 'node:module'
+import type { AddressInfo } from 'node:net'
+import { loadEnv, type ConfigEnv, type Plugin, type UserConfig } from 'vite'
+import pkg from './package.json'
 
-export const builtins = ['electron', ...builtinModules.map((m) => [m, `node:${m}`]).flat()];
+export const builtins = ['electron', ...builtinModules.map((m) => [m, `node:${m}`]).flat()]
 
-export const external = [...builtins, ...Object.keys('dependencies' in pkg ? (pkg.dependencies as Record<string, unknown>) : {})];
+export const external = [
+  ...builtins,
+  ...Object.keys('dependencies' in pkg ? (pkg.dependencies as Record<string, unknown>) : {})
+]
 
 export function getBuildConfig(env: ConfigEnv<'build'>): UserConfig {
-  const { root, mode, command } = env;
+  const { root, mode, command } = env
 
   return {
     root,
@@ -19,59 +22,63 @@ export function getBuildConfig(env: ConfigEnv<'build'>): UserConfig {
       // 🚧 Multiple builds may conflict.
       outDir: '.vite/build',
       watch: command === 'serve' ? {} : null,
-      minify: command === 'build',
+      minify: command === 'build'
     },
-    clearScreen: false,
-  };
+    clearScreen: false
+  }
 }
 
 export function getDefineKeys(names: string[]) {
-  const define: { [name: string]: VitePluginRuntimeKeys } = {};
+  const define: { [name: string]: VitePluginRuntimeKeys } = {}
 
   return names.reduce((acc, name) => {
-    const NAME = name.toUpperCase();
+    const NAME = name.toUpperCase()
     const keys: VitePluginRuntimeKeys = {
       VITE_DEV_SERVER_URL: `${NAME}_VITE_DEV_SERVER_URL`,
-      VITE_NAME: `${NAME}_VITE_NAME`,
-    };
+      VITE_NAME: `${NAME}_VITE_NAME`
+    }
 
-    return { ...acc, [name]: keys };
-  }, define);
+    return { ...acc, [name]: keys }
+  }, define)
 }
 
 export function getBuildDefine(env: ConfigEnv<'build'>) {
-  const { command, forgeConfig } = env;
-  const names = forgeConfig.renderer.filter(({ name }) => name != null).map(({ name }) => name!);
-  const defineKeys = getDefineKeys(names);
-  const define = Object.entries(defineKeys).reduce((acc, [name, keys]) => {
-    const { VITE_DEV_SERVER_URL, VITE_NAME } = keys;
-    const def = {
-      [VITE_DEV_SERVER_URL]: command === 'serve' ? JSON.stringify(process.env[VITE_DEV_SERVER_URL]) : undefined,
-      [VITE_NAME]: JSON.stringify(name),
-    };
-    return { ...acc, ...def };
-  }, {} as Record<string, any>);
+  const { command, forgeConfig } = env
+  const names = forgeConfig.renderer.filter(({ name }) => name != null).map(({ name }) => name!)
+  const defineKeys = getDefineKeys(names)
+  const define = Object.entries(defineKeys).reduce(
+    (acc, [name, keys]) => {
+      const { VITE_DEV_SERVER_URL, VITE_NAME } = keys
+      const def = {
+        [VITE_DEV_SERVER_URL]:
+          command === 'serve' ? JSON.stringify(process.env[VITE_DEV_SERVER_URL]) : undefined,
+        [VITE_NAME]: JSON.stringify(name)
+      }
+      return { ...acc, ...def }
+    },
+    {} as Record<string, any>
+  )
 
-  return define;
+  return define
 }
 
 export function pluginExposeRenderer(name: string): Plugin {
-  const { VITE_DEV_SERVER_URL } = getDefineKeys([name])[name];
+  const { VITE_DEV_SERVER_URL } = getDefineKeys([name])[name]
 
   return {
     name: '@electron-forge/plugin-vite:expose-renderer',
     configureServer(server) {
-      process.viteDevServers ??= {};
+      process.viteDevServers ??= {}
       // Expose server for preload scripts hot reload.
-      process.viteDevServers[name] = server;
+      process.viteDevServers[name] = server
 
       server.httpServer?.once('listening', () => {
-        const addressInfo = server.httpServer!.address() as AddressInfo;
+        const addressInfo = server.httpServer!.address() as AddressInfo
         // Expose env constant for main process use.
-        process.env[VITE_DEV_SERVER_URL] = `http://localhost:${addressInfo?.port}`;
-      });
-    },
-  };
+        process.env[VITE_DEV_SERVER_URL] = `http://localhost:${addressInfo?.port}`
+      })
+    }
+  }
 }
 
 export function pluginHotRestart(command: 'reload' | 'restart'): Plugin {
@@ -81,13 +88,13 @@ export function pluginHotRestart(command: 'reload' | 'restart'): Plugin {
       if (command === 'reload') {
         for (const server of Object.values(process.viteDevServers)) {
           // Preload scripts hot reload.
-          server.ws.send({ type: 'full-reload' });
+          server.ws.send({ type: 'full-reload' })
         }
       } else {
         // Main process hot restart.
         // https://github.com/electron/forge/blob/v7.2.0/packages/api/core/src/api/start.ts#L216-L223
-        process.stdin.emit('data', 'rs');
+        process.stdin.emit('data', 'rs')
       }
-    },
-  };
+    }
+  }
 }
diff --git a/vite.renderer.config.mts b/vite.renderer.config.mts
@@ -1,31 +1,31 @@
-import type { ConfigEnv, UserConfig } from 'vite';
-import { defineConfig, loadEnv } from 'vite';
-import { pluginExposeRenderer } from './vite.base.config';
+import type { ConfigEnv, UserConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
+import { pluginExposeRenderer } from './vite.base.config'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite';
-import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import Components from 'unplugin-vue-components/vite'
+import { PrimeVueResolver } from '@primevue/auto-import-resolver'
 import vitePluginVueDevtool from 'vite-plugin-vue-devtools'
-import { sentryVitePlugin } from '@sentry/vite-plugin';
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
-  const forgeEnv = env as ConfigEnv<'renderer'>;
-  const { root, mode, forgeConfigSelf } = forgeEnv;
-  const name = forgeConfigSelf.name ?? '';
+  const forgeEnv = env as ConfigEnv<'renderer'>
+  const { root, mode, forgeConfigSelf } = forgeEnv
+  const name = forgeConfigSelf.name ?? ''
 
   const environment = loadEnv(env.mode, process.cwd(), '')
 
+  console.log('environment.SUPABASE_URL', environment.SUPABASE_URL)
+
   const plugins = [
     pluginExposeRenderer(name),
     tsconfigPaths(),
     vue(),
     Components({
-      resolvers: [
-        PrimeVueResolver()
-      ]
+      resolvers: [PrimeVueResolver()]
     }),
-    vitePluginVueDevtool(),
+    vitePluginVueDevtool()
     // nodePolyfills(),
   ]
 
@@ -34,9 +34,9 @@ export default defineConfig((env) => {
   if (tag) {
     plugins.push(
       sentryVitePlugin({
-        org: "armaldio",
-        project: "cyn",
-        authToken: environment.SENTRY_AUTH_TOKEN,
+        org: 'armaldio',
+        project: 'cyn',
+        authToken: environment.SENTRY_AUTH_TOKEN
       })
     )
   }
@@ -45,17 +45,22 @@ export default defineConfig((env) => {
     root,
     mode,
     base: './',
+    define: {
+      __SUPABASE_URL__: JSON.stringify(environment.SUPABASE_URL),
+      __SUPABASE_ANON_KEY__: JSON.stringify(environment.SUPABASE_ANON_KEY),
+      __SUPABASE_PROJECT_ID__: JSON.stringify(environment.SUPABASE_PROJECT_ID)
+    },
     build: {
       outDir: `.vite/renderer/${name}`,
-      sourcemap: true,
+      sourcemap: true
     },
     optimizeDeps: {
-      include: ['@codemirror/state', '@codemirror/view'],
+      include: ['@codemirror/state', '@codemirror/view']
     },
     plugins,
     resolve: {
-      preserveSymlinks: true,
+      preserveSymlinks: true
     },
-    clearScreen: false,
-  } as UserConfig;
-});
+    clearScreen: false
+  } as UserConfig
+})