fix route resolve race condition

This commit is contained in:
Niels Lyngsø
2024-06-28 13:05:33 +02:00
parent 6adb6e3ff7
commit 30922fbacb
7 changed files with 23 additions and 29 deletions

View File

@@ -45,6 +45,11 @@ ensureAnchorHistory();
* @event changestate - Dispatched when the router slot state changes.
*/
export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouterSlot<D, P> {
/**
* Method to cancel navigation if changed.
*/
private _cancelNavigation ?:() => void;
/**
* Listeners on the router.
*/
@@ -200,9 +205,13 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
// If navigate is not determined, then we will check if we have a route match. If not then we will re-render. [NL]
navigate = this._routeMatch === null;
if (navigate === false) {
const newMatch = this.getRouteMatch();
// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
navigate = this._routeMatch?.route.path !== newMatch?.route.path;
if (this.isConnected) {
const newMatch = this.getRouteMatch();
// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
if(newMatch) {
navigate = shouldNavigate(this.match, newMatch);
}
}
}
}
@@ -327,10 +336,17 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
// Only change route if its a new route.
const navigate = shouldNavigate(this.match, match);
if (navigate) {
// If another navigation is still begin resolved in this very moment, then we need to cancel that so it does not end up overriding this new navigation.[NL]
this._cancelNavigation?.();
// Listen for another push state event. If another push state event happens
// while we are about to navigate we have to cancel.
let navigationInvalidated = false;
const cancelNavigation = () => (navigationInvalidated = true);
const cancelNavigation = () => {
navigationInvalidated = true;
this._cancelNavigation = undefined;
};
this._cancelNavigation = cancelNavigation;
const removeChangeListener: EventListenerSubscription = addListener<Event, GlobalRouterEvent>(
GLOBAL_ROUTER_EVENTS_TARGET,
'changestate',

View File

@@ -41,7 +41,6 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
);
});
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
console.log(this, datasetContext)
this.#variantId = datasetContext.getVariantId();
this.#generatePropertyDataPath();
});

View File

@@ -49,8 +49,6 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
constructor() {
super();
console.log("workspace editor created.")
new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'workspaceView', null, (workspaceViews) => {
this._workspaceViews = workspaceViews.map((view) => view.manifest);
this._createRoutes();

View File

@@ -1,9 +1,9 @@
import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../contexts/index.js';
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import { UmbNumberState } from '@umbraco-cms/backoffice/observable-api';
import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../contexts/index.js';
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
export class UmbWorkspaceSplitViewContext extends UmbContextBase<UmbWorkspaceSplitViewContext> {

View File

@@ -35,8 +35,6 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
override render() {
console.log("workspace split view render")
return html`
<umb-workspace-editor
alias=${this.alias}

View File

@@ -25,7 +25,6 @@ export class UmbWorkspaceSplitViewManager {
}
setActiveVariant(index: number, culture: string | null, segment: string | null) {
console.log("setActiveVariant", index, culture, segment)
this.#activeVariantsInfo.appendOneAt({ index, culture: culture ?? null, segment: segment ?? null }, index);
}

View File

@@ -1,8 +1,8 @@
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, nothing, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import type { ActiveVariant } from '@umbraco-cms/backoffice/workspace';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
@customElement('umb-document-workspace-split-view')
export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
@@ -28,27 +28,11 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
this._workspaceContext.splitView.activeVariantsInfo,
(variants) => {
this._variants = variants;
console.log("______variants: ", variants[0])
},
'_observeActiveVariantsInfo',
);
}
override connectedCallback(): void {
super.connectedCallback();
console.log("connected callback------")
}
override disconnectedCallback(): void {
super.disconnectedCallback();
console.log("DISconnected callback------")
}
override destroy(): void {
super.destroy();
console.log("split view ot destroyed")
}
override render() {
return this._variants
? html`<div id="splitViews">