Refactor to remove events package

packages/ffmpeg/package.json

@@ -17,7 +17,7 @@
     "clean": "rimraf dist",
     "build:umd": "webpack",
     "build:esm": "tsc -p tsconfig.esm.json",
-    "build": "npm-run-all clean build:*",
+    "build": "npm-run-all clean build:esm build:umd",
     "docs": "typedoc --entryPointStrategy expand ./src",
     "docs:serve": "http-server docs"
   },
@@ -62,7 +62,6 @@
     "worker-loader": "^3.0.8"
   },
   "dependencies": {
-    "@ffmpeg/types": "^0.12.0-alpha.1",
-    "events": "^3.3.0"
+    "@ffmpeg/types": "^0.12.0-alpha.1"
   }
 }

packages/ffmpeg/src/classes.ts

@@ -1,5 +1,4 @@
-import EventEmitter from "events";
-import { FFMessageType } from "./const";
+import { FFMessageType } from "./const.js";
 import {
   CallbackData,
   Callbacks,
@@ -10,50 +9,13 @@ import {
   IsFirst,
   LogEvent,
   Message,
-  Progress,
+  ProgressEvent,
+  LogEventCallback,
+  ProgressEventCallback,
   FileData,
-} from "./types";
-import { getMessageID } from "./utils";
-import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors";
-
-export declare interface FFmpeg {
-  /**
-   * Listen to log events from `ffmpeg.exec()`.
-   *
-   * @example
-   * ```ts
-   * ffmpeg.on(FFmpeg.LOG, ({ message }) => {
-   *   // ...
-   * })
-   * ```
-   *
-   * @remarks
-   * log includes output to stdout and stderr.
-   *
-   * @category Event
-   */
-  on(event: typeof FFmpeg.LOG, listener: (log: LogEvent) => void): this;
-  /**
-   * Listen to progress events from `ffmpeg.exec()`.
-   *
-   * @example
-   * ```ts
-   * ffmpeg.on(FFmpeg.PROGRESS, ({ progress }) => {
-   *   // ...
-   * })
-   * ```
-   *
-   * @remarks
-   * The progress events are accurate only when the length of
-   * input and output video/audio file are the same.
-   *
-   * @category Event
-   */
-  on(
-    event: typeof FFmpeg.PROGRESS,
-    listener: (progress: Progress) => void
-  ): this;
-}
+} from "./types.js";
+import { getMessageID } from "./utils.js";
+import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors.js";
 
 /**
  * Provides APIs to interact with ffmpeg web worker.
@@ -63,10 +25,7 @@ export declare interface FFmpeg {
  * const ffmpeg = new FFmpeg();
  * ```
  */
