[gh11385] Updated the generated page template

.changesets/11533.md

@@ -0,0 +1,3 @@
+- [gh11385] Updated the generated page template (#11533) by @ahaywood
+
+This change alters the default content produced when you generate page with `yarn rw g page`. Previously our generated content contained code that would error out if you had a route parameter in your page - because the link we automatically generated would not contain a value for that parameter.

__fixtures__/rsc-caching/web/src/pages/CachingOnePage/CachingOnePage.tsx

@@ -12,10 +12,10 @@ const CachingOnePage = () => {
         Find me in{' '}
         <code>./web/src/pages/CachingOnePage/CachingOnePage.tsx</code>
       </p>
-      <p>
+      {/*
         My default route is named <code>cachingOne</code>, link to me with `
         <Link to={routes.cachingOne()}>CachingOne</Link>`
-      </p>
+      */}
     </>
   )
 }

__fixtures__/rsc-caching/web/src/pages/CachingTwoPage/CachingTwoPage.tsx

@@ -12,10 +12,10 @@ const CachingTwoPage = () => {
         Find me in{' '}
         <code>./web/src/pages/CachingTwoPage/CachingTwoPage.tsx</code>
       </p>
-      <p>
+      {/*
         My default route is named <code>cachingTwo</code>, link to me with `
         <Link to={routes.cachingTwo()}>CachingTwo</Link>`
-      </p>
+      */}
     </>
   )
 }

__fixtures__/test-project-rsc-kitchen-sink/web/src/pages/BlogPage/BlogPage.tsx

@@ -11,10 +11,10 @@ const BlogPage = () => {
       <p>
         Find me in <code>./web/src/pages/BlogPage/BlogPage.tsx</code>
       </p>
-      <p>
+      {/*}
         My default route is named <code>blog</code>, link to me with `
         <Link to={routes.blog()}>Blog</Link>`
-      </p>
+      */}
     </>
   )
 }

docs/docs/cli-commands.md

@@ -954,11 +954,11 @@ const QuotePage = ({ id }) => {
     <>
       <h1>QuotePage</h1>
       <p>Find me in "./web/src/pages/QuotePage/QuotePage.js"</p>
-      <p>
+      {/*
         My default route is named "quote", link to me with `
         <Link to={routes.quote({ id: 42 })}>Quote 42</Link>`
-      </p>
-      <p>The parameter passed to me is {id}</p>
+        The parameter passed to me is {id}
+      */}
     </>
   )
 }

docs/docs/tutorial/chapter2/routing-params.md

@@ -213,10 +213,10 @@ You may have noticed that when trying to view the new single-article page that y
         <p>
           Find me in <code>./web/src/pages/ArticlePage/ArticlePage.js</code>
         </p>
-        <p>
+        {/*
           My default route is named <code>article</code>, link to me with `
--         <Link to={routes.article()}>Article</Link>`
-        </p>
+          <Link to={routes.article()}>Article</Link>`
+        */}
       </>
     )
   }
@@ -240,10 +240,10 @@ You may have noticed that when trying to view the new single-article page that y
         <p>
           Find me in <code>./web/src/pages/ArticlePage/ArticlePage.tsx</code>
         </p>
-        <p>
+        {/*
           My default route is named <code>article</code>, link to me with `
--         <Link to={routes.article()}>Article</Link>`
-        </p>
+          <Link to={routes.article()}>Article</Link>`
+        */}
       </>
     )
   }

packages/cli/src/commands/generate/__tests__/helpers.test.js

@@ -10,29 +10,6 @@ import '../../../lib/test'
 import * as helpers from '../helpers'
 import * as page from '../page/page'
 
