fix: hydrate App Router link with locales

makeswift · Mar 12, 2024 · b953798 · b953798
1 parent 056aac1
commit b953798
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git a/.changeset/sweet-monkeys-reply.md b/.changeset/sweet-monkeys-reply.md
@@ -0,0 +1,5 @@
+---
+'@makeswift/runtime': patch
+---
+
+Button component and Link control now hydrate page links with the locale, if present. Brings automatic link localization to App Router, while still supporting Pages Router.
diff --git a/packages/runtime/src/api/resource-types.ts b/packages/runtime/src/api/resource-types.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+
+const pagePathnameSliceSchema = z.object({
+  id: z.string(),
+  pathname: z.string(),
+  localizedPathname: z.string().optional().nullable(),
+  __typename: z.literal('PagePathnameSlice'),
+})
+
+export type PagePathnameSlice = z.infer<typeof pagePathnameSliceSchema>
diff --git a/packages/runtime/src/components/shared/Link/index.tsx b/packages/runtime/src/components/shared/Link/index.tsx
@@ -19,6 +19,8 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
 ) {
   const pageId = link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null
   const page = usePagePathnameSlice(pageId ?? null)
+  const hasLocalizedPathname = page?.localizedPathname != null
+
   const elementKey =
     link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null
   const elementId = useElementId(elementKey)
@@ -36,7 +38,7 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
         if (page) {
           useNextLink = true
 
-          href = `/${page.pathname}`
+          href = `/${page.localizedPathname ?? page.pathname}`
         }
 
         target = link.payload.openInNewTab ? '_blank' : '_self'
@@ -130,6 +132,9 @@ export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
         target={target}
         onClick={handleClick}
         href={href}
+        {...(hasLocalizedPathname && {
+          locale: false,
+        })}
         // Next.js v12 has legacyBehavior set to true by default
         legacyBehavior={false}
       />

diff --git a/packages/runtime/src/next/client.ts b/packages/runtime/src/next/client.ts
@@ -128,6 +128,7 @@ const pagePathnameSlicesAPISchema = z.array(
       id: z.string(),
       basePageId: z.string(),
       pathname: z.string(),
+      localizedPathname: z.string().optional(),
       __typename: z.literal('PagePathnameSlice'),
     })
     .nullable(),
@@ -609,9 +610,9 @@ export class Makeswift {
       if (pagePathnameSlice == null) return null
 
       return {
+        ...pagePathnameSlice,
         id: pagePathnameSlice.basePageId,
-        pathname: pagePathnameSlice.pathname,
-        __typename: pagePathnameSlice.__typename,
+        localizedPathname: pagePathnameSlice.localizedPathname ?? null,
       }
     })
   }

diff --git a/packages/runtime/src/runtimes/react/controls/link.ts b/packages/runtime/src/runtimes/react/controls/link.ts
@@ -19,6 +19,7 @@ export function useLinkControlValue<T extends LinkControlDefinition>(
 ): LinkControlValue<T> {
   const pageId = link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null
   const page = usePagePathnameSlice(pageId ?? null)
+
   const elementKey =
     link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null
   const elementId = useElementId(elementKey)
@@ -30,7 +31,7 @@ export function useLinkControlValue<T extends LinkControlDefinition>(
   if (link) {
     switch (link.type) {
       case 'OPEN_PAGE': {
-        if (page) href = `/${page.pathname}`
+        if (page) href = `/${page.localizedPathname ?? page.pathname}`
 
         target = link.payload.openInNewTab ? '_blank' : '_self'
 

diff --git a/packages/runtime/src/runtimes/react/hooks/makeswift-api.ts b/packages/runtime/src/runtimes/react/hooks/makeswift-api.ts
@@ -6,11 +6,11 @@ import {
   File,
   GlobalElement,
   LocalizedGlobalElement,
-  PagePathnameSlice,
   Swatch,
   Table,
   Typography,
 } from '../../../api'
+import { PagePathnameSlice } from '../../../api/resource-types'
 import { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'
 
 export function useSwatch(swatchId: string | null): Swatch | null {