Add a way to write and reference generated types

.eslintignore

@@ -1,5 +1,5 @@
 dist
 fixtures
 packages/api/importAll.macro.js
-packages/core/src/__tests__/__fixtures__/**/*
+packages/core/**/__fixtures__/**/*
 packages/core/config/storybook/**/*

packages/core/config/babel-preset.js

@@ -1,10 +1,8 @@
-const fs = require('fs')
-
 /**
  * This is the babel preset used `create-redwood-app`
  */
 
-const { getPaths } = require('@redwoodjs/internal')
+const { getProject } = require('@redwoodjs/structure')
 
 const TARGETS_NODE = '12.16.1'
 // Warning! Use the minor core-js version: "corejs: '3.6'", instead of "corejs: 3",
@@ -13,7 +11,8 @@ const TARGETS_NODE = '12.16.1'
 const CORE_JS_VERSION = '3.6'
 
 module.exports = () => {
-  const paths = getPaths()
+  const project = getProject()
+  const paths = project.host.paths
 
   return {
     presets: ['@babel/preset-react', '@babel/preset-typescript'],
@@ -82,15 +81,7 @@ module.exports = () => {
               ],
             },
           ],
-          [
-            require('../dist/babel-plugin-redwood-import-dir'),
-            {
-              generateTypesPath: paths.types,
-              host: {
-                writeFileSync: fs.writeFileSync,
-              },
-            },
-          ],
+          [require('../dist/babelPlugins/babel-plugin-redwood-import-dir')],
         ],
       },
       // ** WEB **
