@jsenv/navi 0.3.4 → 0.4.0

package/dist/jsenv_navi.js

@@ -8350,10 +8350,9 @@ const getInnerWidth = (element) => {
 installImportMetaCss(import.meta);
 import.meta.css = /* css */ `
   .ui_transition_container {
+    position: relative;
     display: inline-flex;
     flex: 1;
-    position: relative;
-    overflow: hidden;
   }
 
   .ui_transition_outer_wrapper {
@@ -8362,7 +8361,6 @@ import.meta.css = /* css */ `
   }
 
   .ui_transition_measure_wrapper {
-    overflow: hidden;
     display: inline-flex;
     flex: 1;
   }
@@ -11737,6 +11735,7 @@ const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
+    hideErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -11804,7 +11803,9 @@ const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      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>`;
+      }
     }
 
     // Check if the message is a full HTML document (starts with DOCTYPE)
@@ -11813,8 +11814,6 @@ const openCallout = (
       const iframe = document.createElement("iframe");
       iframe.style.border = "none";
       iframe.style.width = "100%";
-      iframe.style.minHeight = "200px";
-      iframe.style.maxHeight = "400px";
       iframe.style.backgroundColor = "white";
       iframe.srcdoc = newMessage;
 
@@ -12084,8 +12083,6 @@ import.meta.css = /* css */ `
     .navi_callout_message iframe {
       display: block;
       margin: 0;
-      border: 1px solid #ddd;
-      border-radius: 4px;
     }
     .navi_callout_close_button_column {
       display: flex;
@@ -16762,6 +16759,14 @@ let baseUrl = window.location.origin;
 const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
+
+const encodedSymbol = Symbol("encoded_uri_component");
+const encodedURIComponent = (value) => {
+  return {
+    [encodedSymbol]: 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
@@ -17037,10 +17042,17 @@ const createRoute = (urlPatternInput) => {
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
 
+    const encode = (value) => {
+      if (value && value[encodedSymbol]) {
+        return value.value;
+      }
+      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);
     }
@@ -17055,9 +17067,8 @@ 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;
       });
@@ -27887,4 +27898,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, 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 };

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,
+  encodedURIComponent,
+  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.4",
+  "version": "0.4.0",
   "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,7 +116,9 @@ export const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      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>`;
+      }
     }
 
     // Check if the message is a full HTML document (starts with DOCTYPE)
@@ -124,8 +127,6 @@ export const openCallout = (
       const iframe = document.createElement("iframe");
       iframe.style.border = "none";
       iframe.style.width = "100%";
-      iframe.style.minHeight = "200px";
-      iframe.style.maxHeight = "400px";
       iframe.style.backgroundColor = "white";
       iframe.srcdoc = newMessage;
 
@@ -395,8 +396,6 @@ import.meta.css = /* css */ `
     .navi_callout_message iframe {
       display: block;
       margin: 0;
-      border: 1px solid #ddd;
-      border-radius: 4px;
     }
     .navi_callout_close_button_column {
       display: flex;

package/src/route/route.js

@@ -13,6 +13,14 @@ export const setBaseUrl = (value) => {
   baseUrl = new URL(value, window.location).href;
 };
 
+const encodedSymbol = Symbol("encoded_uri_component");
+export const encodedURIComponent = (value) => {
+  return {
+    [encodedSymbol]: true,
+    value,
+  };
+};
+
 const DEBUG = false;
 const NO_PARAMS = { [SYMBOL_IDENTITY]: Symbol("no_params") };
 // Controls what happens to actions when their route becomes inactive:
@@ -301,10 +309,17 @@ const createRoute = (urlPatternInput) => {
   const buildRelativeUrl = (params = {}) => {
     let relativeUrl = urlPatternInput;
 
+    const encode = (value) => {
+      if (value && value[encodedSymbol]) {
+        return value.value;
+      }
+      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,9 +334,8 @@ 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;
       });