chore(CRWA): convert to ESM

packages/create-redwood-app/build.mjs

@@ -8,13 +8,15 @@ import * as esbuild from 'esbuild'
 // instead of using the catch-all `packages: 'external'` option.
 const result = await esbuild.build({
   entryPoints: ['src/create-redwood-app.js'],
+  format: 'esm',
   bundle: true,
   platform: 'node',
   target: ['node18'],
   // See https://esbuild.github.io/getting-started/#bundling-for-node.
   packages: 'external',
   outfile: 'dist/create-redwood-app.js',
   minify: true,
+  logLevel: 'info',
 
   // For visualizing the bundle.
   // See https://esbuild.github.io/api/#metafile and https://esbuild.github.io/analyze/.

packages/create-redwood-app/package.json

@@ -1,6 +1,7 @@
 {
   "name": "create-redwood-app",
   "version": "5.0.0",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/redwoodjs/redwood.git",
@@ -14,8 +15,7 @@
   ],
   "scripts": {
     "build": "yarn node ./build.mjs",
-    "build:watch": "nodemon --watch src --ignore dist,template --exec \"yarn build\"",
-    "prepublishOnly": "NODE_ENV=production yarn build"
+    "test": "yarn node --test-reporter spec ./tests/template.test.js"
   },
   "dependencies": {
     "@opentelemetry/api": "1.4.1",

packages/create-redwood-app/src/create-redwood-app.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
-import path from 'path'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import chalk from 'chalk'
@@ -14,13 +15,21 @@ import yargs from 'yargs/yargs'
 
 import { RedwoodTUI, ReactiveTUIContent, RedwoodStyling } from '@redwoodjs/tui'
 
-import { name, version } from '../package'
-
+// In ESM, for relative paths, the extension is important.
+// See https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#mandatory-file-extensions.
 import {
   startTelemetry,
   shutdownTelemetry,
   recordErrorViaTelemetry,
-} from './telemetry'
+} from './telemetry.js'
+
+// JSON modules aren't stable yet, but if they were we could use them instead.
+// See https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#json-modules.
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const { name, version } = fs.readJSONSync(
+  path.resolve(__dirname, '../package.json')
+)
 
 // Telemetry
 const { telemetry } = Parser(hideBin(process.argv))
@@ -152,7 +161,7 @@ async function executeCompatibilityCheck(templateDir, yarnInstall) {
  */
 function checkNodeAndYarnVersion(templateDir) {
   return new Promise((resolve) => {
-    const { engines } = require(path.join(templateDir, 'package.json'))
+    const { engines } = fs.readJSONSync(path.join(templateDir, 'package.json'))
 
     checkNodeVersionCb(engines, (_error, result) => {
       return resolve([result.isSatisfied, result.versions])

packages/create-redwood-app/src/telemetry.js

@@ -1,3 +1,6 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
 import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api'
 import opentelemetry, { SpanStatusCode } from '@opentelemetry/api'
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
@@ -9,9 +12,14 @@ import {
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
 import ci from 'ci-info'
 import envinfo from 'envinfo'
+import fs from 'fs-extra'
 import system from 'systeminformation'
 
-import { name as packageName, version as packageVersion } from '../package'
+// JSON modules aren't stable yet, but if they were we could use them instead.
+// See https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#json-modules.
+const { name: packageName, version: packageVersion } = fs.readJSONSync(
+  path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../package.json')
+)
 
 /**
  * @type NodeTracerProvider

packages/create-redwood-app/tests/template.test.js

@@ -0,0 +1,106 @@
+/* eslint-env node, es2022 */
+
+import assert from 'node:assert'
+import fs from 'node:fs'
+import path from 'node:path'
+import { test } from 'node:test'
+import { fileURLToPath } from 'node:url'
+
+const TEMPLATE_PATH = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../template'
+)
+
+const EXPECTED_FILES = [
+  '/.editorconfig',
+  '/.env',
+  '/.env.defaults',
+  '/.env.example',
+  '/.nvmrc',
+  '/.vscode/extensions.json',
+  '/.vscode/launch.json',
+  '/.vscode/settings.json',
+  '/.yarn/releases/yarn-3.5.0.cjs',
+  '/.yarnrc.yml',
+  '/README.md',
+  '/api/db/schema.prisma',
+  '/api/jest.config.js',
+  '/api/package.json',
+  '/api/server.config.js',
+  '/api/src/directives/requireAuth/requireAuth.test.ts',
+  '/api/src/directives/requireAuth/requireAuth.ts',
+  '/api/src/directives/skipAuth/skipAuth.test.ts',
+  '/api/src/directives/skipAuth/skipAuth.ts',
+  '/api/src/functions/graphql.ts',
+  '/api/src/graphql/.keep',
+  '/api/src/lib/auth.ts',
+  '/api/src/lib/db.ts',
+  '/api/src/lib/logger.ts',
+  '/api/src/services/.keep',
+  '/api/tsconfig.json',
+  '/gitignore.template',
+  '/graphql.config.js',
+  '/jest.config.js',
+  '/package.json',
+  '/prettier.config.js',
+  '/redwood.toml',
+  '/scripts/.keep',
+  '/scripts/seed.ts',
+  '/scripts/tsconfig.json',
+  '/web/jest.config.js',
+  '/web/package.json',
+  '/web/public/README.md',
+  '/web/public/favicon.png',
+  '/web/public/robots.txt',
+  '/web/src/App.tsx',
+  '/web/src/Routes.tsx',
+  '/web/src/components/.keep',
+  '/web/src/index.css',
+  '/web/src/index.html',
+  '/web/src/layouts/.keep',
+  '/web/src/pages/FatalErrorPage/FatalErrorPage.tsx',
+  '/web/src/pages/NotFoundPage/NotFoundPage.tsx',
+  '/web/tsconfig.json',
+].sort()
+
+// If you add, move, or remove a file from the create-redwood-app template,
+// you'll have to update this test.
+test("the file structure hasn't unintentionally changed", () => {
+  // Sort because files are not always reported in the same order as the list
+  assert.deepStrictEqual(walk(TEMPLATE_PATH).sort(), EXPECTED_FILES)
+})
+
+/**
+ * Get all the files in a directory.
+ *
+ * @param {string} dir
+ * @returns string[]
+ */
+function walk(dir) {
+  /** @type {string[]} */
+  let files = []
+
+  const fileList = fs.readdirSync(dir)
+
+  fileList.forEach((file) => {
+    file = path.join(dir, file)
+
+    const stat = fs.statSync(file)
+
+    if (!stat) {
+      throw new Error(`Failed to get stats for ${file}`)
+    }
+
+    if (stat.isDirectory()) {
+      // Recurse into directory
+      files = files.concat(walk(file))
+    } else {
+      // It's a file
+      files.push(file)
+    }
+  })
+
+  return files.map((file) =>
+    file.replace(TEMPLATE_PATH, '').split(path.sep).join(path.posix.sep)
+  )
+}