@@ -100,7 +91,7 @@ module.exports = () => {
           [
             '@babel/preset-env',
             {
-              // the targets are set in web/package.json
+              // the targets are set in <userProject>/web/package.json
               useBuiltIns: 'usage',
               corejs: {
                 version: CORE_JS_VERSION,
@@ -153,19 +144,28 @@ module.exports = () => {
       // ** Files ending in `Cell.[js,ts]` **
       {
         test: /.+Cell.(js|tsx)$/,
-        plugins: [require('../dist/babel-plugin-redwood-cell')],
+        plugins: [require('../dist/babelPlugins/babel-plugin-redwood-cell')],
       },
       // Automatically import files in `./web/src/pages/*` in to
       // the `./web/src/Routes.[ts|jsx]` file.
       {
         test: ['./web/src/Routes.js', './web/src/Routes.tsx'],
-        plugins: [require('../dist/babel-plugin-redwood-routes-auto-loader')],
+        plugins: [
+          [
+            require('../dist/babelPlugins/babel-plugin-redwood-routes-auto-loader'),
+            {
+              project,
+            },
+          ],
+        ],
       },
       // ** Files ending in `Cell.mock.[js,ts]` **
       // Automatically determine keys for saving and retrieving mock data.
       {
         test: /.+Cell.mock.(js|ts)$/,
-        plugins: [require('../dist/babel-plugin-redwood-mock-cell-data')],
+        plugins: [
+          require('../dist/babelPlugins/babel-plugin-redwood-mock-cell-data'),
+        ],
       },
     ],
   }

packages/core/src/babelPlugins/__tests__/babel-plugin-redwood-import-dir.test.ts

@@ -0,0 +1,48 @@
+import path from 'path'
+import pluginTester from 'babel-plugin-tester'
+import plugin from '../babel-plugin-redwood-import-dir'
+
+const mockReaddirSync = jest.fn(() => [
+  'import-dir-services.d.ts',
+  'import-dir-graphql.d.ts',
+])
+const mockWriteFileSync = jest.fn()
+
+jest.mock('@redwoodjs/structure', () => {
+  return {
+    DefaultHost: jest.fn().mockImplementation(() => ({
+      readdirSync: mockReaddirSync,
+      writeFileSync: mockWriteFileSync,
+      paths: {
+        types: '/fake/project/node_modules/@types/@redwoodjs/generated',
+      },
+    })),
+  }
+})
+
+describe('babel plugin redwood import dir', () => {
+  pluginTester({
+    plugin,
+    pluginName: 'babel-plugin-redwood-import-dir',
+    fixtures: path.join(__dirname, '__fixtures__/import-dir'),
+  })
+
+  afterAll(() => {
+    expect(mockWriteFileSync.mock.calls[0][1]).toContain(
+      `/fake/project/node_modules/@types/@redwoodjs/generated/import-dir-services.d.ts`
+    )
+
+    expect(mockWriteFileSync.mock.calls[0][1]).toContain(
+      `declare module 'src/__fixtures__/**/*.{js,ts}'`
+    )
+
+    expect(mockWriteFileSync.mock.calls[1][0]).toContain(
+      `/fake/project/node_modules/@types/@redwoodjs/index.d.ts`
+    )
+    expect(mockWriteFileSync.mock.calls[1][1]).toContain(
+      `/// <reference path="./types/import-dir-services.d.ts" />`
+    )
+
+    jest.clearAllMocks()
+  })
+})

packages/core/src/__tests__/babel-plugin-redwood-mock-cell-data.test.ts → packages/core/src/babelPlugins/__tests__/babel-plugin-redwood-mock-cell-data.test.ts

@@ -5,7 +5,7 @@ import pluginTester from 'babel-plugin-tester'
 import plugin from '../babel-plugin-redwood-mock-cell-data'
 
 describe('babel plugin redwood mock cell data', () => {
-  const __fixtures__ = path.resolve(__dirname, '../../../../__fixtures__') //?
+  const __fixtures__ = path.resolve(__dirname, '../../../../../__fixtures__') //?
 
   pluginTester({
     plugin,

packages/core/src/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts → packages/core/src/babelPlugins/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts

@@ -1,8 +1,23 @@
 import path from 'path'
-
 import pluginTester from 'babel-plugin-tester'
-
 import plugin from '../babel-plugin-redwood-routes-auto-loader'
+import { getProject } from '@redwoodjs/structure'
+
+const mockReaddirSync = jest.fn(() => ['routes.d.ts'])
+const mockWriteFileSync = jest.fn()
+
+jest.mock('@redwoodjs/structure', () => {
+  return {
+    ...jest.requireActual('@redwoodjs/structure'),
+    DefaultHost: jest.fn().mockImplementation(() => ({
+      readdirSync: mockReaddirSync,
+      writeFileSync: mockWriteFileSync,
+      paths: {
+        types: '/fake/project/node_modules/@types/@redwoodjs/generated',
+      },
+    })),
+  }
+})
 
 jest.mock('@redwoodjs/internal', () => ({
   getPaths: () => {
@@ -44,8 +59,29 @@ jest.mock('@redwoodjs/internal', () => ({
   },
 }))
 
-pluginTester({
-  plugin,
-  pluginName: 'babel-plugin-redwood-routes-auto-loader',
-  fixtures: path.join(__dirname, '__fixtures__/routes-auto-loader'),
+describe('routes auto loader', () => {
+  const exampleTodoPath = path.resolve(
+    __dirname,
+    '../../../../../__fixtures__/example-todo-main'
+  )
+  const project = getProject(exampleTodoPath)
+
+  pluginTester({
+    plugin,
+    pluginName: 'babel-plugin-redwood-routes-auto-loader',
+    pluginOptions: {
+      project,
+    },
+    fixtures: path.join(__dirname, '__fixtures__/routes-auto-loader'),
+  })
+
+  afterAll(() => {
+    expect(mockWriteFileSync.mock.calls[0][0]).toContain(`routes.d.ts`)
+    expect(mockWriteFileSync.mock.calls[0][1]).toContain(`home: () => "/"`)
+    expect(mockWriteFileSync.mock.calls[1][0]).toContain(`index.d.ts`)
+    expect(mockWriteFileSync.mock.calls[1][1]).toContain(
+      `/// <reference path="./generated/routes.d.ts" />`
+    )
+    jest.clearAllMocks()
+  })
 })

packages/core/src/babelPlugins/__tests__/generateTypes.test.ts

@@ -0,0 +1,27 @@
+import { generateTypeDefIndex } from '../generateTypes'
+
+const mockReaddirSync = jest.fn(() => [
+  'import-dir-service.d.ts',
+  'import-dir-graphql.d.ts',
+])
+const mockWriteFileSync = jest.fn()
+
+jest.mock('@redwoodjs/structure', () => {
+  return {
+    DefaultHost: jest.fn().mockImplementation(() => ({
+      readdirSync: mockReaddirSync,
+      writeFileSync: mockWriteFileSync,
+      paths: {
+        types: '/fake/project/node_modules/@types/@redwoodjs/generated',
+      },
+    })),
+  }
+})
+
+test('generates index.d.ts file correctly', () => {
+  generateTypeDefIndex()
+  expect(mockWriteFileSync.mock.calls[0][0]).toContain('index.d.ts')
+  expect(mockWriteFileSync.mock.calls[0][1]).toContain(
+    `import-dir-service.d.ts`
+  )
+})

packages/core/src/babel-plugin-redwood-import-dir.ts → packages/core/src/babelPlugins/babel-plugin-redwood-import-dir.ts

@@ -2,23 +2,11 @@ import path from 'path'
 
 import glob from 'glob'
 import type { PluginObj, types } from '@babel/core'
-import type { Host } from '@redwoodjs/structure'
 
-export const generateTypes = (modulePath: string) => {
-  // TODO:
-  // This implementation is a bit lacking:
-  // 1. We receive the resolved path instead of the aliases path,
-  // so we monkey patch it by replacing `../` with `src/`.
-  // 2. We don't provide any types beyond the module, which is fine since
-  // people aren't going to be using those.
-  return `// @ts-expect-error\ndeclare module '${modulePath.replace(
-    '../',
-    'src/'
-  )}';`
-}
+import { generateTypeDef, generateTypeDefIndex } from './generateTypes'
 
 /**
- * This babel plugin will search for import statements that include star `*`
+ * This babel plugin will search for import statements that include star `**`
  * in the source part of the statement is a glob, the files that are matched are imported,
  * and appended to an object.
  *
@@ -33,16 +21,13 @@ export const generateTypes = (modulePath: string) => {
  * // services.nested_c = require('src/services/nested/c.js')
  * ```
  */
-export default function (
-  { types: t }: { types: typeof types },
-  options: { generateTypesPath: string; host: Host }
-): PluginObj {
+export default function ({ types: t }: { types: typeof types }): PluginObj {
   return {
     name: 'babel-plugin-redwood-import-dir',
     visitor: {
       ImportDeclaration(p, state: { file?: any }) {
-        // This code will only run when we find an import statement that includes a `*`.
-        if (!p.node.source.value.includes('*')) {
+        // This code will only run when we find an import statement that includes a `**`.
+        if (!p.node.source.value.includes('**')) {
           return
         }
 
@@ -115,15 +100,13 @@ export default function (
         // - import importName from "dirPath"
         p.remove()
 
-        if (options.host.writeFileSync) {
-          options.host.writeFileSync(
-            path.join(
-              options.generateTypesPath,
-              `import-dir-${importName}.d.ts`
-            ),
-            generateTypes(importGlob)
-          )
-        }
+        // GenerateTypes
+        const typeDefContent = `
+          // @ts-expect-error
+          declare module '${importGlob.replace('../', 'src/')}';
+        `
+        generateTypeDef(`import-dir-${importName}.d.ts`, typeDefContent)
+        generateTypeDefIndex()
       },
     },
   }

packages/core/src/babel-plugin-redwood-routes-auto-loader.ts → packages/core/src/babelPlugins/babel-plugin-redwood-routes-auto-loader.ts

@@ -1,7 +1,17 @@
 import type { PluginObj, types } from '@babel/core'
+
 import { processPagesDir } from '@redwoodjs/internal'
+import { generateTypeDef, generateTypeDefIndex } from './generateTypes'
+import { RWProject } from '@redwoodjs/structure'
+
+interface PluginOptions {
+  project: RWProject
+}
 
-export default function ({ types: t }: { types: typeof types }): PluginObj {
+export default function (
+  { types: t }: { types: typeof types },
+  { project }: PluginOptions
+): PluginObj {
   let pages = processPagesDir()
 
   return {
@@ -22,6 +32,37 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
       Program: {
         enter() {
           pages = processPagesDir()
+
+          // Produces:
+          // routes.home: () => "/home"
+          // routes.aboutUs: () => "/about-us"
+          const availableRoutes = project
+            .getRouter()
+            .routes.filter((r) => !r.isNotFound)
+            .map((r) => `${r.name}: () => "${r.path}"`)
+
+          const pageImports = pages.map(
+            (page) => `import type ${page.const}Type from '${page.importPath}'`
+          )
+          const pageGlobals = pages.map(
+            (page) => `const ${page.const}: typeof ${page.const}Type`
+          )
+
+          const typeDefContent = `
+            declare module '@redwoodjs/router' {
+              interface AvailableRoutes {
+                ${availableRoutes.join('\n')}
+              }
+            }
+
+            ${pageImports.join('\n')}
+            declare global {
+              ${pageGlobals.join('\n')}
+            }
+          `
+
+          generateTypeDef('routes.d.ts', typeDefContent)
+          generateTypeDefIndex()
         },
         exit(p) {
           if (pages.length === 0) {