gstwebrtc-api: Add ESM build artifact, fix compatibility with module-based environments

This lib was only being built for direct usage as a <script>, and so it
refused to work under any module-based approach, e.g. in a React
project.

Webpack will now build an ESM bundle alongside the old browser-only one.
This ensures broader compatibility, and has been tested in an Angular
project where this lib wasn't easily usable previously.

As a sidenote, the 'browser' field was broken because the string is
never interpolated. That was breaking build e.g. when trying to use our
lib with Angular. This has been replaced with a hardcoded string under
the 'module' field (because we don't ship separate browser/non-browser
bundles, the 'browser' field isn't necessary).

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-plugins-rs/-/merge_requests/2049>

net/webrtc/gstwebrtc-api/.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parserOptions": {
-    "ecmaVersion": 2017,
+    "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "env": {

net/webrtc/gstwebrtc-api/README.md

@@ -37,11 +37,14 @@ Then build the bundle by calling:
 $ npm run make
 ```
 
-It will build and compress the code into the *dist/* folder, there you will find 2 files:
-- *gstwebrtc-api-[version].min.js* which is the only file you need to include into your web application to use the API.
-  It already embeds all dependencies.
+It will build and compress the code into the *dist/* folder, there you will find the following files:
+- *gstwebrtc-api-[version].min.js* which is the only file you need to include in your web application to use the API,
+  if you are manually adding the .js file to your webpage. It already embeds all dependencies.
 - *gstwebrtc-api-[version].min.js.map* which is useful for debugging the API code, you need to put it in the same
   folder as the API script on your web server if you want to allow debugging, else you can just ignore it.
+- *gstwebrtc-api-[version].esm.js, which is the ES module variant of this library. You probably don't need to use
+  this directly - it will be automatically used by your build system if you install this package via npm. See below.
+- *gstwebrtc-api-[version].esm.js.map* which is the source map for the ES module variant mentioned above.
 
 The API documentation is created into the *docs/* folder. It is automatically created when building the whole API.
 

net/webrtc/gstwebrtc-api/package.json

@@ -26,7 +26,9 @@
     "directory": "net/webrtc/gstwebrtc-api"
   },
   "type": "module",
-  "browser": "dist/gstwebrtc-api-${npm_package_version}.min.js",
+  "main": "./dist/gstwebrtc-api-2.0.0.min.js",
+  "module": "./dist/gstwebrtc-api-2.0.0.esm.js",
+  "types": "./types/index.d.ts",
   "files": [
     "dist/",
     "docs/",
@@ -66,7 +68,5 @@
     "prepack": "npm run test && npm run make",
     "start": "webpack serve",
     "postinstall": "patch-package"
-  },
-  "types": "types/index.d.ts",
-  "main": "src/index.js"
+  }
 }

net/webrtc/gstwebrtc-api/webpack.config.cjs

@@ -9,21 +9,11 @@ const TerserWebpackPlugin = require("terser-webpack-plugin");
 const isDevServer = process.argv.includes("serve");
 /* eslint-enable */
 
-const config = {
+const commonConfig = {
   target: ["web", "es2017"],
   mode: isDevServer ? "development" : "production",
   devtool: isDevServer ? "eval" : "source-map",
 
-  entry: { "gstwebrtc-api": "./src/index.js" },
-  output: { filename: isDevServer ? "[name]-[contenthash].min.js" : `[name]-${packageVersion}.min.js` },
-
-  devServer: {
-    open: true,
-    static: false,
-    server: "http",
-    port: 9090
-  },
-
   optimization: {
     minimizer: [
       new TerserWebpackPlugin({
@@ -39,15 +29,56 @@ const config = {
         }
       })
     ]
-  },
-
-  plugins: [new webpack.ProgressPlugin()]
+  }
 };
 
-config.plugins.push(new HtmlWebpackPlugin({
-  template: "./index.html",
-  inject: "head",
-  minify: false
-}));
+// Normal .js file for direct use in <script> tags
+const browserConfig = {
+  ...commonConfig,
+  entry: { "gstwebrtc-api": "./src/index.js" },
+  output: {
+    filename: isDevServer ? "[name]-[contenthash].min.js" : `[name]-${packageVersion}.min.js`
+  },
 
-module.exports = config; // eslint-disable-line no-undef
+  devServer: {
+    open: true,
+    static: false,
+    server: "http",
+    port: 9090
+  },
+
+  plugins: [
+    new webpack.ProgressPlugin(),
+    new HtmlWebpackPlugin({
+      template: "./index.html",
+      inject: "head",
+      minify: false,
+      scriptLoading: "blocking"
+    })
+  ]
+};
+
+// ESM module for use in any modern JS project
+const esmConfig = {
+  ...commonConfig,
+  entry: { "gstwebrtc-api": "./src/index.js" },
+  output: {
+    filename: `[name]-${packageVersion}.esm.js`,
+    chunkFormat: "module",
+    iife: false,
+    library: {
+      type: "module"
+    },
+    module: true
+  },
+
+  experiments: {
+    outputModule: true
+  },
+
+  plugins: [
+    new webpack.ProgressPlugin()
+  ]
+};
+
+module.exports = isDevServer ? browserConfig : [browserConfig, esmConfig]; // eslint-disable-line no-undef