🏷️ remove the @types/css-font-loading-module dependency

This dependency (only used for typings) was using `Set`, making the rum-recorder package requiring the es2015 typescript lib. This commit removes the dependency and replaces it with lighter typings.
DataDog · Jan 8, 2021 · 583a557 · 583a557
1 parent a52d702
commit 583a557
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 34 deletions.
diff --git a/LICENSE-3rdparty.csv b/LICENSE-3rdparty.csv
@@ -2,7 +2,6 @@ Component,Origin,License,Copyright
 require,tslib,Apache-2.0,Copyright Microsoft Corporation
 file,rrweb,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
 file,tracekit,MIT,Copyright 2013 Onur Can Cakmak and all TraceKit contributors
-prod,@types/css-font-loading-module,MIT,Copyright Microsoft Corporation
 prod,rrweb-snapshot,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/graphs/contributors) and SmartX Inc.
 dev,@types/connect-busboy,MIT,Copyright Microsoft Corporation
 dev,@types/cors,MIT,Copyright Microsoft Corporation

diff --git a/packages/rum-recorder/package.json b/packages/rum-recorder/package.json
@@ -14,7 +14,6 @@
   "dependencies": {
     "@datadog/browser-core": "2.1.2",
     "@datadog/browser-rum-core": "2.1.2",
-    "@types/css-font-loading-module": "0.0.4",
     "rrweb-snapshot": "1.0.1",
     "tslib": "^1.10.0"
   },

diff --git a/packages/rum-recorder/src/domain/rrweb/observer.ts b/packages/rum-recorder/src/domain/rrweb/observer.ts
@@ -1,14 +1,13 @@
 /* tslint:disable:no-null-keyword */
 import { noop } from '@datadog/browser-core'
-// tslint:disable-next-line: no-implicit-dependencies
-import { FontFaceDescriptors, FontFaceSet } from 'css-font-loading-module'
 import { INode, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot'
 import { MutationBuffer } from './mutation'
 import {
   Arguments,
   BlockClass,
   CanvasMutationCallback,
   FontCallback,
+  FontFaceDescriptors,
   FontParam,
   HookResetter,
   HooksParam,
@@ -380,18 +379,31 @@ function initCanvasMutationObserver(cb: CanvasMutationCallback, blockClass: Bloc
   }
 }
 
+declare class FontFace {
+  constructor(family: string, source: string | ArrayBufferView, descriptors?: FontFaceDescriptors)
+}
+
+type WindowWithFontFace = typeof window & {
+  FontFace: typeof FontFace
+}
+
+type DocumentWithFonts = Document & {
+  fonts: { add(fontFace: FontFace): void }
+}
+
 function initFontObserver(cb: FontCallback): ListenerHandler {
   const handlers: ListenerHandler[] = []
 
-  const fontMap = new WeakMap<FontFace, FontParam>()
+  const fontMap = new WeakMap<object, FontParam>()
+
+  const originalFontFace = (window as WindowWithFontFace).FontFace
 
-  const originalFontFace = FontFace
-  // tslint:disable-next-line: no-any
-  ;(window as any).FontFace = function FontFace(
+  // tslint:disable-next-line: no-shadowed-variable
+  ;(window as WindowWithFontFace).FontFace = (function FontFace(
     family: string,
     source: string | ArrayBufferView,
     descriptors?: FontFaceDescriptors
-  ) {
+  ): FontFace {
     const fontFace = new originalFontFace(family, source, descriptors)
     fontMap.set(fontFace, {
       descriptors,
@@ -404,20 +416,24 @@ function initFontObserver(cb: FontCallback): ListenerHandler {
             JSON.stringify(Array.from(new Uint8Array(source as any))),
     })
     return fontFace
-  }
+  } as unknown) as typeof FontFace
 
-  const restoreHandler = patch(document.fonts, 'add', (original: (fontFace: FontFace) => unknown) => {
-    return function (this: FontFaceSet, fontFace: FontFace) {
-      setTimeout(() => {
-        const p = fontMap.get(fontFace)
-        if (p) {
-          cb(p)
-          fontMap.delete(fontFace)
-        }
-      }, 0)
-      return original.apply(this, [fontFace])
+  const restoreHandler = patch(
+    (document as DocumentWithFonts).fonts,
+    'add',
+    (original: (fontFace: FontFace) => unknown) => {
+      return function (this: unknown, fontFace: FontFace) {
+        setTimeout(() => {
+          const p = fontMap.get(fontFace)
+          if (p) {
+            cb(p)
+            fontMap.delete(fontFace)
+          }
+        }, 0)
+        return original.apply(this, [fontFace])
+      }
     }
-  })
+  )
 
   handlers.push(() => {
     // tslint:disable-next-line: no-any

diff --git a/packages/rum-recorder/src/domain/rrweb/types.ts b/packages/rum-recorder/src/domain/rrweb/types.ts
@@ -1,5 +1,3 @@
-// tslint:disable-next-line: no-implicit-dependencies
-import { FontFaceDescriptors } from 'css-font-loading-module'
 import { idNodeMap, INode, MaskInputOptions, serializedNodeWithId, SlimDOMOptions } from 'rrweb-snapshot'
 
 export enum EventType {
@@ -337,6 +335,15 @@ export interface CanvasMutationParam {
   setter?: true
 }
 
+export interface FontFaceDescriptors {
+  style?: string
+  weight?: string
+  stretch?: string
+  unicodeRange?: string
+  variant?: string
+  featureSettings?: string
+}
+
 export interface FontParam {
   family: string
   fontSource: string

diff --git a/test/app/yarn.lock b/test/app/yarn.lock
@@ -24,7 +24,6 @@
   dependencies:
     "@datadog/browser-core" "2.1.2"
     "@datadog/browser-rum-core" "2.1.2"
-    "@types/css-font-loading-module" "0.0.4"
     rrweb-snapshot "1.0.1"
     tslib "^1.10.0"
 
@@ -35,11 +34,6 @@
     "@datadog/browser-rum-core" "2.1.2"
     tslib "^1.10.0"
 
-"@types/css-font-loading-module@0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
-  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
-
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"

diff --git a/yarn.lock b/yarn.lock
@@ -1076,11 +1076,6 @@
   dependencies:
     "@types/express" "*"
 
-"@types/css-font-loading-module@0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
-  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
-
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"