@stone-js/use-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,13 +1,11 @@
-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 { isNotEmpty, isEmpty, InitializationError, isMetaClassModule, isMetaFactoryModule, isFunctionModule, isObjectLikeModule, isFunction, 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 { createContext, StrictMode, useState, useEffect, useContext } 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 { 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 { OutgoingHttpResponse, RedirectResponse, MetaStaticFileMiddleware, MetaCompressionMiddleware } from '@stone-js/http-core';
 
 /**
   * Stone DOM Attribute.
@@ -486,7 +484,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 +550,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)
@@ -712,49 +710,6 @@ class ReactRuntime {
 */
 const MetaReactRuntime = { module: ReactRuntime, isClass: true, alias: 'reactRuntime', singleton: true };
 
-/**
- * Class representing an UseReactBrowserErrorHandler.
- *
- * Adapter level error handler for React applications.
- */
-class UseReactBrowserErrorHandler {
-    logger;
-    blueprint;
-    /**
-     * Create an UseReactBrowserErrorHandler.
-     *
-     * @param options - UseReactBrowserErrorHandler 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.
@@ -797,6 +752,34 @@ class UseReactEventHandler {
     }
 }
 
+/**
+ * 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 };
+    }
+}
+
 /**
  * Prepare the page to render.
  *
@@ -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.
  */
@@ -1058,6 +939,60 @@ function defineAdapterErrorPage(module, options) {
     };
 }
 
+/**
+ * Default blueprint for a React-based Stone.js application.
+ *
+ * - Defines middleware, lifecycle hooks, and the default HTML template path.
+ */
+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.
  *
@@ -1164,136 +1099,194 @@ 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.
+ * 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 { AdapterErrorPage } from '@stone-js/use-react';
+ *
+ * @AdapterErrorPage({ error: 'UserNotFoundError' })
+ * class UserAdapterErrorPage {
+ *   render({ error }) {
+ *     return <h1>User name: {error.message}</h1>;
+ *   }
+ * }
+ * ```
  */
-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 }));
-    }
-}
+const AdapterErrorPage = (options) => {
+    return classDecoratorLegacyWrapper((_target, context) => {
+        setMetadata(context, REACT_ADAPTER_ERROR_PAGE_KEY, { ...options, isClass: true });
+    });
+};
+
 /**
- * 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.
+ * 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
- * SetUseReactHooksMiddleware(context, next)
+ * 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>;
+ *   }
+ * }
  * ```
  */
-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 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 }
+        });
+    });
+};
+
+/**
+ * A class decorator for defining a class as a React Page layout.
+ *
+ * @param options - Configuration options for the layout definition.
+ * @returns A method decorator to be applied to a class method.
+ *
+ * @example
+ * ```typescript
+ * import { PageLayout } from '@stone-js/use-react';
+ *
+ * @PageLayout({ name: 'UserPageLayout' })
+ * class UserPageLayout {
+ *   render({ data }) {
+ *     return <h1>User name: {data.name}</h1>;
+ *   }
+ * }
+ * ```
+ */
+const PageLayout = (options) => {
+    return classDecoratorLegacyWrapper((_target, context) => {
+        setMetadata(context, REACT_PAGE_LAYOUT_KEY, { ...options, isClass: true });
+    });
+};
+
+/**
+ * Hook decorator to mark a method as a lifecycle hook
+ * And automatically add it to the global lifecycle hook registry.
+ *
+ * @example
+ * ```typescript
+ * 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 Hook = (name) => {
+    return methodDecoratorLegacyWrapper((_target, context) => {
+        addMetadata(context, LIFECYCLE_HOOK_KEY, { name, method: context.name });
+    });
+};
+
+/**
+ * Decorator to set the status code of the response.
+ *
+ * @param statusCode - The status code of the response.
+ * @param headers - The headers for the response.
+ * @returns A method decorator.
+ *
+ * @example
+ * ```typescript
+ * import { Page, PageStatus } from '@stone-js/use-react';
+ *
+ * @Page('/user-profile')
+ * class UserPage {
+ *   @PageStatus()
+ *   handle() {
+ *     return { name: 'John Doe' };
+ *   }
+ * }
+ * ```
+ */
+const PageStatus = (statusCode = 200, headers = {}) => {
+    return methodDecoratorLegacyWrapper((target, _context) => {
+        return async function (...args) {
+            const content = await target.apply(this, args);
+            return { content, statusCode, headers };
+        };
+    });
 };
