feat: initialize before serve

- add initialize phase to bundler
  - setup watcher
- print initialize indicator

packages/cli/lib/commands/bundle.ts

@@ -30,9 +30,9 @@ export const bundle: Command = async (argv) => {
   logger.debug('bundle options');
   printDebugOptions(bundleOptions);
 
-  const bundler = new ReactNativeEsbuildBundler(
+  const bundler = await new ReactNativeEsbuildBundler(
     bundleOptions.entry ? path.dirname(bundleOptions.entry) : process.cwd(),
-  );
+  ).initialize();
 
   // @TODO: remove registerPlugin and add plugin presets (plugin preset builder)
   if (bundleOptions.platform !== 'web') {

packages/cli/lib/commands/serve.ts

@@ -10,7 +10,6 @@ import { logger } from '../shared';
 import type { Command } from '../types';
 import { serveArgvSchema } from '../schema';
 
-// eslint-disable-next-line @typescript-eslint/require-await -- no async task in serve command
 export const serve: Command = async (argv): Promise<void> => {
   const serveArgv = serveArgvSchema.parse(argv);
   const serveOptions = {
@@ -30,12 +29,15 @@ export const serve: Command = async (argv): Promise<void> => {
   logger.debug('bundle options');
   printDebugOptions(bundleOptions);
 
-  new ReactNativeWebServer(serveOptions, bundleOptions)
-    .setup((bundler) => {
-      bundler
-        .registerPlugin(createSvgTransformPlugin())
-        .registerPlugin(createReactNativeRuntimeTransformPlugin())
-        .registerPlugin(createReactNativeWebPlugin());
-    })
-    .listen();
+  const server = await new ReactNativeWebServer(
+    serveOptions,
+    bundleOptions,
+  ).initialize((bundler) => {
+    bundler
+      .registerPlugin(createSvgTransformPlugin())
+      .registerPlugin(createReactNativeRuntimeTransformPlugin())
+      .registerPlugin(createReactNativeWebPlugin());
+  });
+
+  await server.listen();
 };

packages/cli/lib/commands/start.ts

@@ -23,14 +23,16 @@ export const start: Command = async (argv) => {
   logger.debug('start options');
   printDebugOptions({ entry, ...serveOptions });
 
-  const server = new ReactNativeAppServer(serveOptions).setup((bundler) => {
-    bundler
-      .registerPlugin(createAssetRegisterPlugin())
-      .registerPlugin(createSvgTransformPlugin())
-      .registerPlugin(createReactNativeRuntimeTransformPlugin());
-  });
+  const server = await new ReactNativeAppServer(serveOptions).initialize(
+    (bundler) => {
+      bundler
+        .registerPlugin(createAssetRegisterPlugin())
+        .registerPlugin(createSvgTransformPlugin())
+        .registerPlugin(createReactNativeRuntimeTransformPlugin());
+    },
+  );
 
-  server.listen(() => {
+  await server.listen(() => {
     if (
       enableInteractiveMode((keyName) => {
         switch (keyName) {

packages/cli/lib/index.ts

@@ -9,7 +9,7 @@ import { logger } from './shared';
 (async () => {
   const argv = await cli();
   const options = baseArgvSchema.parse(argv);
-  ReactNativeEsbuildBundler.initialize(options.config);
+  ReactNativeEsbuildBundler.bootstrap(options.config);
   ReactNativeEsbuildBundler.setGlobalLogLevel(
     options.verbose ? LogLevel.Trace : LogLevel.Info,
   );

packages/core/README.md

@@ -7,16 +7,22 @@
 ```ts
 import { ReactNativeEsbuildBundler } from '@react-native-esbuild/core';
 
+// Must be called first
+ReactNativeEsbuildBundler.bootstrap();
+
 const bundler = new ReactNativeEsbuildBundler();
 
 bundler
   .registerPlugin(/* call EsbuildPluginFactory */)
   .registerPlugin(/* call EsbuildPluginFactory */)
   .registerPlugin(/* call EsbuildPluginFactory */);
 
+// initialize bundler
+await bundler.initialize();
+
 // using `esbuild.build()` (write output to file system)
 await bundler.bundle(bundleOptions);
 
-// using `esbuildContext.watch()` (in-memory output for dev-server)
+// using `esbuild.context()` (in-memory output for dev-server)
 await bundler.getBundle(bundleOptions);
 ```

packages/core/lib/bundler/bundler.ts

@@ -5,6 +5,7 @@ import esbuild, {
   type ServeResult,
 } from 'esbuild';
 import invariant from 'invariant';
+import ora from 'ora';
 import { getGlobalVariables } from '@react-native-esbuild/internal';
 import {
   setEnvironment,
@@ -19,6 +20,7 @@ import { FileSystemWatcher } from '../watcher';
 import { logger } from '../shared';
 import type {
   Config,
+  BundlerInitializeOptions,
   BuildTask,
   BuildStatus,
   BundleMode,
@@ -42,7 +44,10 @@ import {
 } from './helpers';
 import { BundlerEventEmitter } from './events';
 import { createBuildStatusPlugin, createMetafilePlugin } from './plugins';
-import { ReactNativeEsbuildError, ReactNativeEsbuildErrorCode } from './errors';
+import {
+  ReactNativeEsbuildError,
+  ReactNativeEsbuildErrorCode as ErrorCode,
+} from './errors';
 import { printLogo, printVersion } from './logo';
 
 export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
@@ -52,15 +57,16 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
       changed: null,
     },
   };
+  private initialized = false;
   private config: Config;
   private appLogger = new Logger('app', LogLevel.Trace);
   private buildTasks = new Map<number, BuildTask>();
   private plugins: ReturnType<EsbuildPluginFactory<unknown>>[] = [];
 
   /**
-   * must be initialized first at the entry point
+   * must be bootstrapped first at the entry point
    */
-  public static initialize(configFilePath?: string): void {
+  public static bootstrap(configFilePath?: string): void {
     printLogo();
     printVersion();
     const config = loadConfig(configFilePath);
@@ -125,9 +131,9 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     this.config.reporter?.(event);
   }
 
-  private setupWatcher(): void {
-    logger.debug('setup watcher');
-    FileSystemWatcher.getInstance()
+  private startWatcher(): Promise<void> {
+    logger.debug('starting watcher');
+    return FileSystemWatcher.getInstance()
       .setHandler((event, changedFile, stats) => {
         if (this.buildTasks.size > 0 && event === 'change') {
           ReactNativeEsbuildBundler.shared.watcher = {
@@ -240,11 +246,20 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     return getIdByOptions(bundleOptions);
   }
 
+  private throwIfNotInitialized(): void {
+    if (this.initialized) return;
+
+    throw new ReactNativeEsbuildError(
+      'bundler not initialized',
+      ErrorCode.NotInitialized,
+    );
+  }
+
   private assertBuildTask(task?: BuildTask): asserts task is BuildTask {
     if (task) return;
     throw new ReactNativeEsbuildError(
       'unable to get build task',
-      ReactNativeEsbuildErrorCode.InvalidTask,
+      ErrorCode.InvalidTask,
     );
   }
 
@@ -254,7 +269,7 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     if (handler) return;
     throw new ReactNativeEsbuildError(
       'invalid task handler',
-      ReactNativeEsbuildErrorCode.InvalidTask,
+      ErrorCode.InvalidTask,
     );
   }
 
@@ -300,7 +315,7 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
       if (!data.success) {
         throw new ReactNativeEsbuildError(
           'build failed',
-          ReactNativeEsbuildErrorCode.BuildFailure,
+          ErrorCode.BuildFailure,
         );
       }
 
@@ -347,7 +362,6 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
 
     if (!this.buildTasks.has(targetTaskId)) {
       logger.debug(`bundle task not registered (id: ${targetTaskId})`);
-      this.setupWatcher();
       const buildOptions = await this.getBuildOptionsForBundler(
         'watch',
         bundleOptions,
@@ -394,15 +408,37 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     });
   }
 
-  registerPlugin(plugin: ReturnType<EsbuildPluginFactory<unknown>>): this {
+  public async initialize(options?: BundlerInitializeOptions): Promise<this> {
+    if (this.initialized) {
+      logger.warn('bundler already initialized');
+      return this;
+    }
+    const spinner = ora({ discardStdin: false }).start(
+      'Bundler initializing...',
+    );
+
+    if (options?.watcherEnabled) {
+      await this.startWatcher();
+    }
+
+    this.initialized = true;
+    spinner.stop();
+
+    return this;
+  }
+
+  public registerPlugin(
+    plugin: ReturnType<EsbuildPluginFactory<unknown>>,
+  ): this {
     this.plugins.push(plugin);
     return this;
   }
 
-  async bundle(
+  public async bundle(
     bundleOptions: Partial<BundleOptions>,
     additionalData?: BundlerAdditionalData,
   ): Promise<BuildResult> {
+    this.throwIfNotInitialized();
     const buildOptions = await this.getBuildOptionsForBundler(
       'bundle',
       combineWithDefaultBundleOptions(bundleOptions),
@@ -411,10 +447,11 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     return esbuild.build(buildOptions);
   }
 
-  async serve(
+  public async serve(
     bundleOptions: Partial<BundleOptions>,
     additionalData?: BundlerAdditionalData,
   ): Promise<ServeResult> {
+    this.throwIfNotInitialized();
     if (bundleOptions.platform !== 'web') {
       throw new ReactNativeEsbuildError(
         'serve mode is only available on web platform',
@@ -432,10 +469,11 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     });
   }
 
-  async getBundle(
+  public async getBundle(
     bundleOptions: BundleRequestOptions,
     additionalData?: BundlerAdditionalData,
   ): Promise<BundleResult> {
+    this.throwIfNotInitialized();
     const buildTask = await this.getOrCreateBundleTask(
       combineWithDefaultBundleOptions(bundleOptions),
       additionalData,
@@ -444,11 +482,11 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     return buildTask.handler.task;
   }
 
-  getConfig(): Config {
+  public getConfig(): Config {
     return this.config;
   }
 
-  getRoot(): string {
+  public getRoot(): string {
     return this.root;
   }
 }

packages/core/lib/bundler/errors.ts

@@ -1,4 +1,5 @@
 export enum ReactNativeEsbuildErrorCode {
+  NotInitialized = 'NotInitialized',
   BuildFailure = 'BuildFailure',
   InvalidTask = 'InvalidTask',
   Unknown = 'Unknown',

packages/core/lib/types.ts

@@ -130,8 +130,11 @@ interface CustomTransformRuleBase<T> {
 export type BabelTransformRule = CustomTransformRuleBase<BabelTransformOptions>;
 export type SwcTransformRule = CustomTransformRuleBase<SwcTransformOptions>;
 
+export interface BundlerInitializeOptions {
+  watcherEnabled?: boolean;
+}
+
 export type BundleMode = 'bundle' | 'watch';
-export type InternalCaller = 'dev-server';
 
 export interface BuildTask {
   context: BuildContext;