rasengan 1.2.1-beta.4 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 ## Unreleased
 
+## 1.2.2 (2026-06-01)
+
+### Features
+
+- add custom ErrorBoundary d419e67
+
+### Bug Fixes
+
+- add error templates and fix flat-routes error regarding the default layout 333414d
+- catch error occuring in component definition 62d6d51
+
+## 1.2.1 (2026-04-03)
+
 ## 1.2.1-beta.4 (2026-01-11)
 
 ## 1.2.1-beta.3 (2026-01-11)

package/lib/esm/core/plugins/index.js

@@ -9,29 +9,26 @@ import { preRenderApp } from '../../server/node/index.js';
 function loadRasenganGlobal() {
     return {
         name: 'vite-plugin-rasengan-config',
-        async config(_, { command }) {
-            if (command !== 'build')
-                return;
-            const packageJsonPath = resolve(process.cwd(), 'package.json');
-            if (!fs.existsSync(packageJsonPath)) {
-                throw new Error(`Package.json file not found at: ${packageJsonPath}`);
+        async config() {
+            let version = '';
+            try {
+                const rasenganPkgPath = resolve(process.cwd(), 'node_modules/rasengan/package.json');
+                if (fs.existsSync(rasenganPkgPath)) {
+                    const raw = fs.readFileSync(rasenganPkgPath, { encoding: 'utf-8' });
+                    version = JSON.parse(raw).version || '';
+                }
             }
-            const packageJsonRaw = fs.readFileSync(packageJsonPath, {
-                encoding: 'utf-8',
-            });
-            const packageJson = JSON.parse(packageJsonRaw);
+            catch { }
             const rasenganConfig = {
-                version: packageJson.version,
+                version,
                 ssr: true,
             };
-            // Inject the configuration as a global constant
             return {
                 define: {
                     ['Rasengan']: JSON.stringify(rasenganConfig),
                 },
             };
         },
-        apply: 'build',
     };
 }
 function rasenganConfigPlugin() {

package/lib/esm/entries/client/render.js

@@ -4,11 +4,18 @@ import { StrictMode } from 'react';
 import { RootComponent } from '../../routing/components/template.js';
 import { generateRoutes, preloadMatches, } from '../../routing/utils/generate-routes.js';
 import { createBrowserRouter, RouterProvider } from 'react-router';
+import { ErrorOverlayProvider, errorStore, } from '../../routing/error-overlay/index.js';
 const isSpaMode = Boolean(window.__RASENGAN_SPA_MODE__);
 export default async function renderApp(App, AppRouter, options) {
+    // Forward SSR errors to the error overlay
+    const ssrError = window.__RASENGAN_SSR_ERROR__;
+    if (ssrError) {
+        const err = new Error(ssrError.message);
+        err.name = ssrError.name;
+        err.stack = ssrError.stack;
+        errorStore.addError(err, 'global');
+    }
     // Get root element
-    // We need to get the root element to render the app - (SPA mode)
-    // or to hydrate the app - (SSR mode)
     const root = document.getElementById('root');
     if (!root) {
         throw new Error('#root element not found in the DOM');
@@ -17,18 +24,24 @@ export default async function renderApp(App, AppRouter, options) {
     const RasenganRouter = await AppRouter;
     // Generate routes for the browser routing
     const routes = generateRoutes(RasenganRouter);
-    // Preload lazy routes
-    // We have to only preload the routes that are matched for the current URL
-    // The remaining routing will be lazy loaded on the client after routes change
-    await preloadMatches(window.location, routes);
+    if (!ssrError) {
+        // Preload lazy routes
+        // We have to only preload the routes that are matched for the current URL
+        // The remaining routing will be lazy loaded on the client after routes change
+        await preloadMatches(window.location, routes);
+    }
     // Create router
     let router = createBrowserRouter(routes, {
         hydrationData: window.__staticRouterHydrationData,
     });
     // Generate client router
     const ClientRouter = () => _jsx(RouterProvider, { router: router });
+    // Detect dev mode
+    const devMode = typeof import.meta !== 'undefined' &&
+        import.meta.env?.DEV === true;
     // Generate app tree
-    const appTree = options.reactStrictMode ? (_jsx(StrictMode, { children: _jsx(App, { Component: (props) => (_jsx(RootComponent, { ...props, Router: ClientRouter })) }) })) : (_jsx(App, { Component: (props) => _jsx(RootComponent, { ...props, Router: ClientRouter }) }));
+    const appContent = options.reactStrictMode ? (_jsx(StrictMode, { children: _jsx(App, { Component: (props) => (_jsx(RootComponent, { ...props, Router: ClientRouter })) }) })) : (_jsx(App, { Component: (props) => _jsx(RootComponent, { ...props, Router: ClientRouter }) }));
+    const appTree = (_jsx(ErrorOverlayProvider, { devMode: devMode, children: appContent }));
     // Render app
     if (isSpaMode) {
         // No SSR markup, so start fresh
@@ -36,6 +49,10 @@ export default async function renderApp(App, AppRouter, options) {
             onCaughtError: (error) => {
                 console.error(error);
             },
+            onUncaughtError(error, errorInfo) {
+                console.error(error);
+                console.error(errorInfo);
+            },
             onRecoverableError(error, errorInfo) {
                 console.error(error);
                 console.error(errorInfo);

package/lib/esm/entries/server/entry.server.js

@@ -28,7 +28,7 @@ export const render = async (StaticRouterComponent, res, options, stream = true)
         Template = (await loadModuleSSR(`${rootPath}/src/template`)).default;
     }
     if (stream) {
-        await renderToStream(_jsx(TemplateLayout, { StaticRouterComponent: StaticRouterComponent, metadata: metadata, assets: assets, App: App, Template: Template }), res);
+        await renderToStream(_jsx(TemplateLayout, { StaticRouterComponent: StaticRouterComponent, metadata: metadata, assets: assets, App: App, Template: Template }), res, { statusCode: options.statusCode, responseHeaders: options.responseHeaders });
     }
     else {
         const html = renderToString(_jsx(TemplateLayout, { StaticRouterComponent: StaticRouterComponent, metadata: metadata, assets: assets, App: App, Template: Template }));

package/lib/esm/entries/server/error-template.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TemplateLayout } from './index.js';
+import { renderToString } from '../../server/node/rendering.js';
+export function renderErrorPage(error) {
+    const serialized = JSON.stringify({
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        name: error instanceof Error ? error.name : 'Error',
+    });
+    const ErrorTemplate = ({ Head, Body, Script, }) => (_jsxs("html", { lang: "en", children: [_jsx(Head, { children: _jsx("script", { type: "module", dangerouslySetInnerHTML: {
+                        __html: `window.__RASENGAN_SSR_ERROR__ = ${serialized};`,
+                    } }) }), _jsx(Body, { children: _jsx(Script, { children: _jsx("script", { type: "module", src: "/src/index" }) }) })] }));
+    return renderToString(_jsx(TemplateLayout, { Template: ErrorTemplate, isSpaMode: false }));
+}

package/lib/esm/entries/server/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { BodyComponent, HeadComponent, RootComponent, ScriptComponent, } from '../../routing/components/template.js';
 import { isServerMode, ServerMode } from '../../server/runtime/mode.js';
+import { ErrorBoundaryFallback } from '../../routing/error-overlay/ErrorBoundaryFallback.js';
 export const TemplateLayout = ({ StaticRouterComponent, metadata, assets, App, Template, isSpaMode = false, }) => {
     // inject vite refresh script to avoid "React refresh preamble was not loaded"
     let viteScripts = _jsx(React.Fragment, {});
@@ -27,5 +28,5 @@ export const TemplateLayout = ({ StaticRouterComponent, metadata, assets, App, T
                     __html: `window.__RASENGAN_SPA_MODE__=false;`,
                 } }) }));
     }
-    return (_jsx(Template, { Head: ({ children }) => (_jsxs(HeadComponent, { metadata: metadata, assets: assets, children: [viteScripts, otherScripts, children] })), Body: ({ children }) => (_jsx(BodyComponent, { asChild: App ? true : false, AppContent: App && (_jsx(App, { Component: (props) => _jsx(RootComponent, { ...props }), children: StaticRouterComponent })), children: children })), Script: ({ children }) => _jsx(ScriptComponent, { children: children }) }));
+    return (_jsx(Template, { Head: ({ children }) => (_jsxs(HeadComponent, { metadata: metadata, assets: assets, children: [viteScripts, otherScripts, children] })), Body: ({ children }) => (_jsx(BodyComponent, { asChild: App ? true : false, AppContent: App && (_jsx(ErrorBoundaryFallback, { children: _jsx(App, { Component: (props) => _jsx(RootComponent, { ...props }), children: StaticRouterComponent }) })), children: children })), Script: ({ children }) => _jsx(ScriptComponent, { children: children }) }));
 };

package/lib/esm/routing/components/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Link, useLocation, useParams, useRouteError, } from 'react-router';
 import { useEffect, useRef } from 'react';
+import { errorStore } from '../error-overlay/error-store.js';
 // Extract the environment variables
 const extractEnv = () => {
     try {
@@ -55,75 +56,17 @@ export function ErrorBoundary() {
             }, children: _jsx("p", { style: {
                     fontSize: '18px',
                 }, children: "Application Error" }) }));
-    if (isRouteErrorResponse(error)) {
-        return (_jsxs("section", { style: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 100,
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100vh',
-                width: '100vw',
-                gap: 10,
-                backgroundColor: '#fff',
-            }, children: [_jsx("p", { style: {
-                        fontSize: '18px',
-                    }, children: "Application Error" }), _jsxs("h1", { style: {
-                        fontSize: '18px',
-                    }, children: [error.status, " ", error.statusText] }), _jsx("p", { style: {
-                        fontSize: '18px',
-                    }, children: error.data })] }));
-    }
-    else if (error instanceof Error) {
-        return (_jsxs("section", { style: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 100,
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'start',
-                alignItems: 'start',
-                height: '100vh',
-                width: '100vw',
-                padding: 20,
-                backgroundColor: '#fff',
-            }, children: [_jsx("h1", { style: {
-                        fontSize: '1.4rem',
-                        fontWeight: 'bold',
-                        marginBottom: 5,
-                    }, children: "Application Error" }), _jsx("p", { style: {
-                        fontSize: '1rem',
-                        marginBottom: 10,
-                    }, children: error.message }), _jsxs("div", { style: {
-                        marginTop: 20,
-                        overflow: 'auto',
-                        width: '100%',
-                        maxHeight: '100vh',
-                        padding: '10px 20px',
-                        borderRadius: 10,
-                        backgroundColor: '#f5f5f5',
-                    }, children: [_jsx("p", { style: {
-                                fontWeight: 'bold',
-                                fontSize: '1.2rem',
-                                color: '#000',
-                            }, children: "The stack trace is:" }), _jsx("pre", { style: {
-                                whiteSpace: 'pre-wrap',
-                                wordWrap: 'break-word',
-                                fontSize: '1rem',
-                                color: '#ff0000aa',
-                            }, children: error.stack })] })] }));
-    }
-    else {
-        return _jsx("h1", { children: "Unknown Error" });
-    }
+    useEffect(() => {
+        if (!DEV)
+            return;
+        const err = error instanceof Error
+            ? error
+            : isRouteErrorResponse(error)
+                ? new Error(`${error.status} ${error.statusText}: ${error.data}`)
+                : new Error(String(error));
+        errorStore.addError(err, 'route');
+    }, [error, DEV]);
+    return null;
 }
 /**
  * Page component that defines title and description to a page

package/lib/esm/routing/error-overlay/ErrorBoundaryFallback.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import { errorStore } from './error-store.js';
+export class ErrorBoundaryFallback extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, info) {
+        errorStore.addError(error, 'react', info.componentStack);
+    }
+    render() {
+        if (this.state.hasError) {
+            if (typeof process !== 'undefined' &&
+                process.env?.NODE_ENV === 'production') {
+                return (_jsx("section", { style: {
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 100,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                        width: '100vw',
+                        gap: 10,
+                        backgroundColor: '#fff',
+                    }, children: _jsx("p", { style: {
+                            fontSize: '18px',
+                        }, children: "Application Error" }) }));
+            }
+            return null;
+        }
+        return this.props.children;
+    }
+}

package/lib/esm/routing/error-overlay/ErrorOverlay.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { errorStore } from './error-store.js';
+import { parseStackFrame, fetchSourceSnippet } from './stack-utils.js';
+import './error-overlay.css';
+export function ErrorOverlay() {
+    const errors = useSyncExternalStore(errorStore.subscribe.bind(errorStore), () => errorStore.getErrors(), () => errorStore.getErrors());
+    const minimized = useSyncExternalStore(errorStore.subscribe.bind(errorStore), () => errorStore.isMinimized(), () => errorStore.isMinimized());
+    const [activeTab, setActiveTab] = useState(0);
+    const [codePreview, setCodePreview] = useState(null);
+    useEffect(() => {
+        if (errors.length > 0 && activeTab >= errors.length) {
+            setActiveTab(errors.length - 1);
+        }
+    }, [errors.length, activeTab]);
+    useEffect(() => {
+        const error = errors[activeTab];
+        if (!error || !error.error.stack) {
+            setCodePreview(null);
+            return;
+        }
+        const frame = parseStackFrame(error.error.stack);
+        if (!frame) {
+            setCodePreview(null);
+            return;
+        }
+        fetchSourceSnippet(frame.file, frame.line).then((result) => {
+            if (result) {
+                setCodePreview({
+                    snippet: result.snippet,
+                    errorLineIndex: result.errorLineIndex,
+                    file: frame.file,
+                    line: frame.line,
+                });
+            }
+            else {
+                setCodePreview(null);
+            }
+        });
+    }, [activeTab, errors]);
+    if (errors.length === 0)
+        return null;
+    if (minimized)
+        return createPortal(_jsxs("button", { className: "rasengan-error-fab", onClick: () => errorStore.toggleMinimize(), title: `${errors.length} error${errors.length > 1 ? 's' : ''} — click to view`, children: [_jsx("svg", { className: "rasengan-error-fab-icon", viewBox: "0 0 16 16", width: "18", height: "18", fill: "currentColor", children: _jsx("path", { d: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l5.782 10.832c.659 1.234-.165 2.771-1.543 2.771H2.218c-1.378 0-2.202-1.537-1.543-2.771L6.457 1.047zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 7a1 1 0 100-2 1 1 0 000 2z" }) }), _jsx("span", { className: "rasengan-error-fab-count", children: errors.length })] }), document.body);
+    const activeError = errors[activeTab];
+    if (!activeError)
+        return null;
+    const totalErrors = errors.length;
+    const isFirst = activeTab === 0;
+    const isLast = activeTab === totalErrors - 1;
+    const snippetLines = codePreview ? codePreview.snippet.split('\n') : [];
+    const relativeLineStart = codePreview
+        ? codePreview.line - codePreview.errorLineIndex
+        : 0;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "rasengan-error-backdrop" }), _jsxs("div", { className: "rasengan-error-overlay", children: [_jsxs("div", { className: "rasengan-error-overlay-header", children: [_jsxs("div", { className: "rasengan-error-pagination", children: [_jsx("button", { className: "rasengan-error-pagination-btn", disabled: isFirst, onClick: () => setActiveTab(activeTab - 1), title: "Previous error", children: "\u2039" }), _jsxs("span", { className: "rasengan-error-pagination-text", children: [activeTab + 1, " of ", totalErrors] }), _jsx("button", { className: "rasengan-error-pagination-btn", disabled: isLast, onClick: () => setActiveTab(activeTab + 1), title: "Next error", children: "\u203A" })] }), _jsx("div", { className: "rasengan-error-overlay-actions", children: _jsx("button", { className: "rasengan-error-overlay-close", onClick: () => errorStore.toggleMinimize(), title: "Minimize", children: "\u00D7" }) })] }), _jsxs("div", { className: "rasengan-error-overlay-body", children: [_jsxs("div", { className: "rasengan-error-overlay-source", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", style: { marginRight: 4, verticalAlign: -2 }, children: _jsx("path", { d: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l5.782 10.832c.659 1.234-.165 2.771-1.543 2.771H2.218c-1.378 0-2.202-1.537-1.543-2.771L6.457 1.047zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 7a1 1 0 100-2 1 1 0 000 2z" }) }), _jsx("p", { children: activeError.source })] }), _jsx("div", { className: "rasengan-error-overlay-message", children: activeError.error.message || 'Unknown error' }), codePreview && (_jsxs("div", { className: "rasengan-error-code-preview", children: [_jsxs("div", { className: "rasengan-error-code-preview-header", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", style: { marginRight: 4, flexShrink: 0 }, children: _jsx("path", { d: "M2 1.75C2 .784 2.784 0 3.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0112.25 16h-8.5A1.75 1.75 0 012 14.25V1.75zM3.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V5.5h-2.75A1.75 1.75 0 018 3.75V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06z" }) }), _jsx("span", { className: "rasengan-error-code-preview-file", children: codePreview.file }), _jsxs("span", { className: "rasengan-error-code-preview-line", children: ["line ", codePreview.line] })] }), _jsx("div", { className: "rasengan-error-code-preview-content", children: snippetLines.map((lineContent, idx) => {
+                                            const isErrorLine = idx === codePreview.errorLineIndex;
+                                            return (_jsxs("div", { className: `rasengan-error-code-line${isErrorLine ? ' error' : ''}`, children: [_jsx("span", { className: "rasengan-error-code-line-number", children: relativeLineStart + idx }), isErrorLine && (_jsx("span", { className: "rasengan-error-code-line-arrow", children: "\u25B8" })), !isErrorLine && (_jsx("span", { className: "rasengan-error-code-line-arrow" })), _jsx("span", { className: "rasengan-error-code-line-content", children: lineContent })] }, idx));
+                                        }) })] })), activeError.componentStack && (_jsxs("details", { className: "rasengan-error-overlay-section", open: true, children: [_jsx("summary", { className: "rasengan-error-overlay-section-title", children: "Component Stack" }), _jsx("pre", { className: "rasengan-error-overlay-stack", children: activeError.componentStack })] })), activeError.error.stack && (_jsxs("details", { className: "rasengan-error-overlay-section", open: true, children: [_jsx("summary", { className: "rasengan-error-overlay-section-title", children: "Stack Trace" }), _jsx("pre", { className: "rasengan-error-overlay-stack", children: activeError.error.stack })] }))] })] })] }), document.body);
+}

package/lib/esm/routing/error-overlay/ErrorOverlayProvider.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { ErrorBoundaryFallback } from './ErrorBoundaryFallback.js';
+import { errorStore } from './error-store.js';
+import { ErrorOverlay } from './ErrorOverlay.js';
+export function ErrorOverlayProvider({ children, devMode }) {
+    useEffect(() => {
+        if (!devMode)
+            return;
+        const onError = (event) => {
+            errorStore.addError(event.error || new Error(event.message), 'global');
+        };
+        const onRejection = (event) => {
+            const error = event.reason instanceof Error
+                ? event.reason
+                : new Error(String(event.reason));
+            errorStore.addError(error, 'global');
+        };
+        window.addEventListener('error', onError);
+        window.addEventListener('unhandledrejection', onRejection);
+        const hot = import.meta.hot;
+        const handleViteError = (data) => {
+            if (data?.err) {
+                errorStore.addError(data.err, 'vite');
+            }
+        };
+        if (typeof hot?.on === 'function') {
+            hot.on('vite:error', handleViteError);
+        }
+        return () => {
+            window.removeEventListener('error', onError);
+            window.removeEventListener('unhandledrejection', onRejection);
+            if (typeof hot?.off === 'function') {
+                hot.off('vite:error', handleViteError);
+            }
+        };
+    }, [devMode]);
+    return (_jsxs(_Fragment, { children: [_jsx(ErrorBoundaryFallback, { children: children }), devMode && _jsx(ErrorOverlay, {})] }));
+}