Merge a85566a into b9b5a7a

__fixtures__/example-todo-main/.gitignore

@@ -6,9 +6,7 @@ yarn-error.log
 .env
 .DS_Store
 .wip
+.redwood
 
 api/prisma/dev.sqlite
-packages/photon/runtime
-packages/photon/index.js
-packages/photon/index.d.ts
 

__fixtures__/example-todo-main/api/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ]
+    },
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
+    "types": ["jest"]
+  },
+  "include": ["src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/api-*",
+  ]
+}

__fixtures__/example-todo-main/web/src/components/TableCell/TableCell.js

@@ -0,0 +1,3 @@
+export default () => {
+  return (<>I am not a cell, I am a component that is named cell.</>)
+}

__fixtures__/example-todo-main/web/src/components/TodoListCell/TodoListCell.js → __fixtures__/example-todo-main/web/src/components/TodoListCell/TodoListCell.tsx

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
-import TodoItem from 'src/components/TodoItem'
+
 import { useMutation } from '@redwoodjs/web'
 
+import TodoItem from 'src/components/TodoItem'
+
 export const QUERY = gql`
   query TodoListCell_GetTodos {
     todos {

__fixtures__/example-todo-main/web/src/pages/HomePage/HomePage.js → __fixtures__/example-todo-main/web/src/pages/HomePage/HomePage.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+
 import AddTodo from 'src/components/AddTodo'
 import TodoListCell from 'src/components/TodoListCell'
 

__fixtures__/example-todo-main/web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*"
+      ]
+    },
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src"
+    ],
+    "typeRoots": [
+      "../node_modules/@types",
+      "./node_modules/@types"
+    ],
+    "types": [
+      "jest"
+    ],
+    "jsx": "preserve",
+  },
+  "include": [
+    "src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+  ]
+}

packages/cli/README.md

@@ -1,4 +1,4 @@
-# Command Line Interface
+# RedwoodJS CLI
 
   <!-- toc -->
   - [Purpose and Vision](#purpose-and-vision)
@@ -50,13 +50,11 @@ Since the CLI is the entry point to Redwood, as Redwood continues to grow&mdash;
 
 ### Coming Soon
 
-- [Typescript support](https://github.com/redwoodjs/redwood/issues/523)
 - [Generators refactor (plopjs)](https://github.com/redwoodjs/redwood/issues/653)
 
 ### Coming Later
 
 - [Multiple database support](https://github.com/redwoodjs/redwood/issues/507)
-- [Storybook generators](https://github.com/redwoodjs/redwood/issues/231)
 - [Support for dynamic sides and targets](https://github.com/redwoodjs/redwood/pull/355)
 
 ## Contributing
@@ -105,6 +103,17 @@ To get a good sense of the difference, compare [redwood-tools.js](https://github
 
 Contributing to `@redwoodjs/cli` usually means adding a command or modifying an existing one. We've organized this doc around adding a command since if you know how to do this you'll know how to modify one too.
 
+
+#### Quickstart
+
+RedwoodJS CLI is usually run in a project, this is problematic for contributors, because the transpiled files are not in a project, but in the RedwoodJS framework repo. Luckily the path can be modified at run-time via an env-var: `__REDWOOD__CONFIG_PATH=../path/to/project`.
+
+We've added a handy yarn alias to test your modified changes to the Redwood CLI against the "example-todo-main" fixture (`__fixtures__/example-todo-main`) you can do the following:
+```terminal
+cd packages/cli
+yarn dev <command>
+```
+
 ### Best Practices
 
 There's a few best practices we follow that you should be aware of:
@@ -616,10 +625,6 @@ Adding a command here just entails adding another `command` method before the ca
 
 Contrived example aside, any command you add here should help people contribute to Redwood.
 
-### Converting to TypeScript
-
-We're in the midst of converting Redwood to TypeScript. If you're interested, we'd love your help! You can track our progress and see where you can contribute [here](https://github.com/redwoodjs/redwood/issues/523).
-
 #### Generators
 
 If you're converting a generator, read the _Goals_ section of tracking issue [#523](https://github.com/redwoodjs/redwood/issues/523); it details some specs you should comply with.

packages/cli/package.json

@@ -48,6 +48,7 @@
     "@types/node-fetch": "^2.5.10"
   },
   "scripts": {
+    "dev": "yarn build:js && __REDWOOD__CONFIG_PATH=../../__fixtures__/example-todo-main node dist/index.js",
     "build": "yarn build:js",
     "prepublishOnly": "yarn build",
     "build:clean-dist": "yarn rimraf 'dist/**/*/__tests__'",

packages/cli/src/commands/dev.js

@@ -4,13 +4,11 @@ import path from 'path'
 import concurrently from 'concurrently'
 import terminalLink from 'terminal-link'
 
-import { getConfig } from '@redwoodjs/internal'
-import { shutdownPort } from '@redwoodjs/internal/devtools'
+import { getConfig, shutdownPort, generateTypeDefs } from '@redwoodjs/internal'
 
 import { getPaths } from 'src/lib'
 import c from 'src/lib/colors'
 import { generatePrismaClient } from 'src/lib/generatePrismaClient'
-import runPreBuildTasks from 'src/lib/runPreBuildTasks'
 
 export const command = 'dev [side..]'
 export const description = 'Start development servers for api, and web'
@@ -54,7 +52,7 @@ export const handler = async ({
   const WEB_DIR_SRC = getPaths().web.src
 
   // Run tasks like type generate, etc.
-  runPreBuildTasks()
+  generateTypeDefs()
 
   if (side.includes('api')) {
     try {

packages/cli/src/commands/generate.js

@@ -1,18 +1,30 @@
 import terminalLink from 'terminal-link'
 
+import { getPaths, generateTypeDefs } from '@redwoodjs/internal'
 import { getProject } from '@redwoodjs/structure'
 
+import c from 'src/lib/colors'
+
 export const command = 'generate <type>'
 export const aliases = ['g']
-export const description = 'Save time by generating boilerplate code'
-
-const project = getProject()
+export const description = 'Generate boilerplate code and type definitions'
 
 export const builder = (yargs) =>
   yargs
+    .command('types', 'Generate TypeScript definitions', {}, function () {
+      const rwjsPaths = getPaths()
+      console.log()
+      console.log(c.bold('Generating...'))
+      const files = generateTypeDefs()
+      for (const f of files) {
+        console.log('  -', f.replace(rwjsPaths.base, '').substring(1))
+      }
+      console.log('... and done.')
+    })
     /**
      * Like generate, util is an entry point command,
-     * so we can't have generate going through its subdirectories
+     * so we can't have generate going through its subdirectories.
+     * NOTE: `util` is deprecated.
      */
     .commandDir('./generate', { recurse: true, exclude: /\/util\// })
     .demandCommand()
@@ -33,9 +45,8 @@ export const yargsDefaults = {
   },
   typescript: {
     alias: 'ts',
-    default: project.isTypeScriptProject,
-    description:
-      'Generate TypeScript files. Enabled by default if we detect your project is typescript',
+    default: getProject().isTypeScriptProject,
+    description: 'Generate TypeScript files',
     type: 'boolean',
   },
 }

packages/cli/src/commands/test.js

@@ -66,7 +66,8 @@ export const handler = async ({
   watch = true,
   collectCoverage = false,
 }) => {
-  const { cache: CACHE_DIR } = getPaths()
+  const rwjsPaths = getPaths()
+
   const sides = [].concat(side).filter(Boolean)
   const args = [
     '--passWithNoTests',
@@ -99,7 +100,9 @@ export const handler = async ({
   }
 
   try {
-    const cacheDirDb = `file:${ensurePosixPath(CACHE_DIR)}/test.db`
+    const cacheDirDb = `file:${ensurePosixPath(
+      rwjsPaths.generated.base
+    )}/test.db`
     const DATABASE_URL = process.env.TEST_DATABASE_URL || cacheDirDb
 
     // Create a test database
@@ -108,7 +111,7 @@ export const handler = async ({
         `yarn rw`,
         ['prisma db push', '--force-reset', '--accept-data-loss'],
         {
-          cwd: getPaths().api.base,
+          cwd: rwjsPaths.api.base,
           stdio: 'inherit',
           shell: true,
           env: { DATABASE_URL },
@@ -119,7 +122,7 @@ export const handler = async ({
     // so we're running it via execa, since `jest.run()` is a bit unstable.
     // https://github.com/facebook/jest/issues/5048
     await execa('yarn jest', args, {
-      cwd: getPaths().base,
+      cwd: rwjsPaths.base,
       shell: true,
       stdio: 'inherit',
       env: { DATABASE_URL },

packages/cli/src/commands/ts-to-js.js

@@ -1,5 +1,4 @@
-import { getPaths } from '@redwoodjs/internal'
-import { convertTsProjectToJs } from '@redwoodjs/internal/devtools'
+import { getPaths, convertTsProjectToJs } from '@redwoodjs/internal'
 
 export const command = 'ts-to-js'
 export const description = 'Convert a TypeScript project to JavaScript'

packages/core/config/babel-preset.js

@@ -3,7 +3,7 @@
  */
 const { extendDefaultPlugins } = require('svgo')
 
-const { getProject } = require('@redwoodjs/structure')
+const { getPaths } = require('@redwoodjs/internal')
 
 const packageJSON = require('../package.json')
 
@@ -15,8 +15,7 @@ const CORE_JS_VERSION = '3.6'
 
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = () => {
-  const project = getProject()
-  const paths = project.host.paths
+  const rwjsPaths = getPaths()
 
   return {
     presets: ['@babel/preset-react', '@babel/preset-typescript'],
@@ -77,7 +76,7 @@ module.exports = () => {
                 src:
                   // Jest monorepo and multi project runner is not correctly determining
                   // the `cwd`: https://github.com/facebook/jest/issues/7359
-                  process.env.NODE_ENV !== 'test' ? './src' : paths.api.src,
+                  process.env.NODE_ENV !== 'test' ? './src' : rwjsPaths.api.src,
               },
             },
           ],
@@ -130,7 +129,7 @@ module.exports = () => {
                 src:
                   // Jest monorepo and multi project runner is not correctly determining
                   // the `cwd`: https://github.com/facebook/jest/issues/7359
-                  process.env.NODE_ENV !== 'test' ? './src' : paths.web.src,
+                  process.env.NODE_ENV !== 'test' ? './src' : rwjsPaths.web.src,
               },
             },
           ],
@@ -203,7 +202,6 @@ module.exports = () => {
           [
             require('../dist/babelPlugins/babel-plugin-redwood-routes-auto-loader'),
             {
-              project,
               useStaticImports: process.env.__REDWOOD__PRERENDERING === '1',
             },
           ],

packages/core/src/babelPlugins/__tests__/__fixtures__/mock-cell-data/output_TodoListCell.mock.js

@@ -1,4 +1,4 @@
-import { afterQuery } from './TodoListCell.js'
+import { afterQuery } from './TodoListCell.tsx'
 export const standard = () =>
   afterQuery(
     mockGraphQLQuery('TodoListCell_GetTodos', () => ({