feat: match supported browsers with the @dittolive/ditto package. see [Ditto's documentation](https://docs.ditto.live/compatibility/js-web) for details.

- Upgrades dependencies to latest compatible versions,
- removes pinning of `react` and `react-dom` dev-dependencies (were pinned to v18.0.0),
- updates @dittolive/ditto usage following update to latest version,
- adds `karma.conf.js` to `.eslintignore` as the project is using a Typescript linter,
- configures `karma-typescript` to handle ES2020 syntax used by `cbor` library (fixes #48),
- updates targeted browsers to match https://docs.ditto.live/compatibility/js-web,
- and applies all the updated linter / code style rules to the existing code.

Example project
- Upgrades dependencies,
- fixes test code,
- and adds a `TextEncoder` polyfill required for JSDom to support @dittolive/ditto.

CI
- Upgrades Github Actions versions and Node.js version used.

Author: pvditto

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 !.mocharc.js
+karma.conf.js

.github/workflows/ci.yml

@@ -5,19 +5,17 @@ jobs:
     name: Continuous Deployment
     runs-on: ubuntu-latest
     steps:
-      # - name: 'Updating Upun'
-      #   run: sudo apt-get update && sudo apt-get install -y libgbm-dev
       - name: 'Checkout Repository'
-        uses: actions/checkout@v2
-        
+        uses: actions/checkout@v4
+
       - name: 'Setup Node'
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '14'
-        
+          node-version: '20'
+
       - name: 'Setup Chrome'
         uses: browser-actions/setup-chrome@latest
-          
+
       - name: 'Install and Build'
         run: |
           yarn
@@ -27,13 +25,13 @@ jobs:
           yarn types
           yarn lint
           yarn build
-          
+
       - name: 'Run Tests'
         run: CHROMIUM_BIN=$(which chrome) yarn test
-        
+
       - name: 'Generate Documentation Website'
         run: yarn docs:generate
-        
+
       - name: Deploy Documentation Website 🚀
         if: github.ref == 'refs/heads/master'
         uses: JamesIves/[email protected]

CHANGELOG.md

@@ -4,7 +4,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [0.11.0](https://github.com/getditto/react-ditto/compare/v0.11.0-alpha.0...v0.11.0) (2023-03-22)
 
-
 ### ⚠ BREAKING CHANGES
 
 * upgrade `@dittolive/ditto` peer dependency to ^4.0.0

examples/create-react-app-typescript-example/package.json

@@ -5,20 +5,20 @@
   "dependencies": {
     "@dittolive/ditto": "link:../../node_modules/@dittolive/ditto",
     "@dittolive/react-ditto": "link:../..",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
-    "react-scripts": "4.0.3",
-    "react-select": "^5.3.0",
-    "typescript": "^4.1.2",
-    "uuid": "^8.3.2",
-    "web-vitals": "^1.0.1"
+    "react-scripts": "5.0.1",
+    "react-select": "^5.8.0",
+    "typescript": "^4.9",
+    "uuid": "^9.0.1",
+    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -45,14 +45,17 @@
     ]
   },
   "devDependencies": {
-    "@types/uuid": "^8.3.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "prettier": "2.4.1",
-    "prettier-eslint": "^13.0.0"
+    "@types/uuid": "^9.0.8",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "prettier": "3.2.5",
+    "prettier-eslint": "^16.3.0"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

examples/create-react-app-typescript-example/src/App.test.tsx

@@ -1,10 +1,9 @@
 import { render, screen } from '@testing-library/react'
-import React from 'react'
 
 import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
+  render(<App path="tasks" />)
+  const linkElement = screen.getByText(/Using Ditto with path/i)
   expect(linkElement).toBeInTheDocument()
 })

examples/create-react-app-typescript-example/src/setupTests.ts

@@ -3,3 +3,12 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
+
+// JSDom, which is used by @testing-library/react, doesn't support TextEncoder and TextDecoder,
+// even though they have broad support in modern browsers. This polyfill adds them to the global
+// object so that they can be used by @dittolive/ditto.
+// cf. https://github.com/jsdom/jsdom/issues/2524
+import { TextEncoder, TextDecoder } from 'util'
+global.TextEncoder = TextEncoder
+// @ts-ignore
+global.TextDecoder = TextDecoder