-const PAGE_TEMPLATE_OUTPUT = `import { Link, routes } from '@redwoodjs/router'
-import { Metadata } from '@redwoodjs/web'
-
-const FooBarPage = () => {
-  return (
-    <>
-      <Metadata title="FooBar" description="FooBar page" />
-
-      <h1>FooBarPage</h1>
-      <p>
-        Find me in <code>./web/src/pages/FooBarPage/FooBarPage.js</code>
-      </p>
-      <p>
-        My default route is named <code>fooBar</code>, link to me with \`
-        <Link to={routes.fooBar()}>FooBar</Link>\`
-      </p>
-    </>
-  )
-}
-
-export default FooBarPage
-`
-
 test('customOrDefaultTemplatePath returns the default path if no custom templates exist', () => {
   const output = helpers.customOrDefaultTemplatePath({
     side: 'web',
@@ -268,7 +245,30 @@ test('templateForComponentFile creates a template', async () => {
     },
   })
 
-  expect(output[1]).toEqual(PAGE_TEMPLATE_OUTPUT)
+  expect(output[1]).toMatchInlineSnapshot(`
+    "// import { Link, routes } from '@redwoodjs/router'
+    import { Metadata } from '@redwoodjs/web'
+
+    const FooBarPage = () => {
+      return (
+        <>
+          <Metadata title="FooBar" description="FooBar page" />
+
+          <h1>FooBarPage</h1>
+          <p>
+            Find me in <code>./web/src/pages/FooBarPage/FooBarPage.js</code>
+          </p>
+          {/*
+              My default route is named \`fooBar\`, link to me with:
+              \`<Link to={routes.fooBar()}>FooBar</Link>\`
+          */}
+        </>
+      )
+    }
+
+    export default FooBarPage
+    "
+  `)
 })
 
 test('pathName uses passed path if present', () => {

packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Plural word files > creates a page component with a plural word for name 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const CatsPage = () => {
@@ -13,10 +13,10 @@ const CatsPage = () => {
       <p>
         Find me in <code>./web/src/pages/CatsPage/CatsPage.jsx</code>
       </p>
-      <p>
-        My default route is named <code>cats</code>, link to me with \`
-        <Link to={routes.cats()}>Cats</Link>\`
-      </p>
+      {/*
+           My default route is named \`cats\`, link to me with:
+           \`<Link to={routes.cats()}>Cats</Link>\`
+        */}
     </>
   )
 }
@@ -26,7 +26,7 @@ export default CatsPage
 `;
 
 exports[`Single world files > creates a page component 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const HomePage = () => {
@@ -38,10 +38,10 @@ const HomePage = () => {
       <p>
         Find me in <code>./web/src/pages/HomePage/HomePage.jsx</code>
       </p>
-      <p>
-        My default route is named <code>home</code>, link to me with \`
-        <Link to={routes.home()}>Home</Link>\`
-      </p>
+      {/*
+           My default route is named \`home\`, link to me with:
+           \`<Link to={routes.home()}>Home</Link>\`
+        */}
     </>
   )
 }
@@ -82,7 +82,7 @@ describe('HomePage', () => {
 `;
 
 exports[`TS Files > TS Params 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 type TsParamFilesPageProps = {
@@ -100,10 +100,12 @@ const TsParamFilesPage = ({ id }: TsParamFilesPageProps) => {
         <code>./web/src/pages/TSParamFilesPage/TSParamFilesPage.tsx</code>
       </p>
       <p>
-        My default route is named <code>tsParamFiles</code>, link to me with \`
-        <Link to={routes.tsParamFiles({ id: '42' })}>TsParamFiles 42</Link>\`
+        The parameter passed to me is <code>{id}</code>
       </p>
-      <p>The parameter passed to me is {id}</p>
+      {/*
+          My default route is named \`tsParamFiles\`, link to me with:
+          \`<Link to={routes.tsParamFiles({ id: '42' })}>TsParamFiles 42</Link>\`
+      */}
     </>
   )
 }
@@ -113,7 +115,7 @@ export default TsParamFilesPage
 `;
 
 exports[`TS Files > TS Params with type 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 type TsParamTypeFilesPageProps = {
@@ -133,14 +135,12 @@ const TsParamTypeFilesPage = ({ id }: TsParamTypeFilesPageProps) => {
         </code>
       </p>
       <p>
-        My default route is named <code>tsParamTypeFiles</code>, link to me with
-        \`
-        <Link to={routes.tsParamTypeFiles({ id: 42 })}>
-          TsParamTypeFiles 42
-        </Link>
-        \`
+        The parameter passed to me is <code>{id}</code>
       </p>
-      <p>The parameter passed to me is {id}</p>
+      {/*
+          My default route is named \`tsParamTypeFiles\`, link to me with:
+          \`<Link to={routes.tsParamTypeFiles({ id: 42 })}>TsParamTypeFiles 42</Link>\`
+      */}
     </>
   )
 }
@@ -150,7 +150,7 @@ export default TsParamTypeFilesPage
 `;
 
 exports[`TS Files > generates typescript pages 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const TsFilesPage = () => {
@@ -162,10 +162,10 @@ const TsFilesPage = () => {
       <p>
         Find me in <code>./web/src/pages/TSFilesPage/TSFilesPage.tsx</code>
       </p>
-      <p>
-        My default route is named <code>tsFiles</code>, link to me with \`
-        <Link to={routes.tsFiles()}>TsFiles</Link>\`
-      </p>
+      {/*
+          My default route is named \`tsFiles\`, link to me with:
+          \`<Link to={routes.tsFiles()}>TsFiles</Link>\`
+      */}
     </>
   )
 }
@@ -248,7 +248,7 @@ describe('HomePage', () => {
 
 exports[`handler > file generation 3`] = `
 {
-  "fileContent": "import { Link, routes } from '@redwoodjs/router'
+  "fileContent": "// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const HomePage = () => {
@@ -260,10 +260,10 @@ const HomePage = () => {
       <p>
         Find me in <code>./web/src/pages/HomePage/HomePage.jsx</code>
       </p>
-      <p>
-        My default route is named <code>home</code>, link to me with \`
-        <Link to={routes.home()}>Home</Link>\`
-      </p>
+      {/*
+           My default route is named \`home\`, link to me with:
+           \`<Link to={routes.home()}>Home</Link>\`
+        */}
     </>
   )
 }
@@ -332,7 +332,7 @@ describe('PostPage', () => {
 
 exports[`handler > file generation with route params 3`] = `
 {
-  "fileContent": "import { Link, routes } from '@redwoodjs/router'
+  "fileContent": "// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const PostPage = ({ id }) => {
@@ -345,10 +345,12 @@ const PostPage = ({ id }) => {
         Find me in <code>./web/src/pages/PostPage/PostPage.jsx</code>
       </p>
       <p>
-        My default route is named <code>post</code>, link to me with \`
-        <Link to={routes.post({ id: '42' })}>Post 42</Link>\`
+        The parameter passed to me is <code>{id}</code>
       </p>
-      <p>The parameter passed to me is {id}</p>
+      {/*
+           My default route is named \`post\`, link to me with:
+           \`<Link to={routes.post({ id: '42' })}>Post 42</Link>\`
+        */}
     </>
   )
 }
@@ -379,7 +381,7 @@ export default Routes",
 `;
 
 exports[`multiWorldFiles > creates a page component 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const ContactUsPage = () => {
@@ -391,10 +393,10 @@ const ContactUsPage = () => {
       <p>
         Find me in <code>./web/src/pages/ContactUsPage/ContactUsPage.jsx</code>
       </p>
-      <p>
-        My default route is named <code>contactUs</code>, link to me with \`
-        <Link to={routes.contactUs()}>ContactUs</Link>\`
-      </p>
+      {/*
+           My default route is named \`contactUs\`, link to me with:
+           \`<Link to={routes.contactUs()}>ContactUs</Link>\`
+        */}
     </>
   )
 }
@@ -435,7 +437,7 @@ describe('ContactUsPage', () => {
 `;
 
 exports[`paramFiles > creates a page component with params 1`] = `
-"import { Link, routes } from '@redwoodjs/router'
+"// import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 const PostPage = ({ id }) => {
@@ -448,10 +450,12 @@ const PostPage = ({ id }) => {
         Find me in <code>./web/src/pages/PostPage/PostPage.jsx</code>
       </p>
       <p>
-        My default route is named <code>post</code>, link to me with \`
-        <Link to={routes.post({ id: '42' })}>Post 42</Link>\`
+        The parameter passed to me is <code>{id}</code>
       </p>
-      <p>The parameter passed to me is {id}</p>
+      {/*
+           My default route is named \`post\`, link to me with:
+           \`<Link to={routes.post({ id: '42' })}>Post 42</Link>\`
+        */}
     </>
   )
 }