chore(build): refactoring cjs type generation (#11312)

Where it has been possible I have refactored the type generation for CJS
types in our dual packages to work differently. Instead of just
different values in the tsconfig I have used the same values but
temporarily places a type:commonjs package.json file during the CJS type
generation. This is a better approach than having two different - and
potentially conflicting - sets of tsconfig settings.

packages/auth-providers/dbAuth/middleware/build.mts

@@ -1,32 +1,30 @@
-import { writeFileSync } from 'node:fs'
-
 import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
-import { generateCjsTypes } from '@redwoodjs/framework-tools/cjsTypes'
+import {
+  generateTypesCjs,
+  generateTypesEsm,
+  insertCommonJsPackageJson,
+} from '@redwoodjs/framework-tools/generateTypes'
 
-// CJS build
+// ESM build
 await build({
   buildOptions: {
     ...defaultBuildOptions,
-    outdir: 'dist/cjs',
+    format: 'esm',
     packages: 'external',
   },
 })
+await generateTypesEsm()
 
-// ESM build
+// CJS build
 await build({
   buildOptions: {
     ...defaultBuildOptions,
-    format: 'esm',
+    outdir: 'dist/cjs',
     packages: 'external',
   },
 })
-
-// Place a package.json file with `type: commonjs` in the dist/cjs folder so that
-// all .js files are treated as CommonJS files.
-writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
-
-// Place a package.json file with `type: module` in the dist folder so that
-// all .js files are treated as ES Module files.
-writeFileSync('dist/package.json', JSON.stringify({ type: 'module' }))
-
-await generateCjsTypes()
+await generateTypesCjs()
+await insertCommonJsPackageJson({
+  buildFileUrl: import.meta.url,
+  cjsDir: 'dist/cjs',
+})

packages/auth-providers/dbAuth/middleware/package.json

@@ -26,10 +26,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsx ./build.mts && yarn build:types",
+    "build": "tsx ./build.mts",
     "build:pack": "yarn pack -o redwoodjs-auth-dbauth-middleware.tgz",
     "build:types": "tsc --build --verbose ./tsconfig.json",
-    "build:types-cjs": "tsc --build --verbose tsconfig.types-cjs.json",
+    "build:types-cjs": "tsc --build --verbose tsconfig.cjs.json",
     "check:attw": "yarn attw -P",
     "check:package": "concurrently npm:check:attw yarn:publint",
     "prepublishOnly": "NODE_ENV=production yarn build",

packages/auth-providers/dbAuth/middleware/tsconfig.types-cjs.json → packages/auth-providers/dbAuth/middleware/tsconfig.cjs.json

@@ -2,6 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "dist/cjs",
-    "tsBuildInfoFile": "./tsconfig.types-cjs.tsbuildinfo"
+    "tsBuildInfoFile": "./tsconfig.cjs.tsbuildinfo"
   }
 }

packages/auth-providers/dbAuth/middleware/tsconfig.json

@@ -4,8 +4,9 @@
     "strict": true,
     "rootDir": "src",
     "outDir": "dist",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
   },
   "include": ["src/**/*"],
   "references": [

packages/auth-providers/supabase/middleware/build.mts

@@ -1,32 +1,30 @@
-import { writeFileSync } from 'node:fs'
-
 import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
-import { generateCjsTypes } from '@redwoodjs/framework-tools/cjsTypes'
+import {
+  generateTypesCjs,
+  generateTypesEsm,
+  insertCommonJsPackageJson,
+} from '@redwoodjs/framework-tools/generateTypes'
 
-// CJS build
+// ESM build
 await build({
   buildOptions: {
     ...defaultBuildOptions,
-    outdir: 'dist/cjs',
+    format: 'esm',
     packages: 'external',
   },
 })
+await generateTypesEsm()
 
-// ESM build
+// CJS build
 await build({
   buildOptions: {
     ...defaultBuildOptions,
-    format: 'esm',
+    outdir: 'dist/cjs',
     packages: 'external',
   },
 })
-
-// Place a package.json file with `type: commonjs` in the dist/cjs folder so that
-// all .js files are treated as CommonJS files.
-writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
-
-// Place a package.json file with `type: module` in the dist folder so that
-// all .js files are treated as ES Module files.
-writeFileSync('dist/package.json', JSON.stringify({ type: 'module' }))
-
-await generateCjsTypes()
+await generateTypesCjs()
+await insertCommonJsPackageJson({
+  buildFileUrl: import.meta.url,
+  cjsDir: 'dist/cjs',
+})

packages/auth-providers/supabase/middleware/package.json

@@ -27,10 +27,10 @@
     "cjsWrappers"
   ],
   "scripts": {
-    "build": "tsx ./build.mts && yarn build:types",
+    "build": "tsx ./build.mts",
     "build:pack": "yarn pack -o redwoodjs-auth-supabase-middleware.tgz",
-    "build:types": "tsc --build --verbose",
-    "build:types-cjs": "tsc --build --verbose tsconfig.types-cjs.json",
+    "build:types": "tsc --build --verbose ./tsconfig.json",
+    "build:types-cjs": "tsc --build --verbose ./tsconfig.cjs.json",
     "check:attw": "yarn attw -P",
     "check:package": "concurrently npm:check:attw yarn:publint",
     "prepublishOnly": "NODE_ENV=production yarn build",

packages/auth-providers/supabase/middleware/tsconfig.types-cjs.json → packages/auth-providers/supabase/middleware/tsconfig.cjs.json

@@ -2,6 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "dist/cjs",
-    "tsBuildInfoFile": "./tsconfig.types-cjs.tsbuildinfo"
+    "tsBuildInfoFile": "./tsconfig.cjs.tsbuildinfo"
   }
 }

