Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Run next/link codemod for Next.js 13 on examples #41913

Merged
merged 2 commits into from
Oct 30, 2022
Merged

Run next/link codemod for Next.js 13 on examples #41913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbeb0bb
Run link codemod on examples
timneutkens Oct 26, 2022
23dc8e9
Run prettier
timneutkens Oct 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/active-class-name/components/ActiveLink.tsx
View file
Open in desktop
Expand Up @@ -52,7 +52,7 @@ const ActiveLink = ({
])

return (
<Link {...props}>
<Link {...props} legacyBehavior>
{React.cloneElement(child, {
className: className || null,
})}
Expand Down
4 changes: 1 addition & 3 deletions examples/analyze-bundles/pages/index.tsx
View file
Open in desktop
Expand Up @@ -12,9 +12,7 @@ const Index: NextPage<IndexProps> = ({ name }) => {
<h1>Home Page</h1>
<p>Welcome, {name}</p>
<div>
<Link href="/about">
<a>About Page</a>
</Link>
<Link href="/about">About Page</Link>
</div>
</div>
)
Expand Down
6 changes: 1 addition & 5 deletions examples/api-routes-apollo-server-and-client-auth/pages/about.js
View file
Open in desktop
Expand Up @@ -3,11 +3,7 @@ import Link from 'next/link'
export default function About() {
return (
<div>
Welcome to the about page. Go to the{' '}
<Link href="/">
<a>Home</a>
</Link>{' '}
page.
Welcome to the about page. Go to the <Link href="/">Home</Link> page.
</div>
)
}
10 changes: 2 additions & 8 deletions examples/api-routes-apollo-server-and-client-auth/pages/index.js
View file
Open in desktop
Expand Up @@ -32,14 +32,8 @@ const Index = () => {
if (viewer) {
return (
<div>
You're signed in as {viewer.email} goto{' '}
<Link href="/about">
<a>about</a>
</Link>{' '}
page. or{' '}
<Link href="/signout">
<a>signout</a>
</Link>
You're signed in as {viewer.email} goto <Link href="/about">about</Link>{' '}
page. or <Link href="/signout">signout</Link>
</div>
)
}
Expand Down
4 changes: 1 addition & 3 deletions examples/api-routes-apollo-server-and-client-auth/pages/signin.js
View file
Open in desktop
Expand Up @@ -65,9 +65,7 @@ function SignIn() {
label="Password"
/>
<button type="submit">Sign in</button> or{' '}
<Link href="/signup">
<a>Sign up</a>
</Link>
<Link href="/signup">Sign up</Link>
</form>
</>
)
Expand Down
4 changes: 1 addition & 3 deletions examples/api-routes-apollo-server-and-client-auth/pages/signup.js
View file
Open in desktop
Expand Up @@ -60,9 +60,7 @@ function SignUp() {
label="Password"
/>
<button type="submit">Sign up</button> or{' '}
<Link href="/signin">
<a>Sign in</a>
</Link>
<Link href="/signin">Sign in</Link>
</form>
</>
)
Expand Down
6 changes: 1 addition & 5 deletions examples/api-routes-apollo-server-and-client/pages/about.js
View file
Open in desktop
Expand Up @@ -3,11 +3,7 @@ import Link from 'next/link'
export default function About() {
return (
<div>
This is a static page goto{' '}
<Link href="/">
<a>dynamic</a>
</Link>{' '}
page.
This is a static page goto <Link href="/">dynamic</Link> page.
</div>
)
}
5 changes: 1 addition & 4 deletions examples/api-routes-apollo-server-and-client/pages/index.js
View file
Open in desktop
Expand Up @@ -21,10 +21,7 @@ const Index = () => {
return (
<div>
You're signed in as {viewer.name} and you're {viewer.status} goto{' '}
<Link href="/about">
<a>static</a>
</Link>{' '}
page.
<Link href="/about">static</Link> page.
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion examples/api-routes-apollo-server/pages/index.js
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ export default function UserListing({ users }) {
{users.map((user) => (
<li key={user.username}>
<Link href="/[username]" as={`/${user.username}`}>
<a>{user.name}</a>
{user.name}
</Link>
</li>
))}
Expand Down
2 changes: 1 addition & 1 deletion examples/api-routes-rest/pages/index.tsx
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ export default function Index() {
<ul>
{data.map((user) => (
<li key={user.id}>
<Link href="/user/[id]" as={`/user/${user.id}`}>
<Link href="/user/[id]" as={`/user/${user.id}`} legacyBehavior>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this one need to be legacy? Looks like the child is already correct

{`User ${user.id}`}
</Link>
</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/api-routes/components/Person.tsx
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ export default function PersonComponent({ person }: PersonProps) {
return (
<li>
<Link href="/person/[id]" as={`/person/${person.id}`}>
<a>{person.name}</a>
{person.name}
</Link>
</li>
)
Expand Down
10 changes: 5 additions & 5 deletions examples/auth0/components/header.tsx
View file
Open in desktop
Expand Up @@ -11,30 +11,30 @@ const Header = ({ user, loading }: HeaderProps) => {
<nav>
<ul>
<li>
<Link href="/">
<Link href="/" legacyBehavior>
<a>Home</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a bug: i would expect this anchor to be removed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @styfle!

I was just taking a look around this PR and decided to check this out. The transform not removing the anchor tags in this file and instead adding the legacyBehavior prop is intentional. This is because of the presence of a <style> tag with a jsx attribute in this component which makes removing the anchor tag a bit risky in case the anchor tag has some CSS applied to it inside the <style> tag. See screenshot below and refer to this commit by Tim.

Screen Shot 2022-10-29 at 11 35 53 PM

Do you think it would be wise to log a simple warning message in this case? So that anyone running the codemod is alerted about any file(s) that might be treated like this because of the presence of <style jsx>? I can submit a PR with the warning message added. Thanks!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we know why a style tag would affect the link? Seems like emitted HTML should be the same since “Link” becomes “a” with the new behavior.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is probably because of scope limitations, i.e. the <style jsx> affects any tags inside the same parent component's scope, but not tags that are returned from React components inside that same parent component.

See this example in the styled-jsx docs for a better explanation:

Screen Shot 2022-10-30 at 5 17 03 PM

I suppose this is why the decision was taken to just add the legacyBehavior prop if a <style jsx> tag is found in a file. Users who might have directly styled the anchor tag inside the <style jsx> tag will see those styles disappear in the UI if we don't go the legacyBehavior way.

</Link>
</li>
<li>
<Link href="/about">
<Link href="/about" legacyBehavior>
<a>About</a>
</Link>
</li>
<li>
<Link href="/advanced/api-profile">
<Link href="/advanced/api-profile" legacyBehavior>
<a>API rendered profile (advanced)</a>
</Link>
</li>
{!loading &&
(user ? (
<>
<li>
<Link href="/profile">
<Link href="/profile" legacyBehavior>
<a>Client rendered profile</a>
</Link>
</li>
<li>
<Link href="/advanced/ssr-profile">
<Link href="/advanced/ssr-profile" legacyBehavior>
<a>Server rendered profile (advanced)</a>
</Link>
</li>
Expand Down
5 changes: 1 addition & 4 deletions examples/basic-export/pages/index.tsx
View file
Open in desktop
Expand Up @@ -3,10 +3,7 @@ import Link from 'next/link'
const Home = () => {
return (
<div>
Hello World.{' '}
<Link href="/about">
<a>About</a>
</Link>
Hello World. <Link href="/about">About</Link>
</div>
)
}
Expand Down
4 changes: 2 additions & 2 deletions examples/blog-starter/components/cover-image.tsx
View file
Open in desktop
Expand Up @@ -20,8 +20,8 @@ const CoverImage = ({ title, src, slug }: Props) => {
return (
<div className="sm:mx-0">
{slug ? (
<Link as={`/posts/${slug}`} href="/posts/[slug]">
<a aria-label={title}>{image}</a>
<Link as={`/posts/${slug}`} href="/posts/[slug]" aria-label={title}>
{image}
</Link>
) : (
image
Expand Down
4 changes: 2 additions & 2 deletions examples/blog-starter/components/header.tsx
View file
Open in desktop
Expand Up @@ -3,8 +3,8 @@ import Link from 'next/link'
const Header = () => {
return (
<h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
<Link href="/">
<a className="hover:underline">Blog</a>
<Link href="/" className="hover:underline">
Blog
</Link>
.
</h2>
Expand Down
8 changes: 6 additions & 2 deletions examples/blog-starter/components/hero-post.tsx
View file
Open in desktop
Expand Up @@ -29,8 +29,12 @@ const HeroPost = ({
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-5xl leading-tight">
<Link as={`/posts/${slug}`} href="/posts/[slug]">
<a className="hover:underline">{title}</a>
<Link
as={`/posts/${slug}`}
href="/posts/[slug]"
className="hover:underline"
>
{title}
</Link>
</h3>
<div className="mb-4 md:mb-0 text-lg">
Expand Down
8 changes: 6 additions & 2 deletions examples/blog-starter/components/post-preview.tsx
View file
Open in desktop
Expand Up @@ -27,8 +27,12 @@ const PostPreview = ({
<CoverImage slug={slug} title={title} src={coverImage} />
</div>
<h3 className="text-3xl mb-3 leading-snug">
<Link as={`/posts/${slug}`} href="/posts/[slug]">
<a className="hover:underline">{title}</a>
<Link
as={`/posts/${slug}`}
href="/posts/[slug]"
className="hover:underline"
>
{title}
</Link>
</h3>
<div className="text-lg mb-4">
Expand Down
8 changes: 6 additions & 2 deletions examples/blog-with-comment/pages/posts/index.tsx
View file
Open in desktop
Expand Up @@ -12,8 +12,12 @@ export default function NotePage({
{allPosts.length ? (
allPosts.map((post) => (
<article key={post.slug} className="mb-10">
<Link as={`/posts/${post.slug}`} href="/posts/[slug]">
<a className="text-lg leading-6 font-bold">{post.title}</a>
<Link
as={`/posts/${post.slug}`}
href="/posts/[slug]"
className="text-lg leading-6 font-bold"
>
{post.title}
</Link>
<p>{post.excerpt}</p>
<div className="text-gray-400">
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-agilitycms/components/cover-image.tsx
View file
Open in desktop
Expand Up @@ -16,8 +16,8 @@ export default function CoverImage({ title, responsiveImage, slug = null }) {
return (
<div className="sm:mx-0">
{slug ? (
<Link href={`/posts/${slug}`}>
<a aria-label={title}>{image}</a>
<Link href={`/posts/${slug}`} aria-label={title}>
{image}
</Link>
) : (
image
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-agilitycms/components/header.tsx
View file
Open in desktop
Expand Up @@ -3,8 +3,8 @@ import Link from 'next/link'
export default function Header() {
return (
<h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
<Link href="/">
<a className="hover:underline">Blog</a>
<Link href="/" className="hover:underline">
Blog
</Link>
.
</h2>
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-agilitycms/components/hero-post.tsx
View file
Open in desktop
Expand Up @@ -23,8 +23,8 @@ export default function HeroPost({
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
<a className="hover:underline">{title}</a>
<Link href={`/posts/${slug}`} className="hover:underline">
{title}
</Link>
</h3>
<div className="mb-4 md:mb-0 text-lg">
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-agilitycms/components/post-preview.tsx
View file
Open in desktop
Expand Up @@ -21,8 +21,8 @@ export default function PostPreview({
/>
</div>
<h3 className="text-3xl mb-3 leading-snug">
<Link href={`/posts/${slug}`}>
<a className="hover:underline">{title}</a>
<Link href={`/posts/${slug}`} className="hover:underline">
{title}
</Link>
</h3>
<div className="text-lg mb-4">
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-builder-io/components/cover-image.js
View file
Open in desktop
Expand Up @@ -18,8 +18,8 @@ export default function CoverImage({ title, url, slug }) {
return (
<div className="sm:mx-0">
{slug ? (
<Link href={`/posts/${slug}`}>
<a aria-label={title}>{image}</a>
<Link href={`/posts/${slug}`} aria-label={title}>
{image}
</Link>
) : (
image
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-builder-io/components/header.js
View file
Open in desktop
Expand Up @@ -3,8 +3,8 @@ import Link from 'next/link'
export default function Header() {
return (
<h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
<Link href="/">
<a className="hover:underline">Blog</a>
<Link href="/" className="hover:underline">
Blog
</Link>
.
</h2>
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-builder-io/components/hero-post.js
View file
Open in desktop
Expand Up @@ -19,8 +19,8 @@ export default function HeroPost({
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
<a className="hover:underline">{title}</a>
<Link href={`/posts/${slug}`} className="hover:underline">
{title}
</Link>
</h3>
<div className="mb-4 md:mb-0 text-lg">
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-builder-io/components/post-preview.js
View file
Open in desktop
Expand Up @@ -17,8 +17,8 @@ export default function PostPreview({
<CoverImage title={title} slug={slug} url={coverImage} />
</div>
<h3 className="text-3xl mb-3 leading-snug">
<Link href={`/posts/${slug}`}>
<a className="hover:underline">{title}</a>
<Link href={`/posts/${slug}`} className="hover:underline">
{title}
</Link>
</h3>
<div className="text-lg mb-4">
Expand Down
4 changes: 2 additions & 2 deletions examples/cms-buttercms/components/blog/blog.js
View file
Open in desktop
Expand Up @@ -15,8 +15,8 @@ export default function Blog({ posts }) {
simple to launch a new company blog.
</p>
<p>
<Link href={`/blog`}>
<a className="main-btn btn-hover mt-5">View All Blog Posts</a>
<Link href={`/blog`} className="main-btn btn-hover mt-5">
View All Blog Posts
</Link>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-buttercms/components/blog/categories-widget.js
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@ export default function CategoriesWidget({ categories }) {
{categories.map((category) => (
<li key={category.slug}>
<Link href={`/blog/category/${category.slug}`}>
<a>{category.name}</a>
{category.name}
</Link>
</li>
))}
Expand Down
8 changes: 3 additions & 5 deletions examples/cms-buttercms/components/blog/post-preview-condensed.js
View file
Open in desktop
Expand Up @@ -23,15 +23,13 @@ export default function PostPreviewCondensed({
)}
<div className="blog-body">
<h5 className="package-name">
<Link href={`/blog/${slug}`}>
<a>{title}</a>
</Link>
<Link href={`/blog/${slug}`}>{title}</Link>
</h5>
<p>{excerpt}</p>
</div>
<div className="blog-footer">
<Link href={`/blog/${slug}`}>
<a className="main-btn btn-hover">Read More</a>
<Link href={`/blog/${slug}`} className="main-btn btn-hover">
Read More
</Link>
</div>
</div>
Expand Down
12 changes: 4 additions & 8 deletions examples/cms-buttercms/components/blog/post-preview.js
View file
Open in desktop
Expand Up @@ -19,9 +19,7 @@ export default function PostsPreview({
<div className="blog-roll-card">
<div className="blog-roll-card-meta">
<h2 className="blog-roll-card-header">
<Link href={`/blog/${slug}`}>
<a>{title}</a>
</Link>
<Link href={`/blog/${slug}`}>{title}</Link>
</h2>
<ul className="blog-roll-card-meta-info">
<li>
Expand All @@ -34,9 +32,7 @@ export default function PostsPreview({
{tags.map((tag) => (
<li key={tag.slug}>
<Link href={`/blog/tag/${tag.slug}`}>
<a>
<i className="lni lni-tag"></i> {tag.name}
</a>
<i className="lni lni-tag"></i> {tag.name}
</Link>
</li>
))}
Expand All @@ -57,8 +53,8 @@ export default function PostsPreview({
dangerouslySetInnerHTML={{ __html: excerpt }}
></div>
<div className="blog-roll-card-footer text-center">
<Link href={`/blog/${slug}`}>
<a className="main-btn btn-hover">Read More</a>
<Link href={`/blog/${slug}`} className="main-btn btn-hover">
Read More
</Link>
</div>
</div>
Expand Down