@khanacademy/perseus 4.0.0 → 4.0.2

package/dist/multi-items/multi-renderer.d.ts

@@ -27,7 +27,7 @@ type RendererData = ContentRendererData | HintRendererData;
 type RendererDataTree = Tree<ContentRendererData, HintRendererData, null>;
 /**
  * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing Flow to believe that these
+ * Some usage of this type somewhere is causing TypeScript to believe that these
  * elements should be components. Don't know where that is, to fix it up
  * properly. In reality, these types are just too hard to use and aren't
  * really helping us out as I now have to suppress this rather than

package/dist/multi-items/multi-renderer.js.flow

@@ -39,7 +39,7 @@ declare type RendererDataTree = Tree<
 >;
 /**
  * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing Flow to believe that these
+ * Some usage of this type somewhere is causing TypeScript to believe that these
  * elements should be components. Don't know where that is, to fix it up
  * properly. In reality, these types are just too hard to use and aren't
  * really helping us out as I now have to suppress this rather than

package/dist/multi-items/prop-type-builders.d.ts

@@ -2,7 +2,7 @@
  * Utility functions to build React PropTypes for multi-items and shapes.
  *
  * If you're writing new components, though, consider using the Item and Shape
- * Flow types instead.
+ * types instead.
  */
 import type { Shape } from "./shape-types";
 /**

package/dist/multi-items/shape-types.d.ts

@@ -11,7 +11,7 @@
  * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
  * even when we can't infer the shape from the tree alone.
  *
- * We *could* go all-in on a more general library to make certain Flow types
+ * We *could* go all-in on a more general library to make certain types
  * runtime-inspectable, in order to DRY some things up, but that's probably a
  * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
  * it easier to be confident that we've covered all cases rather than having to

package/dist/multi-items/shape-types.js.flow

@@ -17,7 +17,7 @@
  * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
  * even when we can't infer the shape from the tree alone.
  *
- * We *could* go all-in on a more general library to make certain Flow types
+ * We *could* go all-in on a more general library to make certain types
  * runtime-inspectable, in order to DRY some things up, but that's probably a
  * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
  * it easier to be confident that we've covered all cases rather than having to

package/dist/multi-items/tree-types.d.ts

@@ -28,7 +28,7 @@ export type ObjectNode<C, H, T> = {
  * TODO(somewhatabstract, JIRA-XXXX):
  * We should ditch this type or create some helpers for working with it.
  * As it stands, consumers have to check each node's type before using it
- * in order to ensure that flow can track its refinement and appropriate use.
+ * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
 export type Tree<C, H, T> = C | H | T | ArrayNode<C, H, T> | ObjectNode<C, H, T>;

package/dist/multi-items/tree-types.js.flow

@@ -34,7 +34,7 @@ export type ObjectNode<C, H, T> = {
  * TODO(somewhatabstract, JIRA-XXXX):
  * We should ditch this type or create some helpers for working with it.
  * As it stands, consumers have to check each node's type before using it
- * in order to ensure that flow can track its refinement and appropriate use.
+ * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
 export type Tree<C, H, T> =

package/dist/widgets/__stories__/test-keypad-context-wrapper.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type TestKeypadContextWrapperProps = {
+    children: React.ReactElement;
+};
+declare const TestKeypadContextWrapper: (props: TestKeypadContextWrapperProps) => React.ReactElement;
+export default TestKeypadContextWrapper;

package/dist/widgets/__stories__/test-keypad-context-wrapper.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type TestKeypadContextWrapperProps = {|
+  children: React.Element<any>,
+|};
+declare var TestKeypadContextWrapper: (
+  props: TestKeypadContextWrapperProps
+) => React.Element<any>;
+declare export default typeof TestKeypadContextWrapper;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "publishConfig": {
         "access": "public"
     },
@@ -21,12 +21,12 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.0",
-        "@khanacademy/kmath": "^0.1.0",
-        "@khanacademy/math-input": "^0.7.0",
-        "@khanacademy/perseus-linter": "^0.3.0",
-        "@khanacademy/pure-markdown": "^0.2.0",
-        "@khanacademy/simple-markdown": "^0.9.0",
+        "@khanacademy/kas": "^0.3.1",
+        "@khanacademy/kmath": "^0.1.1",
+        "@khanacademy/math-input": "^0.7.2",
+        "@khanacademy/perseus-linter": "^0.3.1",
+        "@khanacademy/pure-markdown": "^0.2.2",
+        "@khanacademy/simple-markdown": "^0.9.2",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
@@ -56,7 +56,7 @@
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
-        "perseus-build-settings": "^0.0.5",
+        "perseus-build-settings": "^0.1.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/__testdata__/item-renderer.testdata.ts

@@ -111,7 +111,7 @@ export const labelImageItem: PerseusItem = {
 export const mockedItem: PerseusItem = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types
-    // for test purposes) so we force Flow to accept it here.
+    // for test purposes) so we force TypeScript to accept it here.
     // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
     question: {
         content:

package/src/__testdata__/renderer.testdata.ts

@@ -89,7 +89,7 @@ export const question2: PerseusRenderer = {
 export const mockedItem: PerseusRenderer = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types
-    // for test purposes) so we force Flow to accept it here.
+    // for test purposes) so we force TypeScript to accept it here.
     content:
         "Mock widgets ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]]",
     images: {},

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

@@ -93,7 +93,7 @@ export const renderQuestion = (
 };
 
 // Finds a widget in the given renderer by ID. The return type is non-optional
-// (ie. it assumes the widget will exist) to make Flow happier in the tests
+// (ie. it assumes the widget will exist) to make TypeScript happier in the tests
 // that use this function.
 const getWidgetById = (
     renderer: ItemRenderer,
@@ -111,7 +111,6 @@ const makeHint = (content: string): PerseusRenderer => ({
     content:
         "Maybe if you try using a calculator? See: [[\u2603 mock-hint-widget 1]]",
     widgets: {
-        // $FlowFixMe[incompatible-return]
         "mock-hint-widget 1": {
             graded: true,
             version: {major: 0, minor: 0},

package/src/__tests__/renderer-api.test.tsx

@@ -33,7 +33,6 @@ const delayedPromise = (value: undefined) => {
 const renderQuestionArea = function (item, apiOptions): any {
     const wrapper = mount(
         <RenderStateRoot>
-            {/* $FlowFixMe[prop-missing] */}
             <Renderer
                 content={item.question.content}
                 images={item.question.images}
