@jsenv/navi 0.3.5 → 0.4.1

package/dist/jsenv_navi.js

@@ -11735,6 +11735,7 @@ const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
+    hideErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -11802,8 +11803,8 @@ const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (error.stack) {
-        newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(error.stack)}</pre>`;
+      if (!hideErrorStack && error.stack) {
+        newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }
 
@@ -16758,6 +16759,14 @@ let baseUrl = window.location.origin;
 const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
+
+const rawUrlPartSymbol = Symbol("raw_url_part");
+const rawUrlPart = (value) => {
+  return {
+    [rawUrlPartSymbol]: true,
+    value,
+  };
+};
 const NO_PARAMS = { [SYMBOL_IDENTITY]: Symbol("no_params") };
 // Controls what happens to actions when their route becomes inactive:
 // 'abort' - Cancel the action immediately when route deactivates
@@ -17032,11 +17041,24 @@ const createRoute = (urlPatternInput) => {
 
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
+    let hasRawUrlPartWithInvalidChars = false;
+
+    const encode = (value) => {
+      if (value && value[rawUrlPartSymbol]) {
+        const rawValue = value.value;
+        // Check if raw value contains invalid URL characters
+        if (/[\s<>{}|\\^`]/.test(rawValue)) {
+          hasRawUrlPartWithInvalidChars = true;
+        }
+        return rawValue;
+      }
+      return encodeURIComponent(value);
+    };
 
     // Replace named parameters (:param and {param})
     for (const key of Object.keys(params)) {
       const value = params[key];
-      const encodedValue = encodeURIComponent(value);
+      const encodedValue = encode(value);
       relativeUrl = relativeUrl.replace(`:${key}`, encodedValue);
       relativeUrl = relativeUrl.replace(`{${key}}`, encodedValue);
     }
@@ -17051,22 +17073,36 @@ const createRoute = (urlPatternInput) => {
       let wildcardIndex = 0;
       relativeUrl = relativeUrl.replace(/\*/g, () => {
         const paramKey = wildcardIndex.toString();
-        const replacement = params[paramKey]
-          ? encodeURIComponent(params[paramKey])
-          : "*";
+        const paramValue = params[paramKey];
+        const replacement = paramValue ? encode(paramValue) : "*";
         wildcardIndex++;
         return replacement;
       });
     }
 
