Merge pull request #7730 from QwikDev/v2-fix-loaders-prod

fix: getting invoke context for loaders in production

Author: wmertens

.changeset/heavy-maps-wash.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/router': patch
+---
+
+fix: getting invoke context for loaders in production

e2e/adapters-e2e/src/routes/loaders/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@qwik.dev/core';
+import { Link } from '@qwik.dev/router';
+
+export default component$(() => {
+  return (
+    <>
+      <Link id="subpage-link" href="/loaders/subpage">
+        Sub page
+      </Link>
+    </>
+  );
+});

e2e/adapters-e2e/src/routes/loaders/subpage/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@qwik.dev/core';
+import { routeLoader$ } from '@qwik.dev/router';
+
+export const useTest = routeLoader$(async () => {
+  return 42;
+});
+
+export default component$(() => {
+  const loaded = useTest();
+
+  return (
+    <>
+      <h1>Sub page</h1>
+      <p>This is the sub page.</p>
+      <p id="subpage-loader-value">{loaded.value}</p>
+    </>
+  );
+});

e2e/adapters-e2e/tests/express.spec.ts

@@ -25,4 +25,15 @@ test.describe('Verifying Express Adapter', () => {
 
     await expect(page.getByRole('heading', { name: 'Profile page' })).toBeVisible();
   });
+
+  test('should load loaders context in minified prod mode', async ({ page }) => {
+    page.goto('/loaders');
+    const subpageLink = page.locator('#subpage-link');
+    await expect(subpageLink).toBeVisible();
+
+    await subpageLink.click();
+
+    await expect(page.getByRole('heading', { name: 'Sub page' })).toBeVisible();
+    await expect(page.locator('#subpage-loader-value')).toHaveText('42');
+  });
 });

packages/qwik-router/src/runtime/src/server-functions.ts

@@ -15,7 +15,7 @@ import {
   _getContextEvent,
   _serialize,
   _UNINITIALIZED,
-  _useInvokeContext,
+  _resolveContextWithoutSequentialScope,
   type SerializationStrategy,
 } from '@qwik.dev/core/internal';
 
@@ -201,8 +201,7 @@ export const routeLoaderQrl = ((
 ): LoaderInternal => {
   const { id, validators, serializationStrategy } = getValidators(rest, loaderQrl);
   function loader() {
-    const iCtx = _useInvokeContext();
-    const state = iCtx.$container$.resolveContext(iCtx.$hostElement$, RouteStateContext)!;
+    const state = _resolveContextWithoutSequentialScope(RouteStateContext)!;
 
     if (!(id in state)) {
       throw new Error(`routeLoader$ "${loaderQrl.getSymbol()}" was invoked in a route where it was not declared.

packages/qwik/src/core/internal.ts

@@ -50,7 +50,7 @@ export {
   _getContextEvent,
   _getContextContainer,
   _jsxBranch,
-  useInvokeContext as _useInvokeContext,
   _waitUntilRendered,
 } from './use/use-core';
 export { scheduleTask as _task } from './use/use-task';
+export { _resolveContextWithoutSequentialScope } from './use/use-context';

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

@@ -804,6 +804,9 @@ export interface RenderSSROptions {
     stream: StreamWriter;
 }
 
+// @internal (undocumented)
+export const _resolveContextWithoutSequentialScope: <STATE>(context: ContextId<STATE>) => STATE | undefined;
+
 // @public
 export const Resource: <T>(props: ResourceProps<T>) => JSXOutput;
 
@@ -1691,11 +1694,6 @@ export const useErrorBoundary: () => ErrorBoundaryStore;
 // @public (undocumented)
 export const useId: () => string;
 
-// Warning: (ae-forgotten-export) The symbol "RenderInvokeContext" needs to be exported by the entry point index.d.ts
-//
-// @internal (undocumented)
-export const _useInvokeContext: () => RenderInvokeContext;
-
 // Warning: (ae-internal-missing-underscore) The name "useLexicalScope" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal

packages/qwik/src/core/use/use-context.ts

@@ -3,7 +3,7 @@ import { QError, qError } from '../shared/error/error';
 import { verifySerializable } from '../shared/utils/serialize-utils';
 import { qDev, qSerialize } from '../shared/utils/qdev';
 import { isObject } from '../shared/utils/types';
-import { invoke } from './use-core';
+import { getInvokeContext, invoke } from './use-core';
 import { useSequentialScope } from './use-sequential-scope';
 import { fromCamelToKebabCase } from '../shared/utils/event-names';
 
@@ -284,3 +284,13 @@ export const validateContext = (context: ContextId<any>) => {
     throw qError(QError.invalidContext, [context]);
   }
 };
+
+/** @internal */
+export const _resolveContextWithoutSequentialScope = <STATE>(context: ContextId<STATE>) => {
+  const iCtx = getInvokeContext();
+  const hostElement = iCtx.$hostElement$;
+  if (!hostElement) {
+    return undefined;
+  }
+  return iCtx.$container$?.resolveContext(hostElement, context);
+};