fix(qwik-router): dont execute task from removed layout

Author: Varixo

packages/docs/src/routes/api/qwik/api.json

@@ -672,6 +672,20 @@
       "content": "Use this to force running subscribers, for example when the calculated value mutates but remains the same object.\n\n\n```typescript\nforce(): void;\n```\n**Returns:**\n\nvoid",
       "mdFile": "core.computedsignal.force.md"
     },
+    {
+      "name": "forceStoreEffects",
+      "id": "forcestoreeffects",
+      "hierarchy": [
+        {
+          "name": "forceStoreEffects",
+          "id": "forcestoreeffects"
+        }
+      ],
+      "kind": "Function",
+      "content": "Force a store to recompute and schedule effects.\n\n\n```typescript\nforceStoreEffects: (value: StoreTarget, prop: keyof StoreTarget) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nvalue\n\n\n</td><td>\n\nStoreTarget\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nprop\n\n\n</td><td>\n\nkeyof StoreTarget\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
+      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/reactive-primitives/impl/store.ts",
+      "mdFile": "core.forcestoreeffects.md"
+    },
     {
       "name": "Fragment",
       "id": "fragment",

packages/docs/src/routes/api/qwik/index.mdx

@@ -1318,6 +1318,57 @@ force(): void;
 
 void
 
+## forceStoreEffects
+
+Force a store to recompute and schedule effects.
+
+```typescript
+forceStoreEffects: (value: StoreTarget, prop: keyof StoreTarget) => void
+```
+
+<table><thead><tr><th>
+
+Parameter
+
+</th><th>
+
+Type
+
+</th><th>
+
+Description
+
+</th></tr></thead>
+<tbody><tr><td>
+
+value
+
+</td><td>
+
+StoreTarget
+
+</td><td>
+
+</td></tr>
+<tr><td>
+
+prop
+
+</td><td>
+
+keyof StoreTarget
+
+</td><td>
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/reactive-primitives/impl/store.ts)
+
 ## Fragment
 
 ```typescript

packages/qwik-router/src/buildtime/build-layout.unit.ts

@@ -4,7 +4,7 @@ const test = testAppSuite('Build Layout');
 
 test('total layouts', ({ ctx: { layouts } }) => {
   // $ find starters/apps/qwikrouter-test/src/routes -name layout*tsx | wc -l
-  assert.equal(layouts.length, 12, JSON.stringify(layouts, null, 2));
+  assert.equal(layouts.length, 13, JSON.stringify(layouts, null, 2));
 });
 
 test('nested named layout', ({ assertLayout }) => {

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -26,6 +26,8 @@ import {
   type _ElementVNode,
   type AsyncComputedReadonlySignal,
   type SerializationStrategy,
+  forceStoreEffects,
+  _hasStoreEffects,
 } from '@qwik.dev/core/internal';
 import { clientNavigate } from './client-navigate';
 import { CLIENT_DATA_CACHE, DEFAULT_LOADERS_SERIALIZATION_STRATEGY, Q_ROUTE } from './constants';
@@ -156,15 +158,13 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
   }
 
   const url = new URL(urlEnv);
-  const routeLocation = useStore<MutableRouteLocation>(
-    {
-      url,
-      params: env.params,
-      isNavigating: false,
-      prevUrl: undefined,
-    },
-    { deep: false }
-  );
+  const routeLocationTarget: MutableRouteLocation = {
+    url,
+    params: env.params,
+    isNavigating: false,
+    prevUrl: undefined,
+  };
+  const routeLocation = useStore<MutableRouteLocation>(routeLocationTarget, { deep: false });
   const navResolver: { r?: () => void } = {};
   const container = _getContextContainer();
   const getSerializationStrategy = (loaderId: string): SerializationStrategy => {
@@ -470,14 +470,30 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
         if (navigation.dest.search && !!isSamePath(trackUrl, prevUrl)) {
           trackUrl.search = navigation.dest.search;
         }
-
+        let shouldForcePrevUrl = false;
+        let shouldForceUrl = false;
+        let shouldForceParams = false;
         // Update route location
         if (!isSamePath(trackUrl, prevUrl)) {
-          routeLocation.prevUrl = prevUrl;
+          if (_hasStoreEffects(routeLocation, 'prevUrl')) {
+            shouldForcePrevUrl = true;
+          }
+          routeLocationTarget.prevUrl = prevUrl;
         }
 
-        routeLocation.url = trackUrl;
-        routeLocation.params = { ...params };
+        if (routeLocationTarget.url !== trackUrl) {
+          if (_hasStoreEffects(routeLocation, 'url')) {
+            shouldForceUrl = true;
+          }
+          routeLocationTarget.url = trackUrl;
+        }
+
+        if (routeLocationTarget.params !== params) {
+          if (_hasStoreEffects(routeLocation, 'params')) {
+            shouldForceParams = true;
+          }
+          routeLocationTarget.params = params;
+        }
 
         (routeInternal as any).untrackedValue = { type: navType, dest: trackUrl };
 
@@ -746,6 +762,15 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
               callRestoreScrollOnDocument();
             }
 
+            if (shouldForcePrevUrl) {
+              forceStoreEffects(routeLocation, 'prevUrl');
+            }
+            if (shouldForceUrl) {
+              forceStoreEffects(routeLocation, 'url');
+            }
+            if (shouldForceParams) {
+              forceStoreEffects(routeLocation, 'params');
+            }
             routeLocation.isNavigating = false;
             navResolver.r?.();
           });

packages/qwik/src/core/index.ts

@@ -98,7 +98,7 @@ export type { SerializationStrategy } from './shared/types';
 // use API
 //////////////////////////////////////////////////////////////////////////////////////////
 export { useLexicalScope } from './use/use-lexical-scope.public';
-export { useStore, unwrapStore } from './use/use-store.public';
+export { useStore, unwrapStore, forceStoreEffects } from './use/use-store.public';
 export { untrack } from './use/use-core';
 export { useId } from './use/use-id';
 export { useContext, useContextProvider, createContextId } from './use/use-context';

packages/qwik/src/core/internal.ts

@@ -37,6 +37,7 @@ export {
 export { _wrapProp, _wrapSignal } from './reactive-primitives/internal-api';
 export { SubscriptionData as _SubscriptionData } from './reactive-primitives/subscription-data';
 export { _EFFECT_BACK_REF } from './reactive-primitives/types';
+export { _hasStoreEffects } from './reactive-primitives/impl/store';
 export {
   isStringifiable as _isStringifiable,
   type Stringifiable as _Stringifiable,

packages/qwik/src/core/qwik.core.api.md

@@ -325,6 +325,11 @@ export const eventQrl: <T>(qrl: QRL<T>) => QRL<T>;
 // @internal (undocumented)
 export const _fnSignal: <T extends (...args: any) => any>(fn: T, args: Parameters<T>, fnStr?: string) => WrappedSignalImpl<any>;
 
+// Warning: (ae-forgotten-export) The symbol "StoreTarget" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const forceStoreEffects: (value: StoreTarget, prop: keyof StoreTarget) => void;
+
 // @public (undocumented)
 export const Fragment: FunctionComponent<{
     children?: any;
@@ -376,6 +381,9 @@ function h<TYPE extends string | FunctionComponent<PROPS>, PROPS extends {} = {}
 export { h as createElement }
 export { h }
 
+// @internal (undocumented)
+export const _hasStoreEffects: (value: StoreTarget, prop: keyof StoreTarget) => boolean;
+
 // Warning: (ae-forgotten-export) The symbol "HTMLAttributesBase" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "FilterBase" needs to be exported by the entry point index.d.ts
 //
@@ -438,8 +446,6 @@ export interface ISsrComponentFrame {
     scopedStyleIds: Set<string>;
 }
 
-// Warning: (ae-forgotten-export) The symbol "StoreTarget" needs to be exported by the entry point index.d.ts
-//
 // @internal (undocumented)
 export const _isStore: (value: StoreTarget) => boolean;
 

packages/qwik/src/core/reactive-primitives/impl/store.ts

@@ -31,6 +31,30 @@ export const getStoreTarget = <T extends StoreTarget>(value: T): T | null => {
   return value?.[STORE_TARGET] || null;
 };
 
+/**
+ * Force a store to recompute and schedule effects.
+ *
+ * @public
+ */
+export const forceStoreEffects = (value: StoreTarget, prop: keyof StoreTarget): void => {
+  const handler = getStoreHandler(value);
+  if (handler) {
+    handler.force(prop);
+  }
+};
+
+/**
+ * @returns True if the store has effects for the given prop
+ * @internal
+ */
+export const _hasStoreEffects = (value: StoreTarget, prop: keyof StoreTarget): boolean => {
+  const handler = getStoreHandler(value);
+  if (handler) {
+    return (handler.$effects$?.get(prop)?.size ?? 0) > 0;
+  }
+  return false;
+};
+
 /**
  * Get the original object that was wrapped by the store. Useful if you want to clone a store
  * (structuredClone, IndexedDB,...)
@@ -82,6 +106,16 @@ export class StoreHandler implements ProxyHandler<StoreTarget> {
     return '[Store]';
   }
 
+  force(prop: keyof StoreTarget): void {
+    const target = getStoreTarget(this)!;
+    this.$container$?.$scheduler$?.schedule(
+      ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS,
+      null,
+      this,
+      getEffects(target, prop, this.$effects$)
+    );
+  }
+
   get(target: StoreTarget, prop: string | symbol) {
     // TODO(perf): handle better `slice` calls
     if (typeof prop === 'symbol') {

packages/qwik/src/core/use/use-store.public.ts

@@ -4,7 +4,7 @@ import { StoreFlags } from '../reactive-primitives/types';
 import { invoke } from './use-core';
 import { useSequentialScope } from './use-sequential-scope';
 
-export { unwrapStore } from '../reactive-primitives/impl/store';
+export { unwrapStore, forceStoreEffects } from '../reactive-primitives/impl/store';
 
 /** @public */
 export interface UseStoreOptions {

starters/apps/qwikrouter-test/src/routes/location-path/[id]/index.tsx

@@ -0,0 +1,13 @@
+import { component$ } from "@qwik.dev/core";
+import { Link } from "@qwik.dev/router";
+
+export default component$(() => {
+  return (
+    <div>
+      <h1>Location Path id</h1>
+      <Link href="/qwikrouter-test/location-path/" id="location-path-link-root">
+        Location Path
+      </Link>
+    </div>
+  );
+});