round-core 0.0.4 → 0.0.5

package/.github/workflows/benchmarks.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: Setup Bun
       uses: oven-sh/setup-bun@v1
@@ -38,7 +38,7 @@ jobs:
       run: bun run bench:runtime
 
     - name: Upload Report
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: benchmark-report
         path: benchmarks/reports/build-bench.json

package/README.md

@@ -322,27 +322,55 @@ This compiles roughly to a `.map(...)` under the hood.
 
 ## Routing
 
-Round includes router primitives intended for SPA navigation.
+Round includes router primitives intended for SPA navigation. All route paths must start with a forward slash `/`.
 
-Typical usage:
+### Basic Usage
 
 ```jsx
-import { Route } from 'round-core';
+import { Route, Link } from 'round-core';
 
 export default function App() {
     return (
         <div>
-            <Route route="/" title="Home">
-                <div>Home</div>
+            <nav>
+                <Link href="/">Home</Link>
+                <Link href="/about">About</Link>
+            </nav>
+
+            <Route route="/" title="Home" exact>
+                <div>Welcome Home</div>
             </Route>
             <Route route="/about" title="About">
-                <div>About</div>
+                <div>About Us Content</div>
             </Route>
         </div>
     );
 }
 ```
 
+### Nested Routing and Layouts
+
+Routes can be nested to create hierarchical layouts. Child routes automatically inherit and combine paths with their parents.
+
+- **Prefix Matching**: By default, routes use prefix matching (except for the root `/`). This allows a parent route to stay rendered as a "shell" or layout while its children are visited.
+- **Exact Matching**: Use the `exact` prop to ensure a route only renders when the path matches precisely (default for root `/`).
+
+```jsx
+<Route route="/dashboard" title="Dashboard">
+    <h1>Dashboard Shell</h1>
+
+    {/* This route matches /dashboard/profile */}
+    <Route route="/dashboard/profile">
+        <h2>User Profile</h2>
+    </Route>
+
+    {/* This route matches /dashboard/settings */}
+    <Route route="/dashboard/settings">
+        <h2>Settings</h2>
+    </Route>
+</Route>
+```
+
 ## Suspense and lazy loading
 
 Round supports `Suspense` for promise-based rendering and `lazy()` for code splitting.

package/bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "round-core",
       "dependencies": {
+        "happy-dom": "^20.0.11",
         "marked": "^12.0.2",
         "vite": "^5.0.0",
         "vitest": "^1.6.0",
@@ -153,6 +154,8 @@
 
     "@types/node": ["@types/node@25.0.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-gWEkeiyYE4vqjON/+Obqcoeffmk0NF15WSBwSs7zwVA2bAbTaE0SJ7P0WNGoJn8uE7fiaV5a7dKYIJriEqOrmA=="],
 
+    "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
+
     "@vitest/expect": ["@vitest/expect@1.6.1", "", { "dependencies": { "@vitest/spy": "1.6.1", "@vitest/utils": "1.6.1", "chai": "^4.3.10" } }, "sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog=="],
 
     "@vitest/runner": ["@vitest/runner@1.6.1", "", { "dependencies": { "@vitest/utils": "1.6.1", "p-limit": "^5.0.0", "pathe": "^1.1.1" } }, "sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA=="],
@@ -241,6 +244,8 @@
 
     "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
 
+    "happy-dom": ["happy-dom@20.0.11", "", { "dependencies": { "@types/node": "^20.0.0", "@types/whatwg-mimetype": "^3.0.2", "whatwg-mimetype": "^3.0.0" } }, "sha512-QsCdAUHAmiDeKeaNojb1OHOPF7NjcWPBR7obdu3NwH2a/oyQaLg5d0aaCy/9My6CdPChYF07dvz5chaXBGaD4g=="],
+
     "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
 
     "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
@@ -405,10 +410,16 @@
 
     "cssstyle/rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
 
+    "happy-dom/@types/node": ["@types/node@20.19.27", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-N2clP5pJhB2YnZJ3PIHFk5RkygRX5WO/5f0WC08tp0wd+sv0rsJk3MqWn3CbNmT2J505a5336jaQj4ph1AdMug=="],
+
+    "happy-dom/whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
     "mlly/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "happy-dom/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
   }
 }

package/dist/cli.js

@@ -122,31 +122,6 @@ function resolveFrom(baseDir, p) {
   if (path.isAbsolute(p)) return p;
   return path.resolve(baseDir, p);
 }
