git/metabuilder
1
0
Fork 0
mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-24 22:04:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

code: tsx,nextjs,frontends (2 files)

Browse Source
This commit is contained in:
Richard Ward
2025-12-31 01:31:46 +00:00
parent ab503c1f0e
commit f6038ee582
2 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontends/nextjs/src/app/layout.tsx
View File

@@ -2,8 +2,25 @@ import '@/main.scss'
import type { Metadata, Viewport } from 'next'
import { PackageStyleLoader } from '@/components/PackageStyleLoader'
import { Providers } from './providers'
// List of packages to load styles from
const PACKAGES_WITH_STYLES = [
'shared',
'ui_home',
'ui_header',
'ui_footer',
'ui_level2',
'ui_level3',
'ui_level4',
'ui_level5',
'ui_level6',
'admin_panel',
'code_editor',
'css_designer',
]
export const metadata: Metadata = {
title: {
default: 'MetaBuilder - Data-Driven Application Platform',
@@ -41,6 +58,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
/>
</head>
<body>
<PackageStyleLoader packages={PACKAGES_WITH_STYLES} />
<Providers>{children}</Providers>
</body>
</html>

45
frontends/nextjs/src/components/PackageStyleLoader.tsx Normal file
View File

@@ -0,0 +1,45 @@
'use client'
/**
* Package Style Loader
*
* Dynamically loads and injects V2 schema styles from packages
*/
import { useEffect } from 'react'
import { loadAndInjectStyles } from '@/lib/compiler'
interface PackageStyleLoaderProps {
packages: string[]
}
export function PackageStyleLoader({ packages }: PackageStyleLoaderProps) {
useEffect(() => {
async function loadStyles() {
console.log(`📦 Loading styles for ${packages.length} packages...`)
const results = await Promise.all(
packages.map(async (packageId) => {
try {
const css = await loadAndInjectStyles(packageId)
console.log(`✓ ${packageId} (${css.length} bytes)`)
return { packageId, success: true, size: css.length }
} catch (error) {
console.warn(`✗ ${packageId}:`, error)
return { packageId, success: false, size: 0 }
}
})
)
const successful = results.filter(r => r.success)
const totalSize = successful.reduce((sum, r) => sum + r.size, 0)
console.log(`✅ ${successful.length}/${packages.length} packages loaded (${(totalSize / 1024).toFixed(1)}KB)`)
}
if (packages.length > 0) {
loadStyles()
}
}, [packages])
return null
}