Refactor to remove events package

apps/browser/transcode.esm.html

@@ -8,22 +8,30 @@
     <input type="file" id="uploader">
     <p id="message"></p>
     <script type="module">
-      import createFFmpeg from "../../packages/ffmpeg/dist/esm/ffmpeg.js";
+      import { FFmpeg } from "../../packages/ffmpeg/dist/esm/index.js";
       import { fetchFile } from "../../packages/util/dist/esm/index.js";
       let ffmpeg = null;
 
       const transcode = async ({ target: { files } }) => {
         const message = document.getElementById('message');
         if (ffmpeg === null) {
-          ffmpeg = await createFFmpeg();
+          ffmpeg = new FFmpeg();
-          ffmpeg.setProgress((progress) => { console.log(progress * 100); });
+          ffmpeg.on("log", ({ message }) => {
+            console.log(message);
+          })
+          ffmpeg.on("progress", ({ progress }) => {
+            message.innerHTML = `${progress * 100} %`;
+          });
+          await ffmpeg.load({
+            coreURL: "/packages/core/dist/umd/ffmpeg-core.js",
+          });
         }
         const { name } = files[0];
-        ffmpeg.FS.writeFile(name, await fetchFile(files[0]));
+        await ffmpeg.writeFile(name, await fetchFile(files[0]));
         message.innerHTML = 'Start transcoding';
         await ffmpeg.exec('-i', name,  'output.mp4');
         message.innerHTML = 'Complete transcoding';
-        const data = ffmpeg.FS.readFile('output.mp4');
+        const data = await ffmpeg.readFile('output.mp4');
 
         const video = document.getElementById('output-video');
         video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

build/ffmpeg-wasm.sh

@@ -36,7 +36,7 @@ CONF_FLAGS=(
   ${FFMPEG_MT:+ -sINITIAL_MEMORY=1024MB}   # ALLOW_MEMORY_GROWTH is not recommended when using threads, thus we use a large initial memory
   ${FFMPEG_MT:+ -sPTHREAD_POOL_SIZE=32}    # use 32 threads
   ${FFMPEG_ST:+ -sINITIAL_MEMORY=32MB -sALLOW_MEMORY_GROWTH} # Use just enough memory as memory usage can grow
-  -sEXPORT_NAME="$EXPORT_NAME"             # required in browser env, so that user can access this module from window.createFFmpeg
+  -sEXPORT_NAME="$EXPORT_NAME"             # required in browser env, so that user can access this module from window object
   -sEXPORTED_FUNCTIONS=$(node src/bind/ffmpeg/export.js) # exported functions
   -sEXPORTED_RUNTIME_METHODS=$(node src/bind/ffmpeg/export-runtime.js) # exported built-in functions
   --pre-js src/bind/ffmpeg/bind.js        # extra bindings, contains most of the ffmpeg.wasm javascript code

lerna.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useNx": true,
-  "useWorkspaces": true,
-  "version": "0.12.0-alpha.2"
-}

package.json

@@ -3,21 +3,22 @@
   "private": true,
   "scripts": {
     "lint": "npm-run-all lint:*",
-    "lint:packages": "lerna run lint",
+    "lint:packages": "npm run lint --workspace=packages --if-present",
     "lint:root": "eslint tests",
-    "pretest": "lerna run build --scope='@ffmpeg/*'",
+    "build": "npm run build --workspace=packages --if-present",
-    "test": "server-test test:browser:server http://localhost:3000 test:all",
+    "pretest": "npm run build",
+    "test": "server-test test:browser:server 3000 test:all",
     "test:all": "npm-run-all test:*:*:*",
     "test:browser": "mocha-headless-chrome -a enable-features=SharedArrayBuffer",
     "test:browser:core:mt": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-core-mt.test.html",
     "test:browser:core:st": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-core-st.test.html",
     "test:browser:ffmpeg:mt": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-mt.test.html",
     "test:browser:ffmpeg:st": "npm run test:browser -- -f http://localhost:3000/tests/ffmpeg-st.test.html",
-    "test:browser:server": "http-server -c-1 --cors -p 3000 .",
+    "test:browser:server": "http-server -c-1 -s -p 3000 .",
     "test:node": "mocha --exit --bail -t 60000",
     "test:node:core:mt": "npm run test:node -- --require tests/test-helper-mt.js tests/ffmpeg-core.test.js",
     "test:node:core:st": "npm run test:node -- --require tests/test-helper-st.js tests/ffmpeg-core.test.js",
-    "prepublishOnly": "lerna run build --scope='@ffmpeg/*'"
+    "prepublishOnly": "npm run build"
   },
   "workspaces": [
     "packages/*",
@@ -26,10 +27,9 @@
   "devDependencies": {
     "chai": "^4.3.6",
     "http-server": "^14.1.1",
-    "lerna": "^5.4.3",
     "mocha": "^10.0.0",
     "mocha-headless-chrome": "^4.0.0",
     "npm-run-all": "^4.1.5",
-    "start-server-and-test": "^1.14.0"
+    "start-server-and-test": "^2.0.0"
   }
 }

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",
+    "@ffmpeg/types": "^0.12.0-alpha.1"
-    "events": "^3.3.0"
   }
 }