packages/auth-providers/supabase/middleware/tsconfig.json

@@ -4,8 +4,9 @@
     "strict": true,
     "rootDir": "src",
     "outDir": "dist",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
   },
   "include": ["src/**/*"],
   "references": [

packages/context/build.mts

@@ -1,23 +1,28 @@
-import { writeFileSync } from 'node:fs'
-
 import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
+import {
+  generateTypesCjs,
+  generateTypesEsm,
+  insertCommonJsPackageJson,
+} from '@redwoodjs/framework-tools/generateTypes'
 
-// ESM build
+// ESM build and type generation
 await build({
   buildOptions: {
     ...defaultBuildOptions,
     format: 'esm',
   },
 })
+await generateTypesEsm()
 
-// CJS build
+// CJS build, type generation, and package.json insert
 await build({
   buildOptions: {
     ...defaultBuildOptions,
     outdir: 'dist/cjs',
   },
 })
-
-// Place a package.json file with `type: commonjs` in the 'dist/cjs' folder so that
-// all files are considered CommonJS modules.
-writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
+await generateTypesCjs()
+await insertCommonJsPackageJson({
+  buildFileUrl: import.meta.url,
+  cjsDir: 'dist/cjs',
+})

packages/context/package.json

@@ -37,9 +37,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsx ./build.mts && yarn build:types",
+    "build": "tsx ./build.mts",
     "build:pack": "yarn pack -o redwoodjs-context.tgz",
-    "build:types": "tsc --build --verbose ./tsconfig.json ./tsconfig.cjs.json",
+    "build:types": "tsc --build --verbose ./tsconfig.json",
+    "build:types-cjs": "tsc --build --verbose ./tsconfig.cjs.json",
     "build:watch": "nodemon --watch src --ext \"js,jsx,ts,tsx\" --ignore dist --exec \"yarn build\"",
     "check:attw": "yarn attw -P",
     "check:package": "concurrently npm:check:attw yarn:publint",

packages/context/tsconfig.cjs.json

@@ -2,8 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "dist/cjs",
-    "module": "CommonJS",
-    "moduleResolution": "Node10",
     "tsBuildInfoFile": "./tsconfig.cjs.tsbuildinfo"
   }
 }

packages/framework-tools/package.json

@@ -14,9 +14,9 @@
       "types": "./dist/buildDefaults.d.ts",
       "default": "./dist/buildDefaults.js"
     },
-    "./cjsTypes": {
-      "types": "./dist/cjsTypes.d.ts",
-      "default": "./dist/cjsTypes.js"
+    "./generateTypes": {
+      "types": "./dist/generateTypes.d.ts",
+      "default": "./dist/generateTypes.js"
     }
   },
   "types": "./dist/buildDefaults.d.ts",
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@types/fs-extra": "11.0.4",
     "tsx": "4.17.0",
+    "type-fest": "4.24.0",
     "typescript": "5.5.4"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"

packages/framework-tools/src/generateTypes.ts

@@ -0,0 +1,63 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import type { PackageJson } from 'type-fest'
+import { $ } from 'zx'
+
+/**
+ * This function will run `yarn build:types-cjs` to generate the CJS type definitions.
+ *
+ * It will also temporarily change the package.json file to have "type": "commonjs". This
+ * is the most reliable way to generate CJS type definitions. It will revert the package.json
+ * file back to its original state after the types have been generated - even if an error occurs.
+ */
+export async function generateTypesCjs() {
+  await $`cp package.json package.json.bak`
+
+  const packageJson: PackageJson = JSON.parse(
+    readFileSync('./package.json', 'utf-8'),
+  )
+  packageJson.type = 'commonjs'
+  writeFileSync('./package.json', JSON.stringify(packageJson, null, 2))
+
+  try {
+    await $`yarn build:types-cjs`
+  } catch (e: any) {
+    console.error('---- Error building CJS types ----')
+    process.exitCode = e.exitCode
+    throw new Error(e)
+  } finally {
+    await $`mv package.json.bak package.json`
+  }
+}
+
+/**
+ * This function will run `yarn build:types` to generate the ESM type definitions.
+ */
+export async function generateTypesEsm() {
+  try {
+    await $`yarn build:types`
+  } catch (e: any) {
+    console.error('---- Error building ESM types ----')
+    process.exitCode = e.exitCode
+    throw new Error(e)
+  }
+}
+
+/**
+ * This function will insert a package.json file with "type": "commonjs" in the CJS build directory.
+ * This is necessary for the CJS build to be recognized as CommonJS modules when the root package.json
+ * file has "type": "module".
+ */
+export async function insertCommonJsPackageJson({
+  buildFileUrl,
+  cjsDir,
+}: {
+  buildFileUrl: string
+  cjsDir: string
+}) {
+  const packageDir = path.dirname(fileURLToPath(buildFileUrl))
+  const packageJsonPath = path.join(packageDir, cjsDir, 'package.json')
+  writeFileSync(packageJsonPath, JSON.stringify({ type: 'commonjs' }))
+}