fix!: bundle stream-browserify/process by default

overlay/esbuild.mjs

@@ -36,11 +36,6 @@ buildSync({
   outfile: join(buildDir, 'media-overlay-library.min.js'),
   format: 'iife',
   globalName: 'mediaOverlayLibrary',
-  // Needed because readable-streams (needed by stream-browserify) still references global.
-  // There are issues on this, but they get closed, so unsure if this will ever change.
-  define: {
-    global: 'window',
-  },
   bundle: true,
   minify: true,
   sourcemap: true,

player/README.md

@@ -128,11 +128,17 @@ You can find an example of this under `example-player-react`, e.g.:
 import { BasicPlayer } from 'media-stream-player'
 ```
 
-By default, we do not pre-bundle external dependencies. If this causes problems
-with certain bundlers (e.g. CRA), you can use a pre-bundled version like so:
+There have been issue where bundlers pick up the wrong variant of `media-stream-player`,
+in which case you can try to override the resolution with an alias that points directly
+at the `browser` variant (and not the `node`) variant, e.g.:
 
 ```js
-import { BasicPlayer } from 'media-stream-player/heavy'
+{
+  //configuration options
+  alias: {
+    "media-stream-library": "media-stream-library/dist/browser"
+  }
+}
 ```
 
 To run our example react app, you can start a vite dev server with:

player/esbuild.mjs

@@ -11,14 +11,12 @@ if (!existsSync(buildDir)) {
 }
 
 const bundles = [
-  { format: 'esm', name: 'index.mjs', external: ['media-stream-library'] },
-  { format: 'cjs', name: 'index.cjs', external: ['media-stream-library'] },
-  { format: 'esm', name: 'index-heavy.mjs', external: [] },
-  { format: 'cjs', name: 'index-heavy.cjs', external: [] },
+  { format: 'esm', name: 'index.mjs' },
+  { format: 'cjs', name: 'index.cjs' },
 ]
 
 for (
-  const { name, format, external } of bundles
+  const { name, format } of bundles
 ) {
   buildSync({
     platform: 'browser',
@@ -33,7 +31,7 @@ for (
       'react-dom',
       'luxon',
       'styled-components',
-      ...external,
+      'media-stream-library',
     ],
     bundle: true,
     minify: false,
@@ -49,11 +47,6 @@ buildSync({
   outfile: join(buildDir, 'media-stream-player.min.js'),
   format: 'iife',
   globalName: 'mediaStreamPlayer',
-  // Needed because readable-streams (needed by stream-browserify) still references global.
-  // There are issues on this, but they get closed, so unsure if this will ever change.
-  define: {
-    global: 'window',
-  },
   bundle: true,
   minify: true,
   sourcemap: true,

player/package.json

@@ -26,11 +26,6 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
-    },
-    "./heavy": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index-heavy.cjs",
-      "import": "./dist/index-heavy.mjs"
     }
   },
   "files": [
@@ -45,7 +40,7 @@
   },
   "peerDependencies": {
     "luxon": "^3.0.0",
-    "media-stream-library": "^12.2.0",
+    "media-stream-library": "^13.0.0",
     "react": "^17.0.2 || ^18.1.0",
     "react-dom": "^17.0.2 || ^18.1.0",
     "styled-components": "^5.3.5"

streams/README.md

@@ -79,17 +79,20 @@ Note that we expose entry points for both node and the browser. Any bundler
 should be able to pick up the correct entry point from `package.json`. If not,
 then you can try importing from `media-stream-library/dist/browser` instead.
 
-It might be that you need to replace references to `global` with `window`
-because `readable-streams` (imported via `stream-browserify`) still refers to
-`global`.
-
-By default, we do not pre-bundle external dependencies. If this causes problems
-with certain bundlers (e.g. CRA), you can use a pre-bundled version like so:
+**Note** By default, we pre-bundle some external dependencies that are
+particularly annoying to deal with. If you use these separately in your own
+code and want to avoid bundling them twice, you can use the "light" version to
+handle all bundling yourself:
 
 ```js
-import {components, pipelines} from 'media-stream-library/heavy';
+import {components, pipelines} from 'media-stream-library/light';
 ```
 
+It might be that you need to replace references to `global` with `window`
+because `readable-streams` (imported via `stream-browserify`) still refers to
+`global`. You'll also need polyfills for `Buffer` and `process`. You can check
+the `streams/esbuild.mjs` script for how we bundle.
+
 ### Components and pipelines
 
 The library contains a collection of components that can be connected together

streams/esbuild.mjs

@@ -14,29 +14,40 @@ const browserBundles = [
   {
     format: 'esm',
     name: 'browser.mjs',
-    external: ['stream', 'buffer', 'process'],
+    external: ['debug', 'ts-md5', 'ws'],
+    inject: ['polyfill.mjs'],
   },
   {
     format: 'cjs',
     name: 'browser.cjs',
-    external: ['stream', 'buffer', 'process'],
+    external: ['debug', 'ts-md5', 'ws'],
+    inject: ['polyfill.mjs'],
+  },
+  {
+    format: 'esm',
+    name: 'browser-light.mjs',
+    external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
+  },
+  {
+    format: 'cjs',
+    name: 'browser-light.cjs',
+    external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
   },
-  { format: 'esm', name: 'browser-heavy.mjs' },
-  { format: 'cjs', name: 'browser-heavy.cjs' },
 ]
 
-for (const { format, name, external } of browserBundles) {
+for (const { format, name, external, inject } of browserBundles) {
   buildSync({
     platform: 'browser',
     entryPoints: ['src/index.browser.ts'],
     outfile: join(buildDir, name),
     format,
-    // Needed because readable-streams (needed by stream-browserify) still references global.
+    // Needed because readable-stream (needed by stream-browserify) still references global.
     // There are issues on this, but they get closed, so unsure if this will ever change.
     define: {
       global: 'window',
+      process: 'process_browser',
     },
-    inject: ['polyfill.mjs'],
+    inject,
     external,
     bundle: true,
     minify: false,
@@ -71,10 +82,11 @@ buildSync({
   outfile: join(buildDir, 'media-stream-library.min.js'),
   format: 'iife',
   globalName: 'mediaStreamLibrary',
-  // Needed because readable-streams (needed by stream-browserify) still references global.
+  // Needed because readable-stream (needed by stream-browserify) still references global.
   // There are issues on this, but they get closed, so unsure if this will ever change.
   define: {
     global: 'window',
+    process: 'process_browser',
   },
   inject: ['polyfill.mjs'],
   bundle: true,

streams/package.json

@@ -33,10 +33,10 @@
         "import": "./dist/node.mjs"
       }
     },
-    "./heavy": {
+    "./light": {
       "types": "./dist/src/index.browser.d.ts",
-      "require": "./dist/browser-heavy.cjs",
-      "import": "./dist/browser-heavy.mjs"
+      "require": "./dist/browser-light.cjs",
+      "import": "./dist/browser-light.mjs"
     }
   },
   "browser": {
@@ -50,23 +50,23 @@
     "README.md"
   ],
   "dependencies": {
-    "buffer": "6.0.3",
     "debug": "4.3.4",
-    "events": "3.3.0",
     "process": "0.11.10",
-    "stream-browserify": "3.0.0",
     "ts-md5": "1.3.1",
     "ws": "8.14.2"
   },
   "devDependencies": {
     "@types/debug": "4.1.9",
     "@types/node": "18.17.17",
     "@types/ws": "8.5.5",
+    "buffer": "6.0.3",
     "esbuild": "0.19.3",
+    "events": "3.3.0",
     "global-jsdom": "9.1.0",
     "jsdom": "21.1.2",
     "mock-socket": "9.3.1",
     "semver": "7.5.4",
+    "stream-browserify": "3.0.0",
     "typescript": "5.2.2",
     "uvu": "0.5.6"
   }

streams/polyfill.mjs

@@ -1,4 +1,4 @@
 import { Buffer } from 'buffer'
 window.Buffer = Buffer
-import * as process from 'process/browser'
-window.process = process
+import * as process_browser from 'process/browser'
+window.process_browser = process_browser