Specify TS lib targets explicitly (#692)

* selectively use supported ts libs for supported browser targets

* reenable babel

* update readme

* fix grammar

* add compat action to check es compatibility of build artificats

* add compat to GH action

* add comment

.browserslistrc

@@ -0,0 +1,12 @@
+safari >= 11.1
+ios_saf >= 11.3
+chrome >= 64
+and_chr >= 64
+android >= 64
+firefox >= 58
+and_ff >= 58
+edge >= 79
+Opera >= 52
+Samsung >= 9.2
+not IE 11
+not dead

.eslintrc.cjs

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   extends: ['plugin:import/recommended', 'airbnb-typescript/base', 'prettier'],
   parserOptions: {
     project: './tsconfig.eslint.json',

.eslintrc.dist.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 2022,
+    // sourceType: 'module',
+    project: undefined,
+  },
+  env: { es2021: true },
+  plugins: ['ecmascript-compat'],
+  rules: {
+    'ecmascript-compat/compat': [
+      'error',
+      {
+        polyfills: [
+          // rollup-common-js and tsproto have environment checks using `globalThis` which causes the compat check to fail on the output
+          'globalThis',
+        ],
+      },
+    ],
+  },
+};

.github/workflows/test.yaml

@@ -37,3 +37,8 @@ jobs:
 
     - name: Run Tests
       run: yarn test
+
+    - name: Check browser target compatibility
+      run: |
+        yarn build
+        yarn compat

README.md

@@ -294,6 +294,8 @@ You can have a look at the `"browerslist"` section of `package.json` for more de
 
 If you are targeting legacy browsers, but still want adaptiveStream functionality you'll likely need to use polyfills for [ResizeObserver](https://www.npmjs.com/package/resize-observer-polyfill) and [IntersectionObserver](https://www.npmjs.com/package/intersection-observer).
 
+Also when targeting legacy browsers, older than the ones specified in our browserslist target, make sure to transpile the library code to your desired target and include required polyfills with babel and/or corejs.
+
 <!--BEGIN_REPO_NAV-->
 
 <br/><table>

package.json

@@ -36,8 +36,9 @@
     "deploy": "gh-pages -d example/dist",
     "format": "prettier --write src example/sample.ts",
     "format:check": "prettier --check src",
-    "release": "yarn build && changeset publish",
-    "downlevel-dts": "downlevel-dts ./dist/ ./dist/ts4.2 --to=4.2"
+    "release": "yarn build && yarn compat && changeset publish",
+    "downlevel-dts": "downlevel-dts ./dist/ ./dist/ts4.2 --to=4.2",
+    "compat": "eslint --no-eslintrc --config ./.eslintrc.dist.cjs ./dist/livekit-client.umd.js"
   },
   "dependencies": {
     "async-await-queue": "^1.2.1",
@@ -61,16 +62,17 @@
     "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-terser": "^0.4.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/events": "^3.0.0",
     "@types/jest": "29.5.1",
     "@types/sdp-transform": "2.4.6",
     "@types/ua-parser-js": "0.7.36",
-    "@types/ws": "8.5.4",
     "@typescript-eslint/eslint-plugin": "5.59.2",
     "@typescript-eslint/parser": "5.59.2",
     "downlevel-dts": "^0.11.0",
     "eslint": "8.39.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-ecmascript-compat": "^3.0.0",
     "eslint-plugin-import": "2.27.5",
     "gh-pages": "5.0.0",
     "jest": "29.5.0",
@@ -86,19 +88,5 @@
     "typedoc-plugin-no-inherit": "1.4.0",
     "typescript": "5.0.4",
     "vite": "4.3.4"
-  },
-  "browserslist": [
-    "safari >= 11",
-    "ios_saf >= 11",
-    "chrome >= 64",
-    "and_chr >= 64",
-    "android >= 64",
-    "firefox >= 53",
-    "and_ff >= 53",
-    "edge >= 79",
-    "Opera >= 52",
-    "Samsung >= 9.2",
-    "not IE 11",
-    "not dead"
-  ]
+  }
 }

rollup.config.js

@@ -45,7 +45,6 @@ export default {
       plugins: ['@babel/plugin-proposal-object-rest-spread'],
       presets: ['@babel/preset-env'],
       extensions: ['.js', '.ts', '.mjs'],
-      babelrc: false,
     }),
     replace({
       patterns: [

src/api/SignalClient.ts

@@ -76,7 +76,7 @@ const passThroughQueueSignals: Array<SignalKind> = [
 ];
 
 function canPassThroughQueue(req: SignalMessage): boolean {
-  const canPass = passThroughQueueSignals.includes(req!.$case);
+  const canPass = passThroughQueueSignals.indexOf(req!.$case) >= 0;
   log.trace('request allowed to bypass queue:', { canPass, req });
   return canPass;
 }

src/connectionHelper/ConnectionCheck.ts

@@ -1,4 +1,4 @@
-import EventEmitter from 'events';
+import { EventEmitter } from 'events';
 import type TypedEmitter from 'typed-emitter';
 import { CheckStatus, Checker } from './checks/Checker';
 import type { CheckInfo, InstantiableCheck } from './checks/Checker';

src/room/PCTransport.ts

@@ -1,4 +1,4 @@
-import EventEmitter from 'events';
+import { EventEmitter } from 'events';
 import { parse, write } from 'sdp-transform';
 import type { MediaDescription } from 'sdp-transform';
 import { debounce } from 'ts-debounce';

tsconfig.json

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
+    "types": ["sdp-transform", "ua-parser-js", "events", "jest"],
     "target": "ES2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "module": "ES2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": ["DOM", "DOM.Iterable", "ES2017", "ES2018.Promise"],
     "rootDir": "./",
     "outDir": "dist",
     "declaration": true,