@jsenv/navi 0.29.235 → 0.29.236
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/jsenv_navi.js +58 -13
- package/dist/dev/jsenv_navi.js.map +7 -7
- package/dist/jsenv_navi.js +58 -13
- package/dist/jsenv_navi.js.map +7 -7
- package/docs/css_architecture.md +3 -1
- package/package.json +1 -1
package/dist/jsenv_navi.js
CHANGED
|
@@ -5900,6 +5900,7 @@ installImportMetaCssBuild(import.meta);
|
|
|
5900
5900
|
let calloutCount = 0;
|
|
5901
5901
|
|
|
5902
5902
|
const css$13 = /* css */ `
|
|
5903
|
+
/* jsenv-css-opaque: same as dialog.jsx, cascade order. */
|
|
5903
5904
|
@layer navi {
|
|
5904
5905
|
.navi_callout {
|
|
5905
5906
|
/* A callout is parented to what it explains, so it inherits from it — and
|
|
@@ -25746,6 +25747,47 @@ const resolveEffectiveDocumentState = (
|
|
|
25746
25747
|
return { ...state, ...sharedState };
|
|
25747
25748
|
};
|
|
25748
25749
|
|
|
25750
|
+
// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where the
|
|
25751
|
+
// mask is derived from render order within the nearest root/async boundary:
|
|
25752
|
+
// stable across re-renders of the same mount, but not across two mounts on the
|
|
25753
|
+
// same page, and not across two documents.
|
|
25754
|
+
const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
|
|
25755
|
+
const isLikelyPreactGeneratedId = (id) => {
|
|
25756
|
+
return PREACT_GENERATED_ID_REGEX.test(id);
|
|
25757
|
+
};
|
|
25758
|
+
|
|
25759
|
+
/**
|
|
25760
|
+
* A history entry outlives the document that wrote it: `history.state` comes
|
|
25761
|
+
* back as it was left on a reload, and on a back/forward into a document that
|
|
25762
|
+
* has been unloaded since.
|
|
25763
|
+
*
|
|
25764
|
+
* A key named by a generated id names a position in the render order of the
|
|
25765
|
+
* document that wrote it, and nothing else. Read back in another document the
|
|
25766
|
+
* same key names whatever now renders at that position — so an open popup left
|
|
25767
|
+
* behind by the previous document opens a component nobody ever touched (see
|
|
25768
|
+
* `useNavState`, whose key presence IS the open state). Only a caller-given id
|
|
25769
|
+
* means the same thing on both sides of a load.
|
|
25770
|
+
*
|
|
25771
|
+
* Returns the state untouched when it holds no such key, so the caller can tell
|
|
25772
|
+
* whether the entry needs rewriting.
|
|
25773
|
+
*/
|
|
25774
|
+
const dropGeneratedIdKeys = (state) => {
|
|
25775
|
+
if (!state) {
|
|
25776
|
+
return state;
|
|
25777
|
+
}
|
|
25778
|
+
let stateWithoutGeneratedIdKeys = state;
|
|
25779
|
+
for (const key of Object.keys(state)) {
|
|
25780
|
+
if (!isLikelyPreactGeneratedId(key)) {
|
|
25781
|
+
continue;
|
|
25782
|
+
}
|
|
25783
|
+
if (stateWithoutGeneratedIdKeys === state) {
|
|
25784
|
+
stateWithoutGeneratedIdKeys = { ...state };
|
|
25785
|
+
}
|
|
25786
|
+
delete stateWithoutGeneratedIdKeys[key];
|
|
25787
|
+
}
|
|
25788
|
+
return stateWithoutGeneratedIdKeys;
|
|
25789
|
+
};
|
|
25790
|
+
|
|
25749
25791
|
/**
|
|
25750
25792
|
* The document's rendering, held for the one frame a view transition needs.
|
|
25751
25793
|
*
|
|
@@ -26602,7 +26644,14 @@ const setupBrowserIntegrationViaHistory = ({
|
|
|
26602
26644
|
|
|
26603
26645
|
const init = () => {
|
|
26604
26646
|
const url = window.location.href;
|
|
26605
|
-
const
|
|
26647
|
+
const stateOnEntry = window.history.state;
|
|
26648
|
+
const state = dropGeneratedIdKeys(stateOnEntry);
|
|
26649
|
+
if (state !== stateOnEntry) {
|
|
26650
|
+
// The entry itself has to lose them too, not just the document state:
|
|
26651
|
+
// getDocumentState() reads the entry back, and every state write copies
|
|
26652
|
+
// what it finds there onto the next one.
|
|
26653
|
+
window.history.replaceState(state, null, url);
|
|
26654
|
+
}
|
|
26606
26655
|
handleRoutingTask(url, {
|
|
26607
26656
|
reason: "routing initialization",
|
|
26608
26657
|
navigationType: "load",
|
|
@@ -26804,18 +26853,6 @@ const isVisited = browserIntegration.isVisited;
|
|
|
26804
26853
|
const visitedUrlsSignal = browserIntegration.visitedUrlsSignal;
|
|
26805
26854
|
browserIntegration.handleActionTask;
|
|
26806
26855
|
|
|
26807
|
-
// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
|
|
26808
|
-
// the mask is derived from render order within the nearest root/async
|
|
26809
|
-
// boundary — stable across re-renders of the *same* mount, but not across a
|
|
26810
|
-
// reload (render order can differ) or even across two mounts on the same
|
|
26811
|
-
// page (two components hitting useId() in the same relative order get the
|
|
26812
|
-
// same string). Storing one of these under type: "push" bakes it into a
|
|
26813
|
-
// history entry: reload the page and the entry's key may now belong to a
|
|
26814
|
-
// completely different component (or none), silently auto-opening whatever
|
|
26815
|
-
// happens to render at that same position instead.
|
|
26816
|
-
const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
|
|
26817
|
-
const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
|
|
26818
|
-
|
|
26819
26856
|
const NO_OP = () => {};
|
|
26820
26857
|
const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
|
|
26821
26858
|
const useNavStateBasic = (
|
|
@@ -26847,6 +26884,10 @@ const useNavStateBasic = (
|
|
|
26847
26884
|
}
|
|
26848
26885
|
|
|
26849
26886
|
let effectiveType = type;
|
|
26887
|
+
// A push bakes the key into a history entry of its own, and an id naming a
|
|
26888
|
+
// render position (see isLikelyPreactGeneratedId) can be claimed by two
|
|
26889
|
+
// mounts of this same page. A replace keeps the key on the entry the document
|
|
26890
|
+
// is already on, where the id at least names one render.
|
|
26850
26891
|
if (type === "push" && isLikelyPreactGeneratedId(id)) {
|
|
26851
26892
|
effectiveType = "replace";
|
|
26852
26893
|
}
|
|
@@ -57862,6 +57903,8 @@ const PopupClose = ({
|
|
|
57862
57903
|
installImportMetaCssBuild(import.meta);
|
|
57863
57904
|
let openLocalDialogCount = 0;
|
|
57864
57905
|
const css$E = /* css */`
|
|
57906
|
+
/* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
|
|
57907
|
+
order depending on which popup renders first. */
|
|
57865
57908
|
@layer navi {
|
|
57866
57909
|
.navi_dialog {
|
|
57867
57910
|
/* Min gap between the dialog and the edges of its container. Written
|
|
@@ -59626,6 +59669,8 @@ Dialog.Close = PopupClose;
|
|
|
59626
59669
|
installImportMetaCssBuild(import.meta);
|
|
59627
59670
|
let openLocalPopoverCount = 0;
|
|
59628
59671
|
const css$D = /* css */`
|
|
59672
|
+
/* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
|
|
59673
|
+
order depending on which popup renders first. */
|
|
59629
59674
|
@layer navi {
|
|
59630
59675
|
.navi_popover {
|
|
59631
59676
|
/* soft: user-configurable preferred max-height. Kept as a *default*
|