RSC: Make rw g page work for RSC projects (#10903)

packages/cli/src/commands/destroy/page/__tests__/page.test.js

@@ -12,7 +12,47 @@ import fs from 'fs-extra'
 import { vol } from 'memfs'
 import { vi, beforeEach, afterEach, test, expect } from 'vitest'
 
-import '../../../../lib/test'
+import '../../../../lib/mockTelemetry'
+
+vi.mock('@redwoodjs/project-config', async (importOriginal) => {
+  const path = require('path')
+  const originalProjectConfig = await importOriginal()
+  return {
+    getPaths: () => {
+      const BASE_PATH = '/path/to/project'
+
+      return {
+        base: BASE_PATH,
+        web: {
+          generators: path.join(BASE_PATH, './web/generators'),
+          routes: path.join(BASE_PATH, 'web/src/Routes.js'),
+          pages: path.join(BASE_PATH, '/web/src/pages'),
+        },
+      }
+    },
+    getConfig: () => ({}),
+    findUp: originalProjectConfig.findUp,
+    ensurePosixPath: originalProjectConfig.ensurePosixPath,
+    resolveFile: originalProjectConfig.resolveFile,
+  }
+})
+
+vi.mock('@redwoodjs/cli-helpers', async (importOriginal) => {
+  const originalCliHelpers = await importOriginal()
+
+  return {
+    ...originalCliHelpers,
+    isTypeScriptProject: () => false,
+  }
+})
+
+vi.mock('@redwoodjs/internal/dist/generate/generate', () => {
+  return {
+    generate: () => {
+      return { errors: [] }
+    },
+  }
+})
 
 import { getPaths } from '../../../../lib'
 import { files } from '../../../generate/page/page'

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

@@ -89,7 +89,10 @@ test('templateForComponentFile creates a proper output path for files', async ()
       webPathSection: 'pages',
       generator: 'page',
       templatePath: 'page.tsx.template',
-      templateVars: page.paramVariants(helpers.pathName(undefined, name)),
+      templateVars: {
+        ...page.paramVariants(helpers.pathName(undefined, name)),
+        rscEnabled: false,
+      },
     })
 
     expect(output[0]).toEqual(
@@ -108,7 +111,10 @@ test('templateForComponentFile creates a proper output path for files with all c
       webPathSection: 'pages',
       generator: 'page',
       templatePath: 'page.tsx.template',
-      templateVars: page.paramVariants(helpers.pathName(undefined, name)),
+      templateVars: {
+        ...page.paramVariants(helpers.pathName(undefined, name)),
+        rscEnabled: false,
+      },
     })
 
     expect(output[0]).toEqual(
@@ -127,7 +133,10 @@ test('templateForComponentFile creates a proper output path for files for starti
       webPathSection: 'pages',
       generator: 'page',
       templatePath: 'page.tsx.template',
-      templateVars: page.paramVariants(helpers.pathName(undefined, name)),
+      templateVars: {
+        ...page.paramVariants(helpers.pathName(undefined, name)),
+        rscEnabled: false,
+      },
     })
 
     expect(output[0]).toEqual(
@@ -146,7 +155,10 @@ test('templateForComponentFile creates a proper output path for files with upper
       webPathSection: 'pages',
       generator: 'page',
       templatePath: 'page.tsx.template',
-      templateVars: page.paramVariants(helpers.pathName(undefined, name)),
+      templateVars: {
+        ...page.paramVariants(helpers.pathName(undefined, name)),
+        rscEnabled: false,
+      },
     })
 
     expect(output[0]).toEqual(
@@ -162,7 +174,10 @@ test('templateForComponentFile can create a path in /web', async () => {
     webPathSection: 'pages',
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: page.paramVariants(helpers.pathName(undefined, 'Home')),
+    templateVars: {
+      ...page.paramVariants(helpers.pathName(undefined, 'Home')),
+      rscEnabled: false,
+    },
   })
 
   expect(output[0]).toEqual(
@@ -177,7 +192,10 @@ test('templateForComponentFile can create a path in /api', async () => {
     apiPathSection: 'services',
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: page.paramVariants(helpers.pathName(undefined, 'Home')),
+    templateVars: {
+      ...page.paramVariants(helpers.pathName(undefined, 'Home')),
+      rscEnabled: false,
+    },
   })
 
   expect(output[0]).toEqual(
@@ -192,7 +210,10 @@ test('templateForComponentFile can override generated component name', async ()
     webPathSection: 'pages',
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: page.paramVariants(helpers.pathName(undefined, 'Home')),
+    templateVars: {
+      ...page.paramVariants(helpers.pathName(undefined, 'Home')),
+      rscEnabled: false,
+    },
   })
 
   expect(output[0]).toEqual(
@@ -208,7 +229,10 @@ test('templateForComponentFile can override file extension', async () => {
     webPathSection: 'pages',
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: page.paramVariants(helpers.pathName(undefined, 'Home')),
+    templateVars: {
+      ...page.paramVariants(helpers.pathName(undefined, 'Home')),
+      rscEnabled: false,
+    },
   })
 
   expect(output[0]).toEqual(
@@ -238,7 +262,10 @@ test('templateForComponentFile creates a template', async () => {
     webPathSection: 'pages',
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: page.paramVariants(helpers.pathName(undefined, 'fooBar')),
+    templateVars: {
+      ...page.paramVariants(helpers.pathName(undefined, 'fooBar')),
+      rscEnabled: false,
+    },
   })
 
   expect(output[1]).toEqual(PAGE_TEMPLATE_OUTPUT)

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

@@ -6,13 +6,15 @@ import { Listr } from 'listr2'
 import pascalcase from 'pascalcase'
 import terminalLink from 'terminal-link'
 
-import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
+import {
+  recordTelemetryAttributes,
+  isTypeScriptProject,
+} from '@redwoodjs/cli-helpers'
 import { getConfig, ensurePosixPath } from '@redwoodjs/project-config'
 import { errorTelemetry } from '@redwoodjs/telemetry'
 
 import { generateTemplate, getPaths, writeFilesTask } from '../../lib'
 import c from '../../lib/colors'
-import { isTypeScriptProject } from '../../lib/project'
 import { prepareForRollback } from '../../lib/rollback'
 import { pluralize, isPlural, isSingular } from '../../lib/rwPluralize'
 

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

@@ -3,6 +3,31 @@ globalThis.__dirname = __dirname
 globalThis.mockFs = false
 let mockFiles = {}
 
+vi.mock('fs', async (importOriginal) => {
+  const originalFs = await importOriginal()
+
+  return {
+    default: {
+      ...originalFs,
+      existsSync: (...args) => {
+        console.log('existsSync', args)
+        if (mockFiles[args[0]]) {
+          return true
+        }
+
+        return originalFs.existsSync.apply(null, args)
+      },
+      readFileSync: (path) => {
+        if (mockFiles[path]) {
+          return mockFiles[path]
+        }
+
+        return originalFs.readFileSync
+      },
+    },
+  }
+})
+
 vi.mock('fs-extra', async (importOriginal) => {
   const originalFsExtra = await importOriginal()
 
@@ -43,8 +68,46 @@ import path from 'path'
 import fs from 'fs-extra'
 import { vi, describe, it, test, expect, beforeEach, afterEach } from 'vitest'
 
-// Load mocks
-import '../../../../lib/test'
+import '../../../../lib/mockTelemetry'
+
+vi.mock('@redwoodjs/project-config', async (importOriginal) => {
+  const path = require('path')
+  const originalProjectConfig = await importOriginal()
+  return {
+    getPaths: () => {
+      const BASE_PATH = '/path/to/project'
+
+      return {
+        base: BASE_PATH,
+        web: {
+          generators: path.join(BASE_PATH, './web/generators'),
+          routes: path.join(BASE_PATH, 'web/src/Routes.js'),
+          pages: path.join(BASE_PATH, '/web/src/pages'),
+        },
+      }
+    },
+    getConfig: () => ({}),
+    ensurePosixPath: originalProjectConfig.ensurePosixPath,
+    resolveFile: originalProjectConfig.resolveFile,
+  }
+})
+
+vi.mock('@redwoodjs/cli-helpers', async (importOriginal) => {
+  const originalCliHelpers = await importOriginal()
+
+  return {
+    ...originalCliHelpers,
+    isTypeScriptProject: () => false,
+  }
+})
+
+vi.mock('@redwoodjs/internal/dist/generate/generate', () => {
+  return {
+    generate: () => {
+      return { errors: [] }
+    },
+  }
+})
 
 import { ensurePosixPath } from '@redwoodjs/project-config'
 

packages/cli/src/commands/generate/page/page.js

@@ -94,7 +94,10 @@ export const files = async ({ name, tests, stories, typescript, ...rest }) => {
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'page',
     templatePath: 'page.tsx.template',
-    templateVars: rest,
+    templateVars: {
+      rscEnabled: getConfig().experimental?.rsc?.enabled,
+      ...rest,
+    },
   })
 
   const testFile = await templateForComponentFile({

packages/cli/src/commands/generate/page/templates/page.tsx.template

@@ -1,5 +1,12 @@
+<% if (rscEnabled) { %>
+import { Link } from '@redwoodjs/router/dist/link'
+import { namedRoutes as routes } from '@redwoodjs/router/dist/namedRoutes'
+import { Metadata } from '@redwoodjs/web/dist/components/Metadata'
+<% } else { %>
 import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
+<% } %>
+
 <% if (paramName !== '') { %>
 type ${pascalName}PageProps = {
   ${paramName}: ${paramType}

packages/cli/src/lib/test.js

@@ -72,6 +72,15 @@ vi.mock('@redwoodjs/project-config', async (importOriginal) => {
   }
 })
 
+vi.mock('@redwoodjs/cli-helpers', async (importOriginal) => {
+  const originalCliHelpers = await importOriginal()
+
+  return {
+    ...originalCliHelpers,
+    isTypeScriptProject: () => false,
+  }
+})
+
 vi.mock('./project', () => ({
   isTypeScriptProject: () => false,
   sides: () => ['web', 'api'],