chore(build): Avoid prebuilding api side, instead use an esbuild plugin

packages/api-server/src/watch.ts

@@ -62,14 +62,14 @@ const validate = async () => {
   }
 }
 
-const rebuildApiServer = () => {
+const rebuildApiServer = async () => {
   try {
     // Shutdown API server
     killApiServer()
 
     const buildTs = Date.now()
     process.stdout.write(c.dim(c.italic('Building... ')))
-    buildApi()
+    await buildApi()
     console.log(c.dim(c.italic('Took ' + (Date.now() - buildTs) + ' ms')))
 
     const forkOpts = {

packages/cli/src/commands/buildHandler.js

@@ -73,8 +73,8 @@ export const handler = async ({
     },
     side.includes('api') && {
       title: 'Building API...',
-      task: () => {
-        const { errors, warnings } = buildApi()
+      task: async () => {
+        const { errors, warnings } = await buildApi()
 
         if (errors.length) {
           console.error(errors)

packages/cli/src/commands/deploy/__tests__/nftPack.test.js

@@ -13,12 +13,12 @@ const FIXTURE_PATH = path.resolve(
 
 let functionDistFiles
 
-beforeAll(() => {
+beforeAll(async () => {
   process.env.RWJS_CWD = FIXTURE_PATH
 
   // Actually build the fixture, if we need it
   if (!fs.existsSync(path.join(FIXTURE_PATH, 'api/dist/functions'))) {
-    buildApi()
+    await buildApi()
   }
 
   functionDistFiles = findApiDistFunctions()

packages/internal/src/__tests__/build_api.test.ts

@@ -4,7 +4,8 @@ import path from 'path'
 import * as babel from '@babel/core'
 import compat from 'core-js-compat'
 
-import { cleanApiBuild, prebuildApiFiles } from '../build/api'
+import { cleanApiBuild } from '../build/api'
+import { transformWithBabel } from '../build/babel/api'
 import {
   getApiSideBabelConfigPath,
   getApiSideBabelPlugins,
@@ -20,6 +21,31 @@ const FIXTURE_PATH = path.resolve(
   '../../../../__fixtures__/example-todo-main'
 )
 
+// @NOTE: we no longer prebuild files into the .redwood/prebuild folder
+// However, prebuilding in the tests still helpful for us to  validate
+// that everything is working as expected.
+export const prebuildApiFiles = (srcFiles: string[]) => {
+  const rwjsPaths = getPaths()
+  const plugins = getApiSideBabelPlugins()
+
+  return srcFiles.map((srcPath) => {
+    const relativePathFromSrc = path.relative(rwjsPaths.base, srcPath)
+    const dstPath = path
+      .join(rwjsPaths.generated.prebuild, relativePathFromSrc)
+      .replace(/\.(ts)$/, '.js')
+
+    const result = transformWithBabel(srcPath, plugins)
+    if (!result?.code) {
+      throw new Error(`Could not prebuild ${srcPath}`)
+    }
+
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true })
+    fs.writeFileSync(dstPath, result.code)
+
+    return dstPath
+  })
+}
+
 const cleanPaths = (p) => {
   return ensurePosixPath(path.relative(FIXTURE_PATH, p))
 }

packages/internal/src/build/api.ts

@@ -1,26 +1,19 @@
-import fs from 'fs'
 import path from 'path'
 
-import * as esbuild from 'esbuild'
+import { build } from 'esbuild'
+import type { PluginBuild } from 'esbuild'
 import { removeSync } from 'fs-extra'
 
 import { findApiFiles } from '../files'
 import { getPaths } from '../paths'
 
-import { getApiSideBabelPlugins, prebuildApiFile } from './babel/api'
+import { getApiSideBabelPlugins, transformWithBabel } from './babel/api'
 
-export const buildApi = () => {
+export const buildApi = async () => {
   // TODO: Be smarter about caching and invalidating files,
   // but right now we just delete everything.
   cleanApiBuild()
-
-  const srcFiles = findApiFiles()
-
-  const prebuiltFiles = prebuildApiFiles(srcFiles).filter(
-    (path): path is string => path !== undefined
-  )
-
-  return transpileApi(prebuiltFiles)
+  return transpileApi(findApiFiles())
 }
 
 export const cleanApiBuild = () => {
@@ -29,44 +22,39 @@ export const cleanApiBuild = () => {
   removeSync(path.join(rwjsPaths.generated.prebuild, 'api'))
 }
 
-/**
- * Remove RedwoodJS "magic" from a user's code leaving JavaScript behind.
- */
-export const prebuildApiFiles = (srcFiles: string[]) => {
-  const rwjsPaths = getPaths()
-  const plugins = getApiSideBabelPlugins()
-
-  return srcFiles.map((srcPath) => {
-    const relativePathFromSrc = path.relative(rwjsPaths.base, srcPath)
-    const dstPath = path
-      .join(rwjsPaths.generated.prebuild, relativePathFromSrc)
-      .replace(/\.(ts)$/, '.js')
-
-    const result = prebuildApiFile(srcPath, dstPath, plugins)
-    if (!result?.code) {
-      // TODO: Figure out a better way to return these programatically.
-      console.warn('Error:', srcPath, 'could not prebuilt.')
-
-      return undefined
-    }
-
-    fs.mkdirSync(path.dirname(dstPath), { recursive: true })
-    fs.writeFileSync(dstPath, result.code)
-
-    return dstPath
-  })
+const runRwBabelTransformsPlugin = {
+  name: 'rw-esbuild-babel-transform',
+  setup(build: PluginBuild) {
+    build.onLoad({ filter: /.(js|ts|tsx|jsx)$/ }, async (args) => {
+      //  Remove RedwoodJS "magic" from a user's code leaving JavaScript behind.
+      const transformedCode = transformWithBabel(
+        args.path,
+        getApiSideBabelPlugins()
+      )
+
+      if (transformedCode?.code) {
+        return {
+          contents: transformedCode.code,
+          loader: 'js',
+        }
+      }
+
+      throw new Error(`Could not transform file: ${args.path}`)
+    })
+  },
 }
 
-export const transpileApi = (files: string[], options = {}) => {
+export const transpileApi = async (files: string[], options = {}) => {
   const rwjsPaths = getPaths()
 
-  return esbuild.buildSync({
+  return build({
     absWorkingDir: rwjsPaths.api.base,
     entryPoints: files,
     platform: 'node',
     target: 'node16',
     format: 'cjs',
     bundle: false,
+    plugins: [runRwBabelTransformsPlugin],
     outdir: rwjsPaths.api.dist,
     // setting this to 'true' will generate an external sourcemap x.js.map
     // AND set the sourceMappingURL comment

packages/internal/src/build/babel/api.ts

@@ -194,11 +194,8 @@ export const registerApiSideBabelHook = ({
   })
 }
 
-export const prebuildApiFile = (
+export const transformWithBabel = (
   srcPath: string,
-  // we need to know dstPath as well
-  // so we can generate an inline, relative sourcemap
-  dstPath: string,
   plugins: TransformOptions['plugins']
 ) => {
   const code = fs.readFileSync(srcPath, 'utf-8')
@@ -208,9 +205,6 @@ export const prebuildApiFile = (
     ...defaultOptions,
     cwd: getPaths().api.base,
     filename: srcPath,
-    // we set the sourceFile (for the sourcemap) as a correct, relative path
-    // this is why this function (prebuildFile) must know about the dstPath
-    sourceFileName: path.relative(path.dirname(dstPath), srcPath),
     // we need inline sourcemaps at this level
     // because this file will eventually be fed to esbuild
     // when esbuild finds an inline sourcemap, it tries to "combine" it