+
 /**
- * Blueprint middleware to set BrowserResponseMiddleware for the Browser adapter.
+ * Decorator to create a snapshot of the current data.
+ *
+ * @param name - The name of the snapshot.
+ * @returns A method decorator.
+ *
+ * @example
+ * ```typescript
+ * import { Service } from '@stone-js/core';
+ * import { Snapshot } from '@stone-js/use-react';
  *
- * The MetaBrowserResponseMiddleware is an adapter middleware and is useful
- * for handling outgoing responses and rendering them in the browser.
+ * @Service({ alias: 'userService' })
+ * class UserService {
+ *   @Snapshot()
+ *   showProfile() {
+ *     return { name: 'John Doe' };
+ *   }
+ * }
+ * ```
+ */
+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));
+        };
+    });
+};
+
+/**
+ * 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.
@@ -1301,14 +1294,18 @@ const SetUseReactHooksMiddleware = (context, next) => {
  *
  * @example
  * ```typescript
- * SetBrowserResponseMiddlewareMiddleware(context, next)
+ * SetUseReactHooksMiddleware(context, next)
  * ```
  */
-const SetBrowserResponseMiddlewareMiddleware = async (context, next) => {
-    if (context.blueprint.get('stone.adapter.platform') === BROWSER_PLATFORM) {
-        context.blueprint.add('stone.adapter.middleware', [MetaBrowserResponseMiddleware]);
+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 await next(context);
+    return next(context);
 };
 /**
  * Blueprint middleware to process and register kernel error page definitions from modules.
@@ -1347,80 +1344,6 @@ const SetReactKernelErrorPageMiddleware = (context, next) => {
     });
     return next(context);
 };
-/**
- * Blueprint middleware to process and register adapter error page 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
- * SetReactAdapterErrorPageMiddleware(context, next)
- * ```
- */
-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 });
-    });
-    return next(context);
-};
-/**
- * Blueprint middleware to set StaticFileMiddleware for SSR adapter.
- *
- * @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
- * 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.
- *
- * @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
- * SetSSRCompressionMiddleware(context, next)
- * ```
- */
-const SetSSRCompressionMiddleware = async (context, next) => {
-    import.meta.env.SSR && context.blueprint.add('stone.kernel.middleware', [MetaCompressionMiddleware]);
-    return await next(context);
-};
 /**
  * Blueprint middleware to process and register route definitions from modules.
  *
@@ -1492,267 +1415,187 @@ async function SetUseReactEventHandlerMiddleware(context, next) {
     }
     return blueprint;
 }
+
 /**
- * Configuration for react processing middleware.
+ * Sets the error handler for the React adapter and registers error pages.
  *
- * 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 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 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 }
-];
+function setUseReactAdapterErrorHandler(errorHandler, context) {
+    context
+        .blueprint
+        .set('stone.adapter.errorHandlers.default', { module: errorHandler, 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: errorHandler, isClass: true });
+    });
+    return context;
+}
 
 /**
- * Default blueprint for a React-based Stone.js application.
+ * Create an UseReact response.
  *
- * - Defines middleware, lifecycle hooks, and the default HTML template path.
+ * @param options - The options for creating the response.
+ * @returns The React response.
  */
