Convert component generator to TS

packages/cli/src/commands/generate/component/__tests__/component.test.ts

@@ -0,0 +1,85 @@
+global.__dirname = __dirname
+import { loadGeneratorFixture } from 'src/lib/test'
+
+// TODO: Revert to import from '../component' when it gets types.
+import * as component from 'src/commands/generate/component/component'
+
+type WordFilesType = { [key: string]: string }
+
+let singleWordDefaultFiles: WordFilesType
+let multiWordDefaultFiles: WordFilesType
+let javascriptFiles: WordFilesType
+let typescriptFiles: WordFilesType
+
+beforeAll(() => {
+  singleWordDefaultFiles = component.files({ name: 'User' })
+  multiWordDefaultFiles = component.files({ name: 'UserProfile' })
+  javascriptFiles = component.files({
+    name: 'JavascriptUser',
+    javascript: true,
+  })
+  typescriptFiles = component.files({
+    name: 'TypescriptUser',
+    typescript: true,
+  })
+})
+
+test('returns exactly 2 files', () => {
+  expect(Object.keys(singleWordDefaultFiles).length).toEqual(2)
+})
+
+test('creates a single word component', () => {
+  expect(
+    singleWordDefaultFiles['/path/to/project/web/src/components/User/User.tsx']
+  ).toEqual(loadGeneratorFixture('component', 'singleWordComponent.tsx'))
+})
+
+test('creates a single word component test', () => {
+  expect(
+    singleWordDefaultFiles[
+      '/path/to/project/web/src/components/User/User.test.tsx'
+    ]
+  ).toEqual(loadGeneratorFixture('component', 'singleWordComponent.test.tsx'))
+})
+
+test('creates a multi word component', () => {
+  expect(
+    multiWordDefaultFiles[
+      '/path/to/project/web/src/components/UserProfile/UserProfile.tsx'
+    ]
+  ).toEqual(loadGeneratorFixture('component', 'multiWordComponent.tsx'))
+})
+
+test('creates a multi word component test', () => {
+  expect(
+    multiWordDefaultFiles[
+      '/path/to/project/web/src/components/UserProfile/UserProfile.test.tsx'
+    ]
+  ).toEqual(loadGeneratorFixture('component', 'multiWordComponent.test.tsx'))
+})
+
+test('creates JS component files if javacript = true', () => {
+  expect(
+    javascriptFiles[
+      '/path/to/project/web/src/components/JavascriptUser/JavascriptUser.js'
+    ]
+  ).not.toBeUndefined();
+  expect(
+    javascriptFiles[
+      '/path/to/project/web/src/components/JavascriptUser/JavascriptUser.test.js'
+    ]
+  ).not.toBeUndefined();
+})
+
+test('creates TS component files if typescript = true', () => {
+  expect(
+    typescriptFiles[
+      '/path/to/project/web/src/components/TypescriptUser/TypescriptUser.tsx'
+    ]
+  ).not.toBeUndefined();
+  expect(
+    typescriptFiles[
+      '/path/to/project/web/src/components/TypescriptUser/TypescriptUser.test.tsx'
+    ]
+  ).not.toBeUndefined();
+})

packages/cli/src/commands/generate/component/__tests__/fixtures/multiWordComponent.js → packages/cli/src/commands/generate/component/__tests__/fixtures/multiWordComponent.tsx

@@ -2,7 +2,7 @@ const UserProfile = () => {
   return (
     <div>
       <h2>{'UserProfile'}</h2>
-      <p>{'Find me in ./web/src/components/UserProfile/UserProfile.js'}</p>
+      <p>{'Find me in ./web/src/components/UserProfile/UserProfile.tsx'}</p>
     </div>
   )
 }

packages/cli/src/commands/generate/component/__tests__/fixtures/singleWordComponent.js → packages/cli/src/commands/generate/component/__tests__/fixtures/singleWordComponent.tsx

@@ -2,7 +2,7 @@ const User = () => {
   return (
     <div>
       <h2>{'User'}</h2>
-      <p>{'Find me in ./web/src/components/User/User.js'}</p>
+      <p>{'Find me in ./web/src/components/User/User.tsx'}</p>
     </div>
   )
 }

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

@@ -1,23 +1,27 @@
+import { transformTSToJS } from 'src/lib'
+
 import {
   templateForComponentFile,
   createYargsForComponentGeneration,
 } from '../helpers'
 
 const REDWOOD_WEB_PATH_NAME = 'components'
 
