fix(web): support for older browsers like Safari 11 on iOS 13.7

packages/ui-services/src/Theme/ThemeManager.ts

@@ -60,7 +60,12 @@ export class ThemeManager extends AbstractService {
       }
       case ApplicationEvent.Launched: {
         if (!this.application.isNativeMobileWeb()) {
-          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.colorSchemeEventHandler)
+          const mq = window.matchMedia('(prefers-color-scheme: dark)')
+          if (mq.addEventListener != undefined) {
+            mq.addEventListener('change', this.colorSchemeEventHandler)
+          } else {
+            mq.addListener(this.colorSchemeEventHandler)
+          }
         }
         break
       }
@@ -131,7 +136,13 @@ export class ThemeManager extends AbstractService {
     ;(this.unregisterDesktop as unknown) = undefined
     ;(this.unregisterStream as unknown) = undefined
 
-    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.colorSchemeEventHandler)
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    if (mq.removeEventListener != undefined) {
+      mq.removeEventListener('change', this.colorSchemeEventHandler)
+    } else {
+      mq.removeListener(this.colorSchemeEventHandler)
+    }
+
     ;(this.application as unknown) = undefined
 
     this.unsubApp()

packages/web/.babelrc.json

@@ -1,4 +1,4 @@
 {
   "presets": ["@babel/preset-typescript", "@babel/preset-env"],
-  "plugins": [["@babel/plugin-transform-react-jsx"]]
+  "plugins": [["@babel/plugin-transform-react-jsx"], "@babel/plugin-proposal-class-properties"]
 }

packages/web/.browserslistrc

@@ -4,3 +4,5 @@ last 2 Edge versions
 last 2 Safari versions
 last 2 Opera versions
 Firefox ESR
+safari 11
+safari 13

packages/web/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@babel/core": "*",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/preset-env": "*",
     "@babel/preset-typescript": "^7.18.6",

packages/web/src/javascripts/Controllers/PaneController.ts

@@ -21,11 +21,21 @@ export class PaneController {
       setIsInMobileView: action,
     })
 
-    window.matchMedia(MediaQueryBreakpoints.md).addEventListener('change', this.mediumScreenMQHandler)
+    const mediaQuery = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mediaQuery?.addEventListener != undefined) {
+      mediaQuery.addEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mediaQuery.addListener(this.mediumScreenMQHandler)
+    }
   }
 
   deinit() {
-    window.matchMedia(MediaQueryBreakpoints.md).removeEventListener('change', this.mediumScreenMQHandler)
+    const mq = window.matchMedia(MediaQueryBreakpoints.md)
+    if (mq?.removeEventListener != undefined) {
+      mq.removeEventListener('change', this.mediumScreenMQHandler)
+    } else {
+      mq.removeListener(this.mediumScreenMQHandler)
+    }
   }
 
   mediumScreenMQHandler = (event: MediaQueryListEvent) => {

packages/web/src/javascripts/Hooks/useMediaQuery.tsx

@@ -18,9 +18,21 @@ export const useMediaQuery = (mediaQuery: string) => {
       setMatches(event.matches)
     }
 
-    window.matchMedia(mediaQuery).addEventListener('change', handler)
+    const mq = window.matchMedia(mediaQuery)
+    if (mq.addEventListener != undefined) {
+      mq.addEventListener('change', handler)
+    } else {
+      mq.addListener(handler)
+    }
 
-    return () => window.matchMedia(mediaQuery).removeEventListener('change', handler)
+    return () => {
+      const mq = window.matchMedia(mediaQuery)
+      if (mq.removeEventListener != undefined) {
+        mq.removeEventListener('change', handler)
+      } else {
+        mq.removeListener(handler)
+      }
+    }
   }, [mediaQuery])
 
   return matches

packages/web/web.webpack.config.js

@@ -47,9 +47,9 @@ module.exports = (env) => {
           { from: 'src/500.html' },
           { from: 'src/index.html' },
           { from: 'src/manifest.webmanifest' },
-          { from: 'src/robots.txt' }
-        ]
-      })
+          { from: 'src/robots.txt' },
+        ],
+      }),
     ],
     resolve: {
       extensions: ['.ts', '.tsx', '.js'],
@@ -67,7 +67,10 @@ module.exports = (env) => {
       rules: [
         {
           test: /\.(js|tsx?)$/,
-          exclude: /(node_modules)/,
+          /**
+           * @standardnotes/common uses class properties which we need to run through our babel rules.
+           */
+          exclude: /node_modules\/(?!(@standardnotes\/common))/,
           use: [
             'babel-loader',
             {

yarn.lock

@@ -7521,6 +7521,7 @@ __metadata:
   resolution: "@standardnotes/web@workspace:packages/web"
   dependencies:
     "@babel/core": "*"
+    "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-transform-react-jsx": ^7.19.0
     "@babel/preset-env": "*"
     "@babel/preset-typescript": ^7.18.6