@stone-js/use-react 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,13 +1,63 @@
-import { isNotEmpty, isEmpty, InitializationError, isMetaClassModule, isMetaFactoryModule, isFunctionModule, isObjectLikeModule, isFunction, Logger, hasMetadata, getMetadata, isMatchedAdapter, mergeBlueprints, stoneBlueprint, classDecoratorLegacyWrapper, setMetadata, methodDecoratorLegacyWrapper, addMetadata, LIFECYCLE_HOOK_KEY, addBlueprint } from '@stone-js/core';
+import { InitializationError, isEmpty, isNotEmpty, isMetaClassModule, isMetaFactoryModule, isObjectLikeModule, isFunction, isFunctionModule, mergeBlueprints, stoneBlueprint, classDecoratorLegacyWrapper, setMetadata, methodDecoratorLegacyWrapper, addMetadata, LIFECYCLE_HOOK_KEY, hasMetadata, getMetadata, isMatchedAdapter, Logger, addBlueprint } from '@stone-js/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { renderToString } from 'react-dom/server';
-import { createContext, StrictMode, useContext, useState, useEffect } from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { OutgoingHttpResponse, RedirectResponse, MetaStaticFileMiddleware, MetaCompressionMiddleware } from '@stone-js/http-core';
-import { OutgoingBrowserResponse, RedirectBrowserResponse } from '@stone-js/browser-core';
+import { createContext, StrictMode, useContext, useMemo, useState, useEffect } from 'react';
+import { hydrateRoot, createRoot } from 'react-dom/client';
 import { Config } from '@stone-js/config';
-import { GET, NAVIGATION_EVENT, NODE_CONSOLE_PLATFORM, Router, RouteEvent } from '@stone-js/router';
-import { BROWSER_PLATFORM } from '@stone-js/browser-adapter';
+import { GET, NODE_CONSOLE_PLATFORM, Router, RouteEvent } from '@stone-js/router';
+import { RedirectResponse, OutgoingHttpResponse, MetaCompressionMiddleware, MetaStaticFileMiddleware } from '@stone-js/http-core';
+
+/**
+ * Custom error for react operations.
+ */
+class UseReactError extends InitializationError {
+    constructor(message, options) {
+        super(message, options);
+        this.name = 'UseReactError';
+    }
+}
+
+/**
+ * A useReact event handler for processing incoming events
+ * For single event handler.
+ *
+ * Multiple event handlers will be processed by the router.
+ *
+ * @template IncomingEventType - The type representing the incoming event.
+ * @template OutgoingResponseType - The type representing the outgoing response.
+ */
+class UseReactEventHandler {
+    blueprint;
+    /**
+     * Constructs a `UseReactEventHandler` instance.
+     *
+     * @param options - The UseReactEventHandler options including blueprint.
+     */
+    constructor({ blueprint }) {
+        this.blueprint = blueprint;
+    }
+    /**
+     * Handle an incoming event.
+     *
+     * @returns The outgoing response.
+     */
+    handle() {
+        return this.getComponentEventHandler();
+    }
+    /**
+     * Get the component event handler.
+     *
+     * @returns The component event handler.
+     * @throws {UseReactError} If the component event handler is missing.
+     */
+    getComponentEventHandler() {
+        const handler = this.blueprint.get('stone.useReact.componentEventHandler');
+        if (isEmpty(handler)) {
+            throw new UseReactError('The component event handler is missing.');
+        }
+        return handler;
+    }
+}
 
 /**
   * Stone DOM Attribute.
@@ -271,16 +321,6 @@ const StoneError = () => {
     return (jsxs(Fragment, { children: [jsx("h1", { children: "An error occured" }), jsx("p", { children: "Sorry, something went wrong." })] }));
 };
 
-/**
- * Custom error for react operations.
- */
-class UseReactError extends InitializationError {
-    constructor(message, options) {
-        super(message, options);
-        this.name = 'UseReactError';
-    }
-}
-
 /**
  * Build the React application for the current route.
  * Or for the main handler if the route is not defined.
@@ -486,7 +526,7 @@ const htmlTemplate = (blueprint) => {
  * @returns True if the application is running on the server side, false otherwise.
  */
 function isSSR() {
-    return import.meta.env.SSR || typeof window === 'undefined';
+    return typeof window === 'undefined';
 }
 /**
  * Execute the handler.
@@ -552,11 +592,11 @@ function getBrowserContent(app, component, layout, snapshot, head) {
  * @param container - The service container.
  * @param event - The incoming browser event.
  * @param head - The head context.
- * @returns A promise that resolves when the content is hydrated.
+ * @returns The server response content as a string.
  */
