@nextsparkjs/core 0.1.0-beta.187 → 0.1.0-beta.189

package/scripts/build/registry/generators/identifier.mjs

@@ -0,0 +1,28 @@
+/**
+ * Identifier Safety
+ *
+ * Registries import user-named things — themes, plugins, blocks — under aliases
+ * built from those names. The names come from slugs, so they carry whatever a
+ * directory name allows: hyphens, dots, and a leading digit ('7startups').
+ *
+ * Replacing hyphens is not enough. `as 7startupsAppConfig` is a parse error,
+ * and because every route reaches the app through these registries, one bad
+ * alias takes down the whole project rather than just that theme.
+ *
+ * @module core/scripts/build/registry/generators/identifier
+ */
+
+/**
+ * Turn a name into a valid JavaScript identifier.
+ *
+ * Only used to build aliases, never to look anything up: the real name stays
+ * in the string keys the registry is indexed by.
+ *
+ * @param {string} name
+ * @returns {string}
+ */
+export function toSafeIdentifier(name) {
+  const cleaned = String(name).replace(/[^A-Za-z0-9_$]/g, '_')
+  if (cleaned === '') return '_'
+  return /^[0-9]/.test(cleaned) ? `_${cleaned}` : cleaned
+}

package/scripts/build/registry/generators/index.mjs

@@ -12,6 +12,7 @@ export { generateEntityRegistry, generateEntityRegistryClient } from './entity-r
 export { generateThemeRegistry } from './theme-registry.mjs'
 export { generateTemplateRegistry, generateTemplateRegistryClient } from './template-registry.mjs'
 export { generateBlockRegistry } from './block-registry.mjs'
+export { generateIconRegistry } from './icon-registry.mjs'
 export { generateMiddlewareRegistry } from './middleware-registry.mjs'
 export { generateTranslationRegistry } from './translation-registry.mjs'
 export { generateRouteHandlersRegistry } from './route-handlers.mjs'

package/scripts/build/registry/generators/plugin-registry.mjs

@@ -7,6 +7,7 @@
  */
 
 import { join } from 'path'
+import { toSafeIdentifier } from './identifier.mjs'
 import { convertCorePath } from '../config.mjs'
 
 /**
@@ -27,7 +28,7 @@ export function generatePluginRegistry(plugins, config) {
   const pagesServerImports = plugins
     .filter(p => p.hasPagesServer)
     .map(plugin =>
-      `import { devtoolsPage as ${plugin.name.replace(/-/g, '_')}DevtoolsPage, superadminPage as ${plugin.name.replace(/-/g, '_')}SuperadminPage } from '@/contents/plugins/${plugin.name}/plugin.pages.server'`
+      `import { devtoolsPage as ${toSafeIdentifier(plugin.name)}DevtoolsPage, superadminPage as ${toSafeIdentifier(plugin.name)}SuperadminPage } from '@/contents/plugins/${plugin.name}/plugin.pages.server'`
     )
     .join('\n')
 
@@ -150,7 +151,7 @@ export type PluginName = keyof typeof PLUGIN_REGISTRY
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PLUGIN_DEVTOOLS_PAGES: Record<string, any> = {
-${plugins.filter(p => p.hasPagesServer).map(p => `  '${p.name}': ${p.name.replace(/-/g, '_')}DevtoolsPage,`).join('\n')}
+${plugins.filter(p => p.hasPagesServer).map(p => `  '${p.name}': ${toSafeIdentifier(p.name)}DevtoolsPage,`).join('\n')}
 }
 
 // Maps plugin names to their superadmin page components.
@@ -159,7 +160,7 @@ ${plugins.filter(p => p.hasPagesServer).map(p => `  '${p.name}': ${p.name.replac
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PLUGIN_SUPERADMIN_PAGES: Record<string, any> = {
-${plugins.filter(p => p.hasPagesServer).map(p => `  '${p.name}': ${p.name.replace(/-/g, '_')}SuperadminPage,`).join('\n')}
+${plugins.filter(p => p.hasPagesServer).map(p => `  '${p.name}': ${toSafeIdentifier(p.name)}SuperadminPage,`).join('\n')}
 }
 
 // ==================== Navigation Helpers ====================

package/scripts/build/registry/generators/scheduled-actions-registry.mjs

@@ -10,6 +10,8 @@
  * @module core/scripts/build/registry/generators/scheduled-actions-registry
  */
 
