Convert component generator to TS by kimadeline · Pull Request #632 · redwoodjs/graphql

kimadeline · 2020-05-31T05:03:54Z

For #523

✅ What it does

Generator:
- component/templates/ files converted to TS
- templates are transpiled to JS if we're generating JS files
- generated files pass yarn rw lint
component/__tests__ and fixtures converted to TS
- Added some test cases as well
CLI:
- support for --typescript and --javascript args for yarn rw g component (also supports --ts and --js to save myself some keystrokes, but I can remove/update that if needed)
- generator refuses to run if files exist in the same language
- generator re-runs if --force is used
- default is --javascript=true at the moment

🔮 What needs to be verified

The generated code doesn't pass yarn rw test, but that might be because I used a previous version of Redwood to create my test app, and the templates have changed since then:

🚧 What it doesn't do (yet)

The generator hasn't reached full awareness yet: the default is JS, and it doesn't do environment detection (of tsconfig.json for example). ~~Do you know where this code (probably a common helper) should go, or if anybody already got started on it?~~ Add getLanguage() helper for project typescript | javascript default and settings #633
If existing files are a different language target (e.g. in the case of a hybrid-project), the generator should refuse to run regardless of using the --force option;
If TS files are generated, the jsconfig.json file in testapp/web should have the "jsx": "preserve" option, which should probably added when creating the app. Thoughts? set jsx preserve in web/jsconfig create-redwood-app#61
New CI tests are so-so, I need to make the tests use packages/cli/src/lib/__tests__/fixtures/prettier.config.js but the paths are set up as such as they are pointing to /path/to/project/prettier.config.js, and, well, there's nothing there 😞
- A better solution would probably be to mock transformTSToJS in component.test.ts, and test transformTSToJS's output separately in lib/index.test.ts or something.

👏 Credits

This PR is "inspired" by #515 (transformTSToJS is basically a copy-🍝 with added flair) and #557 (took your index.d.ts and added dirty ambient module declarations).

jmreidy · 2020-05-31T13:33:28Z

+      type: 'boolean',
+      default: false,
+      describe: 'Generate TypeScript files',
+      alias: 'ts',


👍 alias!

💯this should be default setup across generators for sure!

jmreidy · 2020-05-31T13:34:55Z

+    retainLines: true,
+  }).code
+
+  return prettify(filename.replace(/\.ts$/, '.js'), result)


Now that we have .tsx, does all the extension magic still work?

I pass the final .js output filename to transformTSToJS here, so teeeechnically the PR doesn't use this replace logic. I can remove it, and it can be re-added whenever we end up needing it. What do you think?

I'd vote to remove. But defer to your decision.

It's in master now, so I'll amend it to cover the .tsx case in case other generators end up needing it too.

peterp · 2020-06-02T20:36:37Z

Hey @kimadeline, thanks for this! I'm going to merge @jmreidy's PR soon and then I'll get to this next!

peterp

Amazing! Thank you so much for this!

peterp · 2020-06-03T15:01:58Z

New CI tests are so-so, I need to make the tests use packages/cli/src/lib/tests/fixtures/prettier.config.js but the paths are set up as such as they are pointing to /path/to/project/prettier.config.js, and, well, there's nothing there 😞

I would love to start a discussion around refactoring the generator code to make it easier to test and to extend, I'll open up an issue with some ideas at tag you!

thedavidprice · 2020-06-03T15:17:20Z

@kimadeline huge thanks for getting this rolling!

Just to make sure, did you see that @jmreidy is going to be unavailable for awhile -- new baby!! 🎉

I'm working on #633 this morning. It's going to be a very simple isTypescript() returning a boolean, which can be used to set the command default language target.

@peterp Did you see this Q above?

If TS files are generated, the jsconfig.json file in testapp/web should have the "jsx": "preserve" option, which should probably be added when creating the app. Thoughts?

^^ +1 to add to template on my end. I opened redwoodjs/create-redwood-app#61 -- just merge or close as needed.

kimadeline · 2020-06-03T15:48:59Z

Whoa hadn't seen it, thanks for the heads-up @thedavidprice, and congrats to you and your family @jmreidy 🎉

I'll merge master and get my test app straightened out hopefully this evening (more realistically this weekend 😬).

peterp · 2020-06-03T15:49:59Z

I'll merge master and get my test app straightened out hopefully this evening (more realistically this weekend 😬).

@kimadeline I opened a pull-request that does all that on your fork! :)

…erator-to-ts Kimadeline convert component generator to ts

Kim-Adeline Miguel added 8 commits May 30, 2020 21:40

Extract prettify, expand transformTSToJS from #515

a2b9a6c

Add --typescript, --ts, --javascript, --js args

fa1a201

Update component.js + convert templates to tsx

09553cf

Update component tests

f54f6f0

yarn lint --fix

8bccb07

Fix most tests

ab22ea0

Get the tests passing for now

2a308ca

Update TS tests too

f1664d7

jmreidy reviewed May 31, 2020

View reviewed changes

Comment thread packages/cli/src/lib/index.js

jmreidy reviewed May 31, 2020

View reviewed changes

Merge branch 'master' into convert-component-generator-to-ts

7668817

thedavidprice mentioned this pull request Jun 2, 2020

TypeScript: Generators and Templates tracking issue #523

Closed

42 tasks

peterp self-assigned this Jun 3, 2020

peterp approved these changes Jun 3, 2020

View reviewed changes

peterp added 2 commits June 3, 2020 16:46

Merge branch 'kimadeline-convert-component-generator-to-ts'

4d912bc

Fix test fixtures.

cd07cf3

peterp added this to the next release milestone Jun 3, 2020

peterp added the next release label Jun 3, 2020

thedavidprice mentioned this pull request Jun 3, 2020

set jsx preserve in web/jsconfig redwoodjs/create-redwood-app#61

Merged

Merge pull request #1 from redwoodjs/kimadeline-convert-component-gen…

65b2753

…erator-to-ts Kimadeline convert component generator to ts

kimadeline commented Jun 3, 2020

View reviewed changes

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

peterp merged commit 9ea29e7 into redwoodjs:master Jun 3, 2020

kimadeline deleted the convert-component-generator-to-ts branch June 3, 2020 17:21

thedavidprice mentioned this pull request Jun 3, 2020

Audit CLI commands #594

Merged

thedavidprice mentioned this pull request Jun 4, 2020

Added Github Templates #618

Closed

16 tasks

realStandal mentioned this pull request Feb 25, 2021

TypeScript support for CLI function-generator #1854

Merged

pantheredeye mentioned this pull request Aug 16, 2022

Lint generated files #6218

Closed

Conversation

kimadeline commented May 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ What it does

🔮 What needs to be verified

🚧 What it doesn't do (yet)

👏 Credits

Uh oh!

jmreidy May 31, 2020

Choose a reason for hiding this comment

Uh oh!

thedavidprice Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jmreidy May 31, 2020

Choose a reason for hiding this comment

Uh oh!

kimadeline Jun 1, 2020

Choose a reason for hiding this comment

Uh oh!

thedavidprice Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

kimadeline Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

peterp commented Jun 2, 2020

Uh oh!

peterp left a comment

Choose a reason for hiding this comment

Uh oh!

peterp commented Jun 3, 2020

Uh oh!

thedavidprice commented Jun 3, 2020

Uh oh!

kimadeline commented Jun 3, 2020

Uh oh!

peterp commented Jun 3, 2020

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kimadeline commented May 31, 2020 •

edited

Loading