Add stitches and material-ui tests for new link behavior + fix TypeScript types when imported

packages/next/client/link.tsx

@@ -30,18 +30,21 @@ type InternalLinkProps = {
   prefetch?: boolean
   locale?: string | false
   legacyBehavior?: boolean
+  // e: any because as it would otherwise overlap with existing types
   /**
    * requires experimental.newNextLinkBehavior
    */
-  onMouseEnter?: (e: React.MouseEvent) => void
+  onMouseEnter?: (e: any) => void
+  // e: any because as it would otherwise overlap with existing types
   /**
    * requires experimental.newNextLinkBehavior
    */
-  onClick?: (e: React.MouseEvent) => void
+  onClick?: (e: any) => void
 }
 
-export type LinkProps = InternalLinkProps &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
+// TODO: Include the full set of Anchor props
+// adding this to the publicly exported type currently breaks existing apps
+export type LinkProps = InternalLinkProps
 type LinkPropsRequired = RequiredKeys<LinkProps>
 type LinkPropsOptional = OptionalKeys<InternalLinkProps>
 
@@ -116,7 +119,12 @@ function linkClicked(
   })
 }
 
-function Link(props: React.PropsWithChildren<LinkProps>) {
+function Link(
+  props: React.PropsWithChildren<
+    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> &
+      LinkProps
+  >
+) {
   const {
     legacyBehavior = Boolean(process.env.__NEXT_NEW_LINK_BEHAVIOR) !== true,
   } = props

test/e2e/new-link-behavior/index.test.ts

@@ -18,7 +18,7 @@ async function matchLogs(browser, includes: string) {
   return found
 }
 
-const appDir = path.join(__dirname, './app')
+const appDir = path.join(__dirname, 'app')
 
 describe('New Link Behavior', () => {
   let next: NextInstance

test/e2e/new-link-behavior/material-ui.test.ts

@@ -0,0 +1,46 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'material-ui')
+
+describe('New Link Behavior with material-ui', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(path.join(appDir, 'pages')),
+        src: new FileRef(path.join(appDir, 'src')),
+        'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+      },
+      dependencies: {
+        '@emotion/cache': 'latest',
+        '@emotion/react': 'latest',
+        '@emotion/server': 'latest',
+        '@emotion/styled': 'latest',
+        '@mui/icons-material': 'latest',
+        '@mui/material': 'latest',
+        next: 'latest',
+        'prop-types': 'latest',
+        react: 'latest',
+        'react-dom': 'latest',
+        eslint: 'latest',
+        'eslint-config-next': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should render MuiLink with <a>', async () => {
+    const browser = await webdriver(next.url, `/`)
+    const element = await browser.elementByCss('a[href="/about"]')
+
+    const color = await element.getComputedCss('color')
+    expect(color).toBe('rgb(25, 133, 123)')
+
+    const text = await element.text()
+    expect(text).toBe('Go to the about page')
+  })
+})

test/e2e/new-link-behavior/material-ui/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    newNextLinkBehavior: true,
+  },
+}

test/e2e/new-link-behavior/material-ui/pages/_app.js

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Head from 'next/head'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { CacheProvider } from '@emotion/react'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache()
+
+export default function MyApp(props) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
+
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </CacheProvider>
+  )
+}

test/e2e/new-link-behavior/material-ui/pages/_document.js

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import createEmotionServer from '@emotion/server/create-instance'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="shortcut icon" href="/static/favicon.ico" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          {this.props.emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+MyDocument.getInitialProps = async (ctx) => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  const originalRenderPage = ctx.renderPage
+
+  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = createEmotionCache()
+  const { extractCriticalToChunks } = createEmotionServer(cache)
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />
+        },
+    })
+
+  const initialProps = await Document.getInitialProps(ctx)
+  // This is important. It prevents emotion to render invalid HTML.
+  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html)
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ))
+
+  return {
+    ...initialProps,
+    emotionStyleTags,
+  }
+}

test/e2e/new-link-behavior/material-ui/pages/about.js

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import ProTip from '../src/ProTip'
+import Link from '../src/Link'
+import Copyright from '../src/Copyright'
+
+export default function About() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Button variant="contained" component={Link} noLinkStyle href="/">
+          Go to the main page
+        </Button>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}

test/e2e/new-link-behavior/material-ui/pages/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import ProTip from '../src/ProTip'
+import Link from '../src/Link'
+import Copyright from '../src/Copyright'
+
+export default function Index() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Link href="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}

test/e2e/new-link-behavior/material-ui/src/Copyright.js

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import Typography from '@mui/material/Typography'
+import MuiLink from '@mui/material/Link'
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  )
+}

test/e2e/new-link-behavior/material-ui/src/Link.js

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import NextLink from 'next/link'
+import MuiLink from '@mui/material/Link'
+import { styled } from '@mui/material/styles'
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled(NextLink)({})
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(
+  props,
+  ref
+) {
+  const { children, ...rest } = props
+  return (
+    <Anchor href="/" ref={ref} {...rest}>
+      {children}
+    </Anchor>
+  )
+})
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const Link = React.forwardRef(function Link(props, ref) {
+  return <MuiLink component={NextLinkComposed} ref={ref} {...props} />
+})
+
+export default Link

test/e2e/new-link-behavior/material-ui/src/ProTip.js

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Link from '@mui/material/Link'
+import SvgIcon from '@mui/material/SvgIcon'
+import Typography from '@mui/material/Typography'
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  )
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      Pro tip: See more{' '}
+      <Link href="https://mui.com/getting-started/templates/">
+        templates
+      </Link>{' '}
+      on the MUI documentation.
+    </Typography>
+  )
+}

test/e2e/new-link-behavior/material-ui/src/createEmotionCache.js

@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache'
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true })
+}

test/e2e/new-link-behavior/material-ui/src/theme.js

@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles'
+import { red } from '@mui/material/colors'
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+})
+
+export default theme