rasengan 1.2.1-beta.4 → 1.2.2

package/lib/esm/routing/error-overlay/error-overlay.css

@@ -0,0 +1,472 @@
+:root {
+  --re-bg: #0d1117;
+  --re-surface: #161b22;
+  --re-surface-subtle: #21262d;
+  --re-border: #30363d;
+  --re-text: #e6edf3;
+  --re-text-secondary: #8b949e;
+  --re-error: #f85149;
+  --re-error-hover: #ff7b72;
+  --re-accent: #2f81f7;
+}
+
+.rasengan-error-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(1, 4, 9, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 99998;
+  animation: re-fade-in 0.2s ease;
+}
+
+.rasengan-error-overlay {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+  width: 92%;
+  max-width: 840px;
+  max-height: 82vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--re-bg);
+  border: 1px solid var(--re-border);
+  border-radius: 12px;
+  color: var(--re-text);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  animation: re-overlay-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes re-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes re-overlay-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes re-glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(248, 81, 73, 0.15);
+  }
+}
+
+@keyframes re-dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5);
+  }
+  50% {
+    opacity: 0.8;
+    box-shadow: 0 0 6px 2px rgba(63, 185, 80, 0.3);
+  }
+}
+
+.rasengan-error-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--re-surface);
+  border-bottom: 1px solid var(--re-border);
+  border-left: 3px solid var(--re-error);
+  flex-shrink: 0;
+}
+
+.rasengan-error-pagination {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rasengan-error-version-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--re-text-secondary);
+  font-weight: 500;
+  user-select: none;
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+  padding: 0 8px;
+}
+
+.rasengan-error-version-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #3fb950;
+  animation: re-dot-pulse 2s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.rasengan-error-pagination-btn {
+  background: transparent;
+  border: 1px solid var(--re-border);
+  color: var(--re-text-secondary);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-family: inherit;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+  line-height: 1;
+}
+
+.rasengan-error-pagination-btn:hover:not(:disabled) {
+  background: var(--re-surface-subtle);
+  color: var(--re-text);
+  border-color: var(--re-text-secondary);
+}
+
+.rasengan-error-pagination-btn:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.rasengan-error-pagination-text {
+  font-size: 12px;
+  color: var(--re-text-secondary);
+  min-width: 64px;
+  text-align: center;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.rasengan-error-overlay-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.rasengan-error-overlay-close {
+  background: transparent;
+  border: 1px solid var(--re-border);
+  color: var(--re-text-secondary);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+  line-height: 1;
+  font-family: inherit;
+}
+
+.rasengan-error-overlay-close:hover {
+  background: var(--re-surface-subtle);
+  color: var(--re-text);
+  border-color: var(--re-text-secondary);
+}
+
+.rasengan-error-overlay-body {
+  flex: 1;
+  overflow: auto;
+  padding: 24px 24px 20px;
+}
+
+.rasengan-error-overlay-source {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--re-text-secondary);
+  margin-bottom: 4px;
+}
+
+.rasengan-error-overlay-message {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--re-error);
+  margin-bottom: 20px;
+  line-height: 1.6;
+  word-break: break-word;
+  /* animation: re-glow-pulse 2.5s ease-in-out infinite; */
+}
+
+.rasengan-error-code-preview {
+  margin-bottom: 20px;
+  border: 1px solid var(--re-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--re-surface);
+}
+
+.rasengan-error-code-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  background: var(--re-surface-subtle);
+  border-bottom: 1px solid var(--re-border);
+  font-size: 12px;
+  color: var(--re-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rasengan-error-code-preview-file {
+  font-weight: 500;
+  color: var(--re-text);
+}
+
+.rasengan-error-code-preview-line {
+  color: var(--re-text-secondary);
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.rasengan-error-code-preview-content {
+  padding: 8px 0;
+  overflow-x: auto;
+  font-family:
+    'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.rasengan-error-code-line {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 12px;
+  line-height: 1.6;
+  color: var(--re-text);
+}
+
+.rasengan-error-code-line.error {
+  background: rgba(248, 81, 73, 0.08);
+  border-left: 2px solid var(--re-error);
+}
+
+.rasengan-error-code-line-number {
+  min-width: 30px;
+  text-align: right;
+  padding-right: 12px;
+  color: var(--re-text-secondary);
+  user-select: none;
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.rasengan-error-code-line-arrow {
+  color: var(--re-error);
+  margin-right: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  width: 12px;
+  flex-shrink: 0;
+}
+
+.rasengan-error-code-line-content {
+  white-space: pre;
+  tab-size: 2;
+}
+
+.rasengan-error-overlay-section {
+  margin-top: 16px;
+  border: 1px solid var(--re-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--re-surface);
+}
+
+.rasengan-error-overlay-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--re-text-secondary);
+  padding: 8px 14px;
+  background: var(--re-surface-subtle);
+  border-bottom: 1px solid var(--re-border);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+
+/* .rasengan-error-overlay-section-title::-webkit-details-marker {
+  display: none;
+} */
+
+/* .rasengan-error-overlay-section-title::before {
+  content: '\203A';
+  display: inline-block;
+  margin-right: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--re-text-secondary);
+  transition: transform 0.2s;
+}
+
+.rasengan-error-overlay-section[open] > .rasengan-error-overlay-section-title::before {
+  transform: rotate(90deg);
+} */
+
+.rasengan-error-overlay-section-title:hover {
+  color: var(--re-text);
+}
+
+.rasengan-error-overlay-stack {
+  margin: 0;
+  padding: 14px 16px;
+  font-family:
+    'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--re-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+  tab-size: 2;
+  background: var(--re-bg);
+}
+
+.rasengan-error-overlay-stack::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.rasengan-error-overlay-stack::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rasengan-error-overlay-stack::-webkit-scrollbar-thumb {
+  background: var(--re-border);
+  border-radius: 3px;
+}
+
+.rasengan-error-fab {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 99999;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--re-error);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(248, 81, 73, 0.35);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+  animation: re-fab-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.rasengan-error-fab:hover {
+  transform: scale(1.08);
+  background: var(--re-error-hover);
+  box-shadow: 0 6px 24px rgba(248, 81, 73, 0.45);
+}
+
+.rasengan-error-fab:active {
+  transform: scale(0.95);
+}
+
+.rasengan-error-fab-icon {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.rasengan-error-fab-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--re-text);
+  color: var(--re-bg);
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif;
+}
+
+.rasengan-route-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--re-surface);
+  border-bottom: 1px solid var(--re-border);
+  border-left: 3px solid var(--re-error);
+  color: var(--re-error);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.rasengan-route-error-detail {
+  color: var(--re-text-secondary);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+@keyframes re-fab-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,44 @@
+class ErrorStore {
+    errors = [];
+    listeners = new Set();
+    nextId = 1;
+    minimized = false;
+    addError(error, source = 'global', componentStack) {
+        this.errors = [
+            ...this.errors,
+            {
+                id: this.nextId++,
+                error,
+                source,
+                timestamp: Date.now(),
+                componentStack,
+            },
+        ];
+        this.notify();
+    }
+    clearAll() {
+        this.errors = [];
+        this.minimized = false;
+        this.notify();
+    }
+    toggleMinimize() {
+        this.minimized = !this.minimized;
+        this.notify();
+    }
+    getErrors() {
+        return this.errors;
+    }
+    isMinimized() {
+        return this.minimized;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notify() {
+        this.listeners.forEach((fn) => fn());
+    }
+}
+export const errorStore = new ErrorStore();

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

@@ -0,0 +1,2 @@
+export { ErrorOverlayProvider } from './ErrorOverlayProvider.js';
+export { errorStore } from './error-store.js';

package/lib/esm/routing/error-overlay/stack-utils.js

@@ -0,0 +1,72 @@
+/**
+ * Parse an error stack trace and extract the first meaningful user frame.
+ * Handles Chrome/V8 and Firefox stack trace formats.
+ * Skips the "Error:" header line.
+ *
+ * @param stack - The full error.stack string
+ * @returns The first parsed StackFrame, or null if none found
+ */
+export function parseStackFrame(stack) {
+    const lines = stack.split('\n');
+    for (const rawLine of lines) {
+        const line = rawLine.trim();
+        if (!line || line.startsWith('Error:'))
+            continue;
+        // Match: /path/file.ext:line:col  (absolute path, any extension)
+        const match = line.match(/(\/[^\s:]+\.(?:tsx?|jsx?|m?js|mdx?|css|json|html)):(\d+):(\d+)/);
+        if (match) {
+            const file = match[1].split('?')[0].split('#')[0];
+            return { file, line: parseInt(match[2]), column: parseInt(match[3]) };
+        }
+    }
+    return null;
+}
+/**
+ * Vite plugin transforms may wrap a file's original source in
+ * `export default "..."` with escape sequences. Detect and unwrap.
+ */
+function unwrapExportDefaultString(source) {
+    const match = source.match(/^export default\s+"((?:[^"\\]|\\.)*)"/s);
+    if (match) {
+        try {
+            return JSON.parse('"' + match[1] + '"');
+        }
+        catch {
+            return source;
+        }
+    }
+    return source;
+}
+/**
+ * Fetch the source file from the Vite dev server (using ?raw to get original
+ * source) and return a snippet of lines surrounding the error line.
+ *
+ * @param file         - File path (absolute, e.g. /src/app/page.tsx)
+ * @param errorLine    - 1-indexed line number where the error occurred
+ * @param contextLines - Number of lines to show above and below the error
+ * @returns An object with the snippet string, the 0-indexed error line
+ *          position within the snippet, and the total file line count,
+ *          or null on failure
+ */
+export async function fetchSourceSnippet(file, errorLine, contextLines = 2) {
+    try {
+        const url = file + '?raw';
+        const response = await fetch(url);
+        if (!response.ok)
+            return null;
+        let source = await response.text();
+        // Some Vite transforms wrap the source in `export default "..."`,
+        // escaping newlines and quotes. Detect and unescape it.
+        source = unwrapExportDefaultString(source);
+        const lines = source.split('\n');
+        const totalLines = lines.length;
+        const start = Math.max(0, errorLine - contextLines - 1);
+        const end = Math.min(lines.length, errorLine + contextLines);
+        const snippet = lines.slice(start, end).join('\n');
+        const errorLineIndex = errorLine - 1 - start;
+        return { snippet, errorLineIndex, totalLines };
+    }
+    catch {
+        return null;
+    }
+}