@@ -171,9 +170,8 @@ describe("Perseus API", function () {
                         renderer.setInputValue(widgetId, "5");
                     },
                 });
+
                 const input =
-                    // $FlowFixMe[incompatible-use]
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
                     ReactDOM.findDOMNode(renderer).querySelector("input");
 
@@ -251,8 +249,6 @@ describe("Perseus API", function () {
             });
 
             const inputs =
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
                 ReactDOM.findDOMNode(renderer).querySelectorAll("input");
             const input1 = inputs[0];

package/src/__tests__/renderer.test.tsx

@@ -184,7 +184,7 @@ describe("renderer", () => {
 
         it("should derive type widget ID if type missing", () => {
             // Arrange
-            // Note that the Flow types disallow this, but our Renderer handles the
+            // Note that the types disallow this, but our Renderer handles the
             // case so for now, I'm adding this test. We can remove the test
             // if/when we clean up the code for it in _getAllWidgetsInfo().
             const question = {

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

@@ -103,7 +103,6 @@ const FixedToResponsive: any = createReactClass({
         const spacer = (
             <div
                 style={{
-                    // $FlowFixMe[unsafe-addition]
                     // @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.
                     paddingBottom: (1 / aspectRatio).toFixed(4) * 100 + "%",
                 }}

package/src/components/graph.tsx

@@ -97,7 +97,6 @@ class Graph extends React.Component<any> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // $FlowFixMe[prop-missing]: `alt` is missing
                 // @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">'.
                 <SvgImage
                     src={imageData.url}
@@ -118,13 +117,10 @@ class Graph extends React.Component<any> {
                     width: this.props.box[0],
                     height: this.props.box[1],
                 }}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
                 onMouseOut={this.onMouseOut}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
                 onMouseOver={this.onMouseOver}
-                // $FlowFixMe[prop-missing]: This can probably be removed
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
                 onClick={this.onClick}
             >

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

@@ -61,7 +61,9 @@ class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
         }
     }
 
-    _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean {
+    _selectionIsValid(
+        trackedSelection?: TrackedSelection | null,
+    ): trackedSelection is TrackedSelection {
         if (!trackedSelection) {
             return false;
         }
@@ -123,22 +125,10 @@ class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
                                     label={i18n._("Add highlight")}
                                     onClick={() =>
                                         this._handleAddHighlight(
-                                            // TODO(mdr): We found a new Flow error when upgrading:
-                                            //     "proposedHighlight (Cannot get `trackedSelection.proposedHighlight` because property `proposedHighlight` is missing in null or undefined [1].)"
-                                            // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                            // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                             trackedSelection.proposedHighlight,
                                         )
                                     }
-                                    // TODO(mdr): We found a new Flow error when upgrading:
-                                    //     "focusNode (Cannot get `trackedSelection.focusNode` because property `focusNode` is missing in null or undefined [1].)"
-                                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                    // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                     focusNode={trackedSelection.focusNode}
-                                    // TODO(mdr): We found a new Flow error when upgrading:
-                                    //     "focusOffset (Cannot get `trackedSelection.focusOffset` because property `focusOffset` is missing in null or undefined [1].)"
-                                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                                    // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                                     focusOffset={trackedSelection.focusOffset}
                                     offsetParent={this.props.offsetParent}
                                 />

package/src/components/highlighting/ui/selection-tracker.tsx

@@ -124,7 +124,7 @@ class SelectionTracker extends React.PureComponent<
         }
 
         // NOTE(mdr): The focus node is guaranteed to exist, because
-        //     there's a range, but the Flow type annotations for
+        //     there's a range, but the type annotations for
         //     Selection don't know that. Cast it ourselves.
         const focusNode: Node = selection.focusNode as any;
         const focusOffset = selection.focusOffset;

package/src/components/highlighting/word-indexer.tsx

@@ -103,11 +103,7 @@ class WordIndexer extends React.PureComponent<WordIndexerProps> {
                 let newTrailingWordRange = null;
                 // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null' is not assignable to parameter of type 'string'.
                 while ((wordMatch = wordPattern.exec(text)) !== null) {
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)"
                     const startOffset = wordMatch.index;
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)", "0 (Cannot get `wordMatch[0]` because an indexer property is missing in null [1].)"
                     const endOffset = wordMatch.index + wordMatch[0].length;
 
                     let range;

package/src/components/math-input.tsx

@@ -191,8 +191,6 @@ class MathInput extends React.Component<Props, State> {
         // close (blur) the button group in order to focus on next page element.
         if (
             !this.mouseDown &&
-            // $FlowFixMe[incompatible-use]
-            // $FlowFixMe[incompatible-call]
             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
             !ReactDOM.findDOMNode(this).contains(e.relatedTarget)
         ) {

package/src/components/number-input.tsx

@@ -110,8 +110,6 @@ class NumberInput extends React.Component<any, any> {
      */
     getValue: () => any = () => {
         return this.parseInputValue(
-            // $FlowFixMe[incompatible-use]
-            // $FlowFixMe[prop-missing]
             // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             ReactDOM.findDOMNode(this.refs.input).value, // eslint-disable-line react/no-string-refs
         );

package/src/components/text-list-editor.tsx

@@ -116,8 +116,6 @@ class TextListEditor extends React.Component<any, any> {
                         // eslint-disable-next-line react/no-string-refs
                         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
                     ).focus();
                 });
@@ -156,8 +154,6 @@ class TextListEditor extends React.Component<any, any> {
                         // eslint-disable-next-line react/no-string-refs
                         // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         this.refs["input_" + focusIndex],
-                        // $FlowFixMe[incompatible-use]
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
                     ).focus();
                 });

package/src/components/zoomable-tex.tsx

@@ -26,10 +26,8 @@ const computeMathBounds = (
         parentNode.querySelector(".katex-html") ||
         parentNode.querySelector(".MathJax");
     const textBounds = {
-        // $FlowFixMe[incompatible-use]
         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element'.
         width: textElement.offsetWidth,
-        // $FlowFixMe[incompatible-use]
         // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element'.
         height: textElement.offsetHeight,
     } as const;

package/src/components/zoomable.tsx

@@ -63,12 +63,8 @@ class Zoomable extends React.Component<Props, State> {
             const firstChild = parentNode.firstElementChild;
 
             return {
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element'.
                 width: firstChild.offsetWidth,
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element'.
                 height: firstChild.offsetHeight,
             };

package/src/definition-context.tsx

@@ -34,7 +34,6 @@ export class DefinitionProvider extends React.Component<
     };
 
     // Method to update state
-    // $FlowFixMe[signature-verification-failure]
     setActiveDefinitionId = (activeDefinitionId?: string | null): void => {
         this.setState((prevState: ProviderState) => ({activeDefinitionId}));
     };

package/src/hints-renderer.tsx

@@ -77,7 +77,7 @@ class HintsRenderer extends React.Component<Props, State> {
             this._cacheHintImages();
         }
 
-        // Force number to make Flow happy
+        // Force number to make TypeScript happy
         const prevHintsVisible = prevProps.hintsVisible || 0;
         const nextHintsVisible = this.props.hintsVisible || 0;
 

package/src/interactive2/__tests__/movable-point.test.ts

@@ -53,7 +53,6 @@ describe("MovablePoint", function () {
         it("should snap to the grid when a snap is specified", function () {
             const point = createPoint({
                 coord: [1.1, 1.1],
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                 constraints: MovablePoint.constraints.snap([1, 1]),
             }).point;

package/src/item-renderer.tsx

@@ -174,10 +174,6 @@ class ItemRenderer extends React.Component<Props, State> {
         // strangeness instead of relying on React's normal render() method.
         // TODO(alpert): Figure out how to clean this up somehow
         reactRender(
-            // metadata (from item.question, aka PerseusRenderer)
-            // replace (also item.question, aka PerseusRenderer)
-            // savedState (I _think_ this is serializedState on Renderer)
-            // $FlowFixMe[prop-missing] metadata, replace, savedState (see above)
             <Renderer
                 ref={(node) => {
                     if (!node) {
@@ -293,7 +289,6 @@ class ItemRenderer extends React.Component<Props, State> {
             this.props.apiOptions.onFocusChange(
                 this._currentFocus,
                 prevFocus,
-                // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                 didFocusInput && keypadElement && keypadElement.getDOMNode(),
             );
         }

package/src/mixins/changeable.ts

@@ -82,7 +82,7 @@ const _changeSingle = function (
  * this.change(propName) -> returns a lambda that takes a prop value to
  * set and a callback to call after having set that value.
  */
-// TODO(WEB-1727): use proper flow syntax for overloaded functions
+// TODO(WEB-1727): use proper TypeScript syntax for overloaded functions
 export const change: ChangeFn = function (
     newPropsOrSinglePropName,
     propValue,

package/src/multi-items/__stories__/multi-renderer.stories.tsx

@@ -16,11 +16,8 @@ type Story = {
 export const SingleItem: React.FC<StoryArgs> = (args): React.ReactElement => {
     const item = {
         _multi: {
-            // $FlowFixMe[not-an-object]
             ...question1._multi,
             blurb: {
-                // $FlowFixMe[not-an-object]
-                // $FlowFixMe[prop-missing]
                 ...question1._multi.blurb,
                 content:
                     "This is a short snippet to help you understand the context of the question. We call it the 'blurb'.",
@@ -51,7 +48,6 @@ export const SingleItem: React.FC<StoryArgs> = (args): React.ReactElement => {
                             </HeadingSmall>
                             <View style={styles.hints}>
                                 {
-                                    // $FlowFixMe[prop-missing]
                                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'firstN' does not exist on type 'readonly ReactNode[]'.
                                     hints?.firstN(2)
                                 }

package/src/multi-items/__tests__/items.test.ts

@@ -157,12 +157,8 @@ describe("inferItemShape", () => {
             /**
              * TODO(somewhatabstract, JIRA-XXXX):
              * The Tree types are really hard to work with properly.
-             */
-            // $FlowFixMe[incompatible-cast]
+             */ buildEmptyItemTreeForShape(shapes.hint),
             buildEmptyItemTreeForShape(shapes.hint),
-            // $FlowFixMe[incompatible-cast]
-            buildEmptyItemTreeForShape(shapes.hint),
-            // $FlowFixMe[incompatible-cast]
             buildEmptyItemTreeForShape(shapes.hint),
         ] as ItemArrayNode);
         expect(shapes.arrayOf(shapes.hint)).toEqual(inferItemShape(item));
@@ -173,12 +169,8 @@ describe("inferItemShape", () => {
             /**
              * TODO(somewhatabstract, JIRA-XXXX):
              * The Tree types are really hard to work with properly.
-             */
-            // $FlowFixMe[incompatible-cast]
-            buildEmptyItemTreeForShape(shapes.hint),
-            // $FlowFixMe[incompatible-cast]
+             */ buildEmptyItemTreeForShape(shapes.hint),
             buildEmptyItemTreeForShape(shapes.content),
-            // $FlowFixMe[incompatible-cast]
             buildEmptyItemTreeForShape(shapes.hint),
         ] as ItemArrayNode);
         expect(shapes.arrayOf(shapes.hint)).toEqual(inferItemShape(item));
@@ -214,9 +206,7 @@ const item: Item = treeToItem({
     /**
      * TODO(somewhatabstract, JIRA-XXXX):
      * The Tree types are really hard to work with properly.
-     */
-    // $FlowFixMe[incompatible-cast]
-    b: [content(2), content(3), content(4)] as ItemArrayNode,
+     */ b: [content(2), content(3), content(4)] as ItemArrayNode,
     c: {
         d: content(5),
         e: hint(6),

package/src/multi-items/__tests__/multi-renderer.test.tsx

@@ -580,7 +580,7 @@ describe("multi-item renderer", () => {
         // ("mock-widget 1"). This verifies that the MultiRenderer has
         // correctly passed down a functioning `findWidgets` prop to the
         // widgets.
-        // Oh the Flow warnings we'll suppress. Welcome to multi items.
+        // Oh the TypeScript warnings we'll suppress. Welcome to multi items.
         const widget1 = result.question[0].props.findWidgets("mock-widget 1");
 
         // Assert

package/src/multi-items/__tests__/prop-type-builders.test.ts

@@ -6,7 +6,7 @@ import shapes from "../shapes";
 // tests. Rewrite them once we're using the prop-types library.
 describe.skip("buildPropTypeForShape", () => {
     // The value we're wrapping might not be a valid ItemTree - that's the
-    // point of testing this PropType - so we disable Flow checking by casting
+    // point of testing this PropType - so we disable type checking by casting
     // `value` to type `any`. The current implementation of `treeToItem` can
     // handle that possibility.
     const tryPropType = (propType: any, value: any) =>

package/src/multi-items/__tests__/trees.test.ts

@@ -26,13 +26,13 @@ describe("buildMapper", () => {
     }
 
     function tags(...elements): TagsNode {
-        // This function mostly exists as a shorthand way to clarify to Flow
+        // This function mostly exists as a shorthand way to clarify to TypeScript
         // that this is a TagsNode, not a confused ItemArrayNode.
         return elements;
     }
 
     function array(...elements): ItemArrayNode {
-        // This function mostly exists as a shorthand way to clarify to Flow
+        // This function mostly exists as a shorthand way to clarify to TypeScript
         // that this is an ItemArrayNode, not a confused TagsNode.
         /**
          * TODO(somewhatabstract, JIRA-XXXX):
@@ -288,18 +288,10 @@ describe("buildMapper", () => {
 
     it("uses the array mapper return value to construct the new tree", () => {
         const mapper = buildMapper()
-            // $FlowFixMe[not-a-function]
-            // $FlowFixMe[prop-missing]
-            // $FlowFixMe[incompatible-use]
             // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             .setContentMapper((c) => c.content)
-            // $FlowFixMe[not-a-function]
-            // $FlowFixMe[prop-missing]
-            // $FlowFixMe[incompatible-use]
             // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             .setHintMapper((h) => h.content)
-            // $FlowFixMe[not-a-function]
-            // $FlowFixMe[prop-missing]
             // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             .setTagsMapper((t) => t.join(", "))
             .setArrayMapper((mappedArray, originalArray, shape, path) => {

package/src/multi-items/multi-renderer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unsafe */
-// TODO(mdr): There are some Flow errors in this file, and they're tricky, so
-//     I'm skipping Flow errors for now.
+// TODO(mdr): There are some TypeScript errors in this file, and they're tricky, so
+//     I'm skipping TypeScript errors for now.
 /**
  * Main entry point to the MultiRenderer render portion.
  *
@@ -36,9 +36,8 @@
  *   </MultiRenderer>
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {StyleSheet, css} from "aphrodite";
-// eslint-disable-next-line import/no-extraneous-dependencies
-import lens from "hubble";
+import {StyleSheet, css} from "aphrodite"; // eslint-disable-line import/no-extraneous-dependencies
+import lens from "hubble"; // eslint-disable-line import/no-extraneous-dependencies
 import * as React from "react";
 
 import HintsRenderer from "../hints-renderer";
@@ -87,7 +86,7 @@ type RendererDataTree = Tree<ContentRendererData, HintRendererData, null>;
 
 /**
  * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing Flow to believe that these
+ * Some usage of this type somewhere is causing TypeScript to believe that these
  * elements should be components. Don't know where that is, to fix it up
  * properly. In reality, these types are just too hard to use and aren't
  * really helping us out as I now have to suppress this rather than
@@ -245,7 +244,7 @@ class MultiRenderer extends React.Component<Props, State> {
         //     were to change every render, it would cause the Renderer to
         //     re-render a lot more than is necessary. Don't re-compute this
         //     element unless it is necessary!
-        // HACK(mdr): Flow can't prove that this is a ContentRendererData,
+        // HACK(mdr): TypeScript can't prove that this is a ContentRendererData,
         //     because of how we awkwardly construct it in order to obtain a
         //     circular reference. But it is, I promise.
         const data: any = {ref: null, makeRenderer: null};
@@ -264,9 +263,7 @@ class MultiRenderer extends React.Component<Props, State> {
              * if this spread is including undocumented props so mapping
              * one to one could introduce a bug. Need to work out the exact
              * type for ContentNode and then fix this.
-             */
-            // $FlowFixMe[cannot-spread-inexact]
-            // @ts-expect-error [FEI-5003] - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial<Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
+             */ // @ts-expect-error [FEI-5003] - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial<Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
             <Renderer
                 {...this._getRendererProps()}
                 {...content}

package/src/multi-items/prop-type-builders.ts

@@ -2,7 +2,7 @@
  * Utility functions to build React PropTypes for multi-items and shapes.
  *
  * If you're writing new components, though, consider using the Item and Shape
- * Flow types instead.
+ * types instead.
  */
 /* instanbul ignore file */
 

package/src/multi-items/shape-types.ts

@@ -11,7 +11,7 @@
  * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
  * even when we can't infer the shape from the tree alone.
  *
- * We *could* go all-in on a more general library to make certain Flow types
+ * We *could* go all-in on a more general library to make certain types
  * runtime-inspectable, in order to DRY some things up, but that's probably a
  * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
  * it easier to be confident that we've covered all cases rather than having to

package/src/multi-items/tree-types.ts

@@ -34,7 +34,7 @@ export type ObjectNode<C, H, T> = {
  * TODO(somewhatabstract, JIRA-XXXX):
  * We should ditch this type or create some helpers for working with it.
  * As it stands, consumers have to check each node's type before using it
- * in order to ensure that flow can track its refinement and appropriate use.
+ * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
 // @ts-expect-error [FEI-5003] - TS2456 - Type alias 'Tree' circularly references itself. | TS2315 - Type 'ArrayNode' is not generic.