♻️ Migration to app router, Upgrade to Next 15/React 19 (#450)

* ✅ Added Playwright behavior tests to image api endpoints Screenshot all 4 GET image api endpoints with complex config per viewport type (Chrome and Mobile Chrome) in preparation for migration. Also updated TailwindCSS config from .js to .ts. * 🎨 Strongly typed preview card and card theme wrapper, separeted exports. * ♻️ Full (verified) api migration from page to app router. * 🎨 (Header) Moved GitHub corner styling to global.css, removed styled-jsx dep. * ♻️ Full front+backend migration from page router to app router. Followed nextjs official docs and best practices, backed by Playwright behavior regression test passing. Upated unit tests to reflect the new framework. * 📝 Added changeset reflecting page to app router migration. * ⬆️ Upgraded successfully to Next15/React19 with minor fixes. Upgraded using the official NextJS codemod. No file modded by the codemod. Updated types and deps. Fully compatible with exising behavior tests, all passed. * ✅ Added component update timeout to prevent flaky tests. * 🎨 Polished code based on comments and added server-only dep Regressively tested all the requested changes, and determined safe to keep them. Added server-only prod dep to explicitly limit code involving GITHUB_TOKEN to only run server-side. * ⬆️ Upgraded depedencies to latest patch/minor verisons w/out breakage. * 📝 Updated favicon, web app icons, and manifest per nextjs standard. * ✅ Updated user story playwright test and snapshots Replaced next <Head> with html <head> in preview to resolve font not updating issue. Updated Playwright user story regressing test and snapshot to cover this weak point. Updated select wrapper component to be more accessible and compatible with Playwright. Not sure why config panel width changed after editing component, thus had to update one UI snapshot as well. Further polished pnpm scripts to better match actual flag name, i.e. pnpm test:e2e:update-snapshots to match playwright test --update-snapshots (with an 's') * 🐛 Fix preview font, update linting and snapshots --------- Co-authored-by: Wei He <[email protected]> Co-authored-by: Wei He <[email protected]>
wei · Dec 19, 2024 · d73c1be · d73c1be
1 parent 811ccd2
commit d73c1be
Show file tree

Hide file tree

Showing 80 changed files with 1,230 additions and 778 deletions.
diff --git a/.changeset/sour-beds-tap.md b/.changeset/sour-beds-tap.md
@@ -0,0 +1,7 @@
+---
+"socialify": minor
+---
+
+Full migration from page router to app router.
+
+Upgraded to nextjs15/react19 via official codemod and applied type fixes.
diff --git a/.playwright/imageAPIEndpoints.spec.ts b/.playwright/imageAPIEndpoints.spec.ts
@@ -0,0 +1,63 @@
+import { type Page, expect, test } from '@playwright/test'
+
+const customTimeout = { timeout: 30000 }
+
+const defaultImageURL: string =
+  '/wei/socialify/image?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+const svgImageURL: string =
+  '/wei/socialify/svg?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+const pngImageURL: string =
+  '/wei/socialify/png?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+// Backward compatibility route.
+const jpgImageURL: string =
+  '/wei/socialify/jpg?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Diagonal%20Stripes&theme=Dark'
+
+test.describe('Socialify image api', () => {
+  test('respond consistently for default endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(defaultImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for svg endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(svgImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for png endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(pngImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('respond consistently for backwards-compatible jpg endpoint', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(jpgImageURL, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+})
diff --git a/...nd-consistently-for-backwards-compatible-jpg-endpoint-1-Mobile-Chrome-linux.png b/...nd-consistently-for-backwards-compatible-jpg-endpoint-1-Mobile-Chrome-linux.png
diff --git a/...respond-consistently-for-backwards-compatible-jpg-endpoint-1-chromium-linux.png b/...respond-consistently-for-backwards-compatible-jpg-endpoint-1-chromium-linux.png
diff --git a/...y-image-api-respond-consistently-for-default-endpoint-1-Mobile-Chrome-linux.png b/...y-image-api-respond-consistently-for-default-endpoint-1-Mobile-Chrome-linux.png
diff --git a/...ialify-image-api-respond-consistently-for-default-endpoint-1-chromium-linux.png b/...ialify-image-api-respond-consistently-for-default-endpoint-1-chromium-linux.png
diff --git a/...alify-image-api-respond-consistently-for-png-endpoint-1-Mobile-Chrome-linux.png b/...alify-image-api-respond-consistently-for-png-endpoint-1-Mobile-Chrome-linux.png
diff --git a/.../Socialify-image-api-respond-consistently-for-png-endpoint-1-chromium-linux.png b/.../Socialify-image-api-respond-consistently-for-png-endpoint-1-chromium-linux.png
diff --git a/...alify-image-api-respond-consistently-for-svg-endpoint-1-Mobile-Chrome-linux.png b/...alify-image-api-respond-consistently-for-svg-endpoint-1-Mobile-Chrome-linux.png
diff --git a/.../Socialify-image-api-respond-consistently-for-svg-endpoint-1-chromium-linux.png b/.../Socialify-image-api-respond-consistently-for-svg-endpoint-1-chromium-linux.png
diff --git a/...ts/Socialify-UI-is-consistent-for-preview-config-page-1-Mobile-Chrome-linux.png b/...ts/Socialify-UI-is-consistent-for-preview-config-page-1-Mobile-Chrome-linux.png
diff --git a/...apshots/Socialify-UI-is-consistent-for-preview-config-page-1-chromium-linux.png b/...apshots/Socialify-UI-is-consistent-for-preview-config-page-1-chromium-linux.png
diff --git a/...ts/Socialify-UI-is-consistent-for-preview-config-page-2-Mobile-Chrome-linux.png b/...ts/Socialify-UI-is-consistent-for-preview-config-page-2-Mobile-Chrome-linux.png
diff --git a/...apshots/Socialify-UI-is-consistent-for-preview-config-page-2-chromium-linux.png b/...apshots/Socialify-UI-is-consistent-for-preview-config-page-2-chromium-linux.png
diff --git a/...ows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png b/...ows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png
diff --git a/.playwright/simpleUserStory.spec.ts b/.playwright/simpleUserStory.spec.ts
@@ -1,13 +1,14 @@
 import { type Page, expect, test } from '@playwright/test'
 
 const customTimeout = { timeout: 30000 }
+const componentUpdateTimeout = 1000
 
 // Testing constants.
 const repo: string = 'wei/socialify'
 const expectedConfigURL: string =
   '/wei/socialify?language=1&owner=1&name=1&stargazers=1&theme=Light'
 const expectedImageURLRegExp: RegExp =
-  /\/wei\/socialify\/image\?description=1&language=1&name=1&owner=1&theme=Light$/
+  /\/wei\/socialify\/image\?description=1&font=Source\+Code\+Pro&language=1&name=1&owner=1&theme=Light$/
 
 async function getClipboardText(page: Page): Promise<string> {
   return await page.evaluate(async () => {
@@ -28,6 +29,7 @@ test.describe('A simple user story:', () => {
   }: { page: Page }): Promise<void> => {
     // Input and submit the repo following accessibility best practices.
     await page.fill('input[name="repo-input"]', repo)
+    await page.waitForTimeout(componentUpdateTimeout)
     await page.click('button[type="submit"]')
 
     // Wait for navigation to the preview config page.
@@ -38,7 +40,12 @@ test.describe('A simple user story:', () => {
     await expect(page).toHaveURL(expectedConfigURL)
 
     await page.click('input[name="stargazers"]')
+    await page.waitForTimeout(componentUpdateTimeout)
     await page.click('input[name="description"]')
+    await page.waitForTimeout(componentUpdateTimeout)
+    // Select the "Source Code Pro" option for max diff from default.
+    await page.selectOption('select[name="font"]', { label: 'Source Code Pro' })
+    await page.waitForTimeout(componentUpdateTimeout)
 
     // Obtain the consistent preview image URL.
     await page.click('button:has-text("URL")')

diff --git a/...ub-r-50b6f-click-URL-and-get-the-social-preview-image-1-Mobile-Chrome-linux.png b/...ub-r-50b6f-click-URL-and-get-the-social-preview-image-1-Mobile-Chrome-linux.png
diff --git a/...-GitHub-r-50b6f-click-URL-and-get-the-social-preview-image-1-chromium-linux.png b/...-GitHub-r-50b6f-click-URL-and-get-the-social-preview-image-1-chromium-linux.png
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Wei He
+Copyright (c) 2024 Wei He <https://wei.mit-license.org>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/app/[_owner]/[_name]/page.tsx b/app/[_owner]/[_name]/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { JSX } from 'react'
+
+import MainRenderer from '@/src/components/mainRenderer'
+
+export default function PreviewConfigPage(): JSX.Element {
+  return <MainRenderer />
+}
diff --git a/pages/api/font.ts → app/api/font/route.ts b/pages/api/font.ts → app/api/font/route.ts
@@ -4,9 +4,7 @@ import type { NextRequest } from 'next/server'
 
 import { FontDetector, languageFontMap } from '@/common/font'
 
-export const config = {
-  runtime: 'edge',
-}
+export const runtime = 'edge'
 
 const detector = new FontDetector()
 
@@ -37,7 +35,8 @@ function encodeFontInfoAsArrayBuffer(code: string, fontData: ArrayBuffer) {
   return buffer
 }
 
-export default async function loadGoogleFont(req: NextRequest) {
+// export default async function loadGoogleFont(req: NextRequest) {
+export async function GET(req: NextRequest) {
   if (req.nextUrl.pathname !== '/api/font') return
 
   const { searchParams } = new URL(req.url)

diff --git a/pages/api/graphql.ts → app/api/graphql/route.ts b/pages/api/graphql.ts → app/api/graphql/route.ts
@@ -1,25 +1,21 @@
+import 'server-only'
 import type { NextRequest } from 'next/server'
 
-const API_ENDPOINT: string = 'https://api.github.com/graphql'
+import { GITHUB_GRAPHQL_ENDPOINT } from '@/common/constants'
 
-const graphQLEndpoint = async (req: NextRequest) => {
-  if (req.method !== 'POST') {
-    return new Response('Method Not Allowed', {
-      status: 405,
-      headers: {
-        'cache-control': 'max-age=0, public',
-      },
-    })
-  }
+export const runtime = 'edge'
 
-  const response = await fetch(API_ENDPOINT, {
+export async function POST(req: NextRequest) {
+  const response = await fetch(GITHUB_GRAPHQL_ENDPOINT, {
     method: 'POST',
     headers: {
       Accept: 'application/json',
       Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
       'content-type': 'application/json',
     },
     body: req.body,
+    // @ts-expect-error: 'duplex' is not part of the RequestInit type but required by GraphQL.
+    duplex: 'half',
   })
 
   if (!response.ok) {
@@ -41,9 +37,3 @@ const graphQLEndpoint = async (req: NextRequest) => {
     },
   })
 }
-
-export const config = {
-  runtime: 'edge',
-}
-
-export default graphQLEndpoint
diff --git a/app/api/image/route.ts b/app/api/image/route.ts
@@ -0,0 +1,15 @@
+import { isBot } from 'next/dist/server/web/spec-extension/user-agent'
+import type { NextRequest, NextResponse } from 'next/server'
+
+import { GET as GETPng } from '@/app/api/png/route'
+import { GET as GETSvg } from '@/app/api/svg/route'
+
+export const runtime = 'edge'
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  if (isBot(req.headers.get('user-agent') ?? '')) {
+    return GETPng(req)
+  } else {
+    return GETSvg(req)
+  }
+}
diff --git a/pages/api/png.ts → app/api/png/route.ts b/pages/api/png.ts → app/api/png/route.ts
@@ -1,14 +1,16 @@
-import type { NextRequest } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 
 import renderCardPNG from '@/common/renderPNG'
 import type QueryType from '@/common/types/queryType'
 
-const pngEndpoint = async (req: NextRequest) => {
+export const runtime = 'edge'
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
   const { searchParams } = new URL(req.url)
   const query = Object.fromEntries(searchParams) as QueryType
 
   try {
-    return new Response(await renderCardPNG(query), {
+    return new NextResponse(await renderCardPNG(query), {
       status: 200,
       headers: {
         'content-type': 'image/png',
@@ -27,7 +29,7 @@ const pngEndpoint = async (req: NextRequest) => {
     }
     console.error(errorJSON)
 
-    return new Response(JSON.stringify(errorJSON), {
+    return new NextResponse(JSON.stringify(errorJSON), {
       status: 400,
       headers: {
         'content-type': 'application/json',
@@ -36,9 +38,3 @@ const pngEndpoint = async (req: NextRequest) => {
     })
   }
 }
-
-export const config = {
-  runtime: 'edge',
-}
-
-export default pngEndpoint
diff --git a/pages/api/stats.svg.ts → app/api/stats.svg/route.ts b/pages/api/stats.svg.ts → app/api/stats.svg/route.ts
@@ -1,13 +1,15 @@
 import { badgen } from 'badgen'
-import type { NextRequest } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 
-import statsEndpoint from '@/pages/api/stats'
+import { GET as GETStats } from '@/app/api/stats/route'
 
-const statsSvgEndpoint = async (req: NextRequest) => {
+export const runtime = 'edge'
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
   let totalCount = 0
 
   try {
-    const apiResponse = await (await statsEndpoint(req)).json()
+    const apiResponse = await (await GETStats(req)).json()
     if (apiResponse.total_count) {
       totalCount = apiResponse.total_count
     }
@@ -33,7 +35,7 @@ const statsSvgEndpoint = async (req: NextRequest) => {
         style: 'flat',
       })
 
-  return new Response(svg, {
+  return new NextResponse(svg, {
     status: 200,
     headers: {
       'content-type': 'image/svg+xml',
@@ -43,9 +45,3 @@ const statsSvgEndpoint = async (req: NextRequest) => {
     },
   })
 }
-
-export const config = {
-  runtime: 'edge',
-}
-
-export default statsSvgEndpoint
diff --git a/pages/api/stats.ts → app/api/stats/route.ts b/pages/api/stats.ts → app/api/stats/route.ts
@@ -1,22 +1,26 @@
-import type { NextRequest } from 'next/server'
+import 'server-only'
+import { GITHUB_API_ENDPOINT } from '@/common/constants'
+import { type NextRequest, NextResponse } from 'next/server'
 
-const statsEndpoint = async (_req: NextRequest) => {
+export const runtime = 'edge'
+
+export async function GET(_req: NextRequest): Promise<NextResponse> {
   const response = await fetch(
-    `https://api.github.com/search/code?per_page=1&q=${encodeURIComponent(
+    `${GITHUB_API_ENDPOINT}/search/code?per_page=1&q=${encodeURIComponent(
       'socialify.git.ci'
     )}`,
     {
       method: 'GET',
       headers: {
-        Accept: 'application/vnd.github.v3+json',
-        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
+        accept: 'application/vnd.github.v3+json',
+        authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
         'content-type': 'application/json',
       },
     }
   )
 
   if (!response.ok) {
-    return new Response(await response.text(), {
+    return new NextResponse(await response.text(), {
       status: response.status,
       headers: {
         'cache-control': 'public, max-age=0',
@@ -25,7 +29,7 @@ const statsEndpoint = async (_req: NextRequest) => {
   }
 
   const json = await response.json()
-  return new Response(JSON.stringify({ total_count: json.total_count }), {
+  return new NextResponse(JSON.stringify({ total_count: json.total_count }), {
     status: 200,
     headers: {
       'content-type': 'application/json',
@@ -35,9 +39,3 @@ const statsEndpoint = async (_req: NextRequest) => {
     },
   })
 }
-
-export const config = {
-  runtime: 'edge',
-}
-
-export default statsEndpoint
diff --git a/pages/api/svg.ts → app/api/svg/route.ts b/pages/api/svg.ts → app/api/svg/route.ts
@@ -1,16 +1,18 @@
-import type { NextRequest } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 
 import renderCardSVG from '@/common/renderSVG'
 import type QueryType from '@/common/types/queryType'
 
-const svgEndpoint = async (req: NextRequest) => {
+export const runtime = 'edge'
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
   const { searchParams } = new URL(req.url)
   const query = Object.fromEntries(searchParams) as QueryType
 
   try {
     const svg = await renderCardSVG(query)
 
-    return new Response(svg, {
+    return new NextResponse(svg, {
       status: 200,
       headers: {
         'content-type': 'image/svg+xml',
@@ -29,7 +31,7 @@ const svgEndpoint = async (req: NextRequest) => {
     }
     console.error(errorJSON)
 
-    return new Response(JSON.stringify(errorJSON), {
+    return new NextResponse(JSON.stringify(errorJSON), {
       status: 400,
       headers: {
         'content-type': 'application/json',
@@ -38,9 +40,3 @@ const svgEndpoint = async (req: NextRequest) => {
     })
   }
 }
-
-export const config = {
-  runtime: 'edge',
-}
-
-export default svgEndpoint
diff --git a/public/assets/logo192.png → app/apple-icon.png b/public/assets/logo192.png → app/apple-icon.png
diff --git a/public/favicon.ico → app/favicon.ico b/public/favicon.ico → app/favicon.ico