@khanacademy/perseus 7.2.1 → 9.0.0

package/src/__tests__/server-item-renderer.test.tsx

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
 
-import {testDependencies} from "../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
     mockedItem,
@@ -18,13 +21,13 @@ import InputNumberExport from "../widgets/input-number";
 import RadioWidgetExport from "../widgets/radio";
 
 import MockAssetLoadingWidgetExport, {
-    MockAssetLoadingWidget,
     mockedAssetItem,
 } from "./mock-asset-loading-widget";
 import MockWidgetExport from "./mock-widget";
 
 import type {PerseusItem} from "../perseus-types";
 import type {APIOptions} from "../types";
+import type {MockAssetLoadingWidget} from "./mock-asset-loading-widget";
 
 // This looks alot like `widgets/__tests__/renderQuestion.jsx', except we use
 // the ServerItemRenderer instead of Renderer
@@ -51,6 +54,7 @@ const renderQuestion = (
                 item={question}
                 problemNum={0}
                 reviewMode={false}
+                dependencies={testDependenciesV2}
                 {...optionalProps}
             />
         </RenderStateRoot>,
@@ -167,7 +171,7 @@ describe("server item renderer", () => {
         const node = renderer.getDOMNodeForPath(["input-number 1"]);
 
         // Assert
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
         expect(await within(node).findAllByRole("textbox")).toHaveLength(1);
     });
 
@@ -228,6 +232,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={0}
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -243,6 +248,7 @@ describe("server item renderer", () => {
                     item={itemWithInput}
                     problemNum={1} // to force componentDidUpdate
                     reviewMode={false}
+                    dependencies={testDependenciesV2}
                 />
                 ,
             </RenderStateRoot>,
@@ -272,6 +278,7 @@ describe("server item renderer", () => {
                     problemNum={0}
                     reviewMode={false}
                     onRendered={onRendered}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -293,6 +300,7 @@ describe("server item renderer", () => {
                     problemNum={1}
                     reviewMode={false}
                     onRendered={onRendered}
+                    dependencies={testDependenciesV2}
                 />
             </RenderStateRoot>,
         );
@@ -300,7 +308,7 @@ describe("server item renderer", () => {
         // Act
         // setAssetStatus() is not part of the Widget interface, it's specific
         // this test.
-        // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type 'Widget' to type 'MockAssetLoadingWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+        // @ts-expect-error - TS2352 - Conversion of type 'Widget' to type 'MockAssetLoadingWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
         const widget = mockedWidget as MockAssetLoadingWidget;
         widget.setAssetStatus("ABC", true);
 

package/src/__tests__/tex-wrangler.test.ts

@@ -13,7 +13,7 @@ const assertWrangled = (toWrangle: string, check: string) => {
 
 const assertParsed = (toParse: undefined | string, check: string) => {
     // We ignore whitespace when comparing
-    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
+    // @ts-expect-error - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
     const parsed = parseTex(toParse).replace(whitespaceRegex, "");
     const checkNoSpace = check.replace(whitespaceRegex, "");
     expect(parsed).toBe(checkNoSpace);

package/src/article-renderer.tsx

@@ -5,50 +5,53 @@
 
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import * as React from "react";
 
+import {DependenciesContext} from "./dependencies";
 import ProvideKeypad from "./mixins/provide-keypad";
 import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-const rendererProps = PropTypes.shape({
-    content: PropTypes.string,
-    widgets: PropTypes.objectOf(PropTypes.any),
-    images: PropTypes.objectOf(PropTypes.any),
-});
-
-class ArticleRenderer extends React.Component<any, any> {
+import type {KeypadProps} from "./mixins/provide-keypad";
+import type {PerseusRenderer} from "./perseus-types";
+import type {APIOptions, PerseusDependenciesV2} from "./types";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
+
+type Props = {
+    apiOptions: APIOptions;
+    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
+    // Whether to use the new Bibliotron styles for articles
+    /**
+     * @deprecated Does nothing
+     */
+    useNewStyles: boolean;
+    linterContext: LinterContextProps;
+    legacyPerseusLint?: ReadonlyArray<string>;
+
+    dependencies: PerseusDependenciesV2;
+} & KeypadProps;
+
+type DefaultProps = {
+    apiOptions: Props["apiOptions"];
+    useNewStyles: Props["useNewStyles"];
+    linterContext: Props["linterContext"];
+};
+
+type State = {
+    keypadElement: any | null;
+};
+
+class ArticleRenderer extends React.Component<Props, State> {
     _currentFocus: any;
 
-    static propTypes = {
-        ...ProvideKeypad.propTypes,
-        apiOptions: PropTypes.shape({
-            onFocusChange: PropTypes.func,
-            isMobile: PropTypes.bool,
-        }),
-        json: PropTypes.oneOfType([
-            rendererProps,
-            PropTypes.arrayOf(rendererProps),
-        ]).isRequired,
-
-        // Whether to use the new Bibliotron styles for articles
-        /**
-         * @deprecated Does nothing
-         */
-        useNewStyles: PropTypes.bool,
-        linterContext: PerseusLinter.linterContextProps,
-        legacyPerseusLint: PropTypes.arrayOf(PropTypes.string),
-    };
-
-    static defaultProps: any = {
-        apiOptions: {},
+    static defaultProps: DefaultProps = {
+        apiOptions: ApiOptions.defaults,
         useNewStyles: false,
         linterContext: PerseusLinter.linterContextDefault,
     };
 
-    constructor(props: any) {
+    constructor(props: Props) {
         super(props);
         this.state = ProvideKeypad.getInitialState.call(this);
     }
@@ -58,7 +61,7 @@ class ArticleRenderer extends React.Component<any, any> {
         this._currentFocus = null;
     }
 
-    shouldComponentUpdate(nextProps: any, nextState: any): any {
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
         return nextProps !== this.props || nextState !== this.state;
     }
 
@@ -96,7 +99,7 @@ class ArticleRenderer extends React.Component<any, any> {
         if (this._currentFocus) {
             const [sectionRef, ...focusPath] = this._currentFocus;
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
             const inputPaths = this.refs[sectionRef].getInputPaths();
             didFocusInput = inputPaths.some((inputPath) => {
                 return Util.inputPathsEqual(inputPath, focusPath);
@@ -107,18 +110,18 @@ class ArticleRenderer extends React.Component<any, any> {
             this.props.apiOptions.onFocusChange(
                 this._currentFocus,
                 prevFocusPath,
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'getDOMNode' does not exist on type 'never'.
                 didFocusInput && keypadElement && keypadElement.getDOMNode(),
             );
         }
 
-        // @ts-expect-error [FEI-5003] - TS1345 - An expression of type 'void' cannot be tested for truthiness.
+        // @ts-expect-error - TS1345 - An expression of type 'void' cannot be tested for truthiness.
         if (keypadElement) {
             if (didFocusInput) {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'activate' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'activate' does not exist on type 'never'.
                 keypadElement.activate();
             } else {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'dismiss' does not exist on type 'never'.
+                // @ts-expect-error - TS2339 - Property 'dismiss' does not exist on type 'never'.
                 keypadElement.dismiss();
             }
         }
@@ -149,7 +152,7 @@ class ArticleRenderer extends React.Component<any, any> {
         if (this._currentFocus) {
             const [sectionRef, ...inputPath] = this._currentFocus;
             // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
+            // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
             this.refs[sectionRef].blurPath(inputPath);
         }
     };
@@ -179,34 +182,40 @@ class ArticleRenderer extends React.Component<any, any> {
         const sections = this._sections().map((section, i) => {
             const refForSection = `section-${i}`;
             return (
-                <div key={i} className="clearfix">
-                    <Renderer
-                        {...section}
-                        ref={refForSection}
-                        key={i}
-                        key_={i}
-                        keypadElement={this.keypadElement()}
-                        apiOptions={{
-                            ...apiOptions,
-                            onFocusChange: (newFocusPath, oldFocusPath) => {
-                                // Prefix the paths with the relevant section,
-                                // so as to allow us to distinguish between
-                                // equivalently-named inputs across Renderers.
-                                this._handleFocusChange(
-                                    newFocusPath &&
-                                        [refForSection].concat(newFocusPath),
-                                    oldFocusPath &&
-                                        [refForSection].concat(oldFocusPath),
-                                );
-                            },
-                        }}
-                        linterContext={PerseusLinter.pushContextStack(
-                            this.props.linterContext,
-                            "article",
-                        )}
-                        legacyPerseusLint={this.props.legacyPerseusLint}
-                    />
-                </div>
+                <DependenciesContext.Provider value={this.props.dependencies}>
+                    <div key={i} className="clearfix">
+                        <Renderer
+                            {...section}
+                            ref={refForSection}
+                            key={i}
+                            key_={i}
+                            keypadElement={this.keypadElement()}
+                            apiOptions={{
+                                ...apiOptions,
+                                onFocusChange: (newFocusPath, oldFocusPath) => {
+                                    // Prefix the paths with the relevant section,
+                                    // so as to allow us to distinguish between
+                                    // equivalently-named inputs across Renderers.
+                                    this._handleFocusChange(
+                                        newFocusPath &&
+                                            [refForSection].concat(
+                                                newFocusPath,
+                                            ),
+                                        oldFocusPath &&
+                                            [refForSection].concat(
+                                                oldFocusPath,
+                                            ),
+                                    );
+                                },
+                            }}
+                            linterContext={PerseusLinter.pushContextStack(
+                                this.props.linterContext,
+                                "article",
+                            )}
+                            legacyPerseusLint={this.props.legacyPerseusLint}
+                        />
+                    </div>
+                </DependenciesContext.Provider>
             );
         });
 

package/src/components/__tests__/number-input.test.tsx

@@ -31,7 +31,7 @@ describe("NumberInput", function () {
         );
 
         const node = TestUtils.renderIntoDocument(<NumberInput {...props} />);
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
         TestUtils.Simulate.change(ReactDOM.findDOMNode(node), {
             target: {value: input},
         });
@@ -39,12 +39,12 @@ describe("NumberInput", function () {
     };
 
     it("basic input", function () {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
         testInputResult("42", 42);
     });
 
     it("invalid input does not change", function () {
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
         testInputResult("asdf", STARTING_VALUE);
     });
 
@@ -78,7 +78,7 @@ describe("NumberInput", function () {
                 useArrowKeys={keysEnabled}
             />,
         );
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
         TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(node), {key: key});
         expect(newVal).toEqual(endingValue);
     };

package/src/components/__tests__/sortable.test.tsx

@@ -89,10 +89,10 @@ describe("moveOptionToIndex", () => {
             throw new Error("Failed to render");
         }
 
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'moveOptionToIndex' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'never'.
         sortable.moveOptionToIndex("a", 1);
 
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getOptions' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'never'.
         expect(sortable?.getOptions()).toStrictEqual(["b", "a", "c"]);
     });
 

package/src/components/fixed-to-responsive.tsx

@@ -108,7 +108,7 @@ class FixedToResponsive extends React.Component<Props, State> {
         const spacer = (
             <div
                 style={{
-                    // @ts-expect-error [FEI-5003] - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
+                    // @ts-expect-error - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
                     paddingBottom: (1 / aspectRatio).toFixed(4) * 100 + "%",
                 }}
             />

package/src/components/graph.tsx

@@ -84,9 +84,9 @@ class Graph extends React.Component<Props> {
     protractor: any;
     ruler: any;
     _graphie: any;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
     _hasSetupGraphieThisUpdate: boolean;
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     _shouldSetupGraphie: boolean;
 
     static defaultProps: DefaultProps = {
@@ -187,7 +187,7 @@ class Graph extends React.Component<Props> {
 
         // eslint-disable-next-line react/no-string-refs
         const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
+        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
 
         // Content creators may need to explicitly add the dollar signs so the
@@ -266,7 +266,7 @@ class Graph extends React.Component<Props> {
             });
 
             $instructionsWrapper.append($instructions);
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
+            // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
             $(graphieDiv).append($instructionsWrapper);
         } else {
             $instructionsWrapper = undefined;
@@ -281,7 +281,7 @@ class Graph extends React.Component<Props> {
                           $instructionsWrapper = null;
                       }
                       // eslint-disable-next-line @babel/no-invalid-this
-                      // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                       // eslint-disable-next-line @babel/no-invalid-this
                       this.props.onMouseDown(coord);
                   }, this)
@@ -346,7 +346,7 @@ class Graph extends React.Component<Props> {
         }
 
         if (this.props.showProtractor) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const coord = this.pointsFromNormalized([[0.5, 0.05]])[0];
             this.protractor = this._graphie.protractor(coord);
         }
@@ -358,7 +358,7 @@ class Graph extends React.Component<Props> {
         }
 
         if (this.props.showRuler) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const coord = this.pointsFromNormalized([[0.5, 0.25]])[0];
             const extent =
                 this._graphie.range[0][1] - this._graphie.range[0][0];
@@ -395,7 +395,7 @@ class Graph extends React.Component<Props> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
+                // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
                 <SvgImage
                     src={imageData.url}
                     width={imageData.width}
@@ -415,11 +415,11 @@ class Graph extends React.Component<Props> {
                     width: this.props.box[0],
                     height: this.props.box[1],
                 }}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
                 onMouseOut={this.onMouseOut}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
                 onMouseOver={this.onMouseOver}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
+                // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
                 onClick={this.onClick}
             >
                 {image}

package/src/components/graphie-classes.ts

@@ -15,14 +15,14 @@ const deepEq = Util.deepEq;
  * GraphieMovables
  */
 function GraphieMovable(descriptor: any) {
-    // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
     _.extend(this, descriptor);
 }
 
 const abstractMethod = function () {
     throw new PerseusError(
         "Abstract method! Must be implemented by Graphie Movable" +
-            // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
             this.constructor.displayName,
         Errors.NotAllowed,
     );
@@ -64,16 +64,16 @@ const rewriteProps = function (props: any, childrenArray: any) {
  */
 const createClass = function (spec: any): any {
     const GraphieClass = function (props: any) {
-        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         if (!(this instanceof GraphieClass)) {
             throw new PerseusError(
                 "Use createElement or JSX with graphie movables",
                 Errors.NotAllowed,
             );
         }
-        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this.props = rewriteProps(props, props.children || []);
-        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         return this;
     };
 
@@ -125,7 +125,7 @@ const createSimpleClass = function (addFunction: any): any {
         },
 
         remove: function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
             nestedMap(this._elements, (elem) => {
                 if (elem) {
                     elem.remove();
@@ -136,7 +136,7 @@ const createSimpleClass = function (addFunction: any): any {
         },
 
         toFront: function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
             nestedMap(this._elements, (elem) => {
                 if (_.isFunction(elem.toFront)) {
                     elem.toFront();

package/src/components/graphie.tsx

@@ -120,7 +120,7 @@ class Graphie extends React.Component<Props> {
      * Use it for good and not evil.
      */
     getGraphie: () => any = () => {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         return this._graphie;
     };
 
@@ -164,9 +164,9 @@ class Graphie extends React.Component<Props> {
         this._removeMovables();
 
         const graphieDiv = ReactDOM.findDOMNode(this.graphieDivRef.current);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
+        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         const graphie = (this._graphie = createGraphie(graphieDiv));
 
         // This has to be called before addMouseLayer. You can re-init
@@ -193,7 +193,7 @@ class Graphie extends React.Component<Props> {
             // Overwrite fixed styles set in init()
             // TODO(alex): Either make this component always responsive by
             // itself, or always wrap it in other components so that it is.
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2769 - No overload matches this call. | TS2554 - Expected 2 arguments, but got 1.
             $(graphieDiv).css({width: "100%", height: "100%"});
             graphie.raphael.setSize("100%", "100%");
         }
@@ -212,13 +212,13 @@ class Graphie extends React.Component<Props> {
 
     _removeMovables: () => void = () => {
         // _.invoke works even when this._movables is undefined
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_movables' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         _.invoke(this._movables, "remove");
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_movables' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         this._movables = {};
     };
 
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(children: readonly any[], options: any) => ReactElement<any, string | JSXElementConstructor<any>> | readonly ReactElement<any, string | JSXElementConstructor<any>>[]' is not assignable to type '(children: readonly any[], arg2: any) => ReactElement<any, string | JSXElementConstructor<any>>'.
+    // @ts-expect-error - TS2322 - Type '(children: readonly any[], options: any) => ReactElement<any, string | JSXElementConstructor<any>> | readonly ReactElement<any, string | JSXElementConstructor<any>>[]' is not assignable to type '(children: readonly any[], arg2: any) => ReactElement<any, string | JSXElementConstructor<any>>'.
     _renderMovables: (
         children: ReadonlyArray<any>,
         arg2: any,
@@ -260,7 +260,7 @@ class Graphie extends React.Component<Props> {
         // elements occurring afterwards. If this happens, we set
         // `areMovablesOutOfOrder` to true:
         let areMovablesOutOfOrder = false;
-        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
         return nestedMap(children, (childDescriptor) => {
             if (!childDescriptor) {
                 // Still increment the key to avoid cascading key changes
@@ -333,7 +333,7 @@ class Graphie extends React.Component<Props> {
             }
 
             if (ref) {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'movables' does not exist on type 'Graphie'.
+                // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
                 this.movables[ref] = newMovables[key];
             }
 
@@ -343,18 +343,18 @@ class Graphie extends React.Component<Props> {
 
     // Sort of like react diffing, but for movables
     _updateMovables: () => void = () => {
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         const graphie = this._graphie;
 
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_movables' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         const oldMovables = this._movables;
         const newMovables: Record<string, any> = {};
-        // @ts-expect-error [FEI-5003] - TS2339 - Property '_movables' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         this._movables = newMovables;
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'movables' does not exist on type 'Graphie'.
+        // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
         this.movables = {};
 
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'ReactNode' is not assignable to parameter of type 'readonly any[]'.
+        // @ts-expect-error - TS2345 - Argument of type 'ReactNode' is not assignable to parameter of type 'readonly any[]'.
         this._renderMovables(this.props.children, {
             nextKey: 1,
             graphie: graphie,

package/src/components/highlighting/highlightable-content.tsx

@@ -131,7 +131,7 @@ class HighlightableContent extends React.PureComponent<Props, State> {
     ) => {
         const {serializedHighlights} = this.props;
         const newSerializedHighlights = {...serializedHighlights} as const;
-        // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type '{ readonly [x: string]: SerializedHighlight; }' only permits reading.
+        // @ts-expect-error - TS2542 - Index signature in type '{ readonly [x: string]: SerializedHighlight; }' only permits reading.
         delete newSerializedHighlights[keyToRemove];
         this.props.onSerializedHighlightsUpdate(newSerializedHighlights);
     };

package/src/components/highlighting/ui/highlight-renderer.tsx

@@ -53,7 +53,7 @@ type State = {
 class HighlightRenderer extends React.PureComponent<Props, State> {
     state: State = {
         cachedHighlightRects: this._computeRects(this.props),
-        // @ts-expect-error [FEI-5003] - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
+        // @ts-expect-error - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
         tooltipIsHovered: false,
     };
 

package/src/components/highlighting/ui/util.ts

@@ -117,7 +117,7 @@ function addClientRectsForText(
     mutableRects: Array<Rect>,
 ): void {
     const parentElement = textNode.parentElement;
-    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
+    // @ts-expect-error - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
     const computedStyle = window.getComputedStyle(parentElement);
 
     // NOTE(mdr): I'm not sure how computed line height works in all contexts
@@ -134,7 +134,7 @@ function addClientRectsForText(
     ) {
         const parsedLineHeight = parseFloat(computedStyle.lineHeight);
         if (!isNaN(parsedLineHeight)) {
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'number' is not assignable to type 'null'.
+            // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
             lineHeight = parsedLineHeight;
         }
     }