feat: use manifest hash instead of instance hash

Author: Varixo

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

@@ -13,14 +13,14 @@ import {
 } from '@qwik.dev/core';
 import { preloadRouteBundles } from './client-navigate';
 import { loadClientData } from './use-endpoint';
-import { useInstanceHash, useLocation, useNavigate } from './use-functions';
+import { useManifestHash, useLocation, useNavigate } from './use-functions';
 import { getClientNavPath, shouldPreload } from './utils';
 
 /** @public */
 export const Link = component$<LinkProps>((props) => {
   const nav = useNavigate();
   const loc = useLocation();
-  const instanceHash = useInstanceHash();
+  const manifestHash = useManifestHash();
   const originalHref = props.href;
   const anchorRef = useSignal<HTMLAnchorElement>();
   const {
@@ -54,8 +54,8 @@ export const Link = component$<LinkProps>((props) => {
           const url = new URL(elm.href);
           preloadRouteBundles(url.pathname);
 
-          if (elm.hasAttribute('data-prefetch') && instanceHash) {
-            loadClientData(url, instanceHash, {
+          if (elm.hasAttribute('data-prefetch') && manifestHash) {
+            loadClientData(url, manifestHash, {
               preloadRouteBundles: false,
               isPrefetch: true,
             });

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

@@ -71,7 +71,7 @@ import type {
   ScrollState,
 } from './types';
 import { loadClientData } from './use-endpoint';
-import { useInstanceHash, useQwikRouterEnv } from './use-functions';
+import { useManifestHash, useQwikRouterEnv } from './use-functions';
 import { createLoaderSignal, isSameOrigin, isSamePath, toUrl } from './utils';
 import { startViewTransition } from './view-transition';
 
@@ -134,7 +134,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
     throw new Error(`Missing Qwik URL Env Data`);
   }
   const serverHead = useServerData<DocumentHeadValue>('documentHead');
-  const instanceHash = useInstanceHash();
+  const manifestHash = useManifestHash();
 
   if (isServer) {
     if (
@@ -181,7 +181,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
       key,
       url,
       getSerializationStrategy(key),
-      instanceHash!,
+      manifestHash!,
       container
     );
   }
@@ -355,8 +355,8 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
     routeInternal.value = { type, dest, forceReload, replaceState, scroll };
 
     if (isBrowser) {
-      if (instanceHash) {
-        loadClientData(dest, instanceHash);
+      if (manifestHash) {
+        loadClientData(dest, manifestHash);
       }
       loadRoute(
         qwikRouterConfig.routes,
@@ -421,8 +421,8 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
         );
         elm = _getContextElement();
         const pageData =
-          instanceHash &&
-          (clientPageData = await loadClientData(trackUrl, instanceHash, {
+          manifestHash &&
+          (clientPageData = await loadClientData(trackUrl, manifestHash, {
             action,
             clearCache: true,
           }));
@@ -547,7 +547,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
                   key,
                   trackUrl,
                   DEFAULT_LOADERS_SERIALIZATION_STRATEGY,
-                  instanceHash!,
+                  manifestHash!,
                   container
                 );
               } else {

packages/qwik-router/src/runtime/src/use-endpoint.ts

@@ -8,14 +8,14 @@ interface LoaderDataResponse {
   route: string;
 }
 
-export const loadClientLoaderData = async (url: URL, loaderId: string, instanceHash: string) => {
+export const loadClientLoaderData = async (url: URL, loaderId: string, manifestHash: string) => {
   const pagePathname = url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
-  return fetchLoader(loaderId, pagePathname, instanceHash);
+  return fetchLoader(loaderId, pagePathname, manifestHash);
 };
 
 export const loadClientData = async (
   url: URL,
-  instanceHash: string,
+  manifestHash: string,
   opts?: {
     action?: RouteActionValue;
     loaderIds?: string[];
@@ -33,7 +33,7 @@ export const loadClientData = async (
   if (!opts?.loaderIds) {
     // we need to load all the loaders
     // first we need to get the loader urls
-    loaderData = (await fetchLoaderData(pagePathname, instanceHash)).loaderData;
+    loaderData = (await fetchLoaderData(pagePathname, manifestHash)).loaderData;
   } else {
     loaderData = opts.loaderIds.map((loaderId) => {
       return {
@@ -47,7 +47,7 @@ export const loadClientData = async (
   if (loaderData.length > 0) {
     // load specific loaders
     const loaderPromises = loaderData.map((loader) =>
-      fetchLoader(loader.id, loader.route, instanceHash)
+      fetchLoader(loader.id, loader.route, manifestHash)
     );
     const loaderResults = await Promise.all(loaderPromises);
     for (let i = 0; i < loaderData.length; i++) {
@@ -116,19 +116,19 @@ export const loadClientData = async (
 
 export async function fetchLoaderData(
   routePath: string,
-  instanceHash: string
+  manifestHash: string
 ): Promise<{ loaderData: LoaderDataResponse[] }> {
-  const url = `${routePath}q-loader-data.${instanceHash}.json`;
+  const url = `${routePath}q-loader-data.${manifestHash}.json`;
   const response = await fetch(url);
   return response.json();
 }
 
 export async function fetchLoader(
   loaderId: string,
   routePath: string,
-  instanceHash: string
+  manifestHash: string
 ): Promise<unknown> {
-  const url = `${routePath}q-loader-${loaderId}.${instanceHash}.json`;
+  const url = `${routePath}q-loader-${loaderId}.${manifestHash}.json`;
 
   const response = await fetch(url);
   if (!response.ok) {

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

@@ -96,8 +96,8 @@ export const useAction = (): RouteAction => useContext(RouteActionContext);
 
 export const useQwikRouterEnv = () => noSerialize(useServerData<QwikRouterEnvData>('qwikrouter'));
 
-export const useInstanceHash = () =>
-  useServerData<Record<string, string>>('containerAttributes')?.['q:instance'];
+export const useManifestHash = () =>
+  useServerData<Record<string, string>>('containerAttributes')?.['q:manifest-hash'];
 
 /** @deprecated Use `useQwikRouterEnv` instead. Will be removed in v3 */
 export const useQwikCityEnv = useQwikRouterEnv;

packages/qwik-router/src/runtime/src/utils.ts

@@ -93,13 +93,13 @@ export const createLoaderSignal = (
   loaderId: string,
   url: URL,
   serializationStrategy: SerializationStrategy,
-  instanceHash: string,
+  manifestHash: string,
   container?: ClientContainer
 ) => {
   return createAsyncComputed$(
     async () => {
       if (isBrowser && loadersObject[loaderId] === _UNINITIALIZED) {
-        const data = await loadClientLoaderData(url, loaderId, instanceHash);
+        const data = await loadClientLoaderData(url, loaderId, manifestHash);
         loadersObject[loaderId] = data ?? _UNINITIALIZED;
       }
       return loadersObject[loaderId];