feat(remix-dev/cli/migrate): add convert-to-javascript migration

[MichaelDeBoey]

When working on supporting the isTypeScript variable in remix.init in our default stacks (see remix-run/indie-stack#63, remix-run/blues-stack#57 & remix-run/grunge-stack#50), I needed a way to transform all import statements in files outside the app folder from

import Prisma from 'prisma';
import { foo } from 'bar';

to

const Prisma = require('prisma');
const { foo } = require('bar');

As discussed with @kentcdodds & @mcansh, it would be a good idea to do this transform for all stacks, so we came to the conclusion that we should have something inside the @remix-run/dev package for that.

We're currently already have a convertTemplateToJavaScript function, that's used in our create command

remix/packages/remix-dev/cli/create.ts

Lines 206 to 208 in 4675aef

	if (!useTypeScript) {
	await convertTemplateToJavaScript(projectDir);
	}

but as it's name says, that's only converting all files from TS to JS (which in practice is just removing all type-related things and leave the rest of the code as-is).

remix/packages/remix-dev/cli/convert-to-javascript.ts

Lines 16 to 23 in 4675aef

	let result = babel.transformSync(source, {
	filename,
	presets: [[babelPresetTypeScript, { jsx: "preserve" }]],
	plugins: [babelPluginSyntaxJSX],
	compact: false,
	retainLines: true,
	cwd: projectDir,
	});

This PR will add the necessary changes to the import statements in all files outside the app folder.

I took the liberty to also include @mcansh's changes to convertTemplateToJavaScript from #3012, as these are also some changes that all stacks could benefit from.

To see how this transform works, you can watch it on AST explorer.

---

I'll create a follow-up PR to remove the convertTemplateToJavaScript function from the create command & replace it by this new migration.

[kentcdodds]

This is looking good!

[kentcdodds]

I think we want to remove as much as possible without reducing the level of confidence that the feature works. I should write a blog post about this, but it's related to what I talk about here: https://kcd.im/aha-testing. Most of those routes don't need to be there for example. Let's reduce it down to as little as possible please. Thanks!

[MichaelDeBoey]

Kept the index route from the templates in app/routes + removed all non-JS/TS-files outside app

[pcattori]

@MichaelDeBoey : Organizationally, this doesn't fit into migrations since migrations are for moving users towards compatibility with newer Remix versions and conceptually are moving users towards what we think is a better way.

But convert-to-javascript is more of a stand-alone utility for users who prefer JS, isn't about upgrading Remix versions, and moves away from our recommendation to use TS. Maybe this is just a naming thing, but I'd like to explore a different namespace for this other than migrations. We can still reuse all the migration utils for it. Maybe we don't find something else better than migrations, but I think its worth considering.

[MichaelDeBoey]

@pcattori I can't think of another/better name tbh.
If you don't want it to be public, we can always remove it from the list?

I wouldn't say migrations are only for updating remix versions though, as we can do all sort of things with it I think.

The idea came from a codemod kind of view and because we were doing more than only changing code, it made sense to rename it to migrations, but I don't think we should limit it to only update remix versions.
We could even create a migration to automate a transition from other frameworks (like CRA of Next) to Remix at one point if we ever want to have that.

[kentcdodds]

I've asked @chaance to work on moving stuff out of the CLI this week (including the migrations stuff). We'll still keep the option, but we're going to move the code into a separate package (which the CLI would basically run npx for). The goal is to slim down the CLI package and remove everything that's not frequently used.

I think this could probably go into that package when he's gotten that set up. I'll ping Chance about this so he's aware that the package he's working on may be for more than just "migrations." It's more for "one-time-scripts" generally. Maybe it could be called @remix-run/scripts.

[MichaelDeBoey]

Once the refactor is finished, I'm happy to rebase my PR & move files accordingly.

On the naming part: @remix-run/scripts sounds more like an internal package to me tbh.
Can't think of a better name than migrations or scripts though 🤔😕

[kentcdodds]

FWIW, there's react-scripts which isn't an internal package.

Also, people won't be interfacing with @remix-run/scripts directly very often anyway, so I think it's ok.

[mcansh]

I'm not super familiar (or at all 🙈 actually) with jscodeshift, but this LGTM

[kentcdodds]

I'm sorry I haven't had a chance to review this PR yet. We're going to need to hold off for a little while longer while we decide some stuff on the scripts package.

[kentcdodds]

We decided to wait on the scripts package. Reviewing now.

[kentcdodds]

This looks good to me 👍 Thank you for working on this!

[kentcdodds]

@chaance, when the next release goes out, let's add this to the release notes for this one:

As usual, the Remix CLI will prompt developers whether they want to remove TypeScript if the template includes a tsconfig.json file. Previously, only the TypeScript files in the app directory were updated to JavaScript. Now all files in the project will be converted to JavaScript. Make sure you account for this in your remix.init script.

[MichaelDeBoey]

We decided to wait on the scripts package.

@kentcdodds I think you meant "not to wait..."? 🙈

@chaance, when the next release goes out, let's add this to the release notes for this one:

This is not correct though.
This PR is only adding the migration.

The move in the CLI will happen in a follow-up PR, as I didn't want to clutter this PR to much and really keep it focussed on the migration itself.

[kentcdodds]

Correct on both counts 😅 thanks @MichaelDeBoey

[MichaelDeBoey]

@kentcdodds This migration will be internally used once #3529 is merged

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-556cd2c-20220621 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!