package/lib/esm/routing/utils/define-router.js

@@ -16,12 +16,12 @@ export const defineRouter = (option) => {
             // Check if p is an array
             if (Array.isArray(p)) {
                 for (let page of p) {
-                    if ('source' in page) {
+                    if (page.source) {
                         pageComponentList.push(page);
                         continue;
                     }
                     // When p is a MDXPageComponent
-                    // type property holds the "MDXPageComponent" value, coming from @rasenganjs/mdx plugin
+                    // the "type" property holds the "MDXPageComponent" value, coming from @rasenganjs/mdx plugin
                     if (isMDXPage(page)) {
                         const Page = await convertMDXPageToPageComponent(page);
                         pageComponentList.push(Page);
@@ -32,7 +32,7 @@ export const defineRouter = (option) => {
                 }
                 continue;
             }
-            if ('source' in p) {
+            if (p.source) {
                 pageComponentList.push(p);
                 continue;
             }
@@ -57,9 +57,15 @@ export const defineRouter = (option) => {
         return router;
     };
 };
+/**
+ * This function helps to convert the data provided by @rasenganjs/mdx into a PageComponent component
+ * The MDXPage arg has to follow exactly the type returned by the @rasenganjs/mdx plugin
+ * @param MDXPage
+ * @returns
+ */
 export const convertMDXPageToPageComponent = async (MDXPage) => {
     const Page = () => {
-        return (_jsx(MDXPage.Renderer, { config: MDXPage.config, toc: MDXPage.toc, children: MDXPage.Content }));
+        return (_jsx(MDXPage.Renderer, { config: MDXPage.config, toc: MDXPage.toc, raw: MDXPage.raw, children: MDXPage.Content }));
     };
     Page.path = MDXPage.metadata.path;
     Page.metadata = MDXPage.metadata.metadata;

package/lib/esm/routing/utils/flat-routes.js

@@ -179,7 +179,7 @@ async function generateRouter(tree) {
     let layout;
     // Get layout if defined
     if (root.isLayout) {
-        if ('source' in root) {
+        if (root.source) {
             layout = root;
         }
         else {
@@ -216,7 +216,7 @@ async function generateRoutes(tree) {
             // Handle layout
             if (node.isLayout) {
                 let layout;
-                if ('source' in node) {
+                if (node.source) {
                     layout = node;
                 }
                 else {
@@ -257,7 +257,7 @@ async function generateRoutes(tree) {
     }
     catch (error) {
         console.error(error);
-        // TODO: Handle error
+        throw error;
     }
 }
 /**
@@ -284,8 +284,14 @@ export async function flatRoutes(fn) {
         const layoutModulesMap = new Map([...modulesMap.entries()].filter(([filePath]) => filePath.includes('layout.')));
         // Filter out pages
         const pageModulesMap = new Map([...modulesMap.entries()].filter(([filePath]) => filePath.includes('.page.')));
+        const isRootLayoutExists = Object.keys(layoutModulesMap).find((path) => [
+            `${basePath}layout.ts`,
+            `${basePath}layout.tsx`,
+            `${basePath}layout.jsx`,
+            `${basePath}layout.js`,
+        ].includes(path));
         // Handle the case where modules are empty
-        if (layoutModulesMap.size === 0) {
+        if (!isRootLayoutExists) {
             insertNodeToTree(tree, ['_'], {
                 component: DefaultLayout,
                 metadata: {},
@@ -315,6 +321,5 @@ export async function flatRoutes(fn) {
     catch (error) {
         console.error(error);
         throw error;
-        // TODO: Handle error
     }
 }

package/lib/esm/routing/utils/generate-routes.js

@@ -183,7 +183,7 @@ export const generateRoutes = (router, isRoot = true, parentLayoutPath = undefin
     let layoutPath;
     try {
         // Check if the layout is coming from the file-based routing system
-        if ('source' in router.layout) {
+        if (router.layout.source) {
             const layoutNode = router.layout;
             layoutPath = layoutNode.path;
             route = {
@@ -322,7 +322,7 @@ export const generateRoutes = (router, isRoot = true, parentLayoutPath = undefin
         // Get informations about pages
         const pages = router.pages.map((p) => {
             // Check if the page is coming from file-based routing system
-            if ('source' in p) {
+            if (p.source) {
                 const pageNode = p;
                 // /home => home
                 // / => /
@@ -474,6 +474,7 @@ export const generateRoutes = (router, isRoot = true, parentLayoutPath = undefin
     }
     catch (error) {
         console.error(error);
+        throw error;
     }
     finally {
         // Return the formated router