javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(react-router): cleaning up console logs

Browse Source
This commit is contained in:
ShaneK
2025-11-26 10:17:12 -08:00
parent 7fd0659856
commit fc6e482162
7 changed files with 1 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
View File

@@ -187,7 +187,6 @@ export class ReactRouterViewStack extends ViewStacks {
// Add infinite loop detection with a more reasonable limit
// In complex navigation flows, we may have many view items across different outlets
if (this.viewItemCounter > 100) {
console.warn(`[ReactRouterViewStack] Many view items created (${this.viewItemCounter}). Performing cleanup.`);
// Clean up all outlets to prevent memory leaks
this.getStackIds().forEach((stackId) => this.cleanupStaleViewItems(stackId));
// Reset counter to a lower value after cleanup
@@ -477,10 +476,6 @@ export class ReactRouterViewStack extends ViewStacks {
if (hasRelativeRoutes || hasIndexRoute) {
const segments = routeInfo.pathname.split('/').filter(Boolean);
if (process.env.NODE_ENV !== 'production') {
console.log(`[ReactRouterViewStack] getChildrenToRender outlet=${outletId}: computing parentPath for ${routeInfo.pathname}`);
}
// Two-pass algorithm:
// Pass 1: Look for specific route matches OR index routes (prefer real routes)
// Pass 2: If no match found, use wildcard fallback
@@ -511,9 +506,6 @@ export class ReactRouterViewStack extends ViewStacks {
});
if (hasSpecificMatch) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[ReactRouterViewStack] Found specific match at parentPath=${testParentPath}, remaining=${testRemainingPath}`);
}
parentPath = testParentPath;
break;
}
@@ -525,9 +517,6 @@ export class ReactRouterViewStack extends ViewStacks {
if (!wildcardFallbackPath && (testRemainingPath === '' || testRemainingPath === '/')) {
const hasIndexMatch = routeChildren.some((route) => !!(route.props as any).index);
if (hasIndexMatch) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[ReactRouterViewStack] Found index match at parentPath=${testParentPath}`);
}
parentPath = testParentPath;
break;
}
@@ -570,9 +559,6 @@ export class ReactRouterViewStack extends ViewStacks {
// Pass 2: If no specific/index match found, use wildcard fallback
if (!parentPath && wildcardFallbackPath) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[ReactRouterViewStack] Using wildcard fallback at parentPath=${wildcardFallbackPath}`);
}
parentPath = wildcardFallbackPath;
}
}
@@ -646,9 +632,6 @@ export class ReactRouterViewStack extends ViewStacks {
findLeavingViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) => {
// If the lastPathname is not set, we cannot find a leaving view item
if (!routeInfo.lastPathname) {
if (process.env.NODE_ENV !== 'production') {
console.warn(`[ReactRouterViewStack] No matching leaving view item found for: ${routeInfo.pathname}`);
}
return undefined;
}
@@ -732,16 +715,6 @@ export class ReactRouterViewStack extends ViewStacks {
// Do not adopt across outlets; if we didn't find a view for this outlet,
// defer to route matching to create a new one.
if (!viewItem && process.env.NODE_ENV !== 'production') {
const allViewItems = this.getAllViewItems();
console.warn(
`[ReactRouterViewStack] No matching view item found for: ${pathname}. Available views:`,
allViewItems
.map((v) => `${v.id}(outlet:${v.outletId}, path:${v.routeData?.childProps?.path || 'undefined'})`)
.join(', ')
);
}
return { viewItem, match };
/**

84
packages/react-router/src/ReactRouter/StackManager.tsx
View File

@@ -239,13 +239,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
bestPath = indexMatchAtMount;
}
if (process.env.NODE_ENV !== 'production') {
console.log(
`[getParentPath] outlet=${this.id}, pathname=${currentPathname}: ` +
`specific=${firstSpecificMatch}, wildcard=${firstWildcardMatch}, index=${indexMatchAtMount}, best=${bestPath}`
);
}
// Store the mount path when we first successfully match a route
if (!this.outletMountPath && bestPath) {
this.outletMountPath = bestPath;
@@ -331,18 +324,11 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
* Set a flag to indicate that we should transition the page after
* the component has updated (i.e., in `componentDidUpdate`).
*/
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] Outlet ${this.id} not ready yet, setting pendingPageTransition=true for ${routeInfo.pathname}`);
}
this.pendingPageTransition = true;
} else {
let enteringViewItem = this.context.findViewItemByRouteInfo(routeInfo, this.id);
let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:handlePageTransition] outlet=${this.id}, pathname=${routeInfo.pathname}, entering=${enteringViewItem?.id}, leaving=${leavingViewItem?.id}, enteringIsNav=${isNavigateViewItem(enteringViewItem)}, leavingIsNav=${isNavigateViewItem(leavingViewItem)}`);
}
/**
* If we don't have a leaving view item, but the route info indicates
* that the user has routed from a previous path, then the leaving view
@@ -443,13 +429,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
: [];
// Unmount and remove all views in this outlet immediately to avoid leftover content
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:outOfScope] outlet=${this.id} is out of scope, removing ${allViewsInOutlet.length} views`);
}
allViewsInOutlet.forEach((viewItem) => {
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:outOfScope] Removing view ${viewItem.id} from outlet ${this.id}, isNavigate=${isNavigateViewItem(viewItem)}`);
}
if (viewItem.ionPageElement) {
viewItem.ionPageElement.classList.add('ion-page-hidden');
viewItem.ionPageElement.setAttribute('aria-hidden', 'true');
@@ -490,9 +470,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
}
if (leavingViewItem) {
if (isNavigateViewItem(leavingViewItem) && process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:hasRelativeRoutes] Setting mount=false on Navigate ${leavingViewItem.id}, outlet=${this.id}, pathname=${routeInfo.pathname}`);
}
leavingViewItem.mount = false;
}
this.forceUpdate();
@@ -506,22 +483,9 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
parentPath
) as React.ReactElement;
if (enteringRoute && process.env.NODE_ENV !== 'production') {
const routeElement = enteringRoute.props?.element;
const isNavigate = React.isValidElement(routeElement) && routeElement.type === Navigate;
console.log(
`[StackManager] Found entering route for ${routeInfo.pathname} in outlet ${this.id}: path="${
enteringRoute.props?.path ?? '(index)'
}", isNavigate=${isNavigate}`
);
}
// If this is a nested outlet (has an explicit ID) and no route matches,
// it means this outlet shouldn't handle this route
if (this.id !== 'routerOutlet' && !enteringRoute && !enteringViewItem) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:noMatchingRoute] outlet=${this.id} has no matching route for ${routeInfo.pathname}, leavingViewItem=${leavingViewItem?.id}`);
}
// Hide any visible views in this outlet since it has no matching route
if (leavingViewItem && leavingViewItem.ionPageElement) {
leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
@@ -529,9 +493,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
}
// Unmount the leaving view to prevent components from staying active
if (leavingViewItem) {
if (isNavigateViewItem(leavingViewItem) && process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:noMatchingRoute] Setting mount=false on Navigate ${leavingViewItem.id}, outlet=${this.id}, pathname=${routeInfo.pathname}`);
}
leavingViewItem.mount = false;
}
this.forceUpdate();
@@ -545,18 +506,9 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
if (enteringViewItem && enteringRoute) {
// Update existing view item
enteringViewItem.reactElement = enteringRoute;
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] Updated existing view item ${enteringViewItem.id} for outlet ${this.id}`);
}
} else if (enteringRoute) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] Creating new view item for outlet ${this.id}, route path="${enteringRoute.props?.path ?? '(index)'}"`);
}
enteringViewItem = this.context.createViewItem(this.id, enteringRoute, routeInfo);
this.context.addViewItem(enteringViewItem);
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] Added view item ${enteringViewItem.id} to outlet ${this.id}`);
}
}
/**
@@ -716,9 +668,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
* and repeatedly hide the leaving view. Treat this as a no-op transition and allow
* the follow-up navigation to proceed.
*/
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:Navigate] outlet=${this.id}, entering=${enteringViewItem?.id}, leaving=${leavingViewItem?.id}, shouldUnmount=${shouldUnmountLeavingViewItem}, pathname=${routeInfo.pathname}`);
}
this.waitingForIonPage = false;
if (this.ionPageWaitTimeout) {
clearTimeout(this.ionPageWaitTimeout);
@@ -735,9 +684,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
// This happens during chained Navigate redirects where the same Navigate view item
// is being processed multiple times before it can render and trigger the redirect
if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
if (isNavigateViewItem(leavingViewItem) && process.env.NODE_ENV !== 'production') {
console.log(`[StackManager:Navigate:unmountLeaving] Setting mount=false on Navigate ${leavingViewItem.id}, outlet=${this.id}`);
}
leavingViewItem.mount = false;
}
@@ -754,18 +700,9 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
* while we wait for the entering view's IonPage to mount, then retry the
* transition once the page is ready.
*/
if (process.env.NODE_ENV !== 'production') {
console.log(
`[StackManager] Entering view ${enteringViewItem.id} has no ionPageElement yet, will hide leaving view and retry`
);
}
if (leavingViewItem?.ionPageElement) {
leavingViewItem.ionPageElement.classList.add('ion-page-hidden');
leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] HIDING leaving view ${leavingViewItem.id} (no entering ionPage yet)`);
}
}
this.waitingForIonPage = true;
@@ -787,10 +724,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id) ?? leavingViewItem;
if (latestEnteringView?.ionPageElement) {
if (process.env.NODE_ENV !== 'production') {
console.log(`[StackManager] Retrying transition for ${latestEnteringView.id}`);
}
this.transitionPage(routeInfo, latestEnteringView, latestLeavingView ?? undefined);
if (shouldUnmountLeavingViewItem && latestLeavingView && latestEnteringView !== latestLeavingView) {
@@ -798,10 +731,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
}
this.forceUpdate();
} else if (process.env.NODE_ENV !== 'production') {
console.log(
`[StackManager] Still no ionPageElement for ${latestEnteringView?.id ?? enteringViewItem?.id ?? 'unknown'}, skipping transition`
);
}
}, 50);
@@ -1205,12 +1134,6 @@ function findRouteByRouteInfo(node: React.ReactNode, routeInfo: RouteInfo, paren
const parentSegments = normalizedParent.split('/').filter(Boolean);
const relativeSegments = pathSegments.slice(parentSegments.length);
pathnameToMatch = relativeSegments.join('/'); // Empty string is valid for index routes
if (process.env.NODE_ENV !== 'production') {
console.log(
`[findRouteByRouteInfo] Computed relative path: "${pathnameToMatch}" from pathname="${routeInfo.pathname}" parentPath="${parentPath}"`
);
}
}
}
@@ -1222,13 +1145,6 @@ function findRouteByRouteInfo(node: React.ReactNode, routeInfo: RouteInfo, paren
});
if (match) {
if (process.env.NODE_ENV !== 'production') {
console.log(
`[findRouteByRouteInfo] Matched route for ${routeInfo.pathname} in outlet ${parentPath ?? 'root'} with path="${
child.props.path ?? '(index)'
}"`
);
}
matchedNode = child;
break;
}

