feat: initial backpatching support

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

@@ -209,7 +209,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any): Promise<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\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
+      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any, options?: {\n    waitForIdle?: boolean;\n}): Promise<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\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\noptions\n\n\n</td><td>\n\n{ waitForIdle?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/element-fixture.ts",
       "mdFile": "core.trigger.md"
     },

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

@@ -507,6 +507,9 @@ export declare function trigger(
   queryOrElement: string | Element | keyof HTMLElementTagNameMap | null,
   eventName: string,
   eventPayload?: any,
+  options?: {
+    waitForIdle?: boolean;
+  },
 ): Promise<void>;
 ```
 
@@ -568,6 +571,19 @@ any
 
 _(Optional)_
 
+</td></tr>
+<tr><td>
+
+options
+
+</td><td>
+
+\{ waitForIdle?: boolean; }
+
+</td><td>
+
+_(Optional)_
+
 </td></tr>
 </tbody></table>
 

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/link-component.tsx

@@ -70,13 +70,14 @@ export const Link = component$<LinkProps>((props) => {
       })
     : undefined;
   const handleClick = clientNavPath
-    ? $(async (event: Event, elm: HTMLAnchorElement) => {
+    ? $((event: Event, elm: HTMLAnchorElement) => {
         if (event.defaultPrevented) {
           // If default was prevented, than it is up to us to make client side navigation.
           if (elm.href) {
             elm.setAttribute('aria-pressed', 'true');
-            await nav(elm.href, { forceReload: reload, replaceState, scroll });
-            elm.removeAttribute('aria-pressed');
+            nav(elm.href, { forceReload: reload, replaceState, scroll }).then(() => {
+              elm.removeAttribute('aria-pressed');
+            });
           }
         }
       })

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

@@ -20,12 +20,14 @@ import {
   _getContextContainer,
   _getContextElement,
   _getQContainerElement,
-  _UNINITIALIZED,
   _waitUntilRendered,
+  _UNINITIALIZED,
   SerializerSymbol,
   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;
+        }
+
+        if (routeLocationTarget.url !== trackUrl) {
+          if (_hasStoreEffects(routeLocation, 'url')) {
+            shouldForceUrl = true;
+          }
+          routeLocationTarget.url = trackUrl;
         }
 
-        routeLocation.url = trackUrl;
-        routeLocation.params = { ...params };
+        if (routeLocationTarget.params !== params) {
+          if (_hasStoreEffects(routeLocation, 'params')) {
+            shouldForceParams = true;
+          }
+          routeLocationTarget.params = params;
+        }
 
         (routeInternal as any).untrackedValue = { type: navType, dest: trackUrl };
 
@@ -493,7 +509,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
         // Update content
         content.headings = pageModule.headings;
         content.menu = menu;
-        contentInternal.value = noSerialize(contentModules);
+        (contentInternal as any).untrackedValue = noSerialize(contentModules);
 
         // Update document head
         documentHead.links = resolvedHead.links;
@@ -719,6 +735,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
 
           const navigate = () => {
             clientNavigate(window, navType, prevUrl, trackUrl, replaceState);
+            (contentInternal as any).force();
             return _waitUntilRendered(elm as Element);
           };
 
@@ -746,6 +763,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-router/src/runtime/src/router-outlet-component.tsx

@@ -7,6 +7,7 @@ import {
   useContext,
   useServerData,
 } from '@qwik.dev/core';
+import { _getContextElement, _getDomContainer } from '@qwik.dev/core/internal';
 
 import { ContentInternalContext } from './contexts';
 import type { ClientSPAWindow } from './qwik-router-component';
@@ -20,13 +21,16 @@ export const RouterOutlet = component$(() => {
     throw new Error('PrefetchServiceWorker component must be rendered on the server.');
   }
 
-  const { value } = useContext(ContentInternalContext);
-  if (value && value.length > 0) {
-    const contentsLen = value.length;
+  const internalContext = useContext(ContentInternalContext);
+
+  const contents = internalContext.value;
+
+  if (contents && contents.length > 0) {
+    const contentsLen = contents.length;
     let cmp: JSXNode | null = null;
     for (let i = contentsLen - 1; i >= 0; i--) {
-      if (value[i].default) {
-        cmp = jsx(value[i].default as any, {
+      if (contents[i].default) {
+        cmp = jsx(contents[i].default as any, {
           children: cmp,
         });
       }