Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(crwa): decouple JS preference from yarn install step, remove yarn1 option #8191

Merged
merged 31 commits into from
May 5, 2023

Conversation

jtoar
Copy link
Contributor

@jtoar jtoar commented May 2, 2023

In yarn create redwood-app, the JS language preference has a dependency on the install step (which isn't without its issues #8164). This means if install fails, the user gets a TS project. This is because we convert the TS template to JS on the fly, using the Redwood CLI's ts-to-js command, so the CLI has to be installed for us to run int. This coupling isn't ideal.

We thought about a few ways of decoupling the JS language preference from the install step. Here I'm proposing we add a JS template to the create-redwood-app package. This JS template is derived from the TS template, so that one remains the source of truth. Basically, I ran the ts-to-js command (now a script in create-redwood-app) and am just caching its result.

The tradeoff here is

  1. we're shipping more files in create-redwood-app
  2. we have to remember to regenerate it when the TS one changes

I think both of these tradeoffs are worth it.

This PR also

  • removes yarn1 as an option from yarn create redwood-app
  • removes the ts-to-js command from the CLI
  • adds more CRWA tests
  • removes the .nvmrc file in the template

This reason this PR has a lot of files changed is that I've nested the existing template inside a new templates/ts directory. The diff also isn't too helpful since git seems a little confused about which files were moved vs which ones are new, so I've left comments where I thought they'd be helpful.

Todos:

  • add formatting/linting to ts-to-js script

@jtoar jtoar added the release:fix This PR is a fix label May 2, 2023

// Engine check
await executeCompatibilityCheck(templateDir, yarnInstall)
await executeCompatibilityCheck(path.join(templatesDir, 'ts'), yarnInstall)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The engines will never be different between the TS and JS templates, but since the TS one is the source of truth, we use it here for the engines check.

@@ -27,7 +27,7 @@
},
"typeRoots": ["../node_modules/@types", "./node_modules/@types"],
"types": ["jest", "@testing-library/jest-dom"],
"jsx": "preserve",
"jsx": "preserve"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This trailing comma actually isn't valid JSON. VS Code doesn't complain but Node.js APIs do.

@jtoar jtoar added the fixture-ok Override the test project fixture check label May 2, 2023
Copy link
Contributor

@thedavidprice thedavidprice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Despite the possible overhead (keeping the JS and TS templates in sync; adding code to the package), I think this is the most elegant and performant solution. Well done 👍

A couple of change requests in the comments for you to look at.

Lastly, could you add a GH Action similar to the "update fixture" that looks for changes in /templates and requires a manual label to "approve". That plus the release tooling step you're adding is enough sanity check for me.

🚀

packages/cli/src/commands/ts-to-js.js Outdated Show resolved Hide resolved
packages/create-redwood-app/template/.nvmrc Outdated Show resolved Hide resolved
tasks/release/releaseCommand.mjs Show resolved Hide resolved
tasks/release/releaseCommand.mjs Outdated Show resolved Hide resolved
@Josh-Walker-GM
Copy link
Collaborator

Josh-Walker-GM commented May 2, 2023

Did we consider a standalone dlx or npx command, or similar, as a possible solution to the ts-to-js step? Would seem natural to me given you'd only pay the price of dependencies if you wanted that step and we wouldn't need any framework side changes?

Copy link
Contributor Author

jtoar commented May 2, 2023

Haven’t explored that solution yet. Just wanted to see what this entailed. Something I didn’t like about a dlx or npx command is that it’s a dlx or npx command—another install step. And here you’re not paying the price of dependencies either, unless you mean the extra template files which I don’t think adds up to much but I’ll confirm the exact size increase. And we would need framework-side changes for ts-to-js as a dlx or npx command: we’d be publishing another package. (Not that that’s difficult or anything)

@Tobbe
Copy link
Member

Tobbe commented May 2, 2023

Another idea: Can the templates be separate packages? Added benefit is that you can then do yarn create redwood-app --version 5.0.1 and you'd get that version of the template (and of course, with that, that same version of all of the RW packages)

@@ -14,7 +14,7 @@
"check": "yarn node ./tasks/check/check.mjs",
"clean:prisma": "rimraf node_modules/.prisma/client && node node_modules/@prisma/client/scripts/postinstall.js",
"e2e": "node ./tasks/run-e2e",
"lint": "RWJS_CWD=packages/create-redwood-app/template eslint --config .eslintrc.js packages",
"lint": "RWJS_CWD=packages/create-redwood-app/templates/ts eslint --config .eslintrc.js --ignore-pattern Routes.js packages",
Copy link
Contributor Author

@jtoar jtoar May 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yarn lint complains about the Routes.js file in the JS template. It says something like "NotFoundPage" isn't defined, which is true, but it doesn't understand that Redwood projects take care of importing it. While we need a more straightforward linting setup, I don't think it should be done in this PR

@jtoar jtoar marked this pull request as ready for review May 4, 2023 22:58
@jtoar jtoar merged commit 91de4c4 into main May 5, 2023
@jtoar jtoar deleted the ds-crwa/add-js-template,process-for-converting branch May 5, 2023 19:01
@redwoodjs-bot redwoodjs-bot bot added this to the next-release milestone May 5, 2023
jtoar added a commit that referenced this pull request May 5, 2023
…arn1` option (#8191)

* wip

* fix: decouple js preference from yarn install

* add tests

* rm ts2js export

* fix lint and lint fix

* fix run e2e script

* test project script updates

* add back ts-to-js

* add .nvmrc back

* deprecate ts to js

* add back ts2js in internal

* use babel instead of esbuild to preserve comments

* lint fix

* add prettier step, .nvmrc file to js template

* style

* fix yarn check

* update crwa snapshot

* ignore js template routes file in linting

* fix yarn versions

* fix tsconfig to jsconfig transformation

* handle script files

* wip update release command

* log section

* comment delete jsConfig allowJS line

* wip

* add action to catch changes to crwa ts template

* style
@jtoar jtoar modified the milestones: next-release, v5.1.0 May 9, 2023
@Tobbe Tobbe mentioned this pull request May 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fixture-ok Override the test project fixture check release:fix This PR is a fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants