chore: upgrade to waku 0.21.17

.pnpmfile.cjs

@@ -1,13 +1,9 @@
 function readPackage(pkg) {
   const versions = {
-    react: '19.0.0-rc-7771d3a7-20240827',
-    'react-dom': '19.0.0-rc-7771d3a7-20240827',
-    '@types/react': '18.3.3',
-    '@types/react-dom': '18.3.0',
-    'react-server-dom-webpack': '19.0.0-rc-7771d3a7-20240827',
+    react: '19.0.0',
+    'react-dom': '19.0.0',
     typescript: '5.4.5',
     graphql: '16.8.1',
-    waku: '0.21.1',
     sharp: '0.33.1',
     'vite-imagetools': '6.2.9',
   };

apps/cms/src/index.ts

@@ -1,10 +1,17 @@
 import type { AnyOperationId, OperationVariables } from '@custom/schema';
 
+const cache: Record<string, any> = {};
+
 export function createDrupalExecutor(host: string, frontendUrl: string) {
   return async function <OperationId extends AnyOperationId>(
     id: OperationId,
     variables?: OperationVariables<OperationId>,
   ) {
+    const key = `${id}:${JSON.stringify(variables)}`;
+    if (cache[key]) {
+      return cache[key];
+    }
+
     const url = new URL(`${host}/graphql`);
     const isMutation = id.includes('Mutation:');
     const publicUrl =
@@ -53,6 +60,9 @@ export function createDrupalExecutor(host: string, frontendUrl: string) {
           throw new Error('GraphQL error: ' + JSON.stringify(errors));
         }
       }
+      if (!isMutation) {
+        cache[key] = data;
+      }
       return data;
     } catch (error) {
       console.error('Fetch error:', error);

apps/preview/src/App.tsx

@@ -2,6 +2,7 @@ import { createDrupalExecutor } from '@custom/cms';
 import { OperationExecutorsProvider } from '@custom/schema';
 import { Frame } from '@custom/ui/routes/Frame';
 import { Preview, usePreviewRefresh } from '@custom/ui/routes/Preview';
+import { Providers } from '@custom/ui/routes/Providers';
 import { useEffect } from 'react';
 import { retry } from 'rxjs';
 import { webSocket } from 'rxjs/webSocket';
@@ -29,20 +30,22 @@ function App() {
     return sub.unsubscribe;
   }, [refresh]);
   return (
-    <OperationExecutorsProvider
-      executors={[
-        {
-          executor: createDrupalExecutor(
-            window.DRUPAL_URL,
-            window.location.pathname,
-          ),
-        },
-      ]}
-    >
-      <Frame>
-        <Preview />
-      </Frame>
-    </OperationExecutorsProvider>
+    <Providers>
+      <OperationExecutorsProvider
+        executors={[
+          {
+            executor: createDrupalExecutor(
+              window.DRUPAL_URL,
+              window.location.pathname,
+            ),
+          },
+        ]}
+      >
+        <Frame>
+          <Preview />
+        </Frame>
+      </OperationExecutorsProvider>
+    </Providers>
   );
 }
 

apps/website/netlify/functions/strangler.ts

@@ -14,17 +14,17 @@ function encodeRSCUrl(inputUrl: string) {
 
 function decodeRSCUrl(inputUrl: string) {
   const url = new URL(inputUrl, 'http://localhost');
-  url.pathname = url.pathname.replace(/^\/RSC/, '').replace(/\.txt$/, '');
+  url.pathname = url.pathname.replace(/^\/RSC\/R/, '').replace(/\.txt$/, '');
   return url;
 }
 
-const notFoundRSC = fs.readFileSync('dist/public/RSC/404.txt').toString();
+const notFoundRSC = fs.readFileSync('dist/public/RSC/R/404.txt').toString();
 
 export const handler = createStrangler(
   [
     {
       url: drupalUrl,
-      applies: (url) => url.pathname.startsWith('/RSC/'),
+      applies: (url) => url.pathname.startsWith('/RSC/R/'),
       preprocess: (event) => {
         // Before handling, turn the RSC url into the corresponding Drupal url.
         event.rawUrl = decodeRSCUrl(event.rawUrl).toString();

apps/website/package.json

@@ -16,14 +16,14 @@
     "@custom/ui": "workspace:*",
     "image-dimensions": "^2.3.0",
     "netlify-cli": "^17.29.0",
-    "react": "19.0.0-rc.0",
-    "react-dom": "19.0.0-rc.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-error-boundary": "^4.0.13",
-    "react-server-dom-webpack": "19.0.0-rc.0",
+    "react-server-dom-webpack": "19.0.0",
     "sharp": "^0.33.4",
     "start-server-and-test": "^2.0.3",
     "tsx": "^4.7.1",
-    "waku": "0.21.0-alpha.2"
+    "waku": "0.21.17"
   },
   "devDependencies": {
     "@custom/eslint-config": "workspace:*",

apps/website/src/bridge.tsx

@@ -6,5 +6,11 @@ import { Link as WakuLink, useRouter_UNSTABLE } from 'waku';
 
 export { LocationProvider } from '@amazeelabs/bridge-waku';
 
-export const useLocation = createUseLocationHook(useRouter_UNSTABLE);
+export const useLocation = () => {
+  const [loc, navigate] = createUseLocationHook(useRouter_UNSTABLE)();
+  if (Array.isArray(loc.pathname)) {
+    loc.pathname = `/${loc.pathname.join('/')}`;
+  }
+  return [loc, navigate];
+};
 export const Link = createLinkComponent(WakuLink);

apps/website/src/build/redirects.ts

@@ -140,7 +140,7 @@ function writeRedirectsNetlify(config: RedirectsOutputConfig) {
       redirectEntry += '!';
     }
     if ([301, 302].includes(value.statusCode)) {
-      redirectEntry += `\n/RSC${value.source}.txt /RSC${value.destination}.txt ${value.statusCode}`;
+      redirectEntry += `\n/RSC/R${value.source}.txt /RSC/R${value.destination}.txt ${value.statusCode}`;
     }
 
     fs.appendFileSync(`${config.outputFile}`, redirectEntry);

apps/website/src/entries.tsx

@@ -16,10 +16,10 @@ import { HomePage } from '@custom/ui/routes/HomePage';
 import { Inquiry } from '@custom/ui/routes/Inquiry';
 import { NotFoundPage } from '@custom/ui/routes/NotFoundPage';
 import { Page } from '@custom/ui/routes/Page';
-import React from 'react';
+import { Providers } from '@custom/ui/routes/Providers';
+import React, { PropsWithChildren } from 'react';
 import { createPages } from 'waku';
 
-import { BrokenLinkHandler } from './broken-link-handler.js';
 import { ClientExecutors } from './executors-client.js';
 import { ServerExecutors, serverExecutors } from './executors-server.js';
 import { query } from './query.js';
@@ -36,58 +36,44 @@ async function queryAll<TOperation extends AnyOperationId>(
   );
 }
 
-export default createPages(async ({ createPage, createLayout }) => {
-  createLayout({
-    render: 'static',
-    path: '/',
-    component: ({ children, path }) => (
-      <BrokenLinkHandler>
-        <LocationProvider
-          currentLocation={{
-            pathname: path,
-            searchParams: new URLSearchParams(),
-            search: '',
-            hash: '',
-          }}
-        >
-          <ServerExecutors>
-            <ClientExecutors>
-              <Frame alterSrc={(src) => src.replace(frontendUrl, drupalUrl)}>
-                {children}
-              </Frame>
-            </ClientExecutors>
-          </ServerExecutors>
-        </LocationProvider>
-      </BrokenLinkHandler>
-    ),
-  });
-
-  Object.values(Locale).forEach((lang) => {
-    createPage({
-      render: 'static',
-      path: `/${lang}`,
-      component: () => <HomePage />,
-    });
-
-    createPage({
-      render: 'static',
-      path: `/${lang}/content-hub`,
-      component: () => <ContentHub pageSize={6} />,
-    });
-
-    createPage({
-      render: 'static',
-      path: `/${lang}/inquiry`,
-      component: () => <Inquiry />,
-    });
-  });
+function Layout({ children }: PropsWithChildren) {
+  return (
+    <ServerExecutors>
+      <ClientExecutors>
+        <Providers alterSrc={(src) => src.replace(frontendUrl, drupalUrl)}>
+          {children}
+        </Providers>
+      </ClientExecutors>
+    </ServerExecutors>
+  );
+}
 
-  createPage({
-    render: 'static',
-    path: '/404',
-    component: () => <NotFoundPage />,
-  });
+function withPageWrapper(Component: React.FC) {
+  return function PageWrapper({ path }: { path: string }) {
+    return (
+      <LocationProvider
+        currentLocation={{
+          pathname: path,
+          searchParams: new URLSearchParams(),
+          search: '',
+          hash: '',
+        }}
+      >
+        <ServerExecutors>
+          <ClientExecutors>
+            <Providers alterSrc={(src) => src.replace(frontendUrl, drupalUrl)}>
+              <Frame>
+                <Component />
+              </Frame>
+            </Providers>
+          </ClientExecutors>
+        </ServerExecutors>
+      </LocationProvider>
+    );
+  };
+}
 
+export default createPages(async ({ createPage, createLayout }) => {
   // Initialise a map for the homepages, since we want to exclude them from
   // creating a page for their internal path.
   const homePages = await query(HomePageQuery, {});
@@ -119,10 +105,46 @@ export default createPages(async ({ createPage, createLayout }) => {
     });
   }
 
-  createPage({
-    render: 'static',
-    path: '/[...path]',
-    staticPaths: [...pagePaths].map((path) => path.substring(1).split('/')),
-    component: Page,
-  });
+  return [
+    createLayout({
+      render: 'static',
+      path: '/',
+      component: Layout,
+    }),
+
+    ...Object.values(Locale)
+      .map((lang) => [
+        createPage({
+          render: 'static',
+          path: `/${lang}`,
+          component: withPageWrapper(HomePage),
+        }),
+
+        createPage({
+          render: 'static',
+          path: `/${lang}/content-hub`,
+          component: withPageWrapper(() => <ContentHub pageSize={6} />),
+        }),
+
+        createPage({
+          render: 'static',
+          path: `/${lang}/inquiry`,
+          component: withPageWrapper(Inquiry),
+        }),
+      ])
+      .reduce((acc, val) => [...acc, ...val]),
+
+    createPage({
+      render: 'static',
+      path: '/404',
+      component: withPageWrapper(NotFoundPage),
+    }),
+
+    createPage({
+      render: 'static',
+      path: '/[...path]',
+      staticPaths: [...pagePaths].map((path) => path.substring(1).split('/')),
+      component: withPageWrapper(Page),
+    }),
+  ];
 });

packages/schema/package.json

@@ -59,7 +59,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@amazeelabs/executors": "^3.1.0",
+    "@amazeelabs/executors": "^3.1.14",
     "@amazeelabs/gatsby-silverback-cloudinary": "^1.2.7",
     "@amazeelabs/gatsby-source-silverback": "^1.14.0",
     "@amazeelabs/scalars": "^1.6.13",

packages/ui/src/components/Molecules/PageTransition.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Locale } from '@custom/schema';
+import { Locale, useLocation } from '@custom/schema';
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import React, { PropsWithChildren, ReactNode, useEffect } from 'react';
 
@@ -24,6 +24,7 @@ export function PageTransition({ children }: PropsWithChildren) {
   const [messageComponents, setMessageComponents] = React.useState<
     Array<ReactNode>
   >([]);
+  const [location] = useLocation();
   useEffect(() => {
     // Standard messages.
     setMessages(readMessages());
@@ -32,7 +33,7 @@ export function PageTransition({ children }: PropsWithChildren) {
     if (languageMessage) {
       setMessageComponents([languageMessage]);
     }
-  }, []);
+  }, [location.pathname, location.search]);
 
   return useReducedMotion() ? (
     <main id="main-content">