-const useReactBlueprint = {
-    stone: {
-        useReact: {},
-        blueprint: {
-            middleware: metaUseReactBlueprintMiddleware
-        },
-        services: [MetaReactRuntime],
-        providers: [MetaUseReactServiceProvider]
+const reactResponse = (options) => {
+    if (isNotEmpty(options) &&
+        (isNotEmpty(options.url) ||
+            (isNotEmpty(options.content) && isNotEmpty(options.content.redirect)))) {
+        return reactRedirectResponse(options);
     }
+    return OutgoingHttpResponse.create(options);
+};
+/**
+ * Create an UseReact redirect response.
+ *
+ * @param options - The options for creating the response.
+ * @returns The React redirect response.
+ */
+const reactRedirectResponse = (options) => {
+    return RedirectResponse.create({ statusCode: 302, ...options });
 };
 
 /**
- * Defines a Stone React app using a factory-based or class-based main handler.
+ * Class representing an UseReactServerErrorHandler.
  *
- * @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.
+ * Adapter level error handler for React applications.
  */
-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 : [];
-        }
+class UseReactServerErrorHandler {
+    logger;
+    blueprint;
+    /**
+     * Create an UseReactServerErrorHandler.
+     *
+     * @param options - UseReactServerErrorHandler options.
+     */
+    constructor({ blueprint }) {
+        this.blueprint = blueprint;
+        this.logger = Logger.getInstance();
     }
-    else if (isObjectLikeModule(moduleOrOptions)) { // Pattern: defineStoneReactApp(options, blueprints?)
-        options = moduleOrOptions;
-        blueprints = Array.isArray(optionsOrBlueprints) ? optionsOrBlueprints : [];
+    /**
+     * 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));
     }
-    const stonePart = {
-        ...options,
-        useReact: {
-            ...options.useReact
-        }
-    };
-    if (isNotEmpty(module)) {
-        stonePart.useReact.componentEventHandler = {
-            module,
-            isComponent: true,
-            isClass: options.isClass,
-            isFactory: options.isClass !== true
-        };
+    /**
+     * 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));
     }
-    return mergeBlueprints(stoneBlueprint, useReactBlueprint, ...blueprints, { stone: stonePart });
 }
 
 /**
- * A class decorator for defining a class as a React Handler 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 { AdapterErrorPage } from '@stone-js/use-react';
- *
- * @AdapterErrorPage({ error: 'UserNotFoundError' })
- * class UserAdapterErrorPage {
- *   render({ error }) {
- *     return <h1>User name: {error.message}</h1>;
- *   }
- * }
+ * SetReactAdapterErrorPageMiddleware(context, next)
  * ```
  */
-const AdapterErrorPage = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_ADAPTER_ERROR_PAGE_KEY, { ...options, isClass: true });
-    });
+const SetReactAdapterErrorPageMiddleware = (context, next) => {
+    return next(setUseReactAdapterErrorHandler(UseReactServerErrorHandler, context));
 };
-
 /**
- * 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';
+ * Blueprint middleware to set StaticFileMiddleware for SSR adapter.
  *
- * @ErrorPage({ error: 'UserNotFoundError' })
- * class UserErrorPage {
- *   render({ error }) {
- *     return <h1>User name: {error.message}</h1>;
- *   }
- * }
- * ```
- */
-const ErrorPage = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_ERROR_PAGE_KEY, { ...options, isClass: true });
-    });
-};
-
-/**
- * Hook decorator to mark a method as a lifecycle hook
- * And automatically add it to the global lifecycle hook registry.
+ * @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 () {}
- * }
+ * SetSSRStaticFileMiddleware(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 SetSSRStaticFileMiddleware = async (context, next) => {
+    context.blueprint.add('stone.kernel.middleware', [MetaStaticFileMiddleware]);
+    return await 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 CompressionMiddleware for SSR adapter.
  *
- * @param options - Configuration options for the route definition, excluding the `methods` property.
- * @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 { 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>;
- *   }
- * }
+ * SetSSRCompressionMiddleware(context, 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 }
-        });
-    });
+const SetSSRCompressionMiddleware = async (context, next) => {
+    context.blueprint.add('stone.kernel.middleware', [MetaCompressionMiddleware]);
+    return await next(context);
 };
-
 /**
- * A class decorator for defining a class as a React Page layout.
- *
- * @param options - Configuration options for the layout definition.
- * @returns A method decorator to be applied to a class method.
- *
- * @example
- * ```typescript
- * import { PageLayout } from '@stone-js/use-react';
+ * Configuration for react processing middleware.
  *
- * @PageLayout({ name: 'UserPageLayout' })
- * class UserPageLayout {
- *   render({ data }) {
- *     return <h1>User name: {data.name}</h1>;
- *   }
- * }
- * ```
+ * 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 PageLayout = (options) => {
-    return classDecoratorLegacyWrapper((_target, context) => {
-        setMetadata(context, REACT_PAGE_LAYOUT_KEY, { ...options, isClass: true });
-    });
-};
+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 }
+];
 
 /**
- * Decorator to set the status code of the response.
- *
- * @param statusCode - The status code of the response.
- * @param headers - The headers for the response.
- * @returns A method decorator.
- *
- * @example
- * ```typescript
- * import { Page, PageStatus } from '@stone-js/use-react';
- *
- * @Page('/user-profile')
- * class UserPage {
- *   @PageStatus()
- *   handle() {
- *     return { name: 'John Doe' };
- *   }
- * }
- * ```
+ * Middleware for the React blueprint.
  */