packages/ffmpeg/src/classes.ts

@@ -1,5 +1,4 @@
-import EventEmitter from "events";
+import { FFMessageType } from "./const.js";
-import { FFMessageType } from "./const";
 import {
   CallbackData,
   Callbacks,
@@ -10,50 +9,13 @@ import {
   IsFirst,
   LogEvent,
   Message,
-  Progress,
+  ProgressEvent,
+  LogEventCallback,
+  ProgressEventCallback,
   FileData,
-} from "./types";
+} from "./types.js";
-import { getMessageID } from "./utils";
+import { getMessageID } from "./utils.js";
-import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors";
+import { ERROR_TERMINATED, ERROR_NOT_LOADED } from "./errors.js";
-
-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;
-}
 
 /**
  * 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 {
+export class FFmpeg {
-  /** @event */ static readonly LOG = "log" as const;
-  /** @event */ static readonly PROGRESS = "progress" as const;
-
   #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() {
+  public loaded = false;
-    super();
-  }
 
   /**
    * 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 { CORE_URL, FFMessageType } from "./const.js";
-import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors";
+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",
+  entry: "./dist/esm/index.js",
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loader: "ts-loader",
-        options: {
-          transpileOnly: false,
-        },
-      },
-    ],
-  },
   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";
+} from "./errors.js";
-import { HeaderContentLength } from "./const";
+import { HeaderContentLength } from "./const.js";
-import { ProgressCallback } from "./types";
+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"
     }
 }

src/bind/ffmpeg/export.js

@@ -1,3 +1,3 @@
-const EXPORTED_FUNCTIONS = ["_ffmpeg", "_abort"];
+const EXPORTED_FUNCTIONS = ["_ffmpeg", "_abort", "_malloc"];
 
 console.log(EXPORTED_FUNCTIONS.join(","));

tests/ffmpeg.test.js

@@ -120,11 +120,11 @@ describe(genName("FFmpeg.exec()"), function () {
     const listener = ({ message }) => {
       m = message;
     };
-    ffmpeg.on(FFmpeg.LOG, listener);
+    ffmpeg.on("log", listener);
     const ret = await ffmpeg.exec(["-h"]);
     expect(ret).to.equal(0);
     expect(m).to.be.a("string");
-    ffmpeg.removeListener(FFmpeg.LOG, listener);
+    ffmpeg.off("log", listener);
   });
 
   it("should transcode mp4 to avi", async () => {
@@ -132,11 +132,11 @@ describe(genName("FFmpeg.exec()"), function () {
     const listener = ({ progress }) => {
       p = progress;
     };
-    ffmpeg.on(FFmpeg.PROGRESS, listener);
+    ffmpeg.on("progress", listener);
     const ret = await ffmpeg.exec(["-i", "video.mp4", "video.avi"]);
     expect(ret).to.equal(0);
     expect(p).to.equal(1);
-    ffmpeg.removeListener(FFmpeg.PROGRESS, listener);
+    ffmpeg.off("progress", listener);
   });
 
   it("should stop if timeout", async () => {