round-core 0.1.8 → 0.2.0

package/README.md

@@ -115,6 +115,80 @@ export default function App() {
 }
 ```
 
+## Markdown rendering with `@round-core/markdown`
+
+Round includes an optional companion package for markdown rendering with
+syntax highlighting and rich code blocks.
+
+Install it alongside `round-core`:
+
+```bash
+npm install @round-core/markdown
+```
+
+or with Bun:
+
+```bash
+bun add @round-core/markdown
+```
+
+Then use it in a `.round` file or JSX component:
+
+```jsx
+import { createElement } from 'round-core';
+import { Markdown, defaultMarkdownStyles as markdown } from '@round-core/markdown';
+import '@round-core/markdown/styles.css';
+
+export default function App() {
+    const content = `
+# Markdown with code blocks
+
+You can render fenced code blocks with syntax highlighting:
+
+\`\`\`javascript
+const value = signal(0);
+\`\`\`
+`;
+
+    return (
+        <div>
+            <Markdown content={content}/>
+        </div>
+    );
+}
+```
+
+You can also theme the markdown surface (background/text) and accents via
+`options.theme`:
+
+```jsx
+<Markdown
+  content={content}
+  options={{
+    theme: {
+      // Dark card-like surface
+      markdownBackground: '#020617',
+      markdownText: '#e5e7eb',
+      primaryColor: '#e5e7eb',
+      secondaryColor: '#38bdf8',
+    },
+  }}
+/>
+
+<Markdown
+  content={content}
+  options={{
+    theme: {
+      // Light mode
+      markdownBackground: '#ffffff',
+      markdownText: '#0f172a',
+      primaryColor: '#0f172a',
+      secondaryColor: '#2563eb',
+    },
+  }}
+/>
+```
+
 ## Core API & Examples
 
 ### `signal(initialValue)`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "round-core",
-    "version": "0.1.8",
+    "version": "0.2.0",
     "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
     "main": "./src/index.js",
     "types": "./src/index.d.ts",

package/src/cli.js

@@ -231,7 +231,7 @@ async function runInit({ name }) {
             preview: 'round preview'
         },
         dependencies: {
-            'round-core': '^0.0.4'
+            'round-core': '^0.1.9'
         },
         devDependencies: {
             vite: '^5.0.0'

package/src/runtime/router.js

@@ -17,6 +17,10 @@ let hasMatchForPath = false;
 const pathHasMatch = signal(false);
 const pathEvalReady = signal(true);
 
+// Per-path scroll positions so each route can keep its own scroll offset.
+const scrollPositions = hasWindow ? new Map() : null;
+let lastScrollPath = hasWindow ? window.location.pathname : '/';
+
 let defaultNotFoundComponent = null;
 let autoNotFoundMounted = false;
 let userProvidedNotFound = false;
@@ -30,7 +34,26 @@ function ensureListener() {
     mountAutoNotFound();
 
     window.addEventListener('popstate', () => {
-        currentPath(window.location.pathname);
+        const rawPrev = lastScrollPath;
+        const rawNext = window.location.pathname;
+
+        const prevPath = normalizePathname(rawPrev);
+        const nextPath = normalizePathname(rawNext);
+
+        if (scrollPositions) {
+            // Save scroll for the route we are leaving
+            const y = window.scrollY ?? window.pageYOffset ?? 0;
+            scrollPositions.set(prevPath, y);
+        }
+
+        lastScrollPath = rawNext;
+        currentPath(rawNext);
+
+        if (scrollPositions) {
+            // Restore scroll for the route we are entering (or default to top)
+            const saved = scrollPositions.get(nextPath) ?? 0;
+            window.scrollTo(0, saved);
+        }
     });
 }
 
@@ -76,7 +99,6 @@ export function useRouteReady() {
 export function getIsNotFound() {
     const pathname = normalizePathname(currentPath());
     if (pathname === '/') return false;
-    if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
     return !Boolean(pathHasMatch());
 }
 
@@ -84,7 +106,8 @@ export function useIsNotFound() {
     return () => {
         const pathname = normalizePathname(currentPath());
         if (pathname === '/') return false;
-        if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
+        // Mirror getIsNotFound: react immediately to the current path and
+        // the latest match flag, instead of waiting for pathEvalReady.
         return !Boolean(pathHasMatch());
     };
 }
@@ -136,12 +159,26 @@ export function navigate(to, options = {}) {
     if (!hasWindow) return;
     ensureListener();
 
+    const fromPath = normalizePathname(currentPath());
+    if (scrollPositions) {
+        const y = window.scrollY ?? window.pageYOffset ?? 0;
+        scrollPositions.set(fromPath, y);
+    }
+
     const normalizedTo = normalizeTo(to);
     const replace = Boolean(options.replace);
     if (replace) window.history.replaceState({}, '', normalizedTo);
     else window.history.pushState({}, '', normalizedTo);
 
-    currentPath(window.location.pathname);
+    const rawNext = window.location.pathname;
+    lastScrollPath = rawNext;
+    currentPath(rawNext);
+
+    if (scrollPositions) {
+        const nextPath = normalizePathname(rawNext);
+        const saved = scrollPositions.get(nextPath) ?? 0;
+        window.scrollTo(0, saved);
+    }
 }
 
 function applyHead({ title, meta, links, icon, favicon }) {