+import { toSafeIdentifier } from './identifier.mjs'
+
 /**
  * Generate the scheduled actions registry file
  * @param {Array} themes - Discovered themes with hasScheduledActions property
@@ -22,13 +24,13 @@ export function generateScheduledActionsRegistry(themes, config) {
 
   // Generate imports for each theme with scheduled actions
   const imports = themesWithScheduledActions.map(theme => {
-    const safeThemeName = theme.name.replace(/-/g, '_')
+    const safeThemeName = toSafeIdentifier(theme.name)
     return `import * as ${safeThemeName}ScheduledActions from '${theme.scheduledActionsPath}'`
   }).join('\n')
 
   // Generate the registry entries
   const registryEntries = themesWithScheduledActions.map(theme => {
-    const safeThemeName = theme.name.replace(/-/g, '_')
+    const safeThemeName = toSafeIdentifier(theme.name)
     return `  '${theme.name}': {
     registerAllHandlers: ${safeThemeName}ScheduledActions.registerAllHandlers,
     registerRecurringActions: ${safeThemeName}ScheduledActions.registerRecurringActions,

package/scripts/build/registry/generators/template-registry.mjs

@@ -44,11 +44,11 @@ export function generateTemplateRegistry(templates, config) {
     templatesByPath[appPath].sort((a, b) => b.priority - a.priority)
   })
 
-  // Generate dynamic imports only for templates that can override components
-  const templateImports = Object.entries(templatesByPath)
-    .map(([appPath, pathTemplates], index) => {
+  // Generate registry entries. Each component is a deferred import, so a route
+  // pulls in the template it renders and no others.
+  const registryEntries = Object.entries(templatesByPath)
+    .map(([appPath, pathTemplates]) => {
       const highestPriorityTemplate = pathTemplates[0]
-      const safeName = `Template_${index}`
       // Strip .tsx/.ts extension - Next.js resolves extensions automatically on all platforms
       let templatePath = highestPriorityTemplate.templatePath
       if (templatePath.endsWith('.tsx')) {
@@ -57,25 +57,12 @@ export function generateTemplateRegistry(templates, config) {
         templatePath = templatePath.slice(0, -3)
       }
 
-      // Skip import for metadata-only templates (PROTECTED_RENDER or standalone .meta.ts)
+      // Metadata-only templates (PROTECTED_RENDER or standalone .meta.ts) have
+      // no component to load
       const isMetaOnly = highestPriorityTemplate.fileName?.endsWith('.meta.ts')
-      if (!canOverrideComponent(appPath) || isMetaOnly) {
-        return `// ${safeName} skipped - metadata-only${isMetaOnly ? ' (standalone .meta.ts)' : ' (PROTECTED_RENDER)'}`
-      }
-
-      return `import ${safeName} from '${templatePath}'`
-    })
-    .join('\n')
-
-  // Generate registry entries
-  const registryEntries = Object.entries(templatesByPath)
-    .map(([appPath, pathTemplates], index) => {
-      const highestPriorityTemplate = pathTemplates[0]
-      const safeName = `Template_${index}`
-
-      // For metadata-only templates (PROTECTED_RENDER or standalone .meta.ts), don't reference component
-      const isMetaOnly = highestPriorityTemplate.fileName?.endsWith('.meta.ts')
-      const componentRef = (!canOverrideComponent(appPath) || isMetaOnly) ? 'null' : safeName
+      const componentRef = (!canOverrideComponent(appPath) || isMetaOnly)
+        ? 'null'
+        : `lazyTemplate('${appPath}', () => import('${templatePath}'))`
 
       return `  '${appPath}': {
     appPath: '${appPath}',
@@ -107,7 +94,35 @@ export function generateTemplateRegistry(templates, config) {
  * DO NOT EDIT - This file is auto-generated by scripts/build-registry.mjs
  */
 
