@merkle-open/magnolia-headless-frontend-nextjs 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkle-open/magnolia-headless-frontend-nextjs",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Magnolia headless frontend nextJs",
   "license": "MIT",
   "author": "Merkle Inc.",
@@ -14,7 +14,8 @@
   "files": [
     "README.md",
     "index.ts",
-    "src"
+    "src",
+    "src/**/_README.md"
   ],
   "repository": {
     "type": "git",
@@ -49,11 +50,11 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
+    "jiti": "^2.6.1",
     "lint-staged": "^16.2.7",
     "prettier": "^3.8.1",
     "tsx": "^4.21.0",
-    "typescript-eslint": "^8.56.1",
-    "jiti": "^2.6.1"
+    "typescript-eslint": "^8.56.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,md,mdx,html,css}": "npm run format"

package/src/Constants.ts

@@ -1 +1,5 @@
 export const TOKEN_PREFIX = 'com.merkle.oss.magnolia.headless.';
+
+export function token(suffix: string): symbol {
+	return Symbol(TOKEN_PREFIX + suffix);
+}

package/src/Index.ts

@@ -4,5 +4,4 @@ export * from './config/_Index.ts';
 export * from './helper/_Index.ts';
 export * from './middleware/_Index.ts';
 export * from './templates/_Index.ts';
-export * from './Constants.ts';
 export * from './Dependencies.ts';

package/src/api/ErrorPageApi.ts

@@ -1,12 +1,11 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest } from 'next/server';
 import { inject, injectable } from 'tsyringe';
 import { ErrorType, MagnoliaPageRestClient } from '../helper/MagnoliaPageRestClient.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-
 @injectable()
 export class ErrorPageApi {
-	constructor(@inject(TOKEN_PREFIX + 'MagnoliaPageRestClient') private magnoliaPageRestClient: MagnoliaPageRestClient) {}
+	constructor(@inject(MagnoliaPageRestClient) private magnoliaPageRestClient: MagnoliaPageRestClient) {}
 
 	public async get(req: NextRequest, language: string): Promise<Response> {
 		const queryParams = req.nextUrl.searchParams;

package/src/api/RobotsTxtApi.ts

@@ -1,17 +1,16 @@
-import { RestClient } from '../helper/RestClient.ts';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest } from 'next/server';
+import { RestClient } from '../helper/RestClient.ts';
 import { inject, injectable } from 'tsyringe';
-import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 
 @injectable()
 export class RobotsTxtApi {
 	private readonly apisProvider: MagnoliaApiEndpointsProvider;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(RestClient) private restClient: RestClient,
 	) {
 		this.apisProvider = configProvider.get().magnoliaApisProvider;
 	}

package/src/api/SitemapApi.ts

@@ -1,17 +1,16 @@
-import { RestClient } from '../helper/RestClient.ts';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest } from 'next/server';
+import { RestClient } from '../helper/RestClient.ts';
 import { inject, injectable } from 'tsyringe';
-import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 
 @injectable()
 export class SitemapApi {
 	private readonly apisProvider: MagnoliaApiEndpointsProvider;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(RestClient) private restClient: RestClient,
 	) {
 		this.apisProvider = configProvider.get().magnoliaApisProvider;
 	}

package/src/api/_Dependencies.ts

@@ -3,10 +3,8 @@ import { ErrorPageApi } from './ErrorPageApi.ts';
 import { RobotsTxtApi } from './RobotsTxtApi.ts';
 import { SitemapApi } from './SitemapApi.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-
 export default function register(container: DependencyContainer) {
-	container.register(TOKEN_PREFIX + 'ErrorPageApi', { useClass: ErrorPageApi });
-	container.register(TOKEN_PREFIX + 'RobotsTxtApi', { useClass: RobotsTxtApi });
-	container.register(TOKEN_PREFIX + 'SitemapApi', { useClass: SitemapApi });
+	container.register(ErrorPageApi, { useClass: ErrorPageApi });
+	container.register(RobotsTxtApi, { useClass: RobotsTxtApi });
+	container.register(SitemapApi, { useClass: SitemapApi });
 }

package/src/config/ComponentMappingsProvider.ts

@@ -1,5 +1,8 @@
 import { ComponentMappings } from '@magnolia/react-editor';
+import { token } from '../Constants.ts';
 
 export interface ComponentMappingsProviderI {
 	getComponentMappings(): ComponentMappings;
 }
+
+export const COMPONENTS_MAPPINGS_PROVIDER_TOKEN = token('ComponentMappingsProviderI');

package/src/config/ConfigProvider.ts

