@jsenv/navi 0.4.0 → 0.4.1

package/dist/jsenv_navi.js

@@ -16760,10 +16760,10 @@ const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
 
-const encodedSymbol = Symbol("encoded_uri_component");
-const encodedURIComponent = (value) => {
+const rawUrlPartSymbol = Symbol("raw_url_part");
+const rawUrlPart = (value) => {
   return {
-    [encodedSymbol]: true,
+    [rawUrlPartSymbol]: true,
     value,
   };
 };
@@ -17041,10 +17041,16 @@ const createRoute = (urlPatternInput) => {
 
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
+    let hasRawUrlPartWithInvalidChars = false;
 
     const encode = (value) => {
-      if (value && value[encodedSymbol]) {
-        return value.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);
     };
@@ -17074,14 +17080,29 @@ const createRoute = (urlPatternInput) => {
       });
     }
 
-    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;
@@ -17091,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(() => {
@@ -27898,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, encodedURIComponent, 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

@@ -26,7 +26,7 @@ export { useDocumentState } from "./src/browser_integration/document_state_signa
 export { useDocumentUrl } from "./src/browser_integration/document_url_signal.js";
 export {
   defineRoutes,
-  encodedURIComponent,
+  rawUrlPart,
   setBaseUrl,
   useRouteStatus,
 } from "./src/route/route.js";

package/package.json

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

package/src/route/route.js

@@ -13,10 +13,10 @@ export const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
 
-const encodedSymbol = Symbol("encoded_uri_component");
-export const encodedURIComponent = (value) => {
+const rawUrlPartSymbol = Symbol("raw_url_part");
+export const rawUrlPart = (value) => {
   return {
-    [encodedSymbol]: true,
+    [rawUrlPartSymbol]: true,
     value,
   };
 };
@@ -308,10 +308,16 @@ const createRoute = (urlPatternInput) => {
 
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
+    let hasRawUrlPartWithInvalidChars = false;
 
     const encode = (value) => {
-      if (value && value[encodedSymbol]) {
-        return value.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);
     };
@@ -341,14 +347,29 @@ const createRoute = (urlPatternInput) => {
       });
     }
 
-    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;
@@ -358,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(() => {