Update
This commit is contained in:
@@ -1,15 +1,30 @@
|
|||||||
import AuthUser from '@/modules/auth/auth-user';
|
import AuthUser from '@/modules/auth/auth-user';
|
||||||
import Editor from '@/modules/editor/editor.jsx';
|
import { useEffect, useState } from 'react';
|
||||||
import FAQDiscord from './partials/FAQDiscord.jsx';
|
import FAQDiscord from './partials/FAQDiscord.jsx';
|
||||||
import Features from './partials/Features.jsx';
|
import Features from './partials/Features.jsx';
|
||||||
import Footer from './partials/Footer.jsx';
|
import Footer from './partials/Footer.jsx';
|
||||||
import Hero from './partials/Hero.jsx';
|
import Hero from './partials/Hero.jsx';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
|
const [isClient, setIsClient] = useState(false);
|
||||||
|
const [Editor, setEditor] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsClient(true);
|
||||||
|
// Dynamically import Editor only on client-side to avoid SSR issues with Konva
|
||||||
|
import('@/modules/editor/editor.jsx').then((module) => {
|
||||||
|
setEditor(() => module.default);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
|
<div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
|
||||||
<div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
|
<div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
|
||||||
<Editor />
|
{isClient && Editor ? <Editor /> : (
|
||||||
|
<div className="h-96 flex items-center justify-center">
|
||||||
|
<div className="text-muted-foreground">Loading editor...</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-16">
|
<div className="space-y-16">
|
||||||
<Hero />
|
<Hero />
|
||||||
|
|||||||
121
vite.config.ts
121
vite.config.ts
@@ -39,79 +39,64 @@ export default defineConfig({
|
|||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: {
|
output: {
|
||||||
manualChunks: {
|
manualChunks: (id) => {
|
||||||
// React MUST be first and separate to avoid dependency issues
|
// Skip manual chunks for SSR builds to avoid conflicts
|
||||||
'react-vendor': ['react', 'react-dom'],
|
if (process.env.NODE_ENV === 'development' && id.includes('ssr')) {
|
||||||
|
return;
|
||||||
// Heavy libraries that can be safely separated
|
}
|
||||||
'ffmpeg': ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
|
|
||||||
'motion': ['motion'],
|
// React core - keep separate and first
|
||||||
'canvas': ['konva', 'react-konva', 'react-konva-utils'],
|
if (id.includes('react') || id.includes('react-dom')) {
|
||||||
'charts': ['recharts'],
|
return 'react-vendor';
|
||||||
|
}
|
||||||
// UI libraries that depend on React
|
|
||||||
'radix-ui': [
|
// Heavy libraries
|
||||||
'@radix-ui/react-accordion',
|
if (id.includes('@ffmpeg')) {
|
||||||
'@radix-ui/react-alert-dialog',
|
return 'ffmpeg';
|
||||||
'@radix-ui/react-aspect-ratio',
|
}
|
||||||
'@radix-ui/react-avatar',
|
if (id.includes('motion')) {
|
||||||
'@radix-ui/react-checkbox',
|
return 'motion';
|
||||||
'@radix-ui/react-collapsible',
|
}
|
||||||
'@radix-ui/react-context-menu',
|
if (id.includes('konva')) {
|
||||||
'@radix-ui/react-dialog',
|
return 'canvas';
|
||||||
'@radix-ui/react-dropdown-menu',
|
}
|
||||||
'@radix-ui/react-hover-card',
|
if (id.includes('recharts')) {
|
||||||
'@radix-ui/react-label',
|
return 'charts';
|
||||||
'@radix-ui/react-menubar',
|
}
|
||||||
'@radix-ui/react-navigation-menu',
|
|
||||||
'@radix-ui/react-popover',
|
// Radix UI components
|
||||||
'@radix-ui/react-progress',
|
if (id.includes('@radix-ui')) {
|
||||||
'@radix-ui/react-radio-group',
|
return 'radix-ui';
|
||||||
'@radix-ui/react-scroll-area',
|
}
|
||||||
'@radix-ui/react-select',
|
|
||||||
'@radix-ui/react-separator',
|
|
||||||
'@radix-ui/react-slider',
|
|
||||||
'@radix-ui/react-slot',
|
|
||||||
'@radix-ui/react-switch',
|
|
||||||
'@radix-ui/react-tabs',
|
|
||||||
'@radix-ui/react-toggle',
|
|
||||||
'@radix-ui/react-toggle-group',
|
|
||||||
'@radix-ui/react-tooltip'
|
|
||||||
],
|
|
||||||
|
|
||||||
// Form libraries
|
// Form libraries
|
||||||
'forms': ['react-hook-form', '@hookform/resolvers', 'zod'],
|
if (id.includes('react-hook-form') || id.includes('@hookform') || id.includes('zod')) {
|
||||||
|
return 'forms';
|
||||||
|
}
|
||||||
|
|
||||||
// UI utilities
|
// UI utilities
|
||||||
'ui-utils': [
|
if (id.includes('tailwind-merge') || id.includes('class-variance-authority') ||
|
||||||
'tailwind-merge',
|
id.includes('clsx') || id.includes('lucide-react') || id.includes('sonner') ||
|
||||||
'class-variance-authority',
|
id.includes('cmdk') || id.includes('next-themes')) {
|
||||||
'clsx',
|
return 'ui-utils';
|
||||||
'lucide-react',
|
}
|
||||||
'sonner',
|
|
||||||
'cmdk',
|
|
||||||
'next-themes'
|
|
||||||
],
|
|
||||||
|
|
||||||
// Other React components
|
// Other React components
|
||||||
'react-components': [
|
if (id.includes('react-day-picker') || id.includes('react-error-boundary') ||
|
||||||
'react-day-picker',
|
id.includes('embla-carousel-react') || id.includes('react-resizable-panels')) {
|
||||||
'react-error-boundary',
|
return 'react-components';
|
||||||
'embla-carousel-react',
|
}
|
||||||
'react-resizable-panels'
|
|
||||||
],
|
|
||||||
|
|
||||||
// Non-React utilities
|
// Non-React utilities
|
||||||
'utils': [
|
if (id.includes('date-fns') || id.includes('axios') || id.includes('mitt') ||
|
||||||
'date-fns',
|
id.includes('zustand') || id.includes('embla-carousel-autoplay')) {
|
||||||
'axios',
|
return 'utils';
|
||||||
'mitt',
|
}
|
||||||
'zustand',
|
|
||||||
'embla-carousel-autoplay'
|
|
||||||
],
|
|
||||||
|
|
||||||
// Inertia
|
// Inertia
|
||||||
'inertia': ['@inertiajs/react']
|
if (id.includes('@inertiajs')) {
|
||||||
|
return 'inertia';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user