-${templateImports}
+import React from 'react'
+
+/**
+ * Wrap a template module in an async Server Component that imports it while
+ * rendering, so a route's bundle carries the template it renders instead of
+ * every template in the app.
+ *
+ * Deliberately not next/dynamic: that wraps the component in a Suspense
+ * boundary, which would let a response commit a 200 before a template's own
+ * notFound() could run (#129). An async component has no such boundary — it
+ * awaits exactly like the data fetching these routes already do.
+ */
+function lazyTemplate(appPath: string, loader: () => Promise<{ default: any }>) {
+  return async function TemplateOverride(props: any) {
+    const templateModule = await loader()
+
+    // A template with no default export used to fall back to the app's own
+    // component; now that the module is only read at render time, name the
+    // template that is wrong instead of failing as an invalid element type.
+    if (!templateModule.default) {
+      throw new Error(
+        'Template override for "' + appPath + '" has no default export. ' +
+        'Add a default export to the template, or remove it from the theme.'
+      )
+    }
+
+    return React.createElement(templateModule.default, props)
+  }
+}
 
 export interface TemplateOverride {
   name: string
@@ -200,7 +215,7 @@ async function hasServerOnlyExports(filePath) {
 }
 
 /**
- * Generate client-safe template registry with static imports
+ * Generate client-safe template registry with deferred imports
  * Only includes page templates that can be safely imported in client components
  * Excludes templates with server-only exports (generateMetadata, revalidate, etc.)
  * @param {Array} templates - Discovered templates
@@ -256,11 +271,11 @@ export async function generateTemplateRegistryClient(templates, config) {
   const clientCompatibleTemplatesResults = await Promise.all(clientCompatibleTemplatesPromises)
   const clientCompatibleTemplates = clientCompatibleTemplatesResults.filter(Boolean)
 
-  // Generate static imports
-  const templateImports = clientCompatibleTemplates
-    .map(([appPath, pathTemplates], index) => {
+  // Generate registry entries as deferred imports, so a route loads the
+  // template it renders and no others
+  const registryEntries = clientCompatibleTemplates
+    .map(([appPath, pathTemplates]) => {
       const template = pathTemplates[0]
-      const safeName = `ClientTemplate_${index}`
       // Strip .tsx/.ts extension - Next.js resolves extensions automatically on all platforms
       let templatePath = template.templatePath
       if (templatePath.endsWith('.tsx')) {
@@ -268,15 +283,7 @@ export async function generateTemplateRegistryClient(templates, config) {
       } else if (templatePath.endsWith('.ts')) {
         templatePath = templatePath.slice(0, -3)
       }
-      return `import ${safeName} from '${templatePath}'`
-    })
-    .join('\n')
-
-  // Generate registry entries with direct component references
-  const registryEntries = clientCompatibleTemplates
-    .map(([appPath, pathTemplates], index) => {
-      const safeName = `ClientTemplate_${index}`
-      return `  '${appPath}': ${safeName}`
+      return `  '${appPath}': dynamic(() => import('${templatePath}'))`
     })
     .join(',\n')
 
@@ -292,11 +299,12 @@ export async function generateTemplateRegistryClient(templates, config) {
 'use client'
 
 import { ComponentType } from 'react'
+import dynamic from 'next/dynamic'
 import { isProtectedPath } from '${convertCorePath('@/core/config/protected-paths', outputFilePath, config)}'
 
-${templateImports}
-
-// Client-safe registry with static imports (auto-generated)
+// Client-safe registry of deferred imports (auto-generated).
+// next/dynamic rather than a static import: these are client components, so
+// the lazy binding needs the Suspense boundary next/dynamic provides.
 const CLIENT_TEMPLATE_REGISTRY: Record<string, ComponentType<any>> = {
 ${registryEntries}
 }
@@ -309,7 +317,7 @@ export function hasTemplateOverrideClient(appPath: string): boolean {
 }
 
 /**
- * Get template component with static import (client-safe)
+ * Get template component (client-safe)
  * Use this in client components to avoid metadata conflicts
  */
 export function getTemplateOrDefaultClient<T extends ComponentType<any>>(

package/scripts/build/registry/generators/theme-registry.mjs

@@ -15,6 +15,8 @@ import { convertCorePath } from '../config.mjs'
  * @param {object} config - Configuration object from getConfig()
  * @returns {string} Generated TypeScript content
  */
+import { toSafeIdentifier } from './identifier.mjs'
+
 export function generateThemeRegistry(themes, config) {
   const outputFilePath = join(config.outputDir, 'theme-registry.ts')
   // Generate theme config imports
@@ -28,8 +30,7 @@ export function generateThemeRegistry(themes, config) {
   const dashboardImports = themes
     .filter(theme => theme.hasDashboardConfig)
     .map(theme => {
-      // Convert theme name to valid JavaScript identifier
-      const safeThemeName = theme.name.replace(/-/g, '_')
+      const safeThemeName = toSafeIdentifier(theme.name)
       return `import { ${theme.dashboardConfigExportName || 'DASHBOARD_CONFIG'} as ${safeThemeName}DashboardConfig } from '${theme.dashboardConfigPath}'`
     }).join('\n')
 
@@ -37,8 +38,7 @@ export function generateThemeRegistry(themes, config) {
   const appImports = themes
     .filter(theme => theme.hasAppConfig)
     .map(theme => {
-      // Convert theme name to valid JavaScript identifier
-      const safeThemeName = theme.name.replace(/-/g, '_')
+      const safeThemeName = toSafeIdentifier(theme.name)
       return `import { ${theme.appConfigExportName || 'APP_CONFIG_OVERRIDES'} as ${safeThemeName}AppConfig } from '${theme.appConfigPath}'`
     }).join('\n')
 
@@ -46,8 +46,7 @@ export function generateThemeRegistry(themes, config) {
   const devImports = themes
     .filter(theme => theme.hasDevConfig)
     .map(theme => {
-      // Convert theme name to valid JavaScript identifier
-      const safeThemeName = theme.name.replace(/-/g, '_')
+      const safeThemeName = toSafeIdentifier(theme.name)
       return `import { ${theme.devConfigExportName || 'DEV_CONFIG_OVERRIDES'} as ${safeThemeName}DevConfig } from '${theme.devConfigPath}'`
     }).join('\n')
 
@@ -59,7 +58,7 @@ export function generateThemeRegistry(themes, config) {
 
   const registryEntries = themes.map(theme => {
     const configName = theme.exportName || `${theme.name}ThemeConfig`
-    const safeThemeName = theme.name.replace(/-/g, '_')
+    const safeThemeName = toSafeIdentifier(theme.name)
     const dashboardConfigName = theme.hasDashboardConfig ? `${safeThemeName}DashboardConfig` : 'null'
     const appConfigName = theme.hasAppConfig ? `${safeThemeName}AppConfig` : 'null'
     const devConfigName = theme.hasDevConfig ? `${safeThemeName}DevConfig` : 'null'