-async function getServerContent(component, data, container, event, head) {
+function getServerContent(component, data, container, event, head) {
     const html = renderToString(component).concat('\n<!--app-html-->');
-    const template = await htmlTemplate(container.make('blueprint'));
+    const template = htmlTemplate(container.make('blueprint'));
     const snapshot = snapshotResponse(event, container, data).concat('\n<!--app-head-->');
     return applyHeadContextToHtmlString(head ?? {}, template)
         .replace('<!--app-html-->', html)
@@ -713,87 +753,30 @@ class ReactRuntime {
 const MetaReactRuntime = { module: ReactRuntime, isClass: true, alias: 'reactRuntime', singleton: true };
 
 /**
- * Class representing an UseReactBrowserErrorHandler.
+ * Class representing an UseReactUseReactKernelErrorHandler.
  *
- * Adapter level error handler for React applications.
+ * Kernel level error handler for React applications.
  */
-class UseReactBrowserErrorHandler {
-    logger;
+class UseReactKernelErrorHandler {
     blueprint;
     /**
-     * Create an UseReactBrowserErrorHandler.
+     * Create an UseReactUseReactKernelErrorHandler.
      *
-     * @param options - UseReactBrowserErrorHandler options.
+     * @param options - UseReactUseReactKernelErrorHandler options.
      */
     constructor({ blueprint }) {
         this.blueprint = blueprint;
-        this.logger = Logger.getInstance();
     }
     /**
      * Handle an error.
      *
      * @param error - The error to handle.
-     * @param context - The context of the adapter.
-     * @returns The raw response.
-     */
-    async handle(error, context) {
-        this.logger.error(error.message, { error });
-        return context
-            .rawResponseBuilder
-            .add('render', async () => await this.renderError(error, context));
-    }
-    /**
-     * Get the error body.
-     *
-     * @param error - The error to handle.
-     * @returns The error body.
-     */
-    async renderError(error, context) {
-        const app = await buildAdapterErrorComponent(this.blueprint, context, error.statusCode ?? 500, error);
-        // Render the component
-        renderReactApp(app, this.blueprint);
-    }
-}
-
-/**
- * A useReact event handler for processing incoming events
- * For single event handler.
- *
- * Multiple event handlers will be processed by the router.
- *
- * @template IncomingEventType - The type representing the incoming event.
- * @template OutgoingResponseType - The type representing the outgoing response.
- */
-class UseReactEventHandler {
-    blueprint;
-    /**
-     * Constructs a `UseReactEventHandler` instance.
-     *
-     * @param options - The UseReactEventHandler options including blueprint.
-     */
-    constructor({ blueprint }) {
-        this.blueprint = blueprint;
-    }
-    /**
-     * Handle an incoming event.
-     *
-     * @returns The outgoing response.
-     */
-    handle() {
-        return this.getComponentEventHandler();
-    }
-    /**
-     * Get the component event handler.
-     *
-     * @returns The component event handler.
-     * @throws {UseReactError} If the component event handler is missing.
+     * @returns The outgoing http response.
      */
-    getComponentEventHandler() {
-        const handler = this.blueprint.get('stone.useReact.componentEventHandler');
-        if (isEmpty(handler)) {
-            throw new UseReactError('The component event handler is missing.');
-        }
-        return handler;
+    handle(error) {
+        const metavalue = this.blueprint.get(`stone.useReact.errorPages.${String(error?.name)}`) ??
+            this.blueprint.get('stone.useReact.errorPages.default', {});
+        return { content: { ...metavalue, error }, statusCode: error?.statusCode ?? 500 };
     }
 }
 
@@ -819,7 +802,7 @@ async function preparePage(event, response, container, snapshot) {
     const component = await buildPageComponent(event, container, componentType, data, response.statusCode);
     const appComponent = await buildAppComponent(event, container, componentType, layout, data, response.statusCode);
     response.setContent(isSSR()
-        ? await getServerContent(appComponent, snapshotData, container, event, head)
+        ? getServerContent(appComponent, snapshotData, container, event, head)
         : getBrowserContent(appComponent, component, layout, snapshot, head));
 }
 /**
@@ -845,7 +828,7 @@ async function prepareErrorPage(event, response, container, snapshot) {
     const component = await buildPageComponent(event, container, componentType, data, response.statusCode, error);
     const appComponent = await buildAppComponent(event, container, componentType, layout, data, response.statusCode, error);
     response.setContent(isSSR()
-        ? await getServerContent(appComponent, snapshotData, container, event, head)
+        ? getServerContent(appComponent, snapshotData, container, event, head)
         : getBrowserContent(appComponent, component, layout, snapshot, head));
 }
 /**
@@ -888,108 +871,6 @@ async function onPreparingResponse({ event, response, container }) {
     }
 }
 
-/**
- * Class representing an UseReactUseReactKernelErrorHandler.
- *
- * Kernel level error handler for React applications.
- */
-class UseReactKernelErrorHandler {
-    blueprint;
-    /**
-     * Create an UseReactUseReactKernelErrorHandler.
-     *
-     * @param options - UseReactUseReactKernelErrorHandler options.
-     */
-    constructor({ blueprint }) {
-        this.blueprint = blueprint;
-    }
-    /**
-     * Handle an error.
-     *
-     * @param error - The error to handle.
-     * @returns The outgoing http response.
-     */
-    handle(error) {
-        const metavalue = this.blueprint.get(`stone.useReact.errorPages.${String(error?.name)}`) ??
-            this.blueprint.get('stone.useReact.errorPages.default', {});
-        return { content: { ...metavalue, error }, statusCode: error?.statusCode ?? 500 };
-    }
-}
-
-/**
- * Create an UseReact response.
- *
- * @param options - The options for creating the response.
- * @returns The React response.
- */
-const reactResponse = async (options) => {
-    if (isNotEmpty(options) &&
-        (isNotEmpty(options.url) ||
-            (isNotEmpty(options.content) && isNotEmpty(options.content.redirect)))) {
-        return await reactRedirectResponse(options);
-    }
-    return import.meta.env.SSR
-        ? OutgoingHttpResponse.create(options)
-        : OutgoingBrowserResponse.create(options);
-};
-/**
- * Create an UseReact redirect response.
- *
- * @param options - The options for creating the response.
- * @returns The React redirect response.
- */
-const reactRedirectResponse = async (options) => {
-    return import.meta.env.SSR
-        ? RedirectResponse.create({ statusCode: 302, ...options })
-        : RedirectBrowserResponse.create({ statusCode: 302, ...options });
-};
-
-/**
- * Class representing an UseReactServerErrorHandler.
- *
- * Adapter level error handler for React applications.
- */
-class UseReactServerErrorHandler {
-    logger;
-    blueprint;
-    /**
-     * Create an UseReactServerErrorHandler.
-     *
-     * @param options - UseReactServerErrorHandler options.
-     */
-    constructor({ blueprint }) {
-        this.blueprint = blueprint;
-        this.logger = Logger.getInstance();
-    }
-    /**
-     * Handle an error.
-     *
-     * @param error - The error to handle.
-     * @param context - The context of the adapter.
-     * @returns The raw response.
-     */
-    async handle(error, context) {
-        this.logger.error(error.message, { error });
-        return context
-            .rawResponseBuilder
-            .add('statusCode', error.statusCode ?? 500)
-            .add('headers', new Headers({ 'Content-Type': 'text/html' }))
-            .add('body', await this.getErrorBody(error, context));
-    }
-    /**
-     * Get the error body.
-     *
-     * @param error - The error to handle.
-     * @returns The error body.
-    */
-    async getErrorBody(error, context) {
-        const statusCode = error.statusCode ?? 500;
-        const template = await htmlTemplate(this.blueprint);
-        const ClientApp = await buildAdapterErrorComponent(this.blueprint, context, statusCode, error);
-        return template.replace('<!--app-html-->', renderToString(ClientApp));
-    }
-}
-
 /**
  * Use React Service Provider.
  */
@@ -1059,39 +940,93 @@ function defineAdapterErrorPage(module, options) {
 }
 
 /**
- * Utility function to define a page.
+ * Default blueprint for a React-based Stone.js application.
  *
- * @param module - The EventHandler module.
- * @param options - Page definition options.
- * @returns The UseReactBlueprint.
+ * - Defines middleware, lifecycle hooks, and the default HTML template path.
  */
-function definePage(module, options) {
-    return {
-        stone: {
-            router: {
-                definitions: [
-                    {
-                        ...options,
-                        method: GET,
-                        methods: [],
-                        children: undefined,
-                        handler: {
-                            module,
-                            isComponent: true,
-                            layout: options?.layout,
-                            isClass: options?.isClass,
-                            isFactory: options?.isClass !== true
-                        }
-                    }
-                ]
-            }
-        }
-    };
-}
-/**
- * Utility function to define a page layout.
- *
- * @param module - The layout module.
+const internalUseReactBlueprint = {
+    stone: {
+        useReact: {},
+        services: [MetaReactRuntime],
+        providers: [MetaUseReactServiceProvider]
+    }
+};
+
+/**
+ * Defines a Stone React app using a factory-based or class-based main handler.
+ *
+ * @param moduleOrOptions - A factory function or class constructor for the main page.
+ * @param optionsOrBlueprints - Optional application-level configuration.
+ * @param maybeBlueprints - Additional blueprints to merge.
+ * @returns A fully merged Stone blueprint.
+ */
+function defineStoneReactApp(moduleOrOptions = {}, optionsOrBlueprints, maybeBlueprints) {
+    let module;
+    let options = {};
+    let blueprints = [];
+    // Pattern: defineStoneReactApp(handler, options?, blueprints?)
+    if (isFunctionModule(moduleOrOptions)) {
+        module = moduleOrOptions;
+        if (isObjectLikeModule(optionsOrBlueprints)) {
+            options = optionsOrBlueprints;
+            blueprints = Array.isArray(maybeBlueprints) ? maybeBlueprints : [];
+        }
+    }
+    else if (isObjectLikeModule(moduleOrOptions)) { // Pattern: defineStoneReactApp(options, blueprints?)
+        options = moduleOrOptions;
+        blueprints = Array.isArray(optionsOrBlueprints) ? optionsOrBlueprints : [];
+    }
+    const stonePart = {
+        ...options,
+        useReact: {
+            ...options.useReact
+        }
+    };
+    if (isNotEmpty(module)) {
+        stonePart.useReact.componentEventHandler = {
+            module,
+            isComponent: true,
+            isClass: options.isClass,
+            isFactory: options.isClass !== true
+        };
+    }
+    return mergeBlueprints(stoneBlueprint, internalUseReactBlueprint, ...blueprints, { stone: stonePart });
+}
+
+/**
+ * Utility function to define a page.
+ *
+ * @param module - The EventHandler module.
+ * @param options - Page definition options.
+ * @returns The UseReactBlueprint.
+ */
+function definePage(module, options) {
+    return {
+        stone: {
+            router: {
+                definitions: [
+                    {
+                        ...options,
+                        method: GET,
+                        methods: [],
+                        children: undefined,
+                        handler: {
+                            module,
+                            isComponent: true,
+                            layout: options?.layout,
+                            isClass: options?.isClass,
+                            isFactory: options?.isClass !== true
+                        }
+                    }
+                ]
+            }
+        }
+    };
+}
+/**
+ * Utility function to define a page layout.
+ *
+ * @param module - The layout module.
  * @param options - Optional page layout definition options.
  * @returns The UseReactBlueprint.
  */
@@ -1164,595 +1099,503 @@ const REACT_ADAPTER_ERROR_PAGE_KEY = Symbol.for('ReactAdapterErrorPage');
 const STONE_REACT_APP_KEY = Symbol.for('StoneReactApp');
 
 /**
- * Adapter Middleware for handling outgoing responses and rendering them in the browser.
- */
-class BrowserResponseMiddleware {
-    isRendered;
-    blueprint;
-    /**
-     * Create a BrowserResponseMiddleware.
-     *
-     * @param {blueprint} options - Options for creating the BrowserResponseMiddleware.
-     */
-    constructor({ blueprint }) {
-        this.blueprint = blueprint;
-        this.isRendered = blueprint.has('stone.useReact.reactRoot');
-    }
-    /**
-     * Handles the outgoing response, processes it, and invokes the next middleware in the pipeline.
-     *
-     * @param context - The adapter context containing the raw event, execution context, and other data.
-     * @param next - The next middleware to be invoked in the pipeline.
-     * @returns A promise resolving to the processed context.
-     * @throws {NodeHttpAdapterError} If required components are missing in the context.
-     */
-    async handle(context, next) {
-        const rawResponseBuilder = await next(context);
-        this.ensureValidContext(context, rawResponseBuilder);
-        return rawResponseBuilder.add('render', async () => await this.renderComponent(context.outgoingResponse));
-    }
-    /**
-     * Ensures the context and response builder have the required components.
-     */
-    ensureValidContext(context, rawResponseBuilder) {
-        if (context.rawEvent === undefined ||
-            context.incomingEvent === undefined ||
-            context.outgoingResponse === undefined ||
-            rawResponseBuilder?.add === undefined) {
-            throw new UseReactError('The context is missing required components.');
-        }
-    }
-    /**
-     * Renders the provided React content.
-     *
-     * @param response - The response object.
-     */
-    async renderComponent(response) {
-        if (isEmpty(response)) {
-            throw new UseReactError('No response provided for rendering.');
-        }
-        const content = response.content;
-        const targetUrl = response.targetUrl;
-        if (isNotEmpty(targetUrl)) {
-            return this.handleRedirect(targetUrl);
-        }
-        if (isNotEmpty(content?.head)) {
-            applyHeadContextToDom(document, content.head);
-        }
-        if (content?.ssr === true && !this.isRendered && isNotEmpty(content?.app)) {
-            return this.hydrateReactApp(content.app);
-        }
-        if (isNotEmpty(content?.app) && (!this.isRendered || content?.fullRender === true)) {
-            return this.renderReactApp(content.app);
-        }
-        if (isNotEmpty(content?.component)) {
-            return await this.dispatchComponentToOutlet(content.component);
-        }
-        throw new UseReactError('Invalid content provided for rendering.');
-    }
-    /**
-     * Handles navigation redirection.
-     *
-     * @param path - The path to redirect to.
-     */
-    handleRedirect(path) {
-        window.history.pushState({ path }, '', path);
-        window.dispatchEvent(new Event(NAVIGATION_EVENT));
-    }
-    /**
-     * Hydrates the React app when SSR is enabled.
-     *
-     * @param app - The React app to hydrate.
-     */
-    hydrateReactApp(app) {
-        hydrateReactApp(app, this.blueprint);
-    }
-    /**
-     * Renders the React app.
-     *
-     * @param app - The React app to render.
-     */
-    renderReactApp(app) {
-        renderReactApp(app, this.blueprint);
-    }
-    /**
-     * Dispatches a component to the layout outlet when no layout is defined.
-     *
-     * @param component - The component to dispatch.
-     */
-    async dispatchComponentToOutlet(component) {
-        window.dispatchEvent(new CustomEvent(STONE_PAGE_EVENT_OUTLET, { detail: component }));
-    }
-}
-/**
- * Meta Middleware for processing browser responses.
+ * A class decorator for defining a class as a React Handler layout.
+ *
+ * @param options - Configuration options for the layout definition.
+ * @returns A method decorator to be applied to a class method.
+ *
+ * @example
+ * ```typescript
+ * import { ErrorPage } from '@stone-js/use-react';
+ *
+ * @ErrorPage({ error: 'UserNotFoundError' })
+ * class UserErrorPage {
+ *   render({ error }) {
+ *     return <h1>User name: {error.message}</h1>;
+ *   }
+ * }
+ * ```
  */
-const MetaBrowserResponseMiddleware = { module: BrowserResponseMiddleware, isClass: true };
+const ErrorPage = (options) => {
+    return classDecoratorLegacyWrapper((_target, context) => {
+        setMetadata(context, REACT_ERROR_PAGE_KEY, { ...options, isClass: true });
+    });
+};
 
 /**
- * Blueprint middleware to dynamically set lifecycle hooks for react.
- *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * Hook decorator to mark a method as a lifecycle hook
+ * And automatically add it to the global lifecycle hook registry.
  *
  * @example
  * ```typescript
- * SetUseReactHooksMiddleware(context, next)
+ * class MyClass {
+ *    // ...
+ *    @Hook('onPreparingPage')
+ *    onPreparingPage () {}
+ * }
  * ```
+ *
+ * @param name - The name of the lifecycle hook.
+ * @returns A class decorator function that sets the metadata using the provided options.
  */
-const SetUseReactHooksMiddleware = (context, next) => {
-    if (context.blueprint.get('stone.adapter.platform') !== NODE_CONSOLE_PLATFORM) {
-        context
-            .blueprint
-            .add('stone.lifecycleHooks.onPreparingResponse', [onPreparingResponse]);
-    }
-    return next(context);
+const Hook = (name) => {
+    return methodDecoratorLegacyWrapper((_target, context) => {
+        addMetadata(context, LIFECYCLE_HOOK_KEY, { name, method: context.name });
+    });
 };
+
 /**
- * Blueprint middleware to set BrowserResponseMiddleware for the Browser adapter.
- *
- * The MetaBrowserResponseMiddleware is an adapter middleware and is useful
- * for handling outgoing responses and rendering them in the browser.
+ * A class decorator for defining a class as a React Page layout.
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @param options - Configuration options for the layout definition.
+ * @returns A method decorator to be applied to a class method.
  *
  * @example
  * ```typescript
- * SetBrowserResponseMiddlewareMiddleware(context, next)
+ * import { PageLayout } from '@stone-js/use-react';
+ *
+ * @PageLayout({ name: 'UserPageLayout' })
+ * class UserPageLayout {
+ *   render({ data }) {
+ *     return <h1>User name: {data.name}</h1>;
+ *   }
+ * }
  * ```
  */
-const SetBrowserResponseMiddlewareMiddleware = async (context, next) => {
-    if (context.blueprint.get('stone.adapter.platform') === BROWSER_PLATFORM) {
-        context.blueprint.add('stone.adapter.middleware', [MetaBrowserResponseMiddleware]);
-    }
-    return await next(context);
+const PageLayout = (options) => {
+    return classDecoratorLegacyWrapper((_target, context) => {
+        setMetadata(context, REACT_PAGE_LAYOUT_KEY, { ...options, isClass: true });
+    });
 };
+
 /**
- * Blueprint middleware to process and register kernel error page definitions from modules.
+ * A class decorator for defining a class as a React Handler layout.
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @param options - Configuration options for the layout definition.
+ * @returns A method decorator to be applied to a class method.
  *
  * @example
  * ```typescript
- * SetReactKernelErrorPageMiddleware(context, next)
+ * import { AdapterErrorPage } from '@stone-js/use-react';
+ *
+ * @AdapterErrorPage({ error: 'UserNotFoundError' })
+ * class UserAdapterErrorPage {
+ *   render({ error }) {
+ *     return <h1>User name: {error.message}</h1>;
+ *   }
+ * }
  * ```
  */
-const SetReactKernelErrorPageMiddleware = (context, next) => {
-    context
-        .blueprint
-        .set('stone.kernel.errorHandlers.default', { module: UseReactKernelErrorHandler, isClass: true });
-    context
-        .modules
-        .filter(module => hasMetadata(module, REACT_ERROR_PAGE_KEY))
-        .forEach(module => {
-        const { error, layout } = getMetadata(module, REACT_ERROR_PAGE_KEY, { error: 'default' });
-        Array(error).flat().forEach(name => {
-            context
-                .blueprint
-                .set(`stone.useReact.errorPages.${name}`, { layout, module, isClass: true });
-        });
-    });
-    // Process both eager and lazy loaded error pages
-    Object
-        .keys(context.blueprint.get('stone.useReact.errorPages', {}))
-        .forEach((name) => {
-        context
-            .blueprint
-            .set(`stone.kernel.errorHandlers.${name}`, { module: UseReactKernelErrorHandler, isClass: true });
+const AdapterErrorPage = (options) => {
+    return classDecoratorLegacyWrapper((_target, context) => {
+        setMetadata(context, REACT_ADAPTER_ERROR_PAGE_KEY, { ...options, isClass: true });
     });
-    return next(context);
 };
+
 /**
- * Blueprint middleware to process and register adapter error page definitions from modules.
+ * Decorator to set the status code of the response.
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @param statusCode - The status code of the response.
+ * @param headers - The headers for the response.
+ * @returns A method decorator.
  *
  * @example
  * ```typescript
- * SetReactAdapterErrorPageMiddleware(context, next)
+ * import { Page, PageStatus } from '@stone-js/use-react';
+ *
+ * @Page('/user-profile')
+ * class UserPage {
+ *   @PageStatus()
+ *   handle() {
+ *     return { name: 'John Doe' };
+ *   }
+ * }
  * ```
  */
-const SetReactAdapterErrorPageMiddleware = (context, next) => {
-    const UseReactAdapterErrorHandler = import.meta.env.SSR
-        ? UseReactServerErrorHandler
-        : UseReactBrowserErrorHandler;
-    context
-        .blueprint
-        .set('stone.adapter.errorHandlers.default', { module: UseReactAdapterErrorHandler, isClass: true });
-    context
-        .modules
-        .filter(module => hasMetadata(module, REACT_ADAPTER_ERROR_PAGE_KEY))
-        .forEach(module => {
-        const { error, layout, adapterAlias, platform } = getMetadata(module, REACT_ADAPTER_ERROR_PAGE_KEY, { error: 'default' });
-        if (isMatchedAdapter(context.blueprint, platform, adapterAlias)) {
-            Array(error).flat().forEach(name => {
-                context
-                    .blueprint
-                    .set(`stone.useReact.adapterErrorPages.${name}`, { isClass: true, layout, module });
-            });
-        }
-    });
-    // Process both eager and lazy loaded error pages
-    Object
-        .keys(context.blueprint.get('stone.useReact.adapterErrorPages', {}))
-        .forEach((name) => {
-        context
-            .blueprint
-            .set(`stone.adapter.errorHandlers.${name}`, { module: UseReactAdapterErrorHandler, isClass: true });
+const PageStatus = (statusCode = 200, headers = {}) => {
+    return methodDecoratorLegacyWrapper((target, _context) => {
+        return async function (...args) {
+            const content = await target.apply(this, args);
+            return { content, statusCode, headers };
+        };
     });
-    return next(context);
 };
+
 /**
- * Blueprint middleware to set StaticFileMiddleware for SSR adapter.
+ * A class decorator for defining a class as a React Page route action.
+ * Uses the `Match` decorator internally to register the route with the HTTP `GET` method.
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @param options - Configuration options for the route definition, excluding the `methods` property.
+ * @returns A method decorator to be applied to a class method.
  *
  * @example
  * ```typescript
- * SetSSRStaticFileMiddleware(context, next)
- * ```
- */
-const SetSSRStaticFileMiddleware = async (context, next) => {
-    import.meta.env.SSR && context.blueprint.add('stone.kernel.middleware', [MetaStaticFileMiddleware]);
-    return await next(context);
-};
-/**
- * Blueprint middleware to set CompressionMiddleware for SSR adapter.
+ * import { Page } from '@stone-js/use-react';
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @Page('/user-profile')
+ * class UserPage {
+ *   handle({ event }): Record<string, string> {
+ *     return { name: 'Jane Doe' };
+ *   }
  *
- * @example
- * ```typescript
- * SetSSRCompressionMiddleware(context, next)
+ *   render({ data }) {
+ *     return <h1>User name: {data.name}</h1>;
+ *   }
+ * }
  * ```
  */
-const SetSSRCompressionMiddleware = async (context, next) => {
-    import.meta.env.SSR && context.blueprint.add('stone.kernel.middleware', [MetaCompressionMiddleware]);
-    return await next(context);
+const Page = (path, options = {}) => {
+    return classDecoratorLegacyWrapper((target, context) => {
+        setMetadata(context, REACT_PAGE_KEY, {
+            ...options,
+            path,
+            method: GET,
+            methods: [],
+            handler: { isClass: true, isComponent: true, layout: options.layout, module: target }
+        });
+    });
 };
+
 /**
- * Blueprint middleware to process and register route definitions from modules.
+ * Decorator to create a snapshot of the current data.
  *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * @param name - The name of the snapshot.
+ * @returns A method decorator.
  *
  * @example
  * ```typescript
- * SetReactRouteDefinitionsMiddleware(context, next)
+ * import { Service } from '@stone-js/core';
+ * import { Snapshot } from '@stone-js/use-react';
+ *
+ * @Service({ alias: 'userService' })
+ * class UserService {
+ *   @Snapshot()
+ *   showProfile() {
+ *     return { name: 'John Doe' };
+ *   }
+ * }
  * ```
  */
-const SetReactRouteDefinitionsMiddleware = (context, next) => {
-    context
-        .modules
-        .filter(module => hasMetadata(module, REACT_PAGE_KEY))
-        .forEach(module => {
-        const options = getMetadata(module, REACT_PAGE_KEY, { path: '/' });
-        const definition = {
-            ...options,
-            handler: { ...options.handler, module }
+const Snapshot = (name) => {
+    return methodDecoratorLegacyWrapper((target, context) => {
+        return async function (...args) {
+            name = name ?? `${String(Object.getPrototypeOf(this).constructor.name)}.${String(context.name)}`;
+            return await ReactRuntime.instance?.snapshot(name, () => target.apply(this, args));
         };
-        context.blueprint.add('stone.router.definitions', [definition]);
     });
-    return next(context);
 };
+
 /**
- * Blueprint middleware to process and register layout definitions from modules.
- *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next pipeline function to continue processing.
- * @returns The updated blueprint or a promise resolving to it.
+ * Sets the error handler for the React adapter and registers error pages.
  *
- * @example
- * ```typescript
- * SetReactPageLayoutMiddleware(context, next)
- * ```
+ * @param errorHandler - The error handler to set for the React adapter.
+ * @param context - The blueprint context containing modules and blueprint.
+ * @returns The updated blueprint context with the error handler and error pages set.
  */
-const SetReactPageLayoutMiddleware = (context, next) => {
+function setUseReactAdapterErrorHandler(errorHandler, context) {
+    context
+        .blueprint
+        .set('stone.adapter.errorHandlers.default', { module: errorHandler, isClass: true });
     context
         .modules
-        .filter(module => hasMetadata(module, REACT_PAGE_LAYOUT_KEY))
+        .filter(module => hasMetadata(module, REACT_ADAPTER_ERROR_PAGE_KEY))
         .forEach(module => {
-        const { name = 'default' } = getMetadata(module, REACT_PAGE_LAYOUT_KEY, { name: 'default' });
-        context.blueprint.set(`stone.useReact.layout.${name}`, { isClass: true, module });
+        const { error, layout, adapterAlias, platform } = getMetadata(module, REACT_ADAPTER_ERROR_PAGE_KEY, { error: 'default' });
+        if (isMatchedAdapter(context.blueprint, platform, adapterAlias)) {
+            Array(error).flat().forEach(name => {
+                context
+                    .blueprint
+                    .set(`stone.useReact.adapterErrorPages.${name}`, { isClass: true, layout, module });
+            });
+        }
     });
-    return next(context);
-};
+    // Process both eager and lazy loaded error pages
+    Object
+        .keys(context.blueprint.get('stone.useReact.adapterErrorPages', {}))
+        .forEach((name) => {
+        context
+            .blueprint
+            .set(`stone.adapter.errorHandlers.${name}`, { module: errorHandler, isClass: true });
+    });
+    return context;
+}
+
 /**
- * Blueprint middleware to set the UseReact as the main event handler for the application.
- *
- * Set as fallback event handler if none of the other event handlers are registered.
- *
- * @param context - The configuration context containing modules and blueprint.
- * @param next - The next function in the pipeline.
- * @returns The updated blueprint.
+ * Create an UseReact response.
  *
- * @example
- * ```typescript
- * SetUseReactEventHandlerMiddleware({ modules, blueprint }, next);
- * ```
+ * @param options - The options for creating the response.
+ * @returns The React response.
  */
-async function SetUseReactEventHandlerMiddleware(context, next) {
-    const blueprint = await next(context);
-    const module = context.modules.find(module => hasMetadata(module, STONE_REACT_APP_KEY));
-    blueprint.setIf('stone.kernel.eventHandler', { module: UseReactEventHandler, isClass: true });
-    if (isNotEmpty(module)) {
-        blueprint.set('stone.useReact.componentEventHandler', { module, isComponent: true, isClass: true });
+const reactResponse = (options) => {
+    if (isNotEmpty(options) &&
+        (isNotEmpty(options.url) ||
+            (isNotEmpty(options.content) && isNotEmpty(options.content.redirect)))) {
+        return reactRedirectResponse(options);
     }
-    return blueprint;
-}
+    return OutgoingHttpResponse.create(options);
+};
 /**
- * Configuration for react processing middleware.
+ * Create an UseReact redirect response.
  *
- * This array defines a list of middleware pipes, each with a `pipe` function and a `priority`.
- * These pipes are executed in the order of their priority values, with lower values running first.
+ * @param options - The options for creating the response.
+ * @returns The React redirect response.
  */
-const metaUseReactBlueprintMiddleware = [
-    { module: SetSSRStaticFileMiddleware, priority: 10 },
-    { module: SetUseReactHooksMiddleware, priority: 10 },
-    { module: SetSSRCompressionMiddleware, priority: 10 },
-    { module: SetReactPageLayoutMiddleware, priority: 10 },
-    { module: SetUseReactEventHandlerMiddleware, priority: 2 },
-    { module: SetReactKernelErrorPageMiddleware, priority: 10 },
-    { module: SetReactAdapterErrorPageMiddleware, priority: 10 },
-    { module: SetReactRouteDefinitionsMiddleware, priority: 10 },
-    { module: SetBrowserResponseMiddlewareMiddleware, priority: 10 }
-];
+const reactRedirectResponse = (options) => {
+    return RedirectResponse.create({ statusCode: 302, ...options });
+};
 
 /**
- * Default blueprint for a React-based Stone.js application.
+ * Class representing an UseReactServerErrorHandler.
  *
- * - Defines middleware, lifecycle hooks, and the default HTML template path.
+ * Adapter level error handler for React applications.
  */
-const useReactBlueprint = {
-    stone: {
-        useReact: {},
-        blueprint: {
-            middleware: metaUseReactBlueprintMiddleware
-        },
-        services: [MetaReactRuntime],
-        providers: [MetaUseReactServiceProvider]
+class UseReactServerErrorHandler {
+    logger;
+    blueprint;
+    /**
+     * Create an UseReactServerErrorHandler.
+     *
+     * @param options - UseReactServerErrorHandler options.
+     */
+    constructor({ blueprint }) {
+        this.blueprint = blueprint;
+        this.logger = Logger.getInstance();
     }
-};
+    /**
+     * Handle an error.
+     *
+     * @param error - The error to handle.
+     * @param context - The context of the adapter.
+     * @returns The raw response.
+     */
+    async handle(error, context) {
+        this.logger.error(error.message, { error });
+        return context
+            .rawResponseBuilder
+            .add('statusCode', error.statusCode ?? 500)
+            .add('headers', new Headers({ 'Content-Type': 'text/html' }))
+            .add('body', await this.getErrorBody(error, context));
+    }
+    /**
+     * Get the error body.
+     *
+     * @param error - The error to handle.
+     * @returns The error body.
+    */
+    async getErrorBody(error, context) {
+        const statusCode = error.statusCode ?? 500;
+        const template = htmlTemplate(this.blueprint);
+        const ClientApp = await buildAdapterErrorComponent(this.blueprint, context, statusCode, error);
+        return template.replace('<!--app-html-->', renderToString(ClientApp));
+    }
+}
 
 /**
- * Defines a Stone React app using a factory-based or class-based main handler.
+ * Blueprint middleware to dynamically set lifecycle hooks for react.
  *
- * @param moduleOrOptions - A factory function or class constructor for the main page.
- * @param optionsOrBlueprints - Optional application-level configuration.
- * @param maybeBlueprints - Additional blueprints to merge.
- * @returns A fully merged Stone blueprint.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
+ *
+ * @example
+ * ```typescript
+ * SetUseReactHooksMiddleware(context, next)
+ * ```
  */
-function defineStoneReactApp(moduleOrOptions = {}, optionsOrBlueprints, maybeBlueprints) {
-    let module;
-    let options = {};
-    let blueprints = [];
-    // Pattern: defineStoneReactApp(handler, options?, blueprints?)
-    if (isFunctionModule(moduleOrOptions)) {
-        module = moduleOrOptions;
-        if (isObjectLikeModule(optionsOrBlueprints)) {
-            options = optionsOrBlueprints;
-            blueprints = Array.isArray(maybeBlueprints) ? maybeBlueprints : [];
-        }
-    }
-    else if (isObjectLikeModule(moduleOrOptions)) { // Pattern: defineStoneReactApp(options, blueprints?)
-        options = moduleOrOptions;
-        blueprints = Array.isArray(optionsOrBlueprints) ? optionsOrBlueprints : [];
-    }
-    const stonePart = {
-        ...options,
-        useReact: {
-            ...options.useReact
-        }
-    };
-    if (isNotEmpty(module)) {
-        stonePart.useReact.componentEventHandler = {
-            module,
-            isComponent: true,
-            isClass: options.isClass,
-            isFactory: options.isClass !== true
-        };
+const SetUseReactHooksMiddleware = (context, next) => {
+    const currentPlatform = context.blueprint.get('stone.adapter.platform', '');
+    const ignorePlatforms = context.blueprint.get('stone.useReact.ignorePlatforms', []);
+    if (!ignorePlatforms.includes(currentPlatform)) {
+        context
+            .blueprint
+            .add('stone.lifecycleHooks.onPreparingResponse', [onPreparingResponse]);
     }
-    return mergeBlueprints(stoneBlueprint, useReactBlueprint, ...blueprints, { stone: stonePart });
-}
-
+    return next(context);
+};
 /**
- * A class decorator for defining a class as a React Handler layout.
+ * Blueprint middleware to process and register kernel error page definitions from modules.
  *
- * @param options - Configuration options for the layout definition.
- * @returns A method decorator to be applied to a class method.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * import { AdapterErrorPage } from '@stone-js/use-react';
- *
- * @AdapterErrorPage({ error: 'UserNotFoundError' })
- * class UserAdapterErrorPage {
- *   render({ error }) {
- *     return <h1>User name: {error.message}</h1>;
- *   }
- * }
+ * SetReactKernelErrorPageMiddleware(context, next)
  * ```
  */
-const AdapterErrorPage = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_ADAPTER_ERROR_PAGE_KEY, { ...options, isClass: true });
+const SetReactKernelErrorPageMiddleware = (context, next) => {
+    context
+        .blueprint
+        .set('stone.kernel.errorHandlers.default', { module: UseReactKernelErrorHandler, isClass: true });
+    context
+        .modules
+        .filter(module => hasMetadata(module, REACT_ERROR_PAGE_KEY))
+        .forEach(module => {
+        const { error, layout } = getMetadata(module, REACT_ERROR_PAGE_KEY, { error: 'default' });
+        Array(error).flat().forEach(name => {
+            context
+                .blueprint
+                .set(`stone.useReact.errorPages.${name}`, { layout, module, isClass: true });
+        });
+    });
+    // Process both eager and lazy loaded error pages
+    Object
+        .keys(context.blueprint.get('stone.useReact.errorPages', {}))
+        .forEach((name) => {
+        context
+            .blueprint
+            .set(`stone.kernel.errorHandlers.${name}`, { module: UseReactKernelErrorHandler, isClass: true });
     });
+    return next(context);
 };
-
 /**
- * A class decorator for defining a class as a React Handler layout.
+ * Blueprint middleware to process and register route definitions from modules.
  *
- * @param options - Configuration options for the layout definition.
- * @returns A method decorator to be applied to a class method.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * import { ErrorPage } from '@stone-js/use-react';
- *
- * @ErrorPage({ error: 'UserNotFoundError' })
- * class UserErrorPage {
- *   render({ error }) {
- *     return <h1>User name: {error.message}</h1>;
- *   }
- * }
+ * SetReactRouteDefinitionsMiddleware(context, next)
  * ```
  */
-const ErrorPage = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_ERROR_PAGE_KEY, { ...options, isClass: true });
+const SetReactRouteDefinitionsMiddleware = (context, next) => {
+    context
+        .modules
+        .filter(module => hasMetadata(module, REACT_PAGE_KEY))
+        .forEach(module => {
+        const options = getMetadata(module, REACT_PAGE_KEY, { path: '/' });
+        const definition = {
+            ...options,
+            handler: { ...options.handler, module }
+        };
+        context.blueprint.add('stone.router.definitions', [definition]);
     });
+    return next(context);
 };
-
 /**
- * Hook decorator to mark a method as a lifecycle hook
- * And automatically add it to the global lifecycle hook registry.
+ * Blueprint middleware to process and register layout definitions from modules.
+ *
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * class MyClass {
- *    // ...
- *    @Hook('onPreparingPage')
- *    onPreparingPage () {}
- * }
+ * SetReactPageLayoutMiddleware(context, next)
  * ```
- *
- * @param name - The name of the lifecycle hook.
- * @returns A class decorator function that sets the metadata using the provided options.
  */
-const Hook = (name) => {
-    return methodDecoratorLegacyWrapper((_target, context) => {
-        addMetadata(context, LIFECYCLE_HOOK_KEY, { name, method: context.name });
+const SetReactPageLayoutMiddleware = (context, next) => {
+    context
+        .modules
+        .filter(module => hasMetadata(module, REACT_PAGE_LAYOUT_KEY))
+        .forEach(module => {
+        const { name = 'default' } = getMetadata(module, REACT_PAGE_LAYOUT_KEY, { name: 'default' });
+        context.blueprint.set(`stone.useReact.layout.${name}`, { isClass: true, module });
     });
+    return next(context);
 };
-
 /**
- * A class decorator for defining a class as a React Page route action.
- * Uses the `Match` decorator internally to register the route with the HTTP `GET` method.
+ * Blueprint middleware to set the UseReact as the main event handler for the application.
  *
- * @param options - Configuration options for the route definition, excluding the `methods` property.
- * @returns A method decorator to be applied to a class method.
+ * Set as fallback event handler if none of the other event handlers are registered.
+ *
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next function in the pipeline.
+ * @returns The updated blueprint.
  *
  * @example
  * ```typescript
- * import { Page } from '@stone-js/use-react';
- *
- * @Page('/user-profile')
- * class UserPage {
- *   handle({ event }): Record<string, string> {
- *     return { name: 'Jane Doe' };
- *   }
- *
- *   render({ data }) {
- *     return <h1>User name: {data.name}</h1>;
- *   }
- * }
+ * SetUseReactEventHandlerMiddleware({ modules, blueprint }, next);
  * ```
  */
-const Page = (path, options = {}) => {
-    return classDecoratorLegacyWrapper((target, context) => {
-        setMetadata(context, REACT_PAGE_KEY, {
-            ...options,
-            path,
-            method: GET,
-            methods: [],
-            handler: { isClass: true, isComponent: true, layout: options.layout, module: target }
-        });
-    });
-};
+async function SetUseReactEventHandlerMiddleware(context, next) {
+    const blueprint = await next(context);
+    const module = context.modules.find(module => hasMetadata(module, STONE_REACT_APP_KEY));
+    blueprint.setIf('stone.kernel.eventHandler', { module: UseReactEventHandler, isClass: true });
+    if (isNotEmpty(module)) {
+        blueprint.set('stone.useReact.componentEventHandler', { module, isComponent: true, isClass: true });
+    }
+    return blueprint;
+}
 
 /**
- * A class decorator for defining a class as a React Page layout.
+ * Blueprint middleware to process and register adapter error page definitions from modules.
  *
- * @param options - Configuration options for the layout definition.
- * @returns A method decorator to be applied to a class method.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * import { PageLayout } from '@stone-js/use-react';
- *
- * @PageLayout({ name: 'UserPageLayout' })
- * class UserPageLayout {
- *   render({ data }) {
- *     return <h1>User name: {data.name}</h1>;
- *   }
- * }
+ * SetReactAdapterErrorPageMiddleware(context, next)
  * ```
  */
-const PageLayout = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_PAGE_LAYOUT_KEY, { ...options, isClass: true });
-    });
+const SetReactAdapterErrorPageMiddleware = (context, next) => {
+    return next(setUseReactAdapterErrorHandler(UseReactServerErrorHandler, context));
 };
-
 /**
- * Decorator to set the status code of the response.
+ * Blueprint middleware to set StaticFileMiddleware for SSR adapter.
  *
- * @param statusCode - The status code of the response.
- * @param headers - The headers for the response.
- * @returns A method decorator.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * import { Page, PageStatus } from '@stone-js/use-react';
- *
- * @Page('/user-profile')
- * class UserPage {
- *   @PageStatus()
- *   handle() {
- *     return { name: 'John Doe' };
- *   }
- * }
+ * SetSSRStaticFileMiddleware(context, next)
  * ```
  */
-const PageStatus = (statusCode = 200, headers = {}) => {
-    return methodDecoratorLegacyWrapper((target, _context) => {
-        return async function (...args) {
-            const content = await target.apply(this, args);
-            return { content, statusCode, headers };
-        };
-    });
+const SetSSRStaticFileMiddleware = async (context, next) => {
+    context.blueprint.add('stone.kernel.middleware', [MetaStaticFileMiddleware]);
+    return await next(context);
 };
-
 /**
- * Decorator to create a snapshot of the current data.
+ * Blueprint middleware to set CompressionMiddleware for SSR adapter.
  *
- * @param name - The name of the snapshot.
- * @returns A method decorator.
+ * @param context - The configuration context containing modules and blueprint.
+ * @param next - The next pipeline function to continue processing.
+ * @returns The updated blueprint or a promise resolving to it.
  *
  * @example
  * ```typescript
- * import { Service } from '@stone-js/core';
- * import { Snapshot } from '@stone-js/use-react';
- *
- * @Service({ alias: 'userService' })
- * class UserService {
- *   @Snapshot()
- *   showProfile() {
- *     return { name: 'John Doe' };
- *   }
- * }
+ * SetSSRCompressionMiddleware(context, next)
  * ```
  */
-const Snapshot = (name) => {
-    return methodDecoratorLegacyWrapper((target, context) => {
-        return async function (...args) {
-            name = name ?? `${String(Object.getPrototypeOf(this).constructor.name)}.${String(context.name)}`;
-            return await ReactRuntime.instance?.snapshot(name, () => target.apply(this, args));
-        };
-    });
+const SetSSRCompressionMiddleware = async (context, next) => {
+    context.blueprint.add('stone.kernel.middleware', [MetaCompressionMiddleware]);
+    return await next(context);
 };
+/**
+ * Configuration for react processing middleware.
+ *
+ * This array defines a list of middleware pipes, each with a `pipe` function and a `priority`.
+ * These pipes are executed in the order of their priority values, with lower values running first.
+ */
+const metaServerUseReactBlueprintMiddleware = [
+    { module: SetSSRStaticFileMiddleware, priority: 10 },
+    { module: SetUseReactHooksMiddleware, priority: 10 },
+    { module: SetSSRCompressionMiddleware, priority: 10 },
+    { module: SetReactPageLayoutMiddleware, priority: 10 },
+    { module: SetUseReactEventHandlerMiddleware, priority: 2 },
+    { module: SetReactKernelErrorPageMiddleware, priority: 10 },
+    { module: SetReactAdapterErrorPageMiddleware, priority: 10 },
+    { module: SetReactRouteDefinitionsMiddleware, priority: 10 }
+];
+
+/**
+ * Middleware for the React blueprint.
+ */
+internalUseReactBlueprint.stone.useReact.ignorePlatforms = [NODE_CONSOLE_PLATFORM];
+internalUseReactBlueprint.stone.blueprint = { middleware: metaServerUseReactBlueprintMiddleware };
+/**
+ * Default blueprint for a React-based Stone.js application.
+ *
+ * - Defines middleware, lifecycle hooks, and the default HTML template path.
+ */
+const useReactBlueprint = internalUseReactBlueprint;
 
 /**
  * UseReact decorator.
@@ -1784,16 +1627,26 @@ const StoneClient = ({ children }) => {
 /**
  * Internal link component using Stone.js router.
  */
-const InternalLink = ({ to, href, noRel, children, className, defaultNav, selectedClass = 'selected', ariaCurrentValue = 'page', rel = 'noopener noreferrer' }) => {
+const StoneLink = ({ to, href, noRel, external, children, ariaCurrentValue = 'page', selectedClass = 'selected', ...rest }) => {
+    const isExternal = external === true;
+    const shouldHandleNav = !isExternal && isNotEmpty(to);
     const router = useContext(StoneContext).container.resolve(Router);
-    const path = isObjectLikeModule(to) ? router.generate(to) : to ?? href;
+    const path = useMemo(() => {
+        return isObjectLikeModule(to) ? router.generate(to) : to ?? href ?? '#';
+    }, [to, href, router]);
     const [currentRoute, setCurrentRoute] = useState(router.getCurrentRoute());
     const selectedClassName = currentRoute?.path === path ? selectedClass : undefined;
-    const elemClassName = [className, selectedClassName].filter(Boolean).join(' ').trim();
+    const elemClassName = [rest.className, selectedClassName].filter(Boolean).join(' ').trim();
     const handleClick = (event) => {
+        rest.onClick?.(event);
+        if (event.defaultPrevented || isExternal)
+            return;
         event.preventDefault();
-        router.navigate(to ?? '');
+        isNotEmpty(to) && router.navigate(to);
     };
+    if (isEmpty(to) && isEmpty(href)) {
+        Logger.warn('StoneLink: missing "to" or "href"');
+    }
     useEffect(() => {
         const routerEventHandler = (event) => {
             setCurrentRoute(event.get('route'));
@@ -1803,19 +1656,13 @@ const InternalLink = ({ to, href, noRel, children, className, defaultNav, select
             router.off(RouteEvent.ROUTED, routerEventHandler);
         };
     }, [router]);
-    return defaultNav === true
-        ? (jsx("a", { href: path, className: elemClassName, "aria-current": ariaCurrentValue, rel: noRel !== undefined ? undefined : rel, children: children }))
-        : (jsx("button", { onClick: handleClick, className: elemClassName, "aria-current": ariaCurrentValue, rel: noRel !== undefined ? undefined : rel, children: children }));
-};
-/**
- * External link component rendering a regular <a> tag.
- */
-const ExternalLink = ({ to, href, noRel, target, children, className, ariaCurrentValue = 'page', rel = 'noopener noreferrer' }) => (jsx("a", { target: target, className: className, "aria-current": ariaCurrentValue, rel: noRel !== undefined ? undefined : rel, href: typeof to === 'string' ? to : href, children: children }));
-/**
- * Main StoneLink component delegating to internal or external versions.
- */
-const StoneLink = (props) => {
-    return props.external === true ? jsx(ExternalLink, { ...props }) : jsx(InternalLink, { ...props });
+    return (
+    // eslint-disable-next-line react/jsx-no-target-blank
+    jsx("a", { ...rest, href: path, className: elemClassName, target: isExternal ? '_blank' : rest.target, "aria-current": isNotEmpty(selectedClassName) ? ariaCurrentValue : undefined, rel: noRel === true
+            ? undefined
+            : isExternal
+                ? 'noopener noreferrer'
+                : rest.rel, onClick: shouldHandleNav ? handleClick : rest.onClick, children: children }));
 };
 
 /**
@@ -1830,7 +1677,7 @@ const StoneLink = (props) => {
  * @param options - The options to create the Stone Outlet.
  * @returns The Stone Outlet component.
  */
-const StoneOutlet = ({ children }) => {
+const StoneOutlet = ({ children, ...rest }) => {
     const [currentView, setCurrentView] = useState(children);
     useEffect(() => {
         const eventName = STONE_PAGE_EVENT_OUTLET;
@@ -1842,7 +1689,7 @@ const StoneOutlet = ({ children }) => {
         window.addEventListener(eventName, handleEvent);
         return () => window.removeEventListener(eventName, handleEvent);
     }, []);
-    return jsx("div", { "data-stone-outlet": 'true', children: currentView });
+    return jsx("div", { ...rest, "data-stone-outlet": 'true', children: currentView });
 };
 
 /**
@@ -1856,4 +1703,4 @@ const StoneServer = ({ children }) => {
     return isServer() ? jsx(Fragment, { children: children }) : jsx(Fragment, {});
 };
 
-export { AdapterErrorPage, BrowserResponseMiddleware, ErrorPage, Hook, MetaBrowserResponseMiddleware, MetaReactRuntime, MetaUseReactServiceProvider, Page, PageLayout, PageStatus, REACT_ADAPTER_ERROR_PAGE_KEY, REACT_ERROR_PAGE_KEY, REACT_PAGE_KEY, REACT_PAGE_LAYOUT_KEY, ReactRuntime, STONE_DOM_ATTR, STONE_PAGE_EVENT_OUTLET, STONE_REACT_APP_KEY, STONE_SNAPSHOT, SetBrowserResponseMiddlewareMiddleware, SetReactAdapterErrorPageMiddleware, SetReactKernelErrorPageMiddleware, SetReactPageLayoutMiddleware, SetReactRouteDefinitionsMiddleware, SetSSRCompressionMiddleware, SetSSRStaticFileMiddleware, SetUseReactEventHandlerMiddleware, SetUseReactHooksMiddleware, Snapshot, StoneClient, StoneContext, StoneError, StoneLink, StoneOutlet, StonePage, StoneServer, UseReact, UseReactBrowserErrorHandler, UseReactError, UseReactEventHandler, UseReactKernelErrorHandler, UseReactServerErrorHandler, UseReactServiceProvider, applyHeadContextToDom, applyHeadContextToHtmlString, applyMeta, buildAdapterErrorComponent, buildAppComponent, buildLayoutComponent, buildPageComponent, defineAdapterErrorPage, defineErrorPage, definePage, definePageLayout, defineStoneReactApp, executeHandler, executeHooks, getAppRootElement, getBrowserContent, getResponseSnapshot, getServerContent, htmlTemplate, hydrateReactApp, isClient, isSSR, isServer, metaUseReactBlueprintMiddleware, onPreparingResponse, prepareErrorPage, prepareFallbackErrorPage, preparePage, reactRedirectResponse, reactResponse, renderReactApp, renderStoneSnapshot, resolveComponent, resolveLazyComponent, snapshotResponse, useReactBlueprint };
+export { AdapterErrorPage, ErrorPage, Hook, MetaReactRuntime, MetaUseReactServiceProvider, Page, PageLayout, PageStatus, REACT_ADAPTER_ERROR_PAGE_KEY, REACT_ERROR_PAGE_KEY, REACT_PAGE_KEY, REACT_PAGE_LAYOUT_KEY, ReactRuntime, STONE_DOM_ATTR, STONE_PAGE_EVENT_OUTLET, STONE_REACT_APP_KEY, STONE_SNAPSHOT, SetReactAdapterErrorPageMiddleware, SetReactKernelErrorPageMiddleware, SetReactPageLayoutMiddleware, SetReactRouteDefinitionsMiddleware, SetSSRCompressionMiddleware, SetSSRStaticFileMiddleware, SetUseReactEventHandlerMiddleware, SetUseReactHooksMiddleware, Snapshot, StoneClient, StoneContext, StoneError, StoneLink, StoneOutlet, StonePage, StoneServer, UseReact, UseReactError, UseReactEventHandler, UseReactKernelErrorHandler, UseReactServerErrorHandler, UseReactServiceProvider, applyHeadContextToDom, applyHeadContextToHtmlString, applyMeta, buildAdapterErrorComponent, buildAppComponent, buildLayoutComponent, buildPageComponent, defineAdapterErrorPage, defineErrorPage, definePage, definePageLayout, defineStoneReactApp, executeHandler, executeHooks, getAppRootElement, getBrowserContent, getResponseSnapshot, getServerContent, htmlTemplate, hydrateReactApp, internalUseReactBlueprint, isClient, isSSR, isServer, metaServerUseReactBlueprintMiddleware, onPreparingResponse, prepareErrorPage, prepareFallbackErrorPage, preparePage, reactRedirectResponse, reactResponse, renderReactApp, renderStoneSnapshot, resolveComponent, resolveLazyComponent, setUseReactAdapterErrorHandler, snapshotResponse, useReactBlueprint };