feat(cli): Build as ESM (#52)

Author: Tobbe

packages/cli-helpers/src/lib/project.ts

@@ -37,7 +37,7 @@ export const getInstalledRedwoodVersion = () => {
     const packageJson = require('../../package.json')
     return packageJson.version
   } catch {
-    console.error(colors.error('Could not find installed redwood version'))
+    console.error(colors.error('Could not find installed Redmix version'))
     process.exit(1)
   }
 }

packages/cli-packages/dataMigrate/vitest.config.mts

@@ -7,7 +7,10 @@ export default defineConfig({
     // TODO: Remove this when we've made babel-config ESM+CJS dual build
     // https://stackoverflow.com/a/77439684/88106
     alias: {
-      '@redmix/babel-config': path.resolve(__dirname, '../../babel-config/src'),
+      '@redmix/babel-config': path.resolve(
+        import.meta.dirname,
+        '../../babel-config/src',
+      ),
     },
   },
 })

packages/cli/build.mts

@@ -4,9 +4,9 @@ import { fileURLToPath } from 'node:url'
 
 import fg from 'fast-glob'
 
-import { build, defaultIgnorePatterns } from '@redmix/framework-tools'
+import { buildEsm, defaultIgnorePatterns } from '@redmix/framework-tools'
 
-await build()
+await buildEsm()
 
 // The CLI depends on assets like templates files
 // that esbuild won't copy over. So we do it manually here.

packages/cli/package.json

@@ -8,6 +8,7 @@
     "directory": "packages/cli"
   },
   "license": "MIT",
+  "type": "module",
   "bin": {
     "redwood": "./dist/index.js",
     "rw": "./dist/index.js",
@@ -52,7 +53,7 @@
     "change-case": "4.1.2",
     "ci-info": "4.0.0",
     "concurrently": "8.2.2",
-    "configstore": "3.1.5",
+    "configstore": "7.0.0",
     "core-js": "3.38.1",
     "cross-env": "7.0.3",
     "decamelize": "5.0.1",

packages/cli/src/__tests__/cwd.test.js

@@ -10,9 +10,6 @@ console.log('BASE_DIR:', BASE_DIR)
 console.log('CLI:', CLI)
 
 function rw(args, options) {
-  console.log('test cwd', BASE_DIR)
-  console.log('args', args)
-  console.log('options', options)
   const { status, stdout, stderr } = spawnSync('node', [CLI, ...args], {
     cwd: BASE_DIR,
     ...options,

packages/cli/src/commands/buildHandler.js

@@ -1,4 +1,5 @@
-import path from 'path'
+import { createRequire } from 'node:module'
+import path from 'node:path'
 
 import execa from 'execa'
 import fs from 'fs-extra'
@@ -89,6 +90,12 @@ export const handler = async ({
     side.includes('web') && {
       title: 'Building Web...',
       task: async () => {
+        // Disable the new warning in Vite v5 about the CJS build being deprecated
+        // so that users don't have to see it when this command is called with --verbose
+        process.env.VITE_CJS_IGNORE_WARNING = 'true'
+
+        const createdRequire = createRequire(import.meta.url)
+
         // @NOTE: we're using the vite build command here, instead of the
         // buildWeb function directly because we want the process.cwd to be
         // the web directory, not the root of the project.
@@ -98,12 +105,8 @@ export const handler = async ({
         // it could affect other things that run in parallel while building.
         // We don't have any parallel tasks right now, but someone might add
         // one in the future as a performance optimization.
-        //
-        // Disable the new warning in Vite v5 about the CJS build being deprecated
-        // so that users don't have to see it when this command is called with --verbose
-        process.env.VITE_CJS_IGNORE_WARNING = 'true'
         await execa(
-          `node ${require.resolve(
+          `node ${createdRequire.resolve(
             '@redmix/vite/bins/rw-vite-build.mjs',
           )} --webDir="${rwjsPaths.web.base}" --verbose=${verbose}`,
           {

packages/cli/src/commands/check.js

@@ -8,36 +8,25 @@ export const aliases = ['diagnostics']
 export const description =
   'Get structural diagnostics for a Redwood project (experimental)'
 
-export const handler = () => {
-  recordTelemetryAttributes({
-    command: 'check',
-  })
-  // Deep dive
-  //
-  // It seems like we have to use `require` here instead of `await import`
-  // because of how Babel builds the `DiagnosticSeverity` export in `@redmix/structure`:
-  //
-  // ```js
-  // _Object$defineProperty(exports, "DiagnosticSeverity", {
-  //   enumerable: true,
-  //   get: function () {
-  //     return _vscodeLanguageserverTypes.DiagnosticSeverity;
-  //   }
-  // });
-  // ```
-  //
-  // I'm not sure why, but with `await import`, `DiagnosticSeverity` is `undefined`
-  // so it seems like `await import` doesn't execute the getter function.
-  const { printDiagnostics, DiagnosticSeverity } = require('@redmix/structure')
+export const handler = async () => {
+  recordTelemetryAttributes({ command: 'check' })
+
+  const { printDiagnostics, DiagnosticSeverity } = (
+    await import('@redmix/structure')
+  ).default
+
+  console.log('DiagnosticServerity', DiagnosticSeverity)
 
   printDiagnostics(getPaths().base, {
     getSeverityLabel: (severity) => {
       if (severity === DiagnosticSeverity.Error) {
         return c.error('error')
       }
+
       if (severity === DiagnosticSeverity.Warning) {
         return c.warning('warning')
       }
+
       return c.info('info')
     },
   })

packages/cli/src/commands/consoleHandler.js

@@ -1,5 +1,6 @@
-import path from 'path'
-import repl from 'repl'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import repl from 'node:repl'
 
 import fs from 'fs-extra'
 
@@ -11,7 +12,8 @@ import { getPaths } from '../lib/index.js'
 const paths = getPaths()
 
 const loadPrismaClient = (replContext) => {
-  const { db } = require(path.join(paths.api.lib, 'db'))
+  const createdRequire = createRequire(import.meta.url)
+  const { db } = createdRequire(path.join(paths.api.lib, 'db'))
   // workaround for Prisma issue: https://github.com/prisma/prisma/issues/18292
   db[Symbol.for('nodejs.util.inspect.custom')] = 'PrismaClient'
   replContext.db = db

packages/cli/src/commands/destroy/cell/cell.js

@@ -1,4 +1,4 @@
-import { files as cellFiles } from '../../generate/cell/cell.js'
+import { files as cellFiles } from '../../generate/cell/cellHandler.js'
 import { createYargsForComponentDestroy, createHandler } from '../helpers.js'
 
 export const { command, description, builder } = createYargsForComponentDestroy(

packages/cli/src/commands/destroy/scaffold/scaffold.js

@@ -1,4 +1,4 @@
-import { createHandler } from '../helpers'
+import { createHandler } from '../helpers.js'
 
 export const command = 'scaffold <model>'
 export const description =