Bundle remix-dev

[mjackson]

We should bundle everything we can in the production build of remix-dev. The current way it is built is not optimal and was just done so we could have something that worked.

Goals

• Speed up install times when installing remix-dev. This is particularly noticeable when installing it on the fly with npx, i.e. npx @remix-run/dev ...
• Make remix-dev releases more predictable by effectively "vendoring" everything at publish time

Deep Imports

Some folks are deep-importing from @remix-run/dev. However, when we bundle it we won't have separate files in the @remix-run/dev npm package anymore, i.e. the file structure of the @remix-run/dev package will change. Instead of separate files in the Rollup output, we'll likely have a single index.js script.

Although we do not consider this to be a breaking change (we do not support deep imports in any of our packages) we would like to make sure that users who are deep importing from @remix-run/dev have a path forward after this work ships. As far as I can tell, the main thing people are importing is loadConfig. We could expose this on the public interface of @remix-run/dev like this:

import { loadConfig } from "@remix-run/dev";

I'd love to hear from anyone else who is deep importing something from @remix-run/dev to see if we can also support them. If you are doing this, please comment in this proposal. /cc @sergiodxa @kiliman @MichaelDeBoey Are you aware of anyone who is doing this?

In addition, after we make this change we should use package.json's exports field to make our exports in @remix-run/dev explicit.

Implementation Notes

• This work should build on our existing Rollup build and not introduce a dependency on any other bundler.

/cc @jacob-ebey for feedback on this proposal 🙏

[machour]

My favorite tool for this kind of questions: https://grep.app/search?current=3&q=%40remix-run/dev/

Here are some relevant hits in the open, including remix-vite & remix-flat-routes

import type { RemixConfig } from '@remix-run/dev/dist/config';
import type { ConfigRoute } from '@remix-run/dev/dist/config/routes';
import { getRouteModuleExports } from '@remix-run/dev/dist/compiler/routeExports';
import { defineRoutes } from '@remix-run/dev/config/routes'

[sergiodxa]

From my side I don't depend on @remix-run/dev on any of my open source libraries, only @remix-run/server-runtime

---

I like the idea to bundle the dev package, I think this installs many other dependencies right now but bundling them in a single (or a few) JS file(s) should help keep node_modules smaller.

[MichaelDeBoey]

Only one I can think of right now is the build import in the server file of our templates

import * as build from "@remix-run/dev/server-build";

[kentcdodds]

One way you could do this is by using the built-in bundleDependencies property in package.json. You're not actually doing any bundling with that. It's just shipping your node_modules for the listed deps to npm with your package: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#bundledependencies

[pcattori]

readConfig is something runtime/adapter authors need access to.

[jenseng]

yeah this would be great to support officially, eslint-plugin-remix-react-routes currently does a deep import 🙃