@@ -1,3 +1,5 @@
+import { token } from '../Constants.ts';
+
 export interface MagnoliaApiEndpointsProvider {
 	annotationTemplates(): string;
 	pageContent(language: string): string;
@@ -33,3 +35,4 @@ export type Config = {
 export interface HeadlessConfigProviderI {
 	get(): Config;
 }
+export const HEADLESS_CONFIG_PROVIDER_TOKEN = token('HeadlessConfigProviderI');

package/src/config/Logger.ts

@@ -1,3 +1,5 @@
+import { token } from '../Constants.ts';
+
 export enum Level {
 	DEBUG = 'DEBUG',
 	INFO = 'INFO',
@@ -8,3 +10,4 @@ export enum Level {
 export interface LoggerI {
 	log(level: Level, message: string): void;
 }
+export const LOGGER_TOKEN = token('LoggerI');

package/src/config/StylesheetProvider.ts

@@ -1,3 +1,7 @@
+import { ExtendedMagnoliaContext } from '../helper/MagnoliaContextProvider.ts';
+import { token } from '../Constants.ts';
+
 export interface StylesheetProviderI {
-	get(theme: string): string;
+	get(magnoliaContext: ExtendedMagnoliaContext, theme: string): string[];
 }
+export const STYLESHEET_PROVIDER_TOKEN = token('StylesheetProviderI');

package/src/config/_Index.ts

@@ -1,4 +1,4 @@
 export * from './Logger.ts';
 export * from './ConfigProvider.ts';
 export * from './ComponentMappingsProvider.ts';
-export { type StylesheetProviderI } from './StylesheetProvider.ts';
+export * from './StylesheetProvider.ts';

package/src/config/_README.md

@@ -80,14 +80,15 @@ export class SampleComponentMappingsProvider implements ComponentMappingsProvide
 `/app/config/SampleStylesheetProvider.ts`
 
 ```typescript
-import { injectable } from 'tsyringe';
-import { StylesheetProviderI } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import {injectable} from 'tsyringe';
+import {StylesheetProviderI} from '@merkle-open/magnolia-headless-frontend-nextjs';
+import {ExtendedMagnoliaContext} from "./MagnoliaContextProvider";
 
 @injectable()
 export class SampleStylesheetProvider implements StylesheetProviderI {
-	public get(theme: string): string {
-		return `/css/theme/${theme}.min.css`;
-	}
+    public get(magnoliaContext: ExtendedMagnoliaContext, theme: string): string[] {
+        return [`/css/theme/${theme}.min.css`];
+    }
 }
 ```
 
@@ -97,19 +98,18 @@ export class SampleStylesheetProvider implements StylesheetProviderI {
 
 ```typescript
 import { DependencyContainer } from 'tsyringe';
-import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import {
+    HEADLESS_CONFIG_PROVIDER_TOKEN,
+    COMPONENTS_MAPPINGS_PROVIDER_TOKEN,
+    LOGGER_TOKEN,
+    STYLESHEET_PROVIDER_I_TOKEN
+} from '@merkle-open/magnolia-headless-frontend-nextjs';
 import { Logger } from '@merkle-open/magnolia-headless-frontend-nextjs';
 
 export default function register(container: DependencyContainer) {
-    container.register(TOKEN_PREFIX + 'HeadlessConfigProviderI', {
-        useClass: SampleHeadlessConfigProvider,
-    });
-    container.register(TOKEN_PREFIX + 'ComponentMappingsProviderI', {
-        useClass: SampleComponentMappingsProvider,
-    });
-    container.register(TOKEN_PREFIX + 'StylesheetProviderI', {
-        useClass: SampleStylesheetProvider,
-    });
-    container.register(TOKEN_PREFIX + 'LoggerI', { useClass: SampleLogger });
+    container.register(HEADLESS_CONFIG_PROVIDER_TOKEN, {useClass: SampleHeadlessConfigProvider});
+    container.register(COMPONENTS_MAPPINGS_PROVIDER_TOKEN, {useClass: SampleComponentMappingsProvider});
+    container.register(STYLESHEET_PROVIDER_I_TOKEN, {useClass: SampleStylesheetProvider});
+    container.register(LOGGER_TOKEN, { useClass: SampleLogger });
 }
 ```

package/src/dynamic-page/AbstractDynamicErrorPage.tsx

@@ -4,12 +4,12 @@ import { ReactNode } from 'react';
 import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
 import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.tsx';
 import { AbstractDynamicPage } from './AbstractDynamicPage.tsx';
-import { Logger } from '../helper/Logger.ts';
 import { RestClient } from '../helper/RestClient.ts';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
 import type { FrontendApiEndpointsProvider, HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
 import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+import { ThemeValidator } from '../helper/ThemeValidator.ts';
 
 export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 	private readonly frontendApisProvider: FrontendApiEndpointsProvider;
@@ -18,12 +18,12 @@ export abstract class AbstractDynamicErrorPage extends AbstractDynamicPage {
 		componentMappingsProvider: ComponentMappingsProviderI,
 		configProvider: HeadlessConfigProviderI,
 		StylesheetProviderI: StylesheetProviderI,
-		logger: Logger,
+		themeValidator: ThemeValidator,
 		private readonly restClient: RestClient,
 		private readonly staticErrorPage: StaticErrorPage,
 		protected readonly magnoliaContextProvider: MagnoliaContextProvider,
 	) {
-		super(componentMappingsProvider, configProvider, StylesheetProviderI, logger);
+		super(componentMappingsProvider, StylesheetProviderI, themeValidator);
 		this.frontendApisProvider = configProvider.get().frontendApisProvider;
 	}
 

package/src/dynamic-page/AbstractDynamicPage.tsx

@@ -4,22 +4,16 @@ import { MgnlTemplateAnnotations } from '@magnolia/frontend-helpers-base';
 import React, { ReactNode } from 'react';
 import { MagnoliaConfig, RefService } from '@magnolia/react-editor';
 import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
-import { Logger } from '../helper/Logger.ts';
-import type { HeadlessConfigProviderI, ThemesProvider } from '../config/ConfigProvider.ts';
 import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+import { ThemeValidator } from '../helper/ThemeValidator.ts';
 
 export abstract class AbstractDynamicPage {
-	private themesProvider: ThemesProvider;
-
 	protected constructor(
 		private readonly componentMappingsProvider: ComponentMappingsProviderI,
-		readonly configProvider: HeadlessConfigProviderI,
 		private readonly StylesheetProviderI: StylesheetProviderI,
-		private readonly logger: Logger,
-	) {
-		this.themesProvider = configProvider.get().themesProvider;
-	}
+		private readonly themeValidator: ThemeValidator,
+	) {}
 
 	protected renderBase(magnoliaContext: ExtendedMagnoliaContext, content: Content, templateAnnotations: MgnlTemplateAnnotations): ReactNode {
 		const config: MagnoliaConfig = {
@@ -32,22 +26,15 @@ export abstract class AbstractDynamicPage {
 		return (
 			<div>
 				{/* is moved to <head> see https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets */}
-				<link rel="stylesheet" href={this.getStylesheet(content)} precedence="high" />
+				{this.getStylesheet(magnoliaContext, content).map((stylesheet) => (
+					<link rel="stylesheet" href={stylesheet} precedence="high" />
+				))}
 				<EditablePage content={content} config={config} templateAnnotations={templateAnnotations} magnoliaContext={magnoliaContext} />
 			</div>
 		);
 	}
 
-	private getStylesheet(content: Content) {
-		return this.StylesheetProviderI.get(this.getValidatedTheme(content.theme));
-	}
-	private getValidatedTheme(theme?: string): string {
-		if (!theme || !this.themesProvider.getAll().includes(theme)) {
-			if (theme) {
-				this.logger.error(`Got invalid theme '${theme}' from magnolia! falling back to ${this.themesProvider.getFallback()}`);
-			}
-			return this.themesProvider.getFallback();
-		}
-		return theme;
+	private getStylesheet(magnoliaContext: ExtendedMagnoliaContext, content: Content): string[] {
+		return this.StylesheetProviderI.get(magnoliaContext, this.themeValidator.getValidatedTheme(content.theme));
 	}
 }

package/src/dynamic-page/DynamicErrorPage.tsx

@@ -3,32 +3,32 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
 import { inject, injectable } from 'tsyringe';
-import { Logger } from '../helper/Logger.ts';
 import { RestClient } from '../helper/RestClient.ts';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
-import type { HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
+import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 import { AbstractDynamicErrorPage } from './AbstractDynamicErrorPage.tsx';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
+import { type StylesheetProviderI, STYLESHEET_PROVIDER_TOKEN } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
 import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.tsx';
+import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
+import { ThemeValidator } from '../helper/ThemeValidator.ts';
 
 @injectable()
 export class DynamicErrorPage extends AbstractDynamicErrorPage {
 	constructor(
-		@inject(TOKEN_PREFIX + 'CombinedComponentMappingsProvider') componentMappingsProvider: ComponentMappingsProviderI,
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'StylesheetProviderI') StylesheetProviderI: StylesheetProviderI,
-		@inject(TOKEN_PREFIX + 'Logger') logger: Logger,
-		@inject(TOKEN_PREFIX + 'RestClient') restClient: RestClient,
-		@inject(TOKEN_PREFIX + 'StaticErrorPage') staticErrorPage: StaticErrorPage,
-		@inject(TOKEN_PREFIX + 'MagnoliaContextProvider') magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(CombinedComponentMappingsProvider) componentMappingsProvider: ComponentMappingsProviderI,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(STYLESHEET_PROVIDER_TOKEN) StylesheetProviderI: StylesheetProviderI,
+		@inject(ThemeValidator) themeValidator: ThemeValidator,
+		@inject(RestClient) restClient: RestClient,
+		@inject(StaticErrorPage) staticErrorPage: StaticErrorPage,
+		@inject(MagnoliaContextProvider) magnoliaContextProvider: MagnoliaContextProvider,
 	) {
-		super(componentMappingsProvider, configProvider, StylesheetProviderI, logger, restClient, staticErrorPage, magnoliaContextProvider);
+		super(componentMappingsProvider, configProvider, StylesheetProviderI, themeValidator, restClient, staticErrorPage, magnoliaContextProvider);
 	}
 
-	public async render(errorType: ErrorType): Promise<ReactNode> {
+	public render(errorType: ErrorType): ReactNode {
 		const [errorPage, setErrorPage] = useState(null);
 
 		useEffect(() => {

package/src/dynamic-page/DynamicErrorPageGlobal.tsx

@@ -1,31 +1,33 @@
+'use client';
+
 import { ReactNode, useEffect, useState } from 'react';
 import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
 import { inject, injectable } from 'tsyringe';
 import { DynamicPageLayout } from './DynamicPageLayout.tsx';
 import { AbstractDynamicErrorPage } from './AbstractDynamicErrorPage.tsx';
-import type { HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
+import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 import { RestClient } from '../helper/RestClient.ts';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
-import { Logger } from '../helper/Logger.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
+import { type StylesheetProviderI, STYLESHEET_PROVIDER_TOKEN } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
 import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.tsx';
+import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
+import { ThemeValidator } from '../helper/ThemeValidator.ts';
 
 @injectable()
 export class DynamicErrorPageGlobal extends AbstractDynamicErrorPage {
 	constructor(
-		@inject(TOKEN_PREFIX + 'CombinedComponentMappingsProvider') componentMappingsProvider: ComponentMappingsProviderI,
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'StylesheetProviderI') StylesheetProviderI: StylesheetProviderI,
-		@inject(TOKEN_PREFIX + 'Logger') logger: Logger,
-		@inject(TOKEN_PREFIX + 'RestClient') restClient: RestClient,
-		@inject(TOKEN_PREFIX + 'StaticErrorPage') staticErrorPage: StaticErrorPage,
-		@inject(TOKEN_PREFIX + 'MagnoliaContextProvider') magnoliaContextProvider: MagnoliaContextProvider,
-		@inject(TOKEN_PREFIX + 'DynamicPageLayout') private readonly dynamicPageLayout: DynamicPageLayout,
+		@inject(CombinedComponentMappingsProvider) componentMappingsProvider: ComponentMappingsProviderI,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(STYLESHEET_PROVIDER_TOKEN) StylesheetProviderI: StylesheetProviderI,
+		@inject(ThemeValidator) themeValidator: ThemeValidator,
+		@inject(RestClient) restClient: RestClient,
+		@inject(StaticErrorPage) staticErrorPage: StaticErrorPage,
+		@inject(MagnoliaContextProvider) magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(DynamicPageLayout) private readonly dynamicPageLayout: DynamicPageLayout,
 	) {
-		super(componentMappingsProvider, configProvider, StylesheetProviderI, logger, restClient, staticErrorPage, magnoliaContextProvider);
+		super(componentMappingsProvider, configProvider, StylesheetProviderI, themeValidator, restClient, staticErrorPage, magnoliaContextProvider);
 	}
 
 	public render(errorType: ErrorType): ReactNode {
@@ -39,17 +41,22 @@ export class DynamicErrorPageGlobal extends AbstractDynamicErrorPage {
 		}, []);
 
 		if (!errorPage) {
-			return (
-				<html>
-					<body>
-						<div>Loading...</div>
-					</body>
-				</html>
-			);
+			return this.renderLoader(errorType);
 		}
 		return errorPage;
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	protected renderLoader(errorType: ErrorType): ReactNode {
+		return (
+			<html>
+				<body>
+					<div>Loading...</div>
+				</body>
+			</html>
+		);
+	}
+
 	private async renderGlobalDynamicError(language: string, errorType: ErrorType): Promise<ReactNode> {
 		const currentUrl = new URL(window.location.href);
 		currentUrl.pathname = language;

package/src/dynamic-page/DynamicPage.tsx

@@ -1,33 +1,32 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
+import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
 import { MagnoliaPageRestClient } from '../helper/MagnoliaPageRestClient.ts';
-import { notFound } from 'next/navigation';
 import { MgnlTemplateAnnotations } from '@magnolia/frontend-helpers-base';
 import { Metadata } from 'next';
 import { MetadataProvider } from '../helper/MetadataProvider.ts';
 import { inject, injectable } from 'tsyringe';
 import { AbstractDynamicPage } from './AbstractDynamicPage.tsx';
-import { Logger } from '../helper/Logger.ts';
-import type { HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
 import PageProps, { UrlProvider } from './PageProps.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-import { type StylesheetProviderI } from '../config/StylesheetProvider.ts';
+import { type StylesheetProviderI, STYLESHEET_PROVIDER_TOKEN } from '../config/StylesheetProvider.ts';
 import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
+import { ThemeValidator } from '../helper/ThemeValidator.ts';
 
 @injectable()
 export class DynamicPage extends AbstractDynamicPage {
 	constructor(
-		@inject(TOKEN_PREFIX + 'CombinedComponentMappingsProvider') componentMappingsProvider: ComponentMappingsProviderI,
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'StylesheetProviderI') StylesheetProviderI: StylesheetProviderI,
-		@inject(TOKEN_PREFIX + 'Logger') logger: Logger,
-		@inject(TOKEN_PREFIX + 'MagnoliaContextProvider') private readonly magnoliaContextProvider: MagnoliaContextProvider,
-		@inject(TOKEN_PREFIX + 'MagnoliaPageRestClient') private readonly magnoliaPageRestClient: MagnoliaPageRestClient,
-		@inject(TOKEN_PREFIX + 'MetadataProvider') private readonly metadataProvider: MetadataProvider,
-		@inject(TOKEN_PREFIX + 'UrlProvider') private readonly urlProvider: UrlProvider,
+		@inject(CombinedComponentMappingsProvider) componentMappingsProvider: ComponentMappingsProviderI,
+		@inject(STYLESHEET_PROVIDER_TOKEN) StylesheetProviderI: StylesheetProviderI,
+		@inject(ThemeValidator) themeValidator: ThemeValidator,
+		@inject(MagnoliaContextProvider) private readonly magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(MagnoliaPageRestClient) private readonly magnoliaPageRestClient: MagnoliaPageRestClient,
+		@inject(MetadataProvider) private readonly metadataProvider: MetadataProvider,
+		@inject(UrlProvider) private readonly urlProvider: UrlProvider,
 	) {
-		super(componentMappingsProvider, configProvider, StylesheetProviderI, logger);
+		super(componentMappingsProvider, StylesheetProviderI, themeValidator);
 	}
 
 	public async render(pageProps: PageProps): Promise<ReactNode> {

package/src/dynamic-page/DynamicPageLayout.tsx

@@ -3,8 +3,6 @@ import { inject, injectable } from 'tsyringe';
 import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
 import { UrlProvider, Params } from './PageProps.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-
 export interface Props {
 	children: ReactNode;
 	params: Promise<Params>;
@@ -13,8 +11,8 @@ export interface Props {
 @injectable()
 export class DynamicPageLayout {
 	constructor(
-		@inject(TOKEN_PREFIX + 'MagnoliaContextProvider') private readonly magnoliaContextProvider: MagnoliaContextProvider,
-		@inject(TOKEN_PREFIX + 'UrlProvider') private readonly urlProvider: UrlProvider,
+		@inject(MagnoliaContextProvider) private readonly magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(UrlProvider) private readonly urlProvider: UrlProvider,
 	) {}
 
 	public async renderUrl(props: Props): Promise<ReactNode> {

package/src/dynamic-page/PageProps.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { headers } from 'next/headers';
 import { injectable } from 'tsyringe';
 

package/src/dynamic-page/_Dependencies.ts

@@ -5,12 +5,10 @@ import { DynamicErrorPageGlobal } from './DynamicErrorPageGlobal.tsx';
 import { DynamicPageLayout } from './DynamicPageLayout.tsx';
 import { UrlProvider } from './PageProps.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-
 export default function register(container: DependencyContainer) {
-	container.register(TOKEN_PREFIX + 'DynamicErrorPage', { useClass: DynamicErrorPage });
-	container.register(TOKEN_PREFIX + 'DynamicErrorPageGlobal', { useClass: DynamicErrorPageGlobal });
-	container.register(TOKEN_PREFIX + 'DynamicPage', { useClass: DynamicPage });
-	container.register(TOKEN_PREFIX + 'DynamicPageLayout', { useClass: DynamicPageLayout });
-	container.register(TOKEN_PREFIX + 'UrlProvider', { useClass: UrlProvider });
+	container.register(DynamicErrorPage, { useClass: DynamicErrorPage });
+	container.register(DynamicErrorPageGlobal, { useClass: DynamicErrorPageGlobal });
+	container.register(DynamicPage, { useClass: DynamicPage });
+	container.register(DynamicPageLayout, { useClass: DynamicPageLayout });
+	container.register(UrlProvider, { useClass: UrlProvider });
 }

package/src/helper/BrowserLanguageProvider.ts

@@ -3,11 +3,9 @@ import { NextRequest } from 'next/server.d.ts';
 import { injectable, inject } from 'tsyringe';
 import { Logger } from './Logger.ts';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-
 @injectable()
 export class BrowserLanguageProvider {
-	constructor(@inject(TOKEN_PREFIX + 'Logger') private readonly logger: Logger) {}
+	constructor(@inject(Logger) private readonly logger: Logger) {}
 
 	public getBrowserLanguage(req: NextRequest): string {
 		try {

package/src/helper/Logger.ts

@@ -1,11 +1,10 @@
 import { inject, injectable } from 'tsyringe';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
-import { Level, type LoggerI } from '../config/Logger.ts';
+import { Level, type LoggerI, LOGGER_TOKEN } from '../config/Logger.ts';
 
 @injectable()
 export class Logger {
-	constructor(@inject(TOKEN_PREFIX + 'LoggerI') private readonly logger: LoggerI) {}
+	constructor(@inject(LOGGER_TOKEN) private readonly logger: LoggerI) {}
 
 	public debug(message: string): void {
 		this.logger.log(Level.DEBUG, message);

package/src/helper/MagnoliaContextProvider.ts

@@ -1,9 +1,7 @@
 import { EditorContextService, IMagnoliaContext } from '@magnolia/frontend-helpers-base';
 import { inject, injectable } from 'tsyringe';
 import { Logger } from './Logger.ts';
-import type { HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 
 export interface ExtendedMagnoliaContext extends IMagnoliaContext {
 	domain: string;
@@ -16,8 +14,8 @@ export class MagnoliaContextProvider {
 	private readonly multiTree: boolean;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') readonly configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'Logger') private readonly logger: Logger,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) readonly configProvider: HeadlessConfigProviderI,
+		@inject(Logger) private readonly logger: Logger,
 	) {
 		this.multiTree = configProvider.get().multiTree;
 	}

package/src/helper/MagnoliaPageRestClient.ts

@@ -3,9 +3,7 @@ import { RestClient } from './RestClient.ts';
 import { MagnoliaContextProvider } from './MagnoliaContextProvider.ts';
 import MetaProps from './MetaProps.ts';
 import { inject, injectable } from 'tsyringe';
-import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 
 export interface Content extends MgnlContent {
 	cspHeader?: string;
@@ -23,9 +21,9 @@ export class MagnoliaPageRestClient {
 	private readonly apisProvider: MagnoliaApiEndpointsProvider;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') readonly configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'MagnoliaContextProvider') private readonly magnoliaContextProvider: MagnoliaContextProvider,
-		@inject(TOKEN_PREFIX + 'RestClient') private readonly restClient: RestClient,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) readonly configProvider: HeadlessConfigProviderI,
+		@inject(MagnoliaContextProvider) private readonly magnoliaContextProvider: MagnoliaContextProvider,
+		@inject(RestClient) private readonly restClient: RestClient,
 	) {
 		this.apisProvider = configProvider.get().magnoliaApisProvider;
 	}

package/src/helper/MetadataProvider.ts

@@ -1,7 +1,9 @@
-import MetaProps, { OpenGraph as HeadlessOpenGraph } from './MetaProps.ts';
-import { Metadata } from 'next';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import type { OpenGraph } from 'next/dist/lib/metadata/types/opengraph-types';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import type { Twitter } from 'next/dist/lib/metadata/types/twitter-types';
+import MetaProps, { OpenGraph as HeadlessOpenGraph } from './MetaProps.ts';
+import { Metadata } from 'next';
 import { injectable } from 'tsyringe';
 
 @injectable()

package/src/helper/RestClient.ts

@@ -1,14 +1,12 @@
 import { createBasicAuthHeader } from './BasicAuth.ts';
 import { inject, injectable } from 'tsyringe';
-import type { Credentials, HeadlessConfigProviderI } from '../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { Credentials, type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
 
 @injectable()
 export class RestClient {
 	private readonly magnoliaCredentials: Credentials;
 
-	constructor(@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') readonly configProvider: HeadlessConfigProviderI) {
+	constructor(@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) readonly configProvider: HeadlessConfigProviderI) {
 		this.magnoliaCredentials = configProvider.get().magnoliaCredentials;
 	}
 

package/src/helper/ThemeValidator.ts

@@ -0,0 +1,25 @@
+import { inject, injectable } from 'tsyringe';
+import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN, ThemesProvider } from '../config/ConfigProvider.ts';
+import { Logger } from './Logger.ts';
+
+@injectable()
+export class ThemeValidator {
+	private readonly themesProvider: ThemesProvider;
+
+	constructor(
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(Logger) private readonly logger: Logger,
+	) {
+		this.themesProvider = configProvider.get().themesProvider;
+	}
+
+	public getValidatedTheme(theme?: string): string {
+		if (!theme || !this.themesProvider.getAll().includes(theme)) {
+			if (theme) {
+				this.logger.error(`Got invalid theme '${theme}' from magnolia! falling back to ${this.themesProvider.getFallback()}`);
+			}
+			return this.themesProvider.getFallback();
+		}
+		return theme;
+	}
+}

package/src/helper/_Dependencies.ts

@@ -5,14 +5,14 @@ import { Logger } from './Logger.ts';
 import { BrowserLanguageProvider } from './BrowserLanguageProvider.ts';
 import { MagnoliaContextProvider } from './MagnoliaContextProvider.ts';
 import { MagnoliaPageRestClient } from './MagnoliaPageRestClient.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { ThemeValidator } from './ThemeValidator.ts';
 
 export default function register(container: DependencyContainer) {
-	container.register(TOKEN_PREFIX + 'MetadataProvider', { useClass: MetadataProvider });
-	container.register(TOKEN_PREFIX + 'Logger', { useClass: Logger });
-	container.register(TOKEN_PREFIX + 'BrowserLanguageProvider', { useClass: BrowserLanguageProvider });
-	container.register(TOKEN_PREFIX + 'MagnoliaContextProvider', { useClass: MagnoliaContextProvider });
-	container.register(TOKEN_PREFIX + 'MagnoliaPageRestClient', { useClass: MagnoliaPageRestClient });
-	container.register(TOKEN_PREFIX + 'RestClient', { useClass: RestClient });
+	container.register(MetadataProvider, { useClass: MetadataProvider });
+	container.register(Logger, { useClass: Logger });
+	container.register(BrowserLanguageProvider, { useClass: BrowserLanguageProvider });
+	container.register(MagnoliaContextProvider, { useClass: MagnoliaContextProvider });
+	container.register(MagnoliaPageRestClient, { useClass: MagnoliaPageRestClient });
+	container.register(RestClient, { useClass: RestClient });
+	container.register(ThemeValidator, { useClass: ThemeValidator });
 }

package/src/helper/_Index.ts

@@ -1,2 +1,9 @@
 export { ErrorType } from './MagnoliaPageRestClient.ts';
+export { type ExtendedMagnoliaContext } from './MagnoliaContextProvider.ts';
+export * from './BasicAuth.ts';
+export * from './BrowserLanguageProvider.ts';
 export * from './Logger.ts';
+export * from './RestClient.ts';
+export * from './MetadataProvider.ts';
+export * from './MetaProps.ts';
+export * from './ThemeValidator.ts';

package/src/middleware/Middleware.ts

@@ -1,10 +1,13 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextFetchEvent, NextProxy, NextRequest, NextResponse } from 'next/server';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { Logger } from '../helper/Logger.ts';
 import { inject, injectable, injectAllWithTransform } from 'tsyringe';
+// @ts-expect-error: tsyringe missing exports prevents ESM resolution with 'nodenext'.
 import { Transform } from 'tsyringe/dist/typings/types';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { token } from '../Constants.ts';
 
 export interface Middleware {
 	apply(request: NextRequest, response: NextResponse, event: NextFetchEvent): NextMiddlewareResult | Promise<NextMiddlewareResult>;
@@ -12,6 +15,7 @@ export interface Middleware {
 	getOrder(): number;
 	getName(): string;
 }
+export const MIDDLEWARE_TOKEN = token('Middleware');
 
 export abstract class AbstractMiddleware implements Middleware {
 	public abstract apply(request: NextRequest, response: NextResponse, event: NextFetchEvent): NextMiddlewareResult | Promise<NextMiddlewareResult>;
@@ -36,8 +40,8 @@ class MiddlewareTransform implements Transform<Middleware[], Middleware[]> {
 @injectable()
 export class MiddlewareComposer {
 	constructor(
-		@injectAllWithTransform(TOKEN_PREFIX + 'Middleware', MiddlewareTransform) private middlewares: Middleware[],
-		@inject(TOKEN_PREFIX + 'Logger') private logger: Logger,
+		@injectAllWithTransform(MIDDLEWARE_TOKEN, MiddlewareTransform) private middlewares: Middleware[],
+		@inject(Logger) private logger: Logger,
 	) {}
 
 	public composeMiddleware(): NextProxy {

package/src/middleware/_Dependencies.ts

@@ -2,13 +2,11 @@ import { DependencyContainer } from 'tsyringe';
 import { DynamicResponseHeaderMiddleware } from './impl/DynamicResponseHeaderMiddleware.ts';
 import { I18nRedirectMiddleware } from './impl/I18nRedirectMiddleware.ts';
 import { VanityMiddleware } from './impl/VanityMiddleware.ts';
-import { MiddlewareComposer } from './Middleware.ts';
-
-import { TOKEN_PREFIX } from '../Constants.ts';
+import { MiddlewareComposer, MIDDLEWARE_TOKEN } from './Middleware.ts';
 
 export default function register(container: DependencyContainer) {
-	container.register(TOKEN_PREFIX + 'Middleware', { useClass: DynamicResponseHeaderMiddleware });
-	container.register(TOKEN_PREFIX + 'Middleware', { useClass: I18nRedirectMiddleware });
-	container.register(TOKEN_PREFIX + 'Middleware', { useClass: VanityMiddleware });
-	container.register(TOKEN_PREFIX + 'MiddlewareComposer', { useClass: MiddlewareComposer });
+	container.register(MIDDLEWARE_TOKEN, { useClass: DynamicResponseHeaderMiddleware });
+	container.register(MIDDLEWARE_TOKEN, { useClass: I18nRedirectMiddleware });
+	container.register(MIDDLEWARE_TOKEN, { useClass: VanityMiddleware });
+	container.register(MiddlewareComposer, { useClass: MiddlewareComposer });
 }

package/src/middleware/_README.md

@@ -63,10 +63,10 @@ export class SomeMiddleware extends AbstractMiddleware {
 Add binding:
 
 ```typescript
-import { TOKEN_PREFIX } from '@merkle-open/magnolia-headless-frontend-nextjs';
+import { MIDDLEWARE_TOKEN } from '@merkle-open/magnolia-headless-frontend-nextjs';
 import { DependencyContainer } from 'tsyringe';
 
 function bindSomeMiddleware(container: DependencyContainer): void {
-    container.register(TOKEN_PREFIX + 'Middleware', {useClass: SomeMiddleware});
+    container.register(MIDDLEWARE_TOKEN, {useClass: SomeMiddleware});
 }
 ```

package/src/middleware/impl/DynamicResponseHeaderMiddleware.ts

@@ -1,19 +1,19 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest, NextResponse } from 'next/server';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { RestClient } from '../../helper/RestClient.ts';
 import { AbstractMiddleware } from '../Middleware.ts';
 import { inject, injectable } from 'tsyringe';
-import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../../Constants.ts';
+import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../../config/ConfigProvider.ts';
 
 @injectable()
 export class DynamicResponseHeaderMiddleware extends AbstractMiddleware {
 	private apisProvider: MagnoliaApiEndpointsProvider;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(RestClient) private restClient: RestClient,
 	) {
 		super();
 		this.apisProvider = configProvider.get().magnoliaApisProvider;

package/src/middleware/impl/I18nRedirectMiddleware.ts

@@ -1,14 +1,14 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest, NextResponse } from 'next/server';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { AbstractMiddleware } from '../Middleware.ts';
-import type { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
+import { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
 import { inject, injectable } from 'tsyringe';
 
-import { TOKEN_PREFIX } from '../../Constants.ts';
-
 @injectable()
 export class I18nRedirectMiddleware extends AbstractMiddleware {
-	constructor(@inject(TOKEN_PREFIX + 'BrowserLanguageProvider') private browserLanguageProvider: BrowserLanguageProvider) {
+	constructor(@inject(BrowserLanguageProvider) private browserLanguageProvider: BrowserLanguageProvider) {
 		super();
 	}
 

package/src/middleware/impl/VanityMiddleware.ts

@@ -1,12 +1,12 @@
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextRequest, NextResponse } from 'next/server';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { NextMiddlewareResult } from 'next/dist/server/web/types';
 import { RestClient } from '../../helper/RestClient.ts';
 import { AbstractMiddleware } from '../Middleware.ts';
-import type { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
+import { BrowserLanguageProvider } from '../../helper/BrowserLanguageProvider.ts';
 import { inject, injectable } from 'tsyringe';
-import type { HeadlessConfigProviderI, MagnoliaApiEndpointsProvider } from '../../config/ConfigProvider.ts';
-
-import { TOKEN_PREFIX } from '../../Constants.ts';
+import { type HeadlessConfigProviderI, MagnoliaApiEndpointsProvider, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../../config/ConfigProvider.ts';
 
 export enum RedirectType {
 	TEMPORARY = 'redirect',
@@ -26,9 +26,9 @@ export class VanityMiddleware extends AbstractMiddleware {
 	private apisProvider: MagnoliaApiEndpointsProvider;
 
 	constructor(
-		@inject(TOKEN_PREFIX + 'HeadlessConfigProviderI') configProvider: HeadlessConfigProviderI,
-		@inject(TOKEN_PREFIX + 'RestClient') private restClient: RestClient,
-		@inject(TOKEN_PREFIX + 'BrowserLanguageProvider') private browserLanguageProvider: BrowserLanguageProvider,
+		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
+		@inject(RestClient) private restClient: RestClient,
+		@inject(BrowserLanguageProvider) private browserLanguageProvider: BrowserLanguageProvider,
 	) {
 		super();
 		this.apisProvider = configProvider.get().magnoliaApisProvider;

package/src/templates/ComponentMappingsProvider.ts

@@ -1,12 +1,11 @@
 import { ComponentMappings } from '@magnolia/react-editor';
 import { inject, injectable } from 'tsyringe';
-import { TOKEN_PREFIX } from '../Constants.ts';
 import getComponentMappings from './magnolia.config.ts';
-import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
+import { type ComponentMappingsProviderI, COMPONENTS_MAPPINGS_PROVIDER_TOKEN } from '../config/ComponentMappingsProvider.ts';
 
 @injectable()
 export class CombinedComponentMappingsProvider implements ComponentMappingsProviderI {
-	constructor(@inject(TOKEN_PREFIX + 'ComponentMappingsProviderI') private readonly componentMappingsProvider: ComponentMappingsProviderI) {}
+	constructor(@inject(COMPONENTS_MAPPINGS_PROVIDER_TOKEN) private readonly componentMappingsProvider: ComponentMappingsProviderI) {}
 
 	public getComponentMappings(): ComponentMappings {
 		return {

package/src/templates/_Dependencies.ts

@@ -1,10 +1,9 @@
 import { DependencyContainer } from 'tsyringe';
 
-import { TOKEN_PREFIX } from '../Constants.ts';
 import { CombinedComponentMappingsProvider } from './ComponentMappingsProvider.ts';
 import { StaticErrorPage } from './pages/_error-static/ErrorStatic.tsx';
 
 export default function register(container: DependencyContainer) {
-	container.register(TOKEN_PREFIX + 'CombinedComponentMappingsProvider', { useClass: CombinedComponentMappingsProvider });
-	container.register(TOKEN_PREFIX + 'StaticErrorPage', { useClass: StaticErrorPage });
+	container.register(CombinedComponentMappingsProvider, { useClass: CombinedComponentMappingsProvider });
+	container.register(StaticErrorPage, { useClass: StaticErrorPage });
 }

package/src/templates/_Index.ts

@@ -3,3 +3,5 @@ export type { default as PageBaseProps } from './pages/BaseProps.ts';
 export type { default as AreaBaseProps } from './areas/BaseProps.ts';
 export * from './areas/__magnolia-editable-area/EditableArea.tsx';
 export type { default as ComponentBaseProps } from './components/BaseProps.ts';
+export * from './pages/_error-static/ErrorStatic.tsx';
+export type { default as StaticErrorPageProps } from './pages/_error-static/ErrorStaticProps.ts';

package/src/templates/components/_redirect/RedirectComponent.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+// @ts-expect-error: Next.js missing exports prevents ESM resolution with 'nodenext'.
 import { redirect, permanentRedirect } from 'next/navigation';
+import { ReactNode } from 'react';
 import RedirectComponentProps, { RedirectType } from './RedirectComponentProps.ts';
 
 export default function Redirect({ destination, statusCode }: RedirectComponentProps): ReactNode {