-export const files = ({ name }) => {
+export const files = ({ name, typescript, javascript }) => {
+  const isJavascript = javascript && !typescript
   const componentFile = templateForComponentFile({
     name,
     webPathSection: REDWOOD_WEB_PATH_NAME,
+    extension: isJavascript ? '.js' : '.tsx',
     generator: 'component',
-    templatePath: 'component.js.template',
+    templatePath: 'component.tsx.template',
   })
   const testFile = templateForComponentFile({
     name,
-    extension: '.test.js',
+    extension: `.test.${isJavascript ? 'js' : 'tsx'}`,
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'component',
-    templatePath: 'test.js.template',
+    templatePath: 'test.tsx.template',
   })
 
   // Returns
@@ -26,8 +30,12 @@ export const files = ({ name }) => {
   //    "path/to/fileB": "<<<template>>>",
   // }
   return [componentFile, testFile].reduce((acc, [outputPath, content]) => {
+    const template = isJavascript
+      ? transformTSToJS(outputPath, content)
+      : content
+
     return {
-      [outputPath]: content,
+      [outputPath]: template,
       ...acc,
     }
   }, {})

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

@@ -62,7 +62,21 @@ export const pathName = (path, name) => {
 export const createYargsForComponentGeneration = ({
   componentName,
   filesFn,
-  builder = { force: { type: 'boolean', default: false } },
+  builder = {
+    force: { type: 'boolean', default: false },
+    typescript: {
+      type: 'boolean',
+      default: false,
+      describe: 'Generate TypeScript files',
+      alias: 'ts',
+    },
+    javascript: {
+      type: 'boolean',
+      default: true,
+      describe: 'Generate JavaScript files',
+      alias: 'js',
+    },
+  },
 }) => {
   return {
     command: `${componentName} <name>`,

packages/cli/src/commands/generate/sdl/__tests__/fixtures/enumGeneratedSdl.js

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+
 export const schema = gql`
   type Shoe {
     id: Int!

packages/cli/src/commands/generate/sdl/__tests__/fixtures/multiWordSdl.js

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+
 export const schema = gql`
   type UserProfile {
     id: Int!

packages/cli/src/commands/generate/sdl/__tests__/fixtures/multiWordSdlCrud.js

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+
 export const schema = gql`
   type UserProfile {
     id: Int!

packages/cli/src/commands/generate/sdl/__tests__/fixtures/singleWordSdl.js

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+
 export const schema = gql`
   type User {
     id: Int!

packages/cli/src/commands/generate/sdl/__tests__/fixtures/singleWordSdlCrud.js

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+
 export const schema = gql`
   type Post {
     id: Int!

packages/cli/src/commands/generate/service/__tests__/fixtures/multiWord.js

@@ -1,4 +1,5 @@
 import { db } from 'src/lib/db'
+
 export const userProfiles = () => {
   return db.userProfile.findMany()
 }

packages/cli/src/commands/generate/service/__tests__/fixtures/multiWord.test.js

@@ -1,6 +1,7 @@
 /*
 import { userProfiles } from './userProfiles'
 */
+
 describe('userProfiles', () => {
   it('returns true', () => {
     expect(true).toBe(true)

packages/cli/src/commands/generate/service/__tests__/fixtures/multiWord_crud.js

@@ -1,31 +1,30 @@
 import { db } from 'src/lib/db'
+
 export const userProfiles = () => {
   return db.userProfile.findMany()
 }
+
 export const userProfile = ({ id }) => {
   return db.userProfile.findOne({
-    where: {
-      id,
-    },
+    where: { id },
   })
 }
+
 export const createUserProfile = ({ input }) => {
   return db.userProfile.create({
     data: input,
   })
 }
+
 export const updateUserProfile = ({ id, input }) => {
   return db.userProfile.update({
     data: input,
-    where: {
-      id,
-    },
+    where: { id },
   })
 }
+
 export const deleteUserProfile = ({ id }) => {
   return db.userProfile.delete({
-    where: {
-      id,
-    },
+    where: { id },
   })
 }

packages/cli/src/commands/generate/service/__tests__/fixtures/multiWord_crud.test.js

@@ -1,6 +1,7 @@
 /*
 import { userProfiles } from './userProfiles'
 */
+
 describe('userProfiles', () => {
   it('returns true', () => {
     expect(true).toBe(true)

packages/cli/src/commands/generate/service/__tests__/fixtures/singleWord.js

@@ -1,4 +1,5 @@
 import { db } from 'src/lib/db'
+
 export const users = () => {
   return db.user.findMany()
 }

packages/cli/src/commands/generate/service/__tests__/fixtures/singleWord.test.js

@@ -1,6 +1,7 @@
 /*
 import { users } from './users'
 */
+
 describe('users', () => {
   it('returns true', () => {
     expect(true).toBe(true)

packages/cli/src/commands/generate/service/__tests__/fixtures/singleWord_belongsTo.js

@@ -1,14 +1,10 @@
 import { db } from 'src/lib/db'
+
 export const users = () => {
   return db.user.findMany()
 }
+
 export const User = {
   identity: (_obj, { root }) =>
-    db.user
-      .findOne({
-        where: {
-          id: root.id,
-        },
-      })
-      .identity(),
+    db.user.findOne({ where: { id: root.id } }).identity(),
 }

packages/cli/src/commands/generate/service/__tests__/fixtures/singleWord_crud.js

@@ -1,31 +1,30 @@
 import { db } from 'src/lib/db'
+
 export const posts = () => {
   return db.post.findMany()
 }
+
 export const post = ({ id }) => {
   return db.post.findOne({
-    where: {
-      id,
-    },
+    where: { id },
   })
 }
+
 export const createPost = ({ input }) => {
   return db.post.create({
     data: input,
   })
 }
+
 export const updatePost = ({ id, input }) => {
   return db.post.update({
     data: input,
-    where: {
-      id,
-    },
+    where: { id },
   })
 }
+
 export const deletePost = ({ id }) => {
   return db.post.delete({
-    where: {
-      id,
-    },
+    where: { id },
   })
 }

packages/cli/src/commands/generate/service/__tests__/fixtures/singleWord_crud.test.js

@@ -1,6 +1,7 @@
 /*
 import { posts } from './posts'
 */
+
 describe('posts', () => {
   it('returns true', () => {
     expect(true).toBe(true)