* feat: add Web Push API support and PWA integration Add web Push API with subscribe/unsubscribe and visibility endpoints Introduce usePushVisibilityBeacon and useSessionDeepLink hooks Integrate PWA with service worker, registerSW, and VAPID key persistence * feat: add heartbeat visibility beacon for web runtime Add a 10s heartbeat to ping visibility while visible Subscribe to visibilitychange, focus, blur, pageshow, and pagehide events to report state Clear heartbeat interval on unmount to avoid leaks
96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { defineConfig } from 'vite';
|
|
import react from '@vitejs/plugin-react';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { readFileSync } from 'node:fs';
|
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
import { themeStoragePlugin } from '../../vite-theme-plugin';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const packageJson = JSON.parse(readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
|
|
|
|
export default defineConfig({
|
|
root: path.resolve(__dirname, '.'),
|
|
plugins: [
|
|
react(),
|
|
themeStoragePlugin(),
|
|
VitePWA({
|
|
strategies: 'injectManifest',
|
|
srcDir: 'src',
|
|
filename: 'sw.ts',
|
|
registerType: 'autoUpdate',
|
|
injectRegister: false,
|
|
manifest: false,
|
|
injectManifest: {
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2,ttf,otf,eot}'],
|
|
// iOS Safari/PWA is much more reliable with a classic (non-module) SW bundle.
|
|
rollupFormat: 'iife',
|
|
// We already keep a custom manifest in index.html
|
|
injectionPoint: undefined,
|
|
},
|
|
devOptions: {
|
|
enabled: true,
|
|
type: 'module',
|
|
},
|
|
}),
|
|
],
|
|
resolve: {
|
|
alias: [
|
|
{ find: '@opencode-ai/sdk/v2', replacement: path.resolve(__dirname, '../../node_modules/@opencode-ai/sdk/dist/v2/client.js') },
|
|
{ find: '@openchamber/ui', replacement: path.resolve(__dirname, '../ui/src') },
|
|
{ find: '@web', replacement: path.resolve(__dirname, './src') },
|
|
{ find: '@', replacement: path.resolve(__dirname, '../ui/src') },
|
|
],
|
|
},
|
|
worker: {
|
|
format: 'es',
|
|
},
|
|
define: {
|
|
'process.env': {},
|
|
global: 'globalThis',
|
|
__APP_VERSION__: JSON.stringify(packageJson.version),
|
|
},
|
|
optimizeDeps: {
|
|
include: ['@opencode-ai/sdk/v2'],
|
|
},
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://127.0.0.1:3001',
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
outDir: path.resolve(__dirname, 'dist'),
|
|
emptyOutDir: true,
|
|
chunkSizeWarningLimit: 1200,
|
|
rollupOptions: {
|
|
external: ['node:child_process', 'node:fs', 'node:path', 'node:url'],
|
|
output: {
|
|
manualChunks(id) {
|
|
if (!id.includes('node_modules')) return undefined;
|
|
|
|
const match = id.split('node_modules/')[1];
|
|
if (!match) return undefined;
|
|
|
|
const segments = match.split('/');
|
|
const packageName = match.startsWith('@') ? `${segments[0]}/${segments[1]}` : segments[0];
|
|
|
|
if (packageName === 'react' || packageName === 'react-dom') return 'vendor-react';
|
|
if (packageName === 'zustand' || packageName === 'zustand/middleware') return 'vendor-zustand';
|
|
|
|
if (packageName === '@opencode-ai/sdk') return 'vendor-opencode-sdk';
|
|
if (packageName.includes('remark') || packageName.includes('rehype') || packageName === 'react-markdown') return 'vendor-markdown';
|
|
if (packageName.startsWith('@radix-ui')) return 'vendor-radix';
|
|
if (packageName.includes('react-syntax-highlighter') || packageName.includes('highlight.js')) return 'vendor-syntax';
|
|
|
|
const sanitized = packageName.replace(/^@/, '').replace(/\//g, '-');
|
|
return `vendor-${sanitized}`;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|