11
packages/react-router/src/ReactRouter/utils/matchRoutesFromChildren.ts
View File

@@ -142,12 +142,6 @@ export function computeParentPathFromRoutes(
continue;
}
if (process.env.NODE_ENV !== 'production') {
console.log(
`[matchRoutesFromChildren] Found match for ${pathname}: parentPath=${testParentPath}, matchedRoute.path=${matchedRoute.path ?? '(index)'}, pathnameBase=${lastMatch.pathnameBase}`
);
}
return {
parentPath: testParentPath,
matchedRoute,
@@ -164,11 +158,6 @@ export function computeParentPathFromRoutes(
// Only consider this if it's an index route (we're exactly at the parent)
if (lastMatch.route.index) {
const parentPath = '/' + segments.join('/');
if (process.env.NODE_ENV !== 'production') {
console.log(
`[matchRoutesFromChildren] Index route match for ${pathname}: parentPath=${parentPath}`
);
}
return {
parentPath,
matchedRoute: lastMatch.route,

5
packages/react-router/test/base/src/pages/routing/Tabs.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel, IonPage, IonContent } from '@ionic/react';
import { Route, Navigate } from 'react-router';
import Tab1 from './Tab1';
@@ -11,9 +11,6 @@ import SettingsDetails from './SettingsDetails';
interface TabsProps {}
const Tabs: React.FC = () => {
useEffect(() => {
console.log('[Tabs] Mounted');
}, []);
return (
<IonTabs>
<IonRouterOutlet id="tabs">

2
packages/react/src/components/IonRouterOutlet.tsx
View File

@@ -37,8 +37,6 @@ class IonRouterOutletContainer extends React.Component<InternalProps, InternalSt
const { children, forwardedRef, ...props } = this.props;
const outletId = props.id ?? this.outletId;
console.log(`[IonRouterOutlet] Rendering with id: "${outletId}", all props:`, Object.keys(props));
return this.context.hasIonicRouter() ? (
props.ionPage ? (
<OutletPageManager StackManager={StackManager} routeInfo={this.context.routeInfo} {...props}>

4
packages/react/src/routing/LocationHistory.ts
View File

@@ -96,13 +96,9 @@ export class LocationHistory {
// Get the current route that's being replaced
const currentRoute = this.locationHistory[this.locationHistory.length - 1];
console.log('[LocationHistory._replace] currentRoute:', currentRoute?.pathname, 'tab:', currentRoute?.tab);
console.log('[LocationHistory._replace] newRoute:', routeInfo.pathname, 'tab:', routeInfo.tab);
// Only pop from global history if we're replacing in the same outlet context.
// Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
console.log('[LocationHistory._replace] isEnteringNestedOutlet:', isEnteringNestedOutlet);
if (!isEnteringNestedOutlet) {
this.locationHistory.pop();

1
packages/react/src/routing/PageManager.tsx
View File

@@ -41,7 +41,6 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
if (this.context.isInOutlet()) {
this.ionPageElementRef.current.classList.add('ion-page-invisible');
}
console.log('[PageManager] componentDidMount for', this.props.routeInfo?.pathname);
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo!);
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);