-export class FFmpeg extends EventEmitter {
-  /** @event */ static readonly LOG = "log" as const;
-  /** @event */ static readonly PROGRESS = "progress" as const;
-
+export class FFmpeg {
   #worker: Worker | null = null;
   /**
    * #resolves and #rejects tracks Promise resolves and rejects to
@@ -75,11 +34,10 @@ export class FFmpeg extends EventEmitter {
   #resolves: Callbacks = {};
   #rejects: Callbacks = {};
 
-  public loaded = false;
+  #logEventCallbacks: LogEventCallback[] = [];
+  #progressEventCallbacks: ProgressEventCallback[] = [];
 
-  constructor() {
-    super();
-  }
+  public loaded = false;
 
   /**
    * register worker message event handlers.
@@ -105,10 +63,12 @@ export class FFmpeg extends EventEmitter {
             this.#resolves[id](data);
             break;
           case FFMessageType.LOG:
-            this.emit(FFmpeg.LOG, data as LogEvent);
+            this.#logEventCallbacks.forEach((f) => f(data as LogEvent));
             break;
           case FFMessageType.PROGRESS:
-            this.emit(FFmpeg.PROGRESS, data as Progress);
+            this.#progressEventCallbacks.forEach((f) =>
+              f(data as ProgressEvent)
+            );
             break;
           case FFMessageType.ERROR:
             this.#rejects[id](data);
@@ -139,6 +99,53 @@ export class FFmpeg extends EventEmitter {
     });
   };
 
+  /**
+   * Listen to log or prgress events from `ffmpeg.exec()`.
+   *
+   * @example
+   * ```ts
+   * ffmpeg.on(FFmpeg.LOG, ({ message }) => {
+   *   // ...
+   * })
+   * ```
+   *
+   * @remarks
+   * log includes output to stdout and stderr.
+   *
+   * @example
+   * ```ts
+   * ffmpeg.on(FFmpeg.PROGRESS, ({ progress }) => {
+   *   // ...
+   * })
+   * ```
+   *
+   * @remarks
+   * The progress events are accurate only when the length of
+   * input and output video/audio file are the same.
+   *
+   */
+  public on(
+    event: "log" | "progress",
+    callback: LogEventCallback | ProgressEventCallback
+  ) {
+    if (event === "log") {
+      this.#logEventCallbacks.push(callback as LogEventCallback);
+    } else if (event === "progress") {
+      this.#progressEventCallbacks.push(callback as ProgressEventCallback);
+    }
+  }
+
+  public off(
+    event: "log" | "progress",
+    callback: LogEventCallback | ProgressEventCallback
+  ) {
+    if (event === "log") {
+      this.#logEventCallbacks.filter((f) => f !== callback);
+    } else if (event === "progress") {
+      this.#progressEventCallbacks.filter((f) => f !== callback);
+    }
+  }
+
   /**
    * Loads ffmpeg-core inside web worker. It is required to call this method first
    * as it initializes WebAssembly and other essential variables.
@@ -148,7 +155,9 @@ export class FFmpeg extends EventEmitter {
    */
   public load = (config: FFMessageLoadConfig = {}): Promise<IsFirst> => {
     if (!this.#worker) {
-      this.#worker = new Worker(new URL("./worker", import.meta.url));
+      this.#worker = new Worker(new URL("./worker.js", import.meta.url), {
+        type: "module",
+      });
       this.#registerHandlers();
     }
     return this.#send({

packages/ffmpeg/src/index.ts

@@ -1 +1 @@
-export * from "./classes";
+export * from "./classes.js";

packages/ffmpeg/src/types.ts

@@ -117,7 +117,7 @@ export interface LogEvent {
   message: string;
 }
 
-export interface Progress {
+export interface ProgressEvent {
   progress: number;
 }
 
@@ -137,7 +137,7 @@ export type CallbackData =
   | ExitCode
   | ErrorMessage
   | LogEvent
-  | Progress
+  | ProgressEvent
   | IsFirst
   | OK
   | Error
@@ -148,6 +148,9 @@ export interface Callbacks {
   [id: number | string]: (data: CallbackData) => void;
 }
 
+export type LogEventCallback = (event: LogEvent) => void;
+export type ProgressEventCallback = (event: ProgressEvent) => void;
+
 export interface FFMessageEventCallback {
   data: {
     id: number;

packages/ffmpeg/src/worker.ts

@@ -21,8 +21,8 @@ import type {
   FSNode,
   FileData,
 } from "./types";
-import { CORE_URL, FFMessageType } from "./const";
-import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors";
+import { CORE_URL, FFMessageType } from "./const.js";
+import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors.js";
 
 declare global {
   interface WorkerGlobalScope {

packages/ffmpeg/tsconfig.esm.json

@@ -4,6 +4,7 @@
     "rootDir": "src",
     "declaration": true,
     "outDir": "./dist/esm",
-    "target": "esnext"
+    "target": "esnext",
+    "moduleResolution": "nodenext"
   }
 }

packages/ffmpeg/webpack.config.js

@@ -3,20 +3,9 @@ const path = require("path");
 module.exports = {
   mode: "production",
   devtool: "source-map",
-  entry: "./src/index.ts",
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loader: "ts-loader",
-        options: {
-          transpileOnly: false,
-        },
-      },
-    ],
-  },
+  entry: "./dist/esm/index.js",
   resolve: {
-    extensions: [".ts"],
+    extensions: [".js"],
   },
   output: {
     path: path.resolve(__dirname, "dist/umd"),

packages/util/src/index.ts

@@ -1,9 +1,9 @@
 import {
   ERROR_RESPONSE_BODY_READER,
   ERROR_INCOMPLETED_DOWNLOAD,
-} from "./errors";
-import { HeaderContentLength } from "./const";
-import { ProgressCallback } from "./types";
+} from "./errors.js";
+import { HeaderContentLength } from "./const.js";
+import { ProgressCallback } from "./types.js";
 
 export const readFromBlobOrFile = (blob: Blob | File): Promise<Uint8Array> =>
   new Promise((resolve, reject) => {

packages/util/tsconfig-esm.json

@@ -4,6 +4,6 @@
         "module": "esnext",
         "outDir": "dist/esm",
         "target": "esnext",
-        "moduleResolution": "node"
+        "moduleResolution": "nodenext"
     }
 }