@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
195 lines (194 loc) • 7.58 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @fileoverview Lazy-Loaded Template Components
*
* This module provides lazy-loaded versions of template components for code splitting
* and performance optimization. These components load on-demand to reduce initial bundle size.
*/
import React, { Suspense } from 'react';
import { createChunkName } from '../utils/lazy-loading';
import { LoadingFallback, CmsLoadingFallback } from '../components/LoadingComponents';
// ============================================================================
// LAZY TEMPLATE COMPONENTS
// ============================================================================
/**
* Lazy-loaded DefaultTemplateV2 component
*/
export const LazyDefaultTemplateV2 = React.lazy(() => import('./DefaultTemplateV2').then(module => ({
default: module.DefaultTemplateV2
})));
/**
* Lazy-loaded SimpleDefaultTemplate component
*/
export const LazySimpleDefaultTemplate = React.lazy(() => import('./SimpleDefaultTemplate').then(module => ({
default: module.SimpleDefaultTemplate
})));
/**
* Lazy-loaded BlogTemplate component
*/
export const LazyBlogTemplate = React.lazy(() => import('./BlogTemplate').then(module => ({
default: module.BlogTemplate
})));
/**
* Lazy-loaded PageTemplate component
*/
export const LazyPageTemplate = React.lazy(() => import('./PageTemplate').then(module => ({
default: module.PageTemplate
})));
/**
* Lazy-loaded PostTemplate component
*/
export const LazyPostTemplate = React.lazy(() => import('./PostTemplate').then(module => ({
default: module.PostTemplate
})));
// ============================================================================
// WRAPPED COMPONENTS WITH SUSPENSE
// ============================================================================
/**
* DefaultTemplateV2 with Suspense wrapper
*/
export const DefaultTemplateV2WithSuspense = (props) => (_jsx(Suspense, { fallback: _jsx(CmsLoadingFallback, { contentType: "article" }), children: _jsx(LazyDefaultTemplateV2, { ...props }) }));
/**
* SimpleDefaultTemplate with Suspense wrapper
*/
export const SimpleDefaultTemplateWithSuspense = (props) => (_jsx(Suspense, { fallback: _jsx(CmsLoadingFallback, { contentType: "page" }), children: _jsx(LazySimpleDefaultTemplate, { ...props }) }));
/**
* BlogTemplate with Suspense wrapper
*/
export const BlogTemplateWithSuspense = (props) => (_jsx(Suspense, { fallback: _jsx(CmsLoadingFallback, { contentType: "blog" }), children: _jsx(LazyBlogTemplate, { ...props }) }));
/**
* PageTemplate with Suspense wrapper
*/
export const PageTemplateWithSuspense = (props) => (_jsx(Suspense, { fallback: _jsx(CmsLoadingFallback, { contentType: "page" }), children: _jsx(LazyPageTemplate, { ...props }) }));
/**
* PostTemplate with Suspense wrapper
*/
export const PostTemplateWithSuspense = (props) => (_jsx(Suspense, { fallback: _jsx(CmsLoadingFallback, { contentType: "article" }), children: _jsx(LazyPostTemplate, { ...props }) }));
// ============================================================================
// TEMPLATE REGISTRY WITH LAZY LOADING
// ============================================================================
/**
* Template mapping for lazy loading
*/
export const LAZY_TEMPLATE_MAP = {
'default-v2': LazyDefaultTemplateV2,
'simple-default': LazySimpleDefaultTemplate,
'blog': LazyBlogTemplate,
'page': LazyPageTemplate,
'post': LazyPostTemplate,
};
/**
* Template mapping with Suspense wrappers
*/
export const TEMPLATE_MAP_WITH_SUSPENSE = {
'default-v2': DefaultTemplateV2WithSuspense,
'simple-default': SimpleDefaultTemplateWithSuspense,
'blog': BlogTemplateWithSuspense,
'page': PageTemplateWithSuspense,
'post': PostTemplateWithSuspense,
};
/**
* Preload all templates
*/
export const preloadAllTemplates = async () => {
const preloadPromises = [
import('./DefaultTemplateV2'),
import('./SimpleDefaultTemplate'),
import('./BlogTemplate'),
import('./PageTemplate'),
import('./PostTemplate'),
];
await Promise.allSettled(preloadPromises);
};
/**
* Preload specific template
*/
export const preloadTemplate = async (templateName) => {
switch (templateName) {
case 'default-v2':
await import('./DefaultTemplateV2');
break;
case 'simple-default':
await import('./SimpleDefaultTemplate');
break;
case 'blog':
await import('./BlogTemplate');
break;
case 'page':
await import('./PageTemplate');
break;
case 'post':
await import('./PostTemplate');
break;
}
};
/**
* Dynamic template loader component
*/
export const DynamicTemplateLoader = ({ templateName = 'default-v2', showLoading = true, loadingComponent: LoadingComponent, preloadOnHover = false, ...templateProps }) => {
const [isHovered, setIsHovered] = React.useState(false);
// Preload on hover
React.useEffect(() => {
if (preloadOnHover && isHovered) {
preloadTemplate(templateName).catch(() => {
// Ignore preload errors
});
}
}, [preloadOnHover, isHovered, templateName]);
const Template = LAZY_TEMPLATE_MAP[templateName];
const fallback = LoadingComponent ? (_jsx(LoadingComponent, {})) : showLoading ? (_jsx(CmsLoadingFallback, { contentType: "content" })) : null;
const templateElement = (_jsx(Suspense, { fallback: fallback, children: _jsx(Template, { ...templateProps }) }));
if (preloadOnHover) {
return (_jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: { display: 'contents' }, children: templateElement }));
}
return templateElement;
};
// ============================================================================
// LAZY ERROR PAGES
// ============================================================================
/**
* Lazy-loaded error pages for better performance
*/
export const LazyErrorPages = {
NotFoundPage: React.lazy(() => import('../components/ErrorPages').then(module => ({
default: module.NotFoundPage
}))),
ServerErrorPage: React.lazy(() => import('../components/ErrorPages').then(module => ({
default: module.ServerErrorPage
}))),
};
/**
* Error page with Suspense wrapper
*/
export const ErrorPageWithSuspense = ({ type, fallback, ...props }) => {
const ErrorComponent = LazyErrorPages[type];
return (_jsx(Suspense, { fallback: fallback || _jsx(LoadingFallback, { message: "Loading error page..." }), children: _jsx(ErrorComponent, { ...props }) }));
};
// ============================================================================
// UTILITY FUNCTIONS
// ============================================================================
/**
* Get chunk name for template
*/
export const getTemplateChunkName = (templateName) => {
return createChunkName(templateName, 'template');
};
/**
* Check if template is preloaded
*/
export const isTemplatePreloaded = (_templateName) => {
// This is a simplified check - in a real implementation you'd track loaded modules
return false;
};
/**
* Track template loading performance
*/
export const trackTemplateLoad = (templateName, startTime) => {
const loadTime = performance.now() - startTime;
return {
templateName,
loadTime,
size: 0, // Would be calculated based on actual bundle size
cached: false, // Would check if template was cached
};
};