chore(esm): convert crwa to esm and bundle (#9786)

Follow up to #9783. This PR
converts the `create-redwood-app` package to ESM and bundles all its
dependencies. I started with `create-redwood-app` because the
requirements for making it ESM were relatively trivial compared to the
other packages since it just needs to be run by `yarn create`, and yarn
create just runs a bin.

For `create-redwood-app` I'm just using esbuild. Why not use tsup?
1. We're just distributing a bin. We're not distributing a dual-module
package with types
2. tsup hasn't been committed to in over a month and a half, whereas
esbuild releases often and is committed to more-or-less daily. That
doesn't automatically disqualify it (OSS is hard), but makes me wary.
I'll consider it for packages that distribute more than a bin

More on bundling. Bundling this package has benefits, namely decreasing
the install time—yarn doesn't have to fetch its dependencies, there are
none. But I'm mostly doing it as an exercise because we need to do it
more. For background on the shims (`jsBanner`) see
evanw/esbuild#1921. It's nothing bespoke and
it's what tsup[^tsup] and Vite[^vite] would've done anyway.

Other notes:

- Updates the package's `README.md`; this could be updated more but I
didn't want to spend too much time on it

- Adds e2e tests for the node version check

Two new e2e tests make sure we're checking node version correctly. I
can't use nvm since 1. it's not easily scriptable (it's a shell built-in
or something) and 2. it doesn't seem like we all use it, so I just added
these tests to CI and use the GitHub action to change the node version

- Fixes a bug I introduced in
#9728

The node version check would throw if it didn't pass because
`engines.yarn` was removed. This wasn't released

- Converted files to just `.js` since Node recognized them as ESM from
`type` in `package.json`

- Reordered `yarn create-redwood-app`'s options in help; I tried to put
the ones that were more likely to be used first

- Removed the header from `--help` and `--version`

[^tsup]:
https://github.com/egoist/tsup/blob/8c26e63c92711d60c05aedd3cdc358530ba266c5/assets/esm_shims.js
[^vite]:
https://github.com/vitejs/vite/blob/8de7bd2b68db27b83d9484cc8d4e26436615168e/packages/vite/rollup.config.ts#L288-L295

Author: jtoar

.github/workflows/ci.yml

@@ -750,11 +750,13 @@ jobs:
         env:
           PROJECT_PATH: ${{ env.PROJECT_PATH }}
 
-      - name: Prompt tests
+      - name: Install expect
         run: |
           sudo apt-get update
           sudo apt-get install expect
 
+      - name: Prompt tests
+        run: |
           ./tests/e2e_prompts.sh
           ./tests/e2e_prompts_git.sh
           ./tests/e2e_prompts_m.sh
@@ -764,6 +766,28 @@ jobs:
         env:
           PROJECT_PATH: ${{ env.PROJECT_PATH }}
 
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Prompt tests
+        run: ./tests/e2e_prompts_node_less.sh
+        working-directory: ./packages/create-redwood-app
+        env:
+          PROJECT_PATH: ${{ env.PROJECT_PATH }}
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+
+      - name: Prompt tests
+        run: ./tests/e2e_prompts_node_greater.sh
+        working-directory: ./packages/create-redwood-app
+        env:
+          PROJECT_PATH: ${{ env.PROJECT_PATH }}
+
   crwa-skip:
     needs: detect-changes
     if: needs.detect-changes.outputs.onlydocs == 'true'

packages/create-redwood-app/README.md

@@ -18,39 +18,35 @@
 
 <h2 align="center">Ship today with architecture for tomorrow.</h2>
 
-Redwood is an opinionated, edge-ready framework for modern multi-client applications, built on React, GraphQL, and Prisma with full TypeScript support and ready to go with zero config.
+Redwood is an opinionated framework for modern multi-client applications, built on React, GraphQL, and Prisma with full TypeScript support and ready to go with zero config.
 
 Want great developer experience and easy scaling? How about an integrated front- and back-end test suite, boilerplate code generators, component design, logging, API security + auth, and serverless or traditional deploy support? Redwood is here! Redwood works with the components and development workflow you love but with simple conventions and helpers to make your experience even better.
 
-<br>
-
 <h2>Quick Start</h2>
 
-Redwood requires Node.js >=14.x <=16.x and Yarn v1.15 (or newer).
-```console
-yarn create redwood-app redwood-project
-cd redwood-project
+Redwood requires Node.js =20.x.
+
+```bash
+yarn create redwood-app my-redwood-app
+cd my-redwood-app
+yarn install
 yarn redwood dev
 ```
 
 <h3>Resources</h3>
 
-- The [Redwood Tutorial](https://redwoodjs.com/docs/tutorial): The best way to learn Redwood
+- The [Redwood Tutorial](https://redwoodjs.com/docs/tutorial): the best way to learn Redwood
 - The [Redwood CLI](https://redwoodjs.com/docs/cli-commands): code generators, DB helpers, setup commands, and more
 - [Documentation](https://redwoodjs.com/docs) and [How To's](https://redwoodjs.com/how-to/custom-function)
 - Join the Community [Forums](https://community.redwoodjs.com) and [Chat](https://discord.gg/redwoodjs)
 
-<br>
-
-<h1>Contributing to create-redwood-app</h1>
+<h2>Contributing to create-redwood-app</h2>
 
-_Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contributing). And don't hesitate to ask for help on the forums and chat_
+_Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contributing). And don't hesitate to ask for help on the forums and chat_.
 
 **Table of Contents**
 <!-- toc -->
 - [Description](#description)
-- [Package Leads](#package-leads)
-- [Roadmap](#roadmap)
 - [Local Development](#local-development)
   - [Installation Script](#installation-script)
   - [Template Codebase](#template-codebase)
@@ -60,55 +56,45 @@ _Contributors are Welcome! Get started [here](https://redwoodjs.com/docs/contrib
 ## Description
 
 This package creates and installs a Redwood project, which is the entry point for anyone using Redwood. It has two parts:
-- The installation script `create-redwood-app.js`
-- Project template code in the `template/` directory
-
-> _For information about contributing to the Redwood Framework in general, [please start here](https://redwoodjs.com/docs/contributing)._
-
-## Package Leads
-- [@peterp](https://github.com/peterp)
-- [@thedavidprice](https://github.com/thedavidprice)
-
-## Roadmap
-
-v1 Priorities:
-- convert `template/` codebase to TypeScript
-- add option to install as either TypeScript or JavaScript project (defaults to TypeScript)
-- add package tests, which may be accomplished by including in Cypress E2E CI
+- The installation script [`src/create-redwood-app.js`](./src/create-redwood-app.js)
+- Project template code in the [`templates/`](./templates/) directory
 
 ## Local Development
 
 ### Installation Script
-The installation script is built with [Yargs](https://github.com/yargs/yargs)
+
+The installation script is built with [Yargs](https://github.com/yargs/yargs).
 
 ### Template Codebase
-The project codebase in `template/` uses [Yarn Workspace v1](https://classic.yarnpkg.com/en/docs/workspaces/) for a monorepo project containing the API and Web Sides. Redwood packages are included in `template/package.json`, `template/web/package.json`, and `template/api/package.json`, respectively.
 
-### How to run create-redwood-app from your local repo and create a project
+The project codebase in [`templates/`](./templates/) uses [Yarn Workspaces](https://yarnpkg.com/features/workspaces) for a monorepo project containing the API and Web Sides. Redwood packages are included in `templates/ts/package.json`, `templates/ts/web/package.json`, and `templates/ts/api/package.json`, respectively.
+
+### How to run `create-redwood-app` from your local repo and create a project
+
 First, run the following commands in the root of the monorepo:
+
 ```bash
 yarn install
 yarn build
 ```
 
-Then, we need to navigate to the create redwood app package and build the script:
+Then, navigate to the create redwood app package:
+
 ```bash
 cd packages/create-redwood-app
-yarn build
 ```
 
-_Note:_ You can also use `yarn build:watch` instead of `yarn build` to watch for changes and rebuild automatically.
-
-This will generate the `create-redwood-app.js` file inside the `dist` directory.
+Run `yarn node` on the built file (`dist/create-redwood-app.js`) and pass in the path to the new project:
 
-To use the script, run `node` on that file (dist/create-redwood-app.js) and pass in the path to the new project:
 ```bash
-node dist/create-redwood-app.js /path/to/new/redwood-app
+yarn node ./dist/create-redwood-app.js /path/to/new/redwood-app
 ```
 
-> Note: the new project will install with the most recent major Redwood package version by default
+> [!NOTE]
+> the new project will install with the most recent major Redwood package version by default.
 
 ### How to run other published versions for debugging
+
 By default yarn create will pick the latest stable version to run, but you can specify a different version via yarn too!
 
 To try the canary version, run:
@@ -121,12 +107,16 @@ Note that this will still create a project with the latest stable version, but r
 You can specify any tag or version instead of `@canary`
 
 ### Develop using the new project
+
 There are three options for developing with the installed project:
 
 **1. Upgrade the project to use the latest canary release**
+
 ```bash
 cd /path/to/new/redwood-app
 yarn rw upgrade -t canary
 ```
+
 **2. Use the workflow and tools for local package development**
-- [Local Development Instructions](https://github.com/redwoodjs/redwood/blob/main/CONTRIBUTING.md#local-development)
+
+- [Local Development Instructions](https://github.com/redwoodjs/redwood/blob/main/CONTRIBUTING.md)

packages/create-redwood-app/build.mjs

@@ -1,8 +1,5 @@
 /** @type {import('jest').Config} */
-const config = {
-  testMatch: ['<rootDir>/tests/*.test.mjs'],
+export default {
   testPathIgnorePatterns: ['/node_modules/', '<rootDir>/templates/'],
   transform: {},
 }
-
-module.exports = config

packages/create-redwood-app/jest.config.js

@@ -7,48 +7,47 @@
     "directory": "packages/create-redwood-app"
   },
   "license": "MIT",
+  "type": "module",
   "bin": "./dist/create-redwood-app.js",
   "files": [
     "dist",
     "templates"
   ],
   "scripts": {
-    "build": "yarn node ./build.mjs",
+    "build": "node ./scripts/build.js",
     "build:pack": "yarn pack -o create-redwood-app.tgz",
     "build:watch": "nodemon --watch src --ignore dist,template --exec \"yarn build\"",
     "prepublishOnly": "NODE_ENV=production yarn build",
-    "set-up-test-project": "node ./scripts/setUpTestProject.mjs",
+    "set-up-test-project": "node ./scripts/setUpTestProject.js",
     "test": "node --experimental-vm-modules $(yarn bin jest) templates",
     "test:e2e": "node --experimental-vm-modules $(yarn bin jest) e2e",
-    "ts-to-js": "yarn node ./scripts/tsToJS.mjs"
+    "ts-to-js": "yarn node ./scripts/tsToJS.js"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.22.20",
+    "@babel/plugin-transform-typescript": "^7.22.15",
     "@opentelemetry/api": "1.7.0",
     "@opentelemetry/exporter-trace-otlp-http": "0.45.1",
     "@opentelemetry/resources": "1.18.1",
     "@opentelemetry/sdk-trace-node": "1.18.1",
     "@opentelemetry/semantic-conventions": "1.18.1",
     "@redwoodjs/tui": "6.0.7",
+    "@types/babel__core": "7.20.4",
     "chalk": "4.1.2",
     "check-node-version": "4.2.1",
     "ci-info": "4.0.0",
     "envinfo": "7.11.0",
+    "esbuild": "0.19.9",
     "execa": "5.1.1",
     "fs-extra": "11.2.0",
+    "jest": "29.7.0",
+    "klaw-sync": "6.0.0",
     "semver": "7.5.4",
     "systeminformation": "5.21.20",
     "terminal-link": "2.1.1",
     "untildify": "4.0.0",
     "uuid": "9.0.1",
     "yargs": "17.7.2"
   },
-  "devDependencies": {
-    "@babel/core": "^7.22.20",
-    "@babel/plugin-transform-typescript": "^7.22.15",
-    "@types/babel__core": "7.20.4",
-    "esbuild": "0.19.9",
-    "jest": "29.7.0",
-    "klaw-sync": "6.0.0"
-  },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }

packages/create-redwood-app/package.json

@@ -0,0 +1,34 @@
+/* eslint-env node */
+
+import * as esbuild from 'esbuild'
+import fs from 'fs-extra'
+
+const jsBanner = `\
+#!/usr/bin/env node
+
+const require = (await import("node:module")).createRequire(import.meta.url);
+const __filename = (await import("node:url")).fileURLToPath(import.meta.url);
+const __dirname = (await import("node:path")).dirname(__filename);
+`
+
+const result = await esbuild.build({
+  entryPoints: ['src/create-redwood-app.js'],
+  outdir: 'dist',
+
+  platform: 'node',
+  target: ['node20'],
+  format: 'esm',
+  bundle: true,
+  banner: {
+    js: jsBanner,
+  },
+
+  minify: true,
+
+  logLevel: 'info',
+  metafile: true,
+})
+
+await fs.writeJSON(new URL('./meta.json', import.meta.url), result.metafile, {
+  spaces: 2,
+})