From 22a68c24fff9db19722cdab97a5264a077c898cd Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Tue, 18 Mar 2025 19:49:12 +0530 Subject: [PATCH 1/3] Updated refferencing cached route view on navigate 1. On navigating using $route.to method, always create new instance of component eventhough its already cached by keepAlive 2. Not removing keepAlive pages from cache on back navigation 3. Destroying non keep alive pages on route change Signed-off-by: Suresh Kumar Gangumalla --- src/router/router.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/router/router.js b/src/router/router.js index 087db599..6511f046 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -179,7 +179,7 @@ export const navigate = async function () { let holder let routeData - let { view, focus } = cacheMap.get(route.hash) || {} + let { view, focus } = navigatingBack === true ? cacheMap.get(route.hash) || {} : {} if (!view) { // create a holder element for the new view @@ -330,17 +330,16 @@ const removeView = async (route, view, transition) => { // cache the page when it's as 'keepAlive' instead of destroying if (navigatingBack === false && route.options && route.options.keepAlive === true) { cacheMap.set(route.hash, { view: view, focus: previousFocus }) - } else if (navigatingBack === true) { - // remove the previous route from the cache when navigating back + } else if (navigatingBack === true && route.options && route.options.keepAlive !== true) { + // remove the previous route from the cache when navigating back & route is not configure with keep alive // cacheMap.delete will not throw an error if the route is not in the cache cacheMap.delete(route.hash) } /* Destroy the view in the following cases: * 1. Navigating forward, and the previous route is not configured with "keep alive" set to true. - * 2. Navigating back, and the previous route is configured with "keep alive" set to true. - * 3. Navigating back, and the previous route is not configured with "keep alive" set to true. + * 2. Navigating back, and the previous route is not configured with "keep alive" set to true. */ - if (route.options && (route.options.keepAlive !== true || navigatingBack === true)) { + if (route.options && route.options.keepAlive !== true) { view.destroy() view = null } From f8fb084386061af7d10054a20633213910acb2e5 Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Tue, 25 Mar 2025 14:49:56 +0530 Subject: [PATCH 2/3] Added view Manager to store multiple entries Added feature to store multiple instances of same route hash on navigating and implemented removing & destroying specific entry as per route history Signed-off-by: Suresh Kumar Gangumalla --- src/router/ViewManager.js | 38 ++++++++++++++++++++++++++++++++++++++ src/router/router.js | 34 +++++++++++++++++++++++++++------- 2 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 src/router/ViewManager.js diff --git a/src/router/ViewManager.js b/src/router/ViewManager.js new file mode 100644 index 00000000..c61cbb4f --- /dev/null +++ b/src/router/ViewManager.js @@ -0,0 +1,38 @@ +export default class ViewManager { + constructor() { + // Initializes the ViewManager with a Map to store page instances + // and a counter to keep track of the current entry. + this.store = new Map() + this.counter = 0 + this.createEntry() + } + + createEntry() { + // Creates a new entry in the store by incrementing the counter + // and initializing the entry with a null value. + this.counter++ + this.store.set(this.counter, null) + } + + setView(obj) { + // Sets the view object for the current entry in the store + this.store.set(this.counter, obj) + } + + getView() { + // Retrieves the view object for the current entry in the store. + return this.store.get(this.counter) + } + + removeView() { + // Removes the current entry from the store by deleting the entry + // associated with the current counter and then decrements the counter. + this.store.delete(this.counter) + this.counter-- + } + + size() { + // Returns the current number of entries in the store + return this.counter + } +} diff --git a/src/router/router.js b/src/router/router.js index 6511f046..3db1e633 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -23,6 +23,7 @@ import { Log } from '../lib/log.js' import { stage } from '../launch.js' import Focus from '../focus.js' import Announcer from '../announcer/announcer.js' +import ViewManager from './ViewManager.js' export let currentRoute export const state = reactive({ @@ -177,9 +178,22 @@ export const navigate = async function () { route.transition = route.transition(previousRoute, route) } + if (navigatingBack === false && route.options && route.options.keepAlive === true) { + // If ViewManager exists for the route hash, add a new entry to it. + if (cacheMap.has(route.hash) === true) { + cacheMap.get(route.hash).createEntry() + } else { + // Create a ViewManager instance for the route hash if it doesn't exist in cacheMap. + cacheMap.set(route.hash, new ViewManager()) + } + } + let holder let routeData - let { view, focus } = navigatingBack === true ? cacheMap.get(route.hash) || {} : {} + let { view, focus } = + navigatingBack === true && cacheMap.has(route.hash) + ? cacheMap.get(route.hash).getView() || {} + : {} if (!view) { // create a holder element for the new view @@ -329,17 +343,23 @@ const removeView = async (route, view, transition) => { // cache the page when it's as 'keepAlive' instead of destroying if (navigatingBack === false && route.options && route.options.keepAlive === true) { - cacheMap.set(route.hash, { view: view, focus: previousFocus }) - } else if (navigatingBack === true && route.options && route.options.keepAlive !== true) { - // remove the previous route from the cache when navigating back & route is not configure with keep alive - // cacheMap.delete will not throw an error if the route is not in the cache - cacheMap.delete(route.hash) + cacheMap.get(route.hash).setView({ view: view, focus: previousFocus }) + } else if (navigatingBack === true && cacheMap.has(route.hash)) { + // Remove the previous route entry from the ViewManager when navigating back. + const manager = cacheMap.get(route.hash) + manager.removeView() + + // If the ViewManager has zero entries, remove the corresponding route hash from cacheMap. + if (manager.size() === 0) { + cacheMap.delete(route.hash) + } } /* Destroy the view in the following cases: * 1. Navigating forward, and the previous route is not configured with "keep alive" set to true. * 2. Navigating back, and the previous route is not configured with "keep alive" set to true. + * 3. Navigating back, and the previous route is configured with "keep alive" set to true */ - if (route.options && route.options.keepAlive !== true) { + if (route.options && (route.options.keepAlive !== true || navigatingBack === true)) { view.destroy() view = null } From 4951b8911e941df7bf8562b96961035136a88356 Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Tue, 8 Apr 2025 14:10:44 +0530 Subject: [PATCH 3/3] Updated logic to deal viewManager in better way Signed-off-by: Suresh Kumar Gangumalla --- src/router/router.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/router/router.js b/src/router/router.js index 3db1e633..24764a38 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -177,23 +177,23 @@ export const navigate = async function () { if (typeof route.transition === 'function') { route.transition = route.transition(previousRoute, route) } + let viewManager = cacheMap.get(route.hash) if (navigatingBack === false && route.options && route.options.keepAlive === true) { // If ViewManager exists for the route hash, add a new entry to it. - if (cacheMap.has(route.hash) === true) { - cacheMap.get(route.hash).createEntry() + if (viewManager !== undefined) { + viewManager.createEntry() } else { // Create a ViewManager instance for the route hash if it doesn't exist in cacheMap. - cacheMap.set(route.hash, new ViewManager()) + viewManager = new ViewManager() + cacheMap.set(route.hash, viewManager) } } let holder let routeData let { view, focus } = - navigatingBack === true && cacheMap.has(route.hash) - ? cacheMap.get(route.hash).getView() || {} - : {} + (navigatingBack === true && viewManager !== undefined && viewManager.getView()) || {} if (!view) { // create a holder element for the new view