-const PageStatus = (statusCode = 200, headers = {}) => {
-    return methodDecoratorLegacyWrapper((target, _context) => {
-        return async function (...args) {
-            const content = await target.apply(this, args);
-            return { content, statusCode, headers };
-        };
-    });
-};
-
+internalUseReactBlueprint.stone.useReact.ignorePlatforms = [NODE_CONSOLE_PLATFORM];
+internalUseReactBlueprint.stone.blueprint = { middleware: metaServerUseReactBlueprintMiddleware };
 /**
- * Decorator to create a snapshot of the current data.
- *
- * @param name - The name of the snapshot.
- * @returns A method decorator.
- *
- * @example
- * ```typescript
- * import { Service } from '@stone-js/core';
- * import { Snapshot } from '@stone-js/use-react';
+ * Default blueprint for a React-based Stone.js application.
  *
- * @Service({ alias: 'userService' })
- * class UserService {
- *   @Snapshot()
- *   showProfile() {
- *     return { name: 'John Doe' };
- *   }
- * }
- * ```
+ * - Defines middleware, lifecycle hooks, and the default HTML template path.
  */
-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 useReactBlueprint = internalUseReactBlueprint;
 
 /**
  * UseReact decorator.
@@ -1781,6 +1624,33 @@ const StoneClient = ({ children }) => {
     return isClient() ? jsx(Fragment, { children: children }) : jsx(Fragment, {});
 };
 
+/**
+ * A dynamic rendering component that updates its content based on a global event.
+ *
+ * - Listens for `stone:inject:react-page:outlet` and updates its view when triggered.
+ * - Uses `useState` to manage the currently displayed content.
+ * - Automatically cleans up event listeners on unmount.
+ *
+ * This component enables dynamic content updates within a Stone.js application.
+ *
+ * @param options - The options to create the Stone Outlet.
+ * @returns The Stone Outlet component.
+ */
+const StoneOutlet = ({ children }) => {
+    const [currentView, setCurrentView] = useState(children);
+    useEffect(() => {
+        const eventName = STONE_PAGE_EVENT_OUTLET;
+        const handleEvent = (e) => {
+            if (isNotEmpty(e) && isNotEmpty(e.detail)) {
+                setCurrentView(e.detail);
+            }
+        };
+        window.addEventListener(eventName, handleEvent);
+        return () => window.removeEventListener(eventName, handleEvent);
+    }, []);
+    return jsx("div", { "data-stone-outlet": 'true', children: currentView });
+};
+
 /**
  * Internal link component using Stone.js router.
  */
@@ -1818,33 +1688,6 @@ const StoneLink = (props) => {
     return props.external === true ? jsx(ExternalLink, { ...props }) : jsx(InternalLink, { ...props });
 };
 
-/**
- * A dynamic rendering component that updates its content based on a global event.
- *
- * - Listens for `stone:inject:react-page:outlet` and updates its view when triggered.
- * - Uses `useState` to manage the currently displayed content.
- * - Automatically cleans up event listeners on unmount.
- *
- * This component enables dynamic content updates within a Stone.js application.
- *
- * @param options - The options to create the Stone Outlet.
- * @returns The Stone Outlet component.
- */
-const StoneOutlet = ({ children }) => {
-    const [currentView, setCurrentView] = useState(children);
-    useEffect(() => {
-        const eventName = STONE_PAGE_EVENT_OUTLET;
-        const handleEvent = (e) => {
-            if (isNotEmpty(e) && isNotEmpty(e.detail)) {
-                setCurrentView(e.detail);
-            }
-        };
-        window.addEventListener(eventName, handleEvent);
-        return () => window.removeEventListener(eventName, handleEvent);
-    }, []);
-    return jsx("div", { "data-stone-outlet": 'true', children: currentView });
-};
-
 /**
  * Stone Server.
  * This component is used to wrap content
@@ -1856,4 +1699,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 };