Merge pull request #63 from adzialocha/fix-externals

Fix `ws` and `dgram` externals for browser environments

.eslintrc

@@ -6,7 +6,9 @@
   "parser": "@babel/eslint-parser",
   "extends": "airbnb-base",
   "globals": {
-    "BigInt": true
+    "BigInt": true,
+    "WebSocket": true,
+    "MozWebSocket": true
   },
   "rules": {
     "max-classes-per-file": "off",

README.md

@@ -97,7 +97,7 @@ by default.
 
   ```html
   <button id="send">Send Message</button>
-  <script type="text/javascript" src="lib/osc.browser.min.js"></script>
+  <script type="text/javascript" src="lib/osc.min.js"></script>
   <script type="text/javascript">
     var osc = new OSC();
     osc.open(); // connect by default to ws://localhost:8080

package.json

@@ -3,6 +3,7 @@
   "version": "2.3.1",
   "description": "OSC library for Node.js and the browser, with customizable Plugin API for WebSocket, UDP or bridge networking",
   "main": "lib/osc.js",
+  "browser": "lib/osc.min.js",
   "scripts": {
     "build": "rollup -c",
     "docs": "esdoc",
@@ -35,26 +36,26 @@
   ],
   "homepage": "https://github.com/adzialocha/osc-js#readme",
   "devDependencies": {
-    "@babel/core": "7.17.4",
+    "@babel/core": "7.17.9",
     "@babel/eslint-parser": "7.17.0",
     "@babel/preset-env": "7.16.11",
-    "@babel/register": "7.17.0",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@babel/register": "7.17.7",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.1",
     "chai": "4.3.6",
     "chai-spies-next": "0.9.3",
     "esdoc": "1.1.0",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-standard-plugin": "1.0.0",
-    "eslint": "8.9.0",
+    "eslint": "8.13.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-plugin-import": "2.25.4",
-    "mocha": "9.2.0",
-    "rollup": "2.67.2",
+    "eslint-plugin-import": "2.26.0",
+    "mocha": "9.2.2",
+    "rollup": "2.70.1",
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-terser": "7.0.2"
   },
   "dependencies": {
-    "isomorphic-ws": "4.0.1",
-    "ws": "8.5.0"
+    "ws": "^8.5.0"
   }
 }

rollup.config.js

@@ -1,8 +1,9 @@
+import alias from '@rollup/plugin-alias'
 import babel from '@rollup/plugin-babel'
 import cleanup from 'rollup-plugin-cleanup'
 import { terser } from 'rollup-plugin-terser'
 
-function rollupPlugins(isUglified = false) {
+function rollupPlugins({ isBrowser = false } = {}) {
   const plugins = [
     babel({
       babelHelpers: 'bundled',
@@ -11,20 +12,30 @@ function rollupPlugins(isUglified = false) {
     cleanup(),
   ]
 
-  return isUglified ? plugins.concat(terser()) : plugins
+  return isBrowser ? [alias({
+    entries: [
+      { find: 'ws', replacement: 'src/external/ws.js' },
+      { find: 'dgram', replacement: 'src/external/dgram.js' },
+    ],
+  }), ...plugins, terser()] : plugins
 }
 
 function buildOptions(customOptions = {}) {
-  const { file, isUglified } = customOptions
+  const { file, isBrowser } = customOptions
 
   const defaultOptions = {
     input: 'src/osc.js',
-    plugins: isUglified ? rollupPlugins(true) : rollupPlugins(),
+    external: isBrowser ? [] : ['ws', 'dgram'],
+    plugins: rollupPlugins({ isBrowser }),
     output: {
+      globals: isBrowser ? {} : {
+        ws: 'ws',
+        dgram: 'dgram',
+      },
       file: file || 'lib/osc.js',
       name: 'OSC',
       format: 'umd',
-      sourcemap: isUglified || false,
+      sourcemap: isBrowser || false,
     },
   }
 
@@ -35,6 +46,6 @@ export default [
   buildOptions(),
   buildOptions({
     file: 'lib/osc.min.js',
-    isUglified: true,
+    isBrowser: true,
   }),
 ]

src/external/dgram.js

@@ -0,0 +1,4 @@
+// This file gets used instead of the NodeJS `dgram` module during rollup
+// builds targeting browser environments. It simply returns "nothing".
+const noop = undefined
+export default noop

src/external/ws.js

@@ -0,0 +1,27 @@
+// This file gets used instead of the `ws` package during rollup builds
+// targeting browser environments.
+let ws
+
+if (typeof WebSocket !== 'undefined') {
+  ws = WebSocket
+} else if (typeof MozWebSocket !== 'undefined') {
+  ws = MozWebSocket
+} else if (typeof global !== 'undefined') {
+  ws = global.WebSocket || global.MozWebSocket
+} else if (typeof window !== 'undefined') {
+  ws = window.WebSocket || window.MozWebSocket
+} else if (typeof self !== 'undefined') {
+  ws = self.WebSocket || self.MozWebSocket
+}
+
+/**
+ * Do not export server for browser environments.
+ * @private
+ */
+export const WebSocketServer = undefined
+
+/**
+ * Return WebSocket client for browser environments.
+ * @private
+ */
+export default ws

src/plugin/bridge.js

@@ -1,5 +1,5 @@
-const dgram = typeof window === 'undefined' ? require('dgram') : undefined
-const WebSocketServer = typeof window === 'undefined' ? require('isomorphic-ws').Server : undefined
+import dgram from 'dgram'
+import { WebSocketServer } from 'ws'
 
 /**
  * Status flags
@@ -81,6 +81,8 @@ export default class BridgePlugin {
    * const osc = new OSC({ plugin: plugin })
    */
   constructor(customOptions = {}) {
+    // `dgram` and `WebSocketServer` get replaced with an undefined value in
+    // builds targeting browser environments
     if (!dgram || !WebSocketServer) {
       throw new Error('BridgePlugin can not be used in browser context')
     }
@@ -161,8 +163,12 @@ export default class BridgePlugin {
       exclusive: options.udpServer.exclusive,
     }, () => {
       let wsServerOptions = {}
-      if (options.wsServer.server) wsServerOptions.server = options.wsServer.server
-      else wsServerOptions = options.wsServer
+      if (options.wsServer.server) {
+        wsServerOptions.server = options.wsServer.server
+      } else {
+        wsServerOptions = options.wsServer
+      }
+
       // bind Websocket server
       this.websocket = new WebSocketServer(wsServerOptions)
       this.websocket.binaryType = 'arraybuffer'

src/plugin/dgram.js

@@ -1,4 +1,4 @@
-const dgram = typeof window === 'undefined' ? require('dgram') : undefined
+import dgram from 'dgram'
 
 /**
  * Status flags
@@ -76,6 +76,8 @@ export default class DatagramPlugin {
    * const osc = new OSC({ plugin: plugin })
    */
   constructor(customOptions = {}) {
+    // `dgram` gets replaced with an undefined value in builds targeting
+    // browser environments
     if (!dgram) {
       throw new Error('DatagramPlugin can not be used in browser context')
     }

src/plugin/wsclient.js

@@ -1,6 +1,4 @@
-// eslint-disable-next-line no-undef
-const scope = typeof global === 'undefined' ? window : global
-const WebSocket = typeof __dirname === 'undefined' ? scope.WebSocket : require('isomorphic-ws')
+import WebSocket from 'ws'
 
 /**
  * Status flags

src/plugin/wsserver.js

@@ -1,4 +1,4 @@
-const WebSocketServer = typeof __dirname !== 'undefined' ? require('isomorphic-ws').Server : undefined
+import { WebSocketServer } from 'ws'
 
 /**
  * Status flags
@@ -45,6 +45,8 @@ export default class WebsocketServerPlugin {
    * const osc = new OSC({ plugin: plugin })
    */
   constructor(customOptions) {
+    // `WebSocketServer` gets replaced with an undefined value in builds
+    // targeting browser environments
     if (!WebSocketServer) {
       throw new Error('WebsocketServerPlugin can not be used in browser context')
     }