Make auto-import pages support .tsx files.

__fixtures__/example-todo-main/web/src/pages/TypeScriptPage/TypeScriptPage.tsx

@@ -0,0 +1 @@
+export default () => 'I am a TypeScript page.'

__fixtures__/example-todo-main/web/src/pages/admin/EditUserPage/EditUserPage.jsx

@@ -0,0 +1 @@
+export default () => 'I am an page in a subdirectory.'

packages/internal/package.json

@@ -8,6 +8,7 @@
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
+    "glob": "7.1.6",
     "deepmerge": "^4.2.2",
     "findup-sync": "^4.0.0",
     "kill-port": "^1.6.1",

packages/internal/src/__tests__/paths.test.ts

@@ -5,14 +5,26 @@ import { processPagesDir, resolveFile, ensurePosixPath } from '../paths'
 describe('paths', () => {
   describe('processPagesDir', () => {
     it('it accurately finds the pages', () => {
-      const pagesDir = path.resolve(__dirname, './fixtures/web/src/pages')
+      const pagesDir = path.resolve(
+        __dirname,
+        '../../../../__fixtures__/example-todo-main/web/src/pages'
+      )
 
       const pages = processPagesDir(pagesDir)
       expect(pages[0].importPath).toEqual(
-        path.join(pagesDir, 'Admin/MargleTheWorld/MargleTheWorld')
+        path.join(pagesDir, 'admin/EditUserPage/EditUserPage')
       )
       expect(pages[1].importPath).toEqual(
-        path.join(pagesDir, 'HelloWorld/HelloWorld')
+        path.join(pagesDir, 'FatalErrorPage/FatalErrorPage')
+      )
+      expect(pages[2].importPath).toEqual(
+        path.join(pagesDir, 'HomePage/HomePage')
+      )
+      expect(pages[3].importPath).toEqual(
+        path.join(pagesDir, 'NotFoundPage/NotFoundPage')
+      )
+      expect(pages[4].importPath).toEqual(
+        path.join(pagesDir, 'TypeScriptPage/TypeScriptPage')
       )
     })
   })

packages/internal/src/paths.ts

@@ -2,6 +2,7 @@ import fs from 'fs'
 import path from 'path'
 
 import findUp from 'findup-sync'
+import { glob } from 'glob'
 
 import { getConfig } from './config'
 
@@ -40,10 +41,15 @@ export interface Paths {
 }
 
 export interface PagesDependency {
+  /** the variable to which the import is assigned */
   importName: string
-  importPath: string
+  /** @alias importName */
   const: string
+  /** absolute path without extension */
+  importPath: string
+  /** absolute path with extension */
   path: string
+  /** const ${importName} = { ...data structure for async imports... } */
   importStatement: string
 }
 
@@ -152,57 +158,26 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
 }
 
 /**
- * Recursively process the pages directory and return information useful for
- * automated imports.
+ * Process the pages directory and return information useful for automated imports.
  */
 export const processPagesDir = (
-  webPagesDir: string = getPaths().web.pages,
-  prefix: Array<string> = []
+  webPagesDir: string = getPaths().web.pages
 ): Array<PagesDependency> => {
-  const deps: Array<PagesDependency> = []
-  const entries = fs.readdirSync(webPagesDir, { withFileTypes: true })
-
-  // Iterate over a dir's entries, recursing as necessary into
-  // subdirectories.
-  entries.forEach((entry) => {
-    if (entry.isDirectory()) {
-      try {
-        // Actual page js or tsx files reside in a directory of the same
-        // name (supported by: directory-named-webpack-plugin), so let's
-        // construct the filename of the actual Page file.
-        // `require.resolve` will throw if a module cannot be found.
-        const importPath = path.join(webPagesDir, entry.name, entry.name)
-        require.resolve(importPath)
-
-        // If the Page exists, then construct the dependency object and push it
-        // onto the deps array.
-        const basename = path.posix.basename(entry.name)
-        const importName = prefix.join() + basename
-        // `src/pages/<PageName>`
-        const importFile = ['src', 'pages', ...prefix, basename].join('/')
-        deps.push({
-          importName,
-          importPath,
-          const: importName,
-          path: path.join(webPagesDir, entry.name),
-          importStatement: `const ${importName
-            .split(',')
-            .join('')} = { name: '${importName
-            .split(',')
-            .join('')}', loader: () => import('${importFile}') }`,
-        })
-      } catch (e) {
-        // If the Page doesn't exist then we are in a directory of Page
-        // directories, so let's recurse into it and do the whole thing over
-        // again.
-        const newPrefix = [...prefix, entry.name]
-        deps.push(
-          ...processPagesDir(path.join(webPagesDir, entry.name), newPrefix)
-        )
-      }
+  const pagePaths = glob.sync('**/**/*Page.{js,jsx,tsx}', { cwd: webPagesDir })
+  return pagePaths.map((pagePath) => {
+    const p = path.parse(pagePath)
+
+    const importName = p.dir.replace(path.sep, '')
+    const importPath = path.join(webPagesDir, p.dir, p.name)
+    const importStatement = `const ${importName} = { name: '${importName}', loader: import('${importPath}') }`
+    return {
+      importName,
+      const: importName,
+      importPath,
+      path: path.join(webPagesDir, pagePath),
+      importStatement,
     }
   })
-  return deps
 }
 
 /**

packages/structure/src/model/RWPage.ts

@@ -1,10 +1,10 @@
+import { existsSync } from 'fs'
 import { dirname } from 'path'
 
 import * as tsm from 'ts-morph'
 
 import { FileNode } from '../ide'
 import { lazy } from '../x/decorators'
-import { directoryNameResolver } from '../x/path'
 
 import { RWProject } from './RWProject'
 
@@ -17,12 +17,7 @@ export class RWPage extends FileNode {
     super()
   }
   @lazy() get filePath() {
-    const f = directoryNameResolver(this.path)
-    if (!f)
-      throw new Error(
-        `could not resolve index filename for directory '${this.path}' using dirname convention`
-      )
-    return f
+    return this.path
   }
   @lazy() get route() {
     return this.parent.router.routes.find(

packages/structure/src/model/__tests__/model.test.ts

@@ -11,7 +11,13 @@ describe('Redwood Project Model', () => {
 
     const pageNames = new Set(project.pages.map((p) => p.basenameNoExt))
     expect(pageNames).toEqual(
-      new Set(['FatalErrorPage', 'HomePage', 'NotFoundPage'])
+      new Set([
+        'FatalErrorPage',
+        'HomePage',
+        'NotFoundPage',
+        'TypeScriptPage',
+        'EditUserPage',
+      ])
     )
     for (const page of project.pages) {
       page.basenameNoExt //?

yarn.lock

@@ -10088,7 +10088,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==