feat: build assets when running build command

Author: thetutlage

src/bundler.ts

@@ -10,13 +10,13 @@
 import fs from 'fs-extra'
 import slash from 'slash'
 import copyfiles from 'cpy'
-import { execa } from 'execa'
-import { join, relative } from 'node:path'
 import type tsStatic from 'typescript'
 import { fileURLToPath } from 'node:url'
-import { ConfigParser } from '@poppinss/chokidar-ts'
+import { join, relative } from 'node:path'
 import { cliui, type Logger } from '@poppinss/cliui'
 
+import { run } from './run.js'
+import { parseConfig } from './parse_config.js'
 import type { BundlerOptions } from './types.js'
 
 /**
@@ -59,18 +59,37 @@ export class Bundler {
     await fs.remove(outDir)
   }
 
+  /**
+   * Runs assets bundler command to build assets.
+   */
+  async #buildAssets(): Promise<boolean> {
+    const assetsBundler = this.#options.assets
+    if (!assetsBundler?.serve) {
+      return true
+    }
+
+    try {
+      this.#logger.info('compiling frontend assets', { suffix: assetsBundler.cmd })
+      await run(this.#cwd, {
+        stdio: 'inherit',
+        script: assetsBundler.cmd,
+        scriptArgs: [],
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
+
   /**
    * Runs tsc command to build the source.
    */
-  async #runTsc(outDir: string) {
+  async #runTsc(outDir: string): Promise<boolean> {
     try {
-      await execa('tsc', ['--outDir', outDir], {
-        cwd: this.#cwd,
-        preferLocal: true,
-        localDir: this.#cwd,
-        windowsHide: false,
-        buffer: false,
+      await run(this.#cwd, {
         stdio: 'inherit',
+        script: 'tsc',
+        scriptArgs: ['--outDir', outDir],
       })
       return true
     } catch {
@@ -161,21 +180,7 @@ export class Bundler {
     /**
      * Step 1: Parse config file to get the build output directory
      */
-    const { config, error } = new ConfigParser(this.#cwd, 'tsconfig.json', this.#ts).parse()
-    if (error) {
-      const compilerHost = this.#ts.createCompilerHost({})
-      this.#logger.logError(this.#ts.formatDiagnosticsWithColorAndContext([error], compilerHost))
-      return false
-    }
-
-    if (config!.errors.length) {
-      const compilerHost = this.#ts.createCompilerHost({})
-      this.#logger.logError(
-        this.#ts.formatDiagnosticsWithColorAndContext(config!.errors, compilerHost)
-      )
-      return false
-    }
-
+    const config = parseConfig(this.#cwd, this.#ts)
     if (!config) {
       return false
     }
@@ -188,7 +193,14 @@ export class Bundler {
     await this.#cleanupBuildDirectory(outDir)
 
     /**
-     * Step 3: Build typescript source code
+     * Step 3: Build frontend assets
+     */
+    if (!(await this.#buildAssets())) {
+      return false
+    }
+
+    /**
+     * Step 4: Build typescript source code
      */
     this.#logger.info('compiling typescript source', { suffix: 'tsc' })
     const buildCompleted = await this.#runTsc(outDir)
@@ -219,21 +231,24 @@ export class Bundler {
     }
 
     /**
-     * Step 4: Copy meta files to the build directory
+     * Step 5: Copy meta files to the build directory
      */
     const pkgFiles = ['package.json', this.#getClientLockFile(client)]
     this.#logger.info('copying meta files to the output directory')
     await this.#copyMetaFiles(outDir, pkgFiles)
 
     /**
-     * Step 5: Copy .adonisrc.json file to the build directory
+     * Step 6: Copy .adonisrc.json file to the build directory
      */
     this.#logger.info('copying .adonisrc.json file to the output directory')
     await this.#copyAdonisRcFile(outDir)
 
     this.#logger.success('build completed')
     this.#logger.log('')
 
+    /**
+     * Next steps
+     */
     ui.instructions()
       .useRenderer(this.#logger.getRenderer())
       .heading('Run the following commands to start the server in production')

src/dev_server.ts

@@ -115,6 +115,62 @@ export class DevServer {
     }
   }
 
+  /**
+   * Logs messages from vite dev server stdout and stderr
+   */
+  #logViteDevServerMessage(data: Buffer) {
+    const dataString = data.toString()
+    const lines = dataString.split('\n')
+
+    /**
+     * Logging VITE ready in message with proper
+     * spaces and newlines
+     */
+    if (dataString.includes('ready in')) {
+      console.log('')
+      console.log(dataString.trim())
+      return
+    }
+
+    /**
+     * Put a wrapper around vite network address log
+     */
+    if (dataString.includes('Local') && dataString.includes('Network')) {
+      const sticker = ui.sticker().useColors(this.#colors).useRenderer(this.#logger.getRenderer())
+
+      lines.forEach((line: string) => {
+        if (line.trim()) {
+          sticker.add(line)
+        }
+      })
+
+      sticker.render()
+      return
+    }
+
+    /**
+     * Log rest of the lines
+     */
+    lines.forEach((line: string) => {
+      if (line.trim()) {
+        console.log(line)
+      }
+    })
+  }
+
+  /**
+   * Logs messages from assets dev server stdout and stderr
+   */
+  #logAssetsDevServerMessage(data: Buffer) {
+    const dataString = data.toString()
+    const lines = dataString.split('\n')
+    lines.forEach((line: string) => {
+      if (line.trim()) {
+        console.log(line)
+      }
+    })
+  }
+
   /**
    * Returns PORT for starting the HTTP server with option to use
    * a random PORT if main PORT is in use.
@@ -192,11 +248,36 @@ export class DevServer {
     }
 
     this.#logger.info(`starting "${assetsBundler.driver}" dev server...`)
-    this.#assetsServerProcess = run(assetsBundler.cmd, {
-      script: this.#scriptFile,
+    this.#assetsServerProcess = run(this.#cwd, {
+      script: assetsBundler.cmd,
+
+      /**
+       * We do not inherit the stdio for vite and encore, because they then
+       * own the stdin and interrupts the `Ctrl + C`.
+       */
+      stdio: 'pipe',
       scriptArgs: this.#options.scriptArgs,
     })
 
+    /**
+     * Log child process messages
+     */
+    this.#assetsServerProcess.stdout?.on('data', (data) => {
+      if (assetsBundler.driver === 'vite') {
+        this.#logViteDevServerMessage(data)
+      } else {
+        this.#logAssetsDevServerMessage(data)
+      }
+    })
+
+    this.#assetsServerProcess.stderr?.on('data', (data) => {
+      if (assetsBundler.driver === 'vite') {
+        this.#logViteDevServerMessage(data)
+      } else {
+        this.#logAssetsDevServerMessage(data)
+      }
+    })
+
     this.#assetsServerProcess
       .then((result) => {
         this.#logger.warning(

src/parse_config.ts

@@ -0,0 +1,32 @@
+/*
+ * @adonisjs/assembler
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import type tsStatic from 'typescript'
+import { ConfigParser } from '@poppinss/chokidar-ts'
+
+/**
+ * Parses tsconfig.json and prints errors using typescript compiler
+ * host
+ */
+export function parseConfig(cwd: string | URL, ts: typeof tsStatic) {
+  const { config, error } = new ConfigParser(cwd, 'tsconfig.json', ts).parse()
+  if (error) {
+    const compilerHost = ts.createCompilerHost({})
+    console.log(ts.formatDiagnosticsWithColorAndContext([error], compilerHost))
+    return
+  }
+
+  if (config!.errors.length) {
+    const compilerHost = ts.createCompilerHost({})
+    console.log(ts.formatDiagnosticsWithColorAndContext(config!.errors, compilerHost))
+    return
+  }
+
+  return config
+}

src/run.ts

@@ -27,33 +27,39 @@ const DEFAULT_NODE_ARGS = [
  * Runs a Node.js script as a child process and inherits the stdio streams
  */
 export function runNode(cwd: string | URL, options: RunOptions) {
-  const childProces = execaNode(options.script, options.scriptArgs, {
+  const childProcess = execaNode(options.script, options.scriptArgs, {
     nodeOptions: DEFAULT_NODE_ARGS.concat(options.nodeArgs),
     preferLocal: true,
     windowsHide: false,
     localDir: cwd,
     cwd,
     buffer: false,
-    stdio: 'inherit',
-    env: options.env,
+    stdio: options.stdio || 'inherit',
+    env: {
+      ...(options.stdio === 'pipe' ? { FORCE_COLOR: 'true' } : {}),
+      ...options.env,
+    },
   })
 
-  return childProces
+  return childProcess
 }
 
 /**
  * Runs a script as a child process and inherits the stdio streams
  */
 export function run(cwd: string | URL, options: Omit<RunOptions, 'nodeArgs'>) {
-  const childProces = execa(options.script, options.scriptArgs, {
+  const childProcess = execa(options.script, options.scriptArgs, {
     preferLocal: true,
     windowsHide: false,
     localDir: cwd,
     cwd,
     buffer: false,
-    stdio: 'inherit',
-    env: options.env,
+    stdio: options.stdio || 'inherit',
+    env: {
+      ...(options.stdio === 'pipe' ? { FORCE_COLOR: 'true' } : {}),
+      ...options.env,
+    },
   })
 
-  return childProces
+  return childProcess
 }

src/types.ts

@@ -14,6 +14,7 @@ export type RunOptions = {
   script: string
   scriptArgs: string[]
   nodeArgs: string[]
+  stdio?: 'pipe' | 'inherit'
   env?: NodeJS.ProcessEnv
 }
 
@@ -24,6 +25,29 @@ export type WatchOptions = {
   poll?: boolean
 }
 
+/**
+ * Meta file config defined in ".adonisrc.json" file
+ */
+export type MetaFile = {
+  pattern: string
+  reloadServer: boolean
+}
+
+/**
+ * Options accepted by assets bundler
+ */
+export type AssetsBundlerOptions =
+  | {
+      serve: false
+      driver?: string
+      cmd?: string
+    }
+  | {
+      serve: true
+      driver: string
+      cmd: string
+    }
+
 /**
  * Options accepted by the dev server
  */
@@ -32,29 +56,14 @@ export type DevServerOptions = {
   nodeArgs: string[]
   clearScreen?: boolean
   env?: NodeJS.ProcessEnv
-  metaFiles?: {
-    pattern: string
-    reloadServer: boolean
-  }[]
-  assets?:
-    | {
-        serve: false
-        driver?: string
-        cmd?: string
-      }
-    | {
-        serve: true
-        driver: string
-        cmd: string
-      }
+  metaFiles?: MetaFile[]
+  assets?: AssetsBundlerOptions
 }
 
 /**
  * Options accepted by the project bundler
  */
 export type BundlerOptions = {
-  metaFiles?: {
-    pattern: string
-    reloadServer: boolean
-  }[]
+  metaFiles?: MetaFile[]
+  assets?: AssetsBundlerOptions
 }