-function ensureIndexHtml(rootDir, entryRel, title = "Round") {
-  const indexPath = path.join(rootDir, "index.html");
-  if (fs.existsSync(indexPath)) return;
-  const entryPath = entryRel.startsWith("/") ? entryRel : `/${entryRel}`;
-  fs.writeFileSync(indexPath, [
-    "<!DOCTYPE html>",
-    '<html lang="en">',
-    "<head>",
-    '    <meta charset="UTF-8" />',
-    '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
-    `    <title>${title}</title>`,
-    "</head>",
-    "<body>",
-    '    <div id="app"></div>',
-    '    <script type="module">',
-    "        import { render } from 'round-core';",
-    `        import App from '${entryPath}';`,
-    "",
-    '        render(App, document.getElementById("app"));',
-    "    <\/script>",
-    "</body>",
-    "</html>",
-    ""
-  ].join("\n"), "utf8");
-}
 function parseArgs(argv) {
   const args = { _: [] };
   for (let i = 0; i < argv.length; i++) {
@@ -224,7 +199,6 @@ Usage:
   const pkgPath = path.join(projectDir, "package.json");
   const configPath = path.join(projectDir, "round.config.json");
   const viteConfigPath = path.join(projectDir, "vite.config.js");
-  const indexHtmlPath = path.join(projectDir, "index.html");
   const appRoundPath = path.join(srcDir, "app.round");
   const counterRoundPath = path.join(srcDir, "counter.round");
   writeFileIfMissing(pkgPath, JSON.stringify({
@@ -279,26 +253,6 @@ Usage:
     "});",
     ""
   ].join("\n"));
-  writeFileIfMissing(indexHtmlPath, [
-    "<!DOCTYPE html>",
-    '<html lang="en">',
-    "<head>",
-    '    <meta charset="UTF-8" />',
-    '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
-    `    <title>${name}</title>`,
-    "</head>",
-    "<body>",
-    '    <div id="app"></div>',
-    '    <script type="module">',
-    "        import { render } from 'round-core';",
-    "        import App from '/src/app.round';",
-    "",
-    "        render(App, document.getElementById('app'));",
-    "    <\/script>",
-    "</body>",
-    "</html>",
-    ""
-  ].join("\n"));
   writeFileIfMissing(appRoundPath, [
     "import { Route } from 'round-core';",
     'import { Counter } from "./counter"',
@@ -376,8 +330,7 @@ async function runDev({ rootDir, configPathAbs, config }) {
   if (!entryAbs || !fs.existsSync(entryAbs)) {
     throw new Error(`Entry not found: ${entryAbs ?? "(missing entry)"} (config: ${configPathAbs})`);
   }
-  const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-  ensureIndexHtml(rootDir, entryRel, config?.name ?? "Round");
+  normalizePath(path.relative(rootDir, entryAbs));
   let viteServer = null;
   let restarting = false;
   let restartTimer = null;
@@ -387,8 +340,7 @@ async function runDev({ rootDir, configPathAbs, config }) {
     if (!entryAbs2 || !fs.existsSync(entryAbs2)) {
       throw new Error(`Entry not found: ${entryAbs2 ?? "(missing entry)"} (config: ${configPathAbs})`);
     }
-    const entryRel2 = normalizePath(path.relative(rootDir, entryAbs2));
-    ensureIndexHtml(rootDir, entryRel2, nextConfig?.name ?? "Round");
+    normalizePath(path.relative(rootDir, entryAbs2));
     const serverPort2 = coerceNumber(nextConfig?.dev?.port, 5173);
     const open2 = Boolean(nextConfig?.dev?.open);
     const base2 = nextConfig?.routing?.base ?? "/";
@@ -458,8 +410,7 @@ async function runBuild({ rootDir, configPathAbs, config }) {
   if (!entryAbs || !fs.existsSync(entryAbs)) {
     throw new Error(`Entry not found: ${entryAbs ?? "(missing entry)"} (config: ${configPathAbs})`);
   }
-  const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-  ensureIndexHtml(rootDir, entryRel, config?.name ?? "Round");
+  normalizePath(path.relative(rootDir, entryAbs));
   const outDir = config?.output ? resolveFrom(configDir, config.output) : resolveFrom(rootDir, "./dist");
   const base = config?.routing?.base ?? "/";
   banner();
@@ -497,10 +448,7 @@ async function runPreview({ rootDir, configPathAbs, config }) {
   const base = config?.routing?.base ?? "/";
   const previewPort = coerceNumber(config?.dev?.port, 5173);
   const entryAbs = config?.entry ? resolveFrom(configDir, config.entry) : null;
-  if (entryAbs && fs.existsSync(entryAbs)) {
-    const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-    ensureIndexHtml(rootDir, entryRel, config?.name ?? "Round");
-  }
+  if (entryAbs && fs.existsSync(entryAbs)) ;
   banner();
   process.stdout.write(`${c("Config:", "cyan")} ${configPathAbs}
 `);

package/dist/index.js

@@ -620,17 +620,21 @@ function createContext(defaultValue) {
     Provider: null
   };
   function Provider(props = {}) {
-    const value = props.value;
-    const child = Array.isArray(props.children) ? props.children[0] : props.children;
-    const childFn = typeof child === "function" ? child : () => child;
-    return createElement("span", { style: { display: "contents" } }, () => {
-      pushContext({ [ctx.id]: value });
-      try {
-        return childFn();
-      } finally {
-        popContext();
-      }
-    });
+    const children = props.children;
+    pushContext({ [ctx.id]: props.value });
+    try {
+      return createElement("span", { style: { display: "contents" } }, () => {
+        const val = typeof props.value === "function" && props.value.peek ? props.value() : props.value;
+        pushContext({ [ctx.id]: val });
+        try {
+          return children;
+        } finally {
+          popContext();
+        }
+      });
+    } finally {
+      popContext();
+    }
   }
   ctx.Provider = Provider;
   return ctx;
@@ -1120,6 +1124,7 @@ const pathEvalReady = signal(true);
 let defaultNotFoundComponent = null;
 let autoNotFoundMounted = false;
 let userProvidedNotFound = false;
+const RoutingContext = createContext("");
 function ensureListener() {
   if (!hasWindow$1 || listenerInitialized) return;
   listenerInitialized = true;
@@ -1163,12 +1168,14 @@ function useRouteReady() {
 }
 function getIsNotFound() {
   const pathname = normalizePathname(currentPath());
+  if (pathname === "/") return false;
   if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
   return !Boolean(pathHasMatch());
 }
 function useIsNotFound() {
   return () => {
     const pathname = normalizePathname(currentPath());
+    if (pathname === "/") return false;
     if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
     return !Boolean(pathHasMatch());
   };
@@ -1188,6 +1195,7 @@ function mountAutoNotFound() {
     if (!ready) return null;
     if (lastPathEvaluated !== pathname) return null;
     if (hasMatch) return null;
+    if (pathname === "/") return null;
     const Comp = defaultNotFoundComponent;
     if (typeof Comp === "function") {
       return createElement(Comp, { pathname });
@@ -1294,10 +1302,11 @@ function normalizeTo(to) {
   if (!path.startsWith("/")) return String(to ?? "");
   return normalizePathname(path) + suffix;
 }
-function matchRoute(route, pathname) {
+function matchRoute(route, pathname, exact = true) {
   const r = normalizePathname(route);
   const p = normalizePathname(pathname);
-  return r === p;
+  if (exact) return r === p;
+  return p === r || p.startsWith(r.endsWith("/") ? r : r + "/");
 }
 function beginPathEvaluation(pathname) {
   if (pathname !== lastPathEvaluated) {
@@ -1316,11 +1325,31 @@ function setNotFound(Component) {
 function Route(props = {}) {
   ensureListener();
   return createElement("span", { style: { display: "contents" } }, () => {
+    const parentPath = readContext(RoutingContext) || "";
     const pathname = normalizePathname(currentPath());
     beginPathEvaluation(pathname);
-    const route = props.route ?? "/";
-    if (!matchRoute(route, pathname)) return null;
-    pathHasMatch(true);
+    const routeProp = props.route ?? "/";
+    if (typeof routeProp === "string" && !routeProp.startsWith("/")) {
+      throw new Error(`Invalid route: "${routeProp}". All routes must start with a forward slash "/". (Nested under: "${parentPath || "root"}")`);
+    }
+    let fullRoute = "";
+    if (parentPath && parentPath !== "/") {
+      const cleanParent = parentPath.endsWith("/") ? parentPath.slice(0, -1) : parentPath;
+      const cleanChild = routeProp.startsWith("/") ? routeProp : "/" + routeProp;
+      if (cleanChild.startsWith(cleanParent + "/") || cleanChild === cleanParent) {
+        fullRoute = normalizePathname(cleanChild);
+      } else {
+        fullRoute = normalizePathname(cleanParent + cleanChild);
+      }
+    } else {
+      fullRoute = normalizePathname(routeProp);
+    }
+    const isRoot = fullRoute === "/";
+    const exact = props.exact !== void 0 ? Boolean(props.exact) : isRoot;
+    if (!matchRoute(fullRoute, pathname, exact)) return null;
+    if (matchRoute(fullRoute, pathname, true)) {
+      pathHasMatch(true);
+    }
     const mergedHead = props.head && typeof props.head === "object" ? props.head : {};
     const meta = props.description ? [{ name: "description", content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []) : mergedHead.meta ?? props.meta;
     const links = mergedHead.links ?? props.links;
@@ -1328,17 +1357,37 @@ function Route(props = {}) {
     const icon = mergedHead.icon ?? props.icon;
     const favicon = mergedHead.favicon ?? props.favicon;
     applyHead({ title, meta, links, icon, favicon });
-    return props.children;
+    return createElement(RoutingContext.Provider, { value: fullRoute }, props.children);
   });
 }
 function Page(props = {}) {
   ensureListener();
   return createElement("span", { style: { display: "contents" } }, () => {
+    const parentPath = readContext(RoutingContext) || "";
     const pathname = normalizePathname(currentPath());
     beginPathEvaluation(pathname);
-    const route = props.route ?? "/";
-    if (!matchRoute(route, pathname)) return null;
-    pathHasMatch(true);
+    const routeProp = props.route ?? "/";
+    if (typeof routeProp === "string" && !routeProp.startsWith("/")) {
+      throw new Error(`Invalid route: "${routeProp}". All routes must start with a forward slash "/". (Nested under: "${parentPath || "root"}")`);
+    }
+    let fullRoute = "";
+    if (parentPath && parentPath !== "/") {
+      const cleanParent = parentPath.endsWith("/") ? parentPath.slice(0, -1) : parentPath;
+      const cleanChild = routeProp.startsWith("/") ? routeProp : "/" + routeProp;
+      if (cleanChild.startsWith(cleanParent + "/") || cleanChild === cleanParent) {
+        fullRoute = normalizePathname(cleanChild);
+      } else {
+        fullRoute = normalizePathname(cleanParent + cleanChild);
+      }
+    } else {
+      fullRoute = normalizePathname(routeProp);
+    }
+    const isRoot = fullRoute === "/";
+    const exact = props.exact !== void 0 ? Boolean(props.exact) : isRoot;
+    if (!matchRoute(fullRoute, pathname, exact)) return null;
+    if (matchRoute(fullRoute, pathname, true)) {
+      pathHasMatch(true);
+    }
     const mergedHead = props.head && typeof props.head === "object" ? props.head : {};
     const meta = props.description ? [{ name: "description", content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []) : mergedHead.meta ?? props.meta;
     const links = mergedHead.links ?? props.links;
@@ -1346,7 +1395,7 @@ function Page(props = {}) {
     const icon = mergedHead.icon ?? props.icon;
     const favicon = mergedHead.favicon ?? props.favicon;
     applyHead({ title, meta, links, icon, favicon });
-    return props.children;
+    return createElement(RoutingContext.Provider, { value: fullRoute }, props.children);
   });
 }
 function NotFound(props = {}) {
@@ -1360,6 +1409,7 @@ function NotFound(props = {}) {
     if (!ready) return null;
     if (lastPathEvaluated !== pathname) return null;
     if (hasMatch) return null;
+    if (pathname === "/") return null;
     const Comp = props.component ?? defaultNotFoundComponent;
     if (typeof Comp === "function") {
       return createElement(Comp, { pathname });

package/dist/vite-plugin.js

@@ -427,6 +427,8 @@ function RoundPlugin(pluginOptions = {}) {
     configPathAbs: null,
     configDir: null,
     entryAbs: null,
+    entryRel: null,
+    name: "Round",
     startHead: null,
     startHeadHtml: null
   };
@@ -454,7 +456,9 @@ function RoundPlugin(pluginOptions = {}) {
     state.routingTrailingSlash = trailingSlash !== void 0 ? Boolean(trailingSlash) : true;
     const customTags = config?.htmlTags;
     state.customTags = Array.isArray(customTags) ? customTags : [];
+    state.name = config?.name ?? "Round";
     const entryRel = config?.entry;
+    state.entryRel = entryRel;
     state.entryAbs = entryRel ? resolveMaybeRelative(configDir, entryRel) : null;
     const include = pluginOptions.include ?? config?.include ?? [];
     const exclude = pluginOptions.exclude ?? config?.exclude ?? ["./node_modules", "./dist"];
@@ -609,7 +613,41 @@ ${head.raw}`;
         }
       };
     },
+    resolveId(id) {
+      if (id === "/index.html" || id === "index.html") {
+        const fullPath = path.resolve(state.rootDir, "index.html");
+        if (!fs.existsSync(fullPath)) {
+          return "/index.html";
+        }
+      }
+      return null;
+    },
     load(id) {
+      if (id === "/index.html" || id === "index.html") {
+        const fullPath = path.resolve(state.rootDir, "index.html");
+        if (fs.existsSync(fullPath)) return null;
+        const entry = state.entryRel ?? "./src/index.js";
+        const entryPath = entry.startsWith("/") ? entry : `/${entry}`;
+        return [
+          "<!DOCTYPE html>",
+          '<html lang="en">',
+          "<head>",
+          '    <meta charset="UTF-8" />',
+          '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
+          `    <title>${state.name}</title>`,
+          "</head>",
+          "<body>",
+          '    <div id="app"></div>',
+          '    <script type="module">',
+          "        import { render } from 'round-core';",
+          `        import App from '${entryPath}';`,
+          "",
+          "        render(App, document.getElementById('app'));",
+          "    <\/script>",
+          "</body>",
+          "</html>"
+        ].join("\n");
+      }
       if (!isMdRawRequest(id)) return;
       const fileAbs = stripQuery(id);
       try {

package/package.json

@@ -1,48 +1,47 @@
-{
-    "name": "round-core",
-    "version": "0.0.4",
-    "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
-    "main": "./dist/index.js",
-    "exports": {
-        ".": "./dist/index.js",
-        "./vite-plugin": "./dist/vite-plugin.js"
-    },
-    "type": "module",
-    "icon": "round.png",
-    "repository": {
-        "url": "https://github.com/ZtaMDev/RoundJS.git"
-    },
-    "bin": {
-        "round": "./dist/cli.js"
-    },
-    "scripts": {
-        "dev": "node ./src/cli.js dev --config ./test/main/round.config.json",
-        "build": "node ./src/cli.js build --config ./test/main/round.config.json",
-        "build:core": "vite build -c vite.config.build.js",
-        "test": "vitest run",
-        "bench": "bun run --cwd benchmarks bench",
-        "bench:build": "bun run --cwd benchmarks bench:build",
-        "bench:runtime": "bun run --cwd benchmarks bench:runtime"
-    },
-    "keywords": [
-        "framework",
-        "spa",
-        "signals",
-        "vite"
-    ],
-    "author": "Round Framework Team",
-    "license": "MIT",
-    "dependencies": {
-        "marked": "^12.0.2",
-        "vite": "^5.0.0",
-        "vitest": "^1.6.0"
-    },
-    "devDependencies": {
-        "jsdom": "^24.0.0",
-        "bun-types": "latest",
-        "@types/node": "latest"
-    },
-    "peerDependencies": {
-        "bun": ">=1.0.0"
-    }
+{
+    "name": "round-core",
+    "version": "0.0.5",
+    "description": "A lightweight frontend framework for SPA with signals and fine grained reactivity",
+    "main": "./dist/index.js",
+    "exports": {
+        ".": "./dist/index.js",
+        "./vite-plugin": "./dist/vite-plugin.js"
+    },
+    "type": "module",
+    "icon": "round.png",
+    "repository": {
+        "url": "https://github.com/ZtaMDev/RoundJS.git"
+    },
+    "bin": {
+        "round": "./dist/cli.js"
+    },
+    "scripts": {
+        "dev": "node ./src/cli.js dev --config ./test/main/round.config.json",
+        "build": "node ./src/cli.js build --config ./test/main/round.config.json",
+        "build:core": "vite build -c vite.config.build.js",
+        "test": "vitest run",
+        "bench": "bun run --cwd benchmarks bench",
+        "bench:build": "bun run --cwd benchmarks bench:build",
+        "bench:runtime": "bun run --cwd benchmarks bench:runtime"
+    },
+    "keywords": [
+        "framework",
+        "spa",
+        "signals",
+        "vite"
+    ],
+    "author": "Round Framework Team",
+    "license": "MIT",
+    "dependencies": {
+        "marked": "^12.0.2",
+        "vite": "^5.0.0"
+    },
+    "devDependencies": {
+        "bun-types": "latest",
+        "@types/node": "latest",
+        "vitest": "^1.6.0"
+    },
+    "peerDependencies": {
+        "bun": ">=1.0.0"
+    }
 }

package/src/cli.js

@@ -122,32 +122,6 @@ function resolveFrom(baseDir, p) {
     return path.resolve(baseDir, p);
 }
 
-function ensureIndexHtml(rootDir, entryRel, title = 'Round') {
-    const indexPath = path.join(rootDir, 'index.html');
-    if (fs.existsSync(indexPath)) return;
-
-    const entryPath = entryRel.startsWith('/') ? entryRel : `/${entryRel}`;
-    fs.writeFileSync(indexPath, [
-        '<!DOCTYPE html>',
-        '<html lang="en">',
-        '<head>',
-        '    <meta charset="UTF-8" />',
-        '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
-        `    <title>${title}</title>`,
-        '</head>',
-        '<body>',
-        '    <div id="app"></div>',
-        '    <script type="module">',
-        "        import { render } from 'round-core';",
-        `        import App from '${entryPath}';`,
-        '',
-        '        render(App, document.getElementById("app"));',
-        '    </script>',
-        '</body>',
-        '</html>',
-        ''
-    ].join('\n'), 'utf8');
-}
 
 function parseArgs(argv) {
     const args = { _: [] };
@@ -231,7 +205,6 @@ async function runInit({ name }) {
     const pkgPath = path.join(projectDir, 'package.json');
     const configPath = path.join(projectDir, 'round.config.json');
     const viteConfigPath = path.join(projectDir, 'vite.config.js');
-    const indexHtmlPath = path.join(projectDir, 'index.html');
     const appRoundPath = path.join(srcDir, 'app.round');
     const counterRoundPath = path.join(srcDir, 'counter.round');
 
@@ -290,26 +263,6 @@ async function runInit({ name }) {
         ''
     ].join('\n'));
 
-    writeFileIfMissing(indexHtmlPath, [
-        '<!DOCTYPE html>',
-        '<html lang="en">',
-        '<head>',
-        '    <meta charset="UTF-8" />',
-        '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
-        `    <title>${name}</title>`,
-        '</head>',
-        '<body>',
-        '    <div id="app"></div>',
-        '    <script type="module">',
-        "        import { render } from 'round-core';",
-        "        import App from '/src/app.round';",
-        '',
-        "        render(App, document.getElementById('app'));",
-        '    </script>',
-        '</body>',
-        '</html>',
-        ''
-    ].join('\n'));
 
     writeFileIfMissing(appRoundPath, [
         "import { Route } from 'round-core';",
@@ -386,7 +339,6 @@ async function runDev({ rootDir, configPathAbs, config }) {
         throw new Error(`Entry not found: ${entryAbs ?? '(missing entry)'} (config: ${configPathAbs})`);
     }
     const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-    ensureIndexHtml(rootDir, entryRel, config?.name ?? 'Round');
 
     let viteServer = null;
     let restarting = false;
@@ -400,7 +352,6 @@ async function runDev({ rootDir, configPathAbs, config }) {
             throw new Error(`Entry not found: ${entryAbs2 ?? '(missing entry)'} (config: ${configPathAbs})`);
         }
         const entryRel2 = normalizePath(path.relative(rootDir, entryAbs2));
-        ensureIndexHtml(rootDir, entryRel2, nextConfig?.name ?? 'Round');
 
         const serverPort2 = coerceNumber(nextConfig?.dev?.port, 5173);
         const open2 = Boolean(nextConfig?.dev?.open);
@@ -475,7 +426,6 @@ async function runBuild({ rootDir, configPathAbs, config }) {
         throw new Error(`Entry not found: ${entryAbs ?? '(missing entry)'} (config: ${configPathAbs})`);
     }
     const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-    ensureIndexHtml(rootDir, entryRel, config?.name ?? 'Round');
 
     const outDir = config?.output ? resolveFrom(configDir, config.output) : resolveFrom(rootDir, './dist');
     const base = config?.routing?.base ?? '/';
@@ -513,8 +463,7 @@ async function runPreview({ rootDir, configPathAbs, config }) {
 
     const entryAbs = config?.entry ? resolveFrom(configDir, config.entry) : null;
     if (entryAbs && fs.existsSync(entryAbs)) {
-        const entryRel = normalizePath(path.relative(rootDir, entryAbs));
-        ensureIndexHtml(rootDir, entryRel, config?.name ?? 'Round');
+        // No physical index.html needed
     }
 
     banner('Preview');

package/src/compiler/vite-plugin.js

@@ -93,6 +93,8 @@ export default function RoundPlugin(pluginOptions = {}) {
         configPathAbs: null,
         configDir: null,
         entryAbs: null,
+        entryRel: null,
+        name: 'Round',
         startHead: null,
         startHeadHtml: null
     };
@@ -134,7 +136,10 @@ export default function RoundPlugin(pluginOptions = {}) {
         const customTags = config?.htmlTags;
         state.customTags = Array.isArray(customTags) ? customTags : [];
 
+        state.name = config?.name ?? 'Round';
+
         const entryRel = config?.entry;
+        state.entryRel = entryRel;
         state.entryAbs = entryRel ? resolveMaybeRelative(configDir, entryRel) : null;
 
         const include = pluginOptions.include ?? config?.include ?? [];
@@ -323,7 +328,45 @@ export default function RoundPlugin(pluginOptions = {}) {
             };
         },
 
+        resolveId(id) {
+            if (id === '/index.html' || id === 'index.html') {
+                const fullPath = path.resolve(state.rootDir, 'index.html');
+                if (!fs.existsSync(fullPath)) {
+                    return '/index.html'; // Virtual ID
+                }
+            }
+            return null;
+        },
+
         load(id) {
+            if (id === '/index.html' || id === 'index.html') {
+                const fullPath = path.resolve(state.rootDir, 'index.html');
+                if (fs.existsSync(fullPath)) return null; // Fallback to disk
+
+                const entry = state.entryRel ?? './src/index.js';
+                const entryPath = entry.startsWith('/') ? entry : `/${entry}`;
+
+                return [
+                    '<!DOCTYPE html>',
+                    '<html lang="en">',
+                    '<head>',
+                    '    <meta charset="UTF-8" />',
+                    '    <meta name="viewport" content="width=device-width, initial-scale=1.0" />',
+                    `    <title>${state.name}</title>`,
+                    '</head>',
+                    '<body>',
+                    '    <div id="app"></div>',
+                    '    <script type="module">',
+                    "        import { render } from 'round-core';",
+                    `        import App from '${entryPath}';`,
+                    '',
+                    "        render(App, document.getElementById('app'));",
+                    '    </script>',
+                    '</body>',
+                    '</html>'
+                ].join('\n');
+            }
+
             if (!isMdRawRequest(id)) return;
 
             const fileAbs = stripQuery(id);

package/src/runtime/context.js

@@ -29,18 +29,29 @@ export function createContext(defaultValue) {
     };
 
     function Provider(props = {}) {
-        const value = props.value;
-        const child = Array.isArray(props.children) ? props.children[0] : props.children;
-        const childFn = typeof child === 'function' ? child : () => child;
+        const children = props.children;
 
-        return createElement('span', { style: { display: 'contents' } }, () => {
-            pushContext({ [ctx.id]: value });
-            try {
-                return childFn();
-            } finally {
-                popContext();
-            }
-        });
+        // Push context now so that any createElement/appendChild called 
+        // during the instantiation of this Provider branch picks it up immediately.
+        pushContext({ [ctx.id]: props.value });
+        try {
+            // We use a span to handle reactive value updates and dynamic children.
+            return createElement('span', { style: { display: 'contents' } }, () => {
+                // Read current value (reactive if it's a signal)
+                const val = (typeof props.value === 'function' && props.value.peek) ? props.value() : props.value;
+
+                // Push it during the effect run too! This ensures that anything returned 
+                // from this callback (which might trigger more appendChild calls) sees the context.
+                pushContext({ [ctx.id]: val });
+                try {
+                    return children;
+                } finally {
+                    popContext();
+                }
+            });
+        } finally {
+            popContext();
+        }
     }
 
     ctx.Provider = Provider;

package/src/runtime/router.js

@@ -1,5 +1,6 @@
 import { signal, effect } from './signals.js';
 import { createElement } from './dom.js';
+import { createContext, readContext } from './context.js';
 
 const hasWindow = typeof window !== 'undefined' && typeof document !== 'undefined';
 
@@ -20,6 +21,8 @@ let defaultNotFoundComponent = null;
 let autoNotFoundMounted = false;
 let userProvidedNotFound = false;
 
+const RoutingContext = createContext('');
+
 function ensureListener() {
     if (!hasWindow || listenerInitialized) return;
     listenerInitialized = true;
@@ -72,6 +75,7 @@ export function useRouteReady() {
 
 export function getIsNotFound() {
     const pathname = normalizePathname(currentPath());
+    if (pathname === '/') return false;
     if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
     return !Boolean(pathHasMatch());
 }
@@ -79,6 +83,7 @@ export function getIsNotFound() {
 export function useIsNotFound() {
     return () => {
         const pathname = normalizePathname(currentPath());
+        if (pathname === '/') return false;
         if (!(Boolean(pathEvalReady()) && lastPathEvaluated === pathname)) return false;
         return !Boolean(pathHasMatch());
     };
@@ -104,6 +109,10 @@ function mountAutoNotFound() {
         if (lastPathEvaluated !== pathname) return null;
         if (hasMatch) return null;
 
+        // Skip absolute 404 overlay for the root path if no match found,
+        // allowing the base app to render its non-routed content.
+        if (pathname === '/') return null;
+
         const Comp = defaultNotFoundComponent;
         if (typeof Comp === 'function') {
             return createElement(Comp, { pathname });
@@ -229,10 +238,12 @@ function normalizeTo(to) {
     return normalizePathname(path) + suffix;
 }
 
-function matchRoute(route, pathname) {
+function matchRoute(route, pathname, exact = true) {
     const r = normalizePathname(route);
     const p = normalizePathname(pathname);
-    return r === p;
+    if (exact) return r === p;
+    // Prefix match: either exactly the same, or p starts with r plus a slash
+    return p === r || p.startsWith(r.endsWith('/') ? r : r + '/');
 }
 
 function beginPathEvaluation(pathname) {
@@ -257,13 +268,41 @@ export function Route(props = {}) {
     ensureListener();
 
     return createElement('span', { style: { display: 'contents' } }, () => {
+        const parentPath = readContext(RoutingContext) || '';
         const pathname = normalizePathname(currentPath());
         beginPathEvaluation(pathname);
-        const route = props.route ?? '/';
-        if (!matchRoute(route, pathname)) return null;
 
-        hasMatchForPath = true;
-        pathHasMatch(true);
+        const routeProp = props.route ?? '/';
+        if (typeof routeProp === 'string' && !routeProp.startsWith('/')) {
+            throw new Error(`Invalid route: "${routeProp}". All routes must start with a forward slash "/". (Nested under: "${parentPath || 'root'}")`);
+        }
+
+        let fullRoute = '';
+        if (parentPath && parentPath !== '/') {
+            const cleanParent = parentPath.endsWith('/') ? parentPath.slice(0, -1) : parentPath;
+            const cleanChild = routeProp.startsWith('/') ? routeProp : '/' + routeProp;
+
+            if (cleanChild.startsWith(cleanParent + '/') || cleanChild === cleanParent) {
+                fullRoute = normalizePathname(cleanChild);
+            } else {
+                fullRoute = normalizePathname(cleanParent + cleanChild);
+            }
+        } else {
+            fullRoute = normalizePathname(routeProp);
+        }
+
+        const isRoot = fullRoute === '/';
+        const exact = props.exact !== undefined ? Boolean(props.exact) : isRoot;
+
+        // For nested routing, we match as a prefix so parents stay rendered while children are active
+        if (!matchRoute(fullRoute, pathname, exact)) return null;
+
+        // If it's an exact match of the FULL segments, mark as matched for 404 purposes
+        if (matchRoute(fullRoute, pathname, true)) {
+            hasMatchForPath = true;
+            pathHasMatch(true);
+        }
+
         const mergedHead = (props.head && typeof props.head === 'object') ? props.head : {};
         const meta = props.description
             ? ([{ name: 'description', content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []))
@@ -274,7 +313,9 @@ export function Route(props = {}) {
         const favicon = mergedHead.favicon ?? props.favicon;
 
         applyHead({ title, meta, links, icon, favicon });
-        return props.children;
+
+        // Provide the current full path to nested routes
+        return createElement(RoutingContext.Provider, { value: fullRoute }, props.children);
     });
 }
 
@@ -282,13 +323,39 @@ export function Page(props = {}) {
     ensureListener();
 
     return createElement('span', { style: { display: 'contents' } }, () => {
+        const parentPath = readContext(RoutingContext) || '';
         const pathname = normalizePathname(currentPath());
         beginPathEvaluation(pathname);
-        const route = props.route ?? '/';
-        if (!matchRoute(route, pathname)) return null;
 
-        hasMatchForPath = true;
-        pathHasMatch(true);
+        const routeProp = props.route ?? '/';
+        if (typeof routeProp === 'string' && !routeProp.startsWith('/')) {
+            throw new Error(`Invalid route: "${routeProp}". All routes must start with a forward slash "/". (Nested under: "${parentPath || 'root'}")`);
+        }
+
+        let fullRoute = '';
+        if (parentPath && parentPath !== '/') {
+            const cleanParent = parentPath.endsWith('/') ? parentPath.slice(0, -1) : parentPath;
+            const cleanChild = routeProp.startsWith('/') ? routeProp : '/' + routeProp;
+
+            if (cleanChild.startsWith(cleanParent + '/') || cleanChild === cleanParent) {
+                fullRoute = normalizePathname(cleanChild);
+            } else {
+                fullRoute = normalizePathname(cleanParent + cleanChild);
+            }
+        } else {
+            fullRoute = normalizePathname(routeProp);
+        }
+
+        const isRoot = fullRoute === '/';
+        const exact = props.exact !== undefined ? Boolean(props.exact) : isRoot;
+
+        if (!matchRoute(fullRoute, pathname, exact)) return null;
+
+        if (matchRoute(fullRoute, pathname, true)) {
+            hasMatchForPath = true;
+            pathHasMatch(true);
+        }
+
         const mergedHead = (props.head && typeof props.head === 'object') ? props.head : {};
         const meta = props.description
             ? ([{ name: 'description', content: String(props.description) }].concat(mergedHead.meta ?? props.meta ?? []))
@@ -299,7 +366,8 @@ export function Page(props = {}) {
         const favicon = mergedHead.favicon ?? props.favicon;
 
         applyHead({ title, meta, links, icon, favicon });
-        return props.children;
+
+        return createElement(RoutingContext.Provider, { value: fullRoute }, props.children);
     });
 }
 
@@ -318,6 +386,7 @@ export function NotFound(props = {}) {
         if (lastPathEvaluated !== pathname) return null;
 
         if (hasMatch) return null;
+        if (pathname === '/') return null;
 
         const Comp = props.component ?? defaultNotFoundComponent;
         if (typeof Comp === 'function') {
@@ -339,8 +408,8 @@ export function Link(props = {}) {
     const rawHref = props.href ?? props.to ?? '#';
     const href = spaNormalizeHref(rawHref);
 
-     const spa = props.spa !== undefined ? Boolean(props.spa) : true;
-     const reload = Boolean(props.reload);
+    const spa = props.spa !== undefined ? Boolean(props.spa) : true;
+    const reload = Boolean(props.reload);
 
     const onClick = (e) => {
         if (typeof props.onClick === 'function') props.onClick(e);

package/vite.config.build.js

@@ -2,32 +2,21 @@ import { defineConfig } from 'vite';
 import path from 'node:path';
 import fs from 'node:fs';
 
-// Custom plugin to move .d.ts files or raw assets if needed, 
-// for now we just handle JS bundling.
-
-// Custom plugin to move .d.ts files or raw assets if needed, 
-// for now we just handle JS bundling.
-
 export default defineConfig({
     build: {
-        // Target modern environments
         target: 'es2022',
         outDir: 'dist',
         emptyOutDir: true,
-        minify: false, // User can enable if they want extreme minification, but for a lib readable code is nice. 
-        // Wait, user asked for "extremo rapido y liviano" (extremely fast and light). 
-        // So I SHOULD minify.
+        minify: false,
         lib: {
             entry: {
                 index: path.resolve(__dirname, 'src/index.js'),
                 cli: path.resolve(__dirname, 'src/cli.js'),
-                // We expose the plugin separately so users can import it in their vite.config.js
                 'vite-plugin': path.resolve(__dirname, 'src/compiler/vite-plugin.js')
             },
-            formats: ['es'] // ESM only is fine for modern "type": "module" package
+            formats: ['es']
         },
         rollupOptions: {
-            // Externalize dependencies so they aren't bundled into the library
             external: [
                 'vite',
                 'marked',

package/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Round Vite Test</title>
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="module">
-        import { render } from '/index.js';
-        import TestApp from 'start_exmpl/TestApp.round';
-
-        render(TestApp, document.getElementById('app'));
-    </script>
-</body>
-
-</html>