-    return relativeUrl;
+    return {
+      relativeUrl,
+      hasRawUrlPartWithInvalidChars,
+    };
   };
   const buildUrl = (params = {}) => {
-    let relativeUrl = buildRelativeUrl(params);
-    if (relativeUrl[0] === "/") {
-      relativeUrl = relativeUrl.slice(1);
+    const { relativeUrl, hasRawUrlPartWithInvalidChars } =
+      buildRelativeUrl(params);
+    let processedRelativeUrl = relativeUrl;
+    if (processedRelativeUrl[0] === "/") {
+      processedRelativeUrl = processedRelativeUrl.slice(1);
     }
-    const url = new URL(relativeUrl, baseUrl).href;
+
+    if (hasRawUrlPartWithInvalidChars) {
+      // Manually construct URL to avoid automatic encoding by URL constructor
+      const baseUrlObj = new URL(baseUrl);
+      if (baseUrlObj.pathname.endsWith("/")) {
+        return `${baseUrl}${processedRelativeUrl}`;
+      }
+      return `${baseUrl}/${processedRelativeUrl}`;
+    }
+
+    const url = new URL(processedRelativeUrl, baseUrl).href;
     return url;
   };
   route.buildUrl = buildUrl;
@@ -17076,7 +17112,7 @@ const createRoute = (urlPatternInput) => {
   const visitedSignal = signal(false);
   const relativeUrlSignal = computed(() => {
     const params = paramsSignal.value;
-    const relativeUrl = buildRelativeUrl(params);
+    const { relativeUrl } = buildRelativeUrl(params);
     return relativeUrl;
   });
   const disposeRelativeUrlEffect = effect(() => {
@@ -27883,4 +27919,4 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };

package/index.js

@@ -12,7 +12,7 @@ export { useStateArray } from "./src/components/use_state_array.js";
 export { resource } from "./src/store/resource_graph.js";
 export { valueInLocalStorage } from "./src/store/value_in_local_storage.js";
 
-// integration with browser (and routing)
+// routing
 export {
   actionIntegratedVia,
   goBack,
@@ -24,7 +24,12 @@ export {
 } from "./src/browser_integration/browser_integration.js";
 export { useDocumentState } from "./src/browser_integration/document_state_signal.js";
 export { useDocumentUrl } from "./src/browser_integration/document_url_signal.js";
-export { defineRoutes, setBaseUrl, useRouteStatus } from "./src/route/route.js";
+export {
+  defineRoutes,
+  rawUrlPart,
+  setBaseUrl,
+  useRouteStatus,
+} from "./src/route/route.js";
 
 // Components
 export { ActionRenderer } from "./src/components/action_renderer.jsx";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/callout/callout.js

@@ -48,6 +48,7 @@ export const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
+    hideErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -115,8 +116,8 @@ export const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (error.stack) {
-        newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(error.stack)}</pre>`;
+      if (!hideErrorStack && error.stack) {
+        newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }
 

package/src/route/route.js

@@ -13,6 +13,14 @@ export const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
 
+const rawUrlPartSymbol = Symbol("raw_url_part");
+export const rawUrlPart = (value) => {
+  return {
+    [rawUrlPartSymbol]: true,
+    value,
+  };
+};
+
 const DEBUG = false;
 const NO_PARAMS = { [SYMBOL_IDENTITY]: Symbol("no_params") };
 // Controls what happens to actions when their route becomes inactive:
@@ -300,11 +308,24 @@ const createRoute = (urlPatternInput) => {
 
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
+    let hasRawUrlPartWithInvalidChars = false;
+
+    const encode = (value) => {
+      if (value && value[rawUrlPartSymbol]) {
+        const rawValue = value.value;
+        // Check if raw value contains invalid URL characters
+        if (/[\s<>{}|\\^`]/.test(rawValue)) {
+          hasRawUrlPartWithInvalidChars = true;
+        }
+        return rawValue;
+      }
+      return encodeURIComponent(value);
+    };
 
     // Replace named parameters (:param and {param})
     for (const key of Object.keys(params)) {
       const value = params[key];
-      const encodedValue = encodeURIComponent(value);
+      const encodedValue = encode(value);
       relativeUrl = relativeUrl.replace(`:${key}`, encodedValue);
       relativeUrl = relativeUrl.replace(`{${key}}`, encodedValue);
     }
@@ -319,22 +340,36 @@ const createRoute = (urlPatternInput) => {
       let wildcardIndex = 0;
       relativeUrl = relativeUrl.replace(/\*/g, () => {
         const paramKey = wildcardIndex.toString();
-        const replacement = params[paramKey]
-          ? encodeURIComponent(params[paramKey])
-          : "*";
+        const paramValue = params[paramKey];
+        const replacement = paramValue ? encode(paramValue) : "*";
         wildcardIndex++;
         return replacement;
       });
     }
 
-    return relativeUrl;
+    return {
+      relativeUrl,
+      hasRawUrlPartWithInvalidChars,
+    };
   };
   const buildUrl = (params = {}) => {
-    let relativeUrl = buildRelativeUrl(params);
-    if (relativeUrl[0] === "/") {
-      relativeUrl = relativeUrl.slice(1);
+    const { relativeUrl, hasRawUrlPartWithInvalidChars } =
+      buildRelativeUrl(params);
+    let processedRelativeUrl = relativeUrl;
+    if (processedRelativeUrl[0] === "/") {
+      processedRelativeUrl = processedRelativeUrl.slice(1);
     }
-    const url = new URL(relativeUrl, baseUrl).href;
+
+    if (hasRawUrlPartWithInvalidChars) {
+      // Manually construct URL to avoid automatic encoding by URL constructor
+      const baseUrlObj = new URL(baseUrl);
+      if (baseUrlObj.pathname.endsWith("/")) {
+        return `${baseUrl}${processedRelativeUrl}`;
+      }
+      return `${baseUrl}/${processedRelativeUrl}`;
+    }
+
+    const url = new URL(processedRelativeUrl, baseUrl).href;
     return url;
   };
   route.buildUrl = buildUrl;
@@ -344,7 +379,7 @@ const createRoute = (urlPatternInput) => {
   const visitedSignal = signal(false);
   const relativeUrlSignal = computed(() => {
     const params = paramsSignal.value;
-    const relativeUrl = buildRelativeUrl(params);
+    const { relativeUrl } = buildRelativeUrl(params);
     return relativeUrl;
   });
   const disposeRelativeUrlEffect = effect(() => {