@matthesketh/utopia-router 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -31,33 +31,49 @@ __export(index_exports, {
   destroy: () => destroy,
   filePathToRoute: () => filePathToRoute,
   forward: () => forward,
+  getQueryParam: () => getQueryParam,
+  getRouteParam: () => getRouteParam,
   isNavigating: () => isNavigating,
   matchRoute: () => matchRoute,
-  navigate: () => navigate
+  navigate: () => navigate,
+  queryParams: () => queryParams,
+  setQueryParam: () => setQueryParam,
+  setQueryParams: () => setQueryParams
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/matcher.ts
+var BACKSLASH_RE = /\\/g;
+var PAGE_FILE_RE = /\/?\+page\.\w+$/;
+var LAYOUT_OR_ERROR_FILE_RE = /\/?\+(layout|error)\.\w+$/;
+var GROUP_SEGMENT_RE = /^\(.+\)$/;
+var REST_PARAM_RE = /^\[\.\.\..+\]$/;
+var DYNAMIC_PARAM_RE = /^\[.+\]$/;
+var ROOT_ROUTE_RE = /^\/$/;
+var REGEX_SPECIAL_CHARS_RE = /[.*+?^${}()|[\]\\]/g;
+var PAGE_FILE_TEST_RE = /\+page\.\w+$/;
+var LAYOUT_FILE_TEST_RE = /\+layout\.\w+$/;
+var ERROR_FILE_TEST_RE = /\+error\.\w+$/;
 function filePathToRoute(filePath) {
-  let normalized = filePath.replace(/\\/g, "/");
+  let normalized = filePath.replace(BACKSLASH_RE, "/");
   const routesIdx = normalized.indexOf("routes/");
   if (routesIdx !== -1) {
     normalized = normalized.slice(routesIdx + "routes/".length);
   }
-  normalized = normalized.replace(/\/?\+page\.\w+$/, "");
-  normalized = normalized.replace(/\/?\+(layout|error)\.\w+$/, "");
+  normalized = normalized.replace(PAGE_FILE_RE, "");
+  normalized = normalized.replace(LAYOUT_OR_ERROR_FILE_RE, "");
   const segments = normalized.split("/").filter(Boolean);
   const routeSegments = [];
   for (const segment of segments) {
-    if (/^\(.+\)$/.test(segment)) {
+    if (GROUP_SEGMENT_RE.test(segment)) {
       continue;
     }
-    if (/^\[\.\.\..+\]$/.test(segment)) {
+    if (REST_PARAM_RE.test(segment)) {
       const paramName = segment.slice(4, -1);
       routeSegments.push(`*${paramName}`);
       continue;
     }
-    if (/^\[.+\]$/.test(segment)) {
+    if (DYNAMIC_PARAM_RE.test(segment)) {
       const paramName = segment.slice(1, -1);
       routeSegments.push(`:${paramName}`);
       continue;
@@ -71,7 +87,7 @@ function compilePattern(pattern) {
   const params = [];
   if (pattern === "/") {
     return {
-      regex: /^\/$/,
+      regex: ROOT_ROUTE_RE,
       params: []
     };
   }
@@ -93,12 +109,13 @@ function compilePattern(pattern) {
   }
   regexStr = "^" + regexStr + "/?$";
   return {
+    // Dynamic regex — built from sanitized input (segments are escaped via escapeRegex).
     regex: new RegExp(regexStr),
     params
   };
 }
 function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return str.replace(REGEX_SPECIAL_CHARS_RE, "\\$&");
 }
 function matchRoute(url, routes2) {
   let pathname = url.pathname;
@@ -122,12 +139,12 @@ function buildRouteTable(manifest) {
   const layouts = /* @__PURE__ */ new Map();
   const errors = /* @__PURE__ */ new Map();
   for (const [filePath, importFn] of Object.entries(manifest)) {
-    const normalized = filePath.replace(/\\/g, "/");
-    if (/\+page\.\w+$/.test(normalized)) {
+    const normalized = filePath.replace(BACKSLASH_RE, "/");
+    if (PAGE_FILE_TEST_RE.test(normalized)) {
       pages.set(normalized, importFn);
-    } else if (/\+layout\.\w+$/.test(normalized)) {
+    } else if (LAYOUT_FILE_TEST_RE.test(normalized)) {
       layouts.set(normalized, importFn);
-    } else if (/\+error\.\w+$/.test(normalized)) {
+    } else if (ERROR_FILE_TEST_RE.test(normalized)) {
       errors.set(normalized, importFn);
     }
   }
@@ -174,12 +191,12 @@ function routeSpecificity(path) {
   return score;
 }
 function findNearestSpecialFile(pageFilePath, specialFiles) {
-  const normalized = pageFilePath.replace(/\\/g, "/");
+  const normalized = pageFilePath.replace(BACKSLASH_RE, "/");
   const lastSlash = normalized.lastIndexOf("/");
   let dir = lastSlash !== -1 ? normalized.slice(0, lastSlash) : "";
   while (dir) {
     for (const [specialPath, importFn] of specialFiles) {
-      const specialNorm = specialPath.replace(/\\/g, "/");
+      const specialNorm = specialPath.replace(BACKSLASH_RE, "/");
       const specialLastSlash = specialNorm.lastIndexOf("/");
       const specialDir = specialLastSlash !== -1 ? specialNorm.slice(0, specialLastSlash) : "";
       if (specialDir === dir) {
@@ -197,6 +214,7 @@ function findNearestSpecialFile(pageFilePath, specialFiles) {
 
 // src/router.ts
 var import_utopia_core = require("@matthesketh/utopia-core");
+var VALID_DOM_ID_RE = /^[A-Za-z0-9_-]+$/;
 var currentRoute = (0, import_utopia_core.signal)(null);
 var isNavigating = (0, import_utopia_core.signal)(false);
 var routes = [];
@@ -319,10 +337,13 @@ async function navigate(url, options = {}) {
     currentRoute.set(match);
     requestAnimationFrame(() => {
       if (fullUrl.hash) {
-        const el = document.getElementById(fullUrl.hash.slice(1));
-        if (el) {
-          el.scrollIntoView();
-          return;
+        const hashId = fullUrl.hash.slice(1);
+        if (hashId && VALID_DOM_ID_RE.test(hashId)) {
+          const el = document.getElementById(hashId);
+          if (el) {
+            el.scrollIntoView();
+            return;
+          }
         }
       }
       window.scrollTo(0, 0);
@@ -567,8 +588,61 @@ function clearContainer(container) {
     container.removeChild(container.firstChild);
   }
 }
+var AMPERSAND_RE = /&/g;
+var LESS_THAN_RE = /</g;
+var GREATER_THAN_RE = />/g;
+var DOUBLE_QUOTE_RE = /"/g;
+var SINGLE_QUOTE_RE = /'/g;
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+  return str.replace(AMPERSAND_RE, "&amp;").replace(LESS_THAN_RE, "&lt;").replace(GREATER_THAN_RE, "&gt;").replace(DOUBLE_QUOTE_RE, "&quot;").replace(SINGLE_QUOTE_RE, "&#x27;");
+}
+
+// src/query.ts
+var import_utopia_core3 = require("@matthesketh/utopia-core");
+var queryParams = (0, import_utopia_core3.computed)(() => {
+  const match = currentRoute();
+  if (!match) return {};
+  const result = {};
+  match.url.searchParams.forEach((value, key) => {
+    result[key] = value;
+  });
+  return result;
+});
+function getQueryParam(name) {
+  return (0, import_utopia_core3.computed)(() => {
+    const match = currentRoute();
+    if (!match) return null;
+    return match.url.searchParams.get(name);
+  });
+}
+function setQueryParam(name, value) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  if (value === null) {
+    url.searchParams.delete(name);
+  } else {
+    url.searchParams.set(name, value);
+  }
+  navigate(url.pathname + url.search + url.hash, { replace: true });
+}
+function setQueryParams(params) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  for (const [key, value] of Object.entries(params)) {
+    if (value === null) {
+      url.searchParams.delete(key);
+    } else {
+      url.searchParams.set(key, value);
+    }
+  }
+  navigate(url.pathname + url.search + url.hash, { replace: true });
+}
+function getRouteParam(name) {
+  return (0, import_utopia_core3.computed)(() => {
+    const match = currentRoute();
+    if (!match) return null;
+    return match.params[name] ?? null;
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -583,7 +657,12 @@ function escapeHtml(str) {
   destroy,
   filePathToRoute,
   forward,
+  getQueryParam,
+  getRouteParam,
   isNavigating,
   matchRoute,
-  navigate
+  navigate,
+  queryParams,
+  setQueryParam,
+  setQueryParams
 });

package/dist/index.d.cts

@@ -214,4 +214,29 @@ declare function createLink(props: {
     activeClass?: string;
 }): HTMLAnchorElement;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, isNavigating, matchRoute, navigate };
+/**
+ * Reactive computed signal returning all current query parameters as a plain object.
+ */
+declare const queryParams: _matthesketh_utopia_core.ReadonlySignal<Record<string, string>>;
+/**
+ * Returns a computed signal for a specific query parameter.
+ * Returns null if the parameter is not present.
+ */
+declare function getQueryParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
+/**
+ * Update a single query parameter and navigate (replace mode).
+ * Pass null to remove the parameter.
+ */
+declare function setQueryParam(name: string, value: string | null): void;
+/**
+ * Update multiple query parameters in a single navigation.
+ * Pass null for a value to remove that parameter.
+ */
+declare function setQueryParams(params: Record<string, string | null>): void;
+/**
+ * Returns a computed signal for a specific route path parameter.
+ * Returns null if the parameter is not present.
+ */
+declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
+
+export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, queryParams, setQueryParam, setQueryParams };

package/dist/index.d.ts

@@ -214,4 +214,29 @@ declare function createLink(props: {
     activeClass?: string;
 }): HTMLAnchorElement;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, isNavigating, matchRoute, navigate };
+/**
+ * Reactive computed signal returning all current query parameters as a plain object.
+ */
+declare const queryParams: _matthesketh_utopia_core.ReadonlySignal<Record<string, string>>;
+/**
+ * Returns a computed signal for a specific query parameter.
+ * Returns null if the parameter is not present.
+ */
+declare function getQueryParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
+/**
+ * Update a single query parameter and navigate (replace mode).
+ * Pass null to remove the parameter.
+ */
+declare function setQueryParam(name: string, value: string | null): void;
+/**
+ * Update multiple query parameters in a single navigation.
+ * Pass null for a value to remove that parameter.
+ */
+declare function setQueryParams(params: Record<string, string | null>): void;
+/**
+ * Returns a computed signal for a specific route path parameter.
+ * Returns null if the parameter is not present.
+ */
+declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
+
+export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, queryParams, setQueryParam, setQueryParams };

package/dist/index.js

@@ -1,24 +1,35 @@
 // src/matcher.ts
+var BACKSLASH_RE = /\\/g;
+var PAGE_FILE_RE = /\/?\+page\.\w+$/;
+var LAYOUT_OR_ERROR_FILE_RE = /\/?\+(layout|error)\.\w+$/;
+var GROUP_SEGMENT_RE = /^\(.+\)$/;
+var REST_PARAM_RE = /^\[\.\.\..+\]$/;
+var DYNAMIC_PARAM_RE = /^\[.+\]$/;
+var ROOT_ROUTE_RE = /^\/$/;
+var REGEX_SPECIAL_CHARS_RE = /[.*+?^${}()|[\]\\]/g;
+var PAGE_FILE_TEST_RE = /\+page\.\w+$/;
+var LAYOUT_FILE_TEST_RE = /\+layout\.\w+$/;
+var ERROR_FILE_TEST_RE = /\+error\.\w+$/;
 function filePathToRoute(filePath) {
-  let normalized = filePath.replace(/\\/g, "/");
+  let normalized = filePath.replace(BACKSLASH_RE, "/");
   const routesIdx = normalized.indexOf("routes/");
   if (routesIdx !== -1) {
     normalized = normalized.slice(routesIdx + "routes/".length);
   }
-  normalized = normalized.replace(/\/?\+page\.\w+$/, "");
-  normalized = normalized.replace(/\/?\+(layout|error)\.\w+$/, "");
+  normalized = normalized.replace(PAGE_FILE_RE, "");
+  normalized = normalized.replace(LAYOUT_OR_ERROR_FILE_RE, "");
   const segments = normalized.split("/").filter(Boolean);
   const routeSegments = [];
   for (const segment of segments) {
-    if (/^\(.+\)$/.test(segment)) {
+    if (GROUP_SEGMENT_RE.test(segment)) {
       continue;
     }
-    if (/^\[\.\.\..+\]$/.test(segment)) {
+    if (REST_PARAM_RE.test(segment)) {
       const paramName = segment.slice(4, -1);
       routeSegments.push(`*${paramName}`);
       continue;
     }
-    if (/^\[.+\]$/.test(segment)) {
+    if (DYNAMIC_PARAM_RE.test(segment)) {
       const paramName = segment.slice(1, -1);
       routeSegments.push(`:${paramName}`);
       continue;
@@ -32,7 +43,7 @@ function compilePattern(pattern) {
   const params = [];
   if (pattern === "/") {
     return {
-      regex: /^\/$/,
+      regex: ROOT_ROUTE_RE,
       params: []
     };
   }
@@ -54,12 +65,13 @@ function compilePattern(pattern) {
   }
   regexStr = "^" + regexStr + "/?$";
   return {
+    // Dynamic regex — built from sanitized input (segments are escaped via escapeRegex).
     regex: new RegExp(regexStr),
     params
   };
 }
 function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return str.replace(REGEX_SPECIAL_CHARS_RE, "\\$&");
 }
 function matchRoute(url, routes2) {
   let pathname = url.pathname;
@@ -83,12 +95,12 @@ function buildRouteTable(manifest) {
   const layouts = /* @__PURE__ */ new Map();
   const errors = /* @__PURE__ */ new Map();
   for (const [filePath, importFn] of Object.entries(manifest)) {
-    const normalized = filePath.replace(/\\/g, "/");
-    if (/\+page\.\w+$/.test(normalized)) {
+    const normalized = filePath.replace(BACKSLASH_RE, "/");
+    if (PAGE_FILE_TEST_RE.test(normalized)) {
       pages.set(normalized, importFn);
-    } else if (/\+layout\.\w+$/.test(normalized)) {
+    } else if (LAYOUT_FILE_TEST_RE.test(normalized)) {
       layouts.set(normalized, importFn);
-    } else if (/\+error\.\w+$/.test(normalized)) {
+    } else if (ERROR_FILE_TEST_RE.test(normalized)) {
       errors.set(normalized, importFn);
     }
   }
@@ -135,12 +147,12 @@ function routeSpecificity(path) {
   return score;
 }
 function findNearestSpecialFile(pageFilePath, specialFiles) {
-  const normalized = pageFilePath.replace(/\\/g, "/");
+  const normalized = pageFilePath.replace(BACKSLASH_RE, "/");
   const lastSlash = normalized.lastIndexOf("/");
   let dir = lastSlash !== -1 ? normalized.slice(0, lastSlash) : "";
   while (dir) {
     for (const [specialPath, importFn] of specialFiles) {
-      const specialNorm = specialPath.replace(/\\/g, "/");
+      const specialNorm = specialPath.replace(BACKSLASH_RE, "/");
       const specialLastSlash = specialNorm.lastIndexOf("/");
       const specialDir = specialLastSlash !== -1 ? specialNorm.slice(0, specialLastSlash) : "";
       if (specialDir === dir) {
@@ -158,6 +170,7 @@ function findNearestSpecialFile(pageFilePath, specialFiles) {
 
 // src/router.ts
 import { signal } from "@matthesketh/utopia-core";
+var VALID_DOM_ID_RE = /^[A-Za-z0-9_-]+$/;
 var currentRoute = signal(null);
 var isNavigating = signal(false);
 var routes = [];
@@ -280,10 +293,13 @@ async function navigate(url, options = {}) {
     currentRoute.set(match);
     requestAnimationFrame(() => {
       if (fullUrl.hash) {
-        const el = document.getElementById(fullUrl.hash.slice(1));
-        if (el) {
-          el.scrollIntoView();
-          return;
+        const hashId = fullUrl.hash.slice(1);
+        if (hashId && VALID_DOM_ID_RE.test(hashId)) {
+          const el = document.getElementById(hashId);
+          if (el) {
+            el.scrollIntoView();
+            return;
+          }
         }
       }
       window.scrollTo(0, 0);
@@ -528,8 +544,61 @@ function clearContainer(container) {
     container.removeChild(container.firstChild);
   }
 }
+var AMPERSAND_RE = /&/g;
+var LESS_THAN_RE = /</g;
+var GREATER_THAN_RE = />/g;
+var DOUBLE_QUOTE_RE = /"/g;
+var SINGLE_QUOTE_RE = /'/g;
 function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+  return str.replace(AMPERSAND_RE, "&amp;").replace(LESS_THAN_RE, "&lt;").replace(GREATER_THAN_RE, "&gt;").replace(DOUBLE_QUOTE_RE, "&quot;").replace(SINGLE_QUOTE_RE, "&#x27;");
+}
+
+// src/query.ts
+import { computed } from "@matthesketh/utopia-core";
+var queryParams = computed(() => {
+  const match = currentRoute();
+  if (!match) return {};
+  const result = {};
+  match.url.searchParams.forEach((value, key) => {
+    result[key] = value;
+  });
+  return result;
+});
+function getQueryParam(name) {
+  return computed(() => {
+    const match = currentRoute();
+    if (!match) return null;
+    return match.url.searchParams.get(name);
+  });
+}
+function setQueryParam(name, value) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  if (value === null) {
+    url.searchParams.delete(name);
+  } else {
+    url.searchParams.set(name, value);
+  }
+  navigate(url.pathname + url.search + url.hash, { replace: true });
+}
+function setQueryParams(params) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  for (const [key, value] of Object.entries(params)) {
+    if (value === null) {
+      url.searchParams.delete(key);
+    } else {
+      url.searchParams.set(key, value);
+    }
+  }
+  navigate(url.pathname + url.search + url.hash, { replace: true });
+}
+function getRouteParam(name) {
+  return computed(() => {
+    const match = currentRoute();
+    if (!match) return null;
+    return match.params[name] ?? null;
+  });
 }
 export {
   back,
@@ -543,7 +612,12 @@ export {
   destroy,
   filePathToRoute,
   forward,
+  getQueryParam,
+  getRouteParam,
   isNavigating,
   matchRoute,
-  navigate
+  navigate,
+  queryParams,
+  setQueryParam,
+  setQueryParams
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.3.1",
-    "@matthesketh/utopia-runtime": "0.3.1"
+    "@matthesketh/utopia-core": "0.5.0",
+    "@matthesketh/utopia-runtime": "0.5.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",