Skip to content

Commit

Permalink
chore(esm): convert crwa to esm and bundle (#9786)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
jtoar authored Jan 6, 2024
1 parent 6fbc5b8 commit 93b04f8
Show file tree
Hide file tree
Showing 20 changed files with 385 additions and 349 deletions.
26 changes: 25 additions & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'
Expand Down
72 changes: 31 additions & 41 deletions packages/create-redwood-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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:
Expand All @@ -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)
23 changes: 0 additions & 23 deletions packages/create-redwood-app/build.mjs

This file was deleted.

5 changes: 1 addition & 4 deletions packages/create-redwood-app/jest.config.js
Original file line number Diff line number Diff line change
@@ -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
23 changes: 11 additions & 12 deletions packages/create-redwood-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
34 changes: 34 additions & 0 deletions packages/create-redwood-app/scripts/build.js
Original file line number Diff line number Diff line change
@@ -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,
})
Loading

0 comments on commit 93b04f8

Please sign in to comment.