@khanacademy/perseus 4.0.1 → 5.0.0

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/error-boundary.tsx

@@ -2,18 +2,15 @@ import * as React from "react";
 
 import {Errors, Log} from "./logging/log";
 
-type ErrorBoundaryProps = {
+type Props = {
     children: React.ReactNode;
 };
-type ErrorBoundaryState = {
+type State = {
     error: string;
 };
 
-class ErrorBoundary extends React.Component<
-    ErrorBoundaryProps,
-    ErrorBoundaryState
-> {
-    constructor(props: ErrorBoundaryProps) {
+class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
         super(props);
         this.state = {error: ""};
     }

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

@@ -13,14 +13,11 @@ type Story = {
     title: string;
 };
 
-export const SingleItem: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleItem = (args: StoryArgs): 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

@@ -23,9 +23,8 @@ import type {Item} from "../item-types";
 import type {Tree} from "../tree-types";
 
 // A little helper used in the render callback of a MultiRenderer.
-const SimpleLayout: React.FC<{
-    renderers: any;
-}> = ({renderers}): React.ReactElement => {
+type Props = {renderers: any};
+const SimpleLayout = ({renderers}: Props): React.ReactElement => {
     if (renderers == null) {
         throw new Error("renderers was null");
     }
@@ -580,7 +579,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.

package/src/perseus-markdown.tsx

@@ -397,10 +397,8 @@ export default {
     parse: parse,
     parseInline: inlineParser,
     reactFor: SimpleMarkdown.reactFor,
-    // $FlowFixMe[incompatible-use]
     ruleOutput: SimpleMarkdown.ruleOutput(rules, "react") as any,
     basicOutput: SimpleMarkdown.reactFor(
-        // $FlowFixMe[incompatible-use]
         SimpleMarkdown.ruleOutput(rules, "react"),
     ) as any,
     sanitizeUrl: SimpleMarkdown.sanitizeUrl,

package/src/perseus-types.ts

@@ -732,9 +732,6 @@ export type PerseusNumericInputWidgetOptions = {
     size: string;
     // A coefficient style number allows the student to use - for -1 and an empty string to mean 1.
     coefficient: boolean;
-    // Whether we're asking for all correct solutions or only one
-    // NOTE: perseus_data.go says this is required even though it isn't necessary.
-    multipleNumberInput?: boolean;
     // Whether to right-align the text or not
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
     rightAlign?: boolean;
@@ -1423,7 +1420,7 @@ export type PerseusInputNumberWidgetOptions = {
     customKeypad?: boolean;
 };
 
-// TODO(FEI-3983): Create proper flow types for these.
+// TODO(FEI-3983): Create proper types for these.
 export type PerseusExampleGraphieWidgetOptions = any;
 export type PerseusExampleWidgetOptions = any;
 export type PerseusLightsPuzzleWidgetOptions = any;

package/src/renderer.tsx

@@ -150,7 +150,7 @@ type Props = {
     findExternalWidgets: any;
     highlightedWidgets?: ReadonlyArray<any>;
     images: PerseusRenderer["images"];
-    keypadElement?: any; // TODO(kevinb): add proper flow types,
+    keypadElement?: any; // TODO(kevinb): add proper types,
     onInteractWithWidget: (id: string) => void;
     onRender: (node?: any) => void;
     problemNum?: number;
@@ -593,11 +593,9 @@ class Renderer extends React.Component<Props, State> {
             interactionTracker = this._interactionTrackers[id] =
                 new InteractionTracker(
                     apiOptions.trackInteraction,
-                    // $FlowFixMe[incompatible-call]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
                     widgetInfo && widgetInfo.type,
                     id,
-                    // $FlowFixMe[incompatible-call]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
                     Widgets.getTracking(widgetInfo && widgetInfo.type),
                 );
@@ -1086,7 +1084,7 @@ class Renderer extends React.Component<Props, State> {
                 const isString = typeof nodeOut === "string";
                 if (typeof nodeOut === "string" && lastWasString) {
                     /**
-                     * We know that last was string, but Flow can't see this
+                     * We know that last was string, but TypeScript can't see this
                      * refinement.
                      */
                     result[result.length - 1] += nodeOut;
@@ -1308,7 +1306,6 @@ class Renderer extends React.Component<Props, State> {
                         {({setAssetStatus}) => (
                             <SvgImage
                                 setAssetStatus={setAssetStatus}
-                                /* $FlowFixMe[incompatible-type]: sanitizeUrl() can return null */
                                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | null | undefined' is not assignable to type 'string | undefined'.
                                 src={PerseusMarkdown.sanitizeUrl(node.target)}
                                 alt={node.alt}

package/src/server-item-renderer.tsx

@@ -171,12 +171,9 @@ export class ServerItemRenderer
             onFocusChange(
                 this._currentFocus,
                 prevFocus,
-                // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                 didFocusInput && keypadElement && keypadElement.getDOMNode(),
-                // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                 // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
                 didFocusInput &&
-                    // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                     this.questionRenderer.getDOMNodeForPath(newFocus),
             );
         }

package/src/util/graphie.ts

@@ -1034,7 +1034,7 @@ GraphUtils.createGraphie = function (el: any) {
          *                         the function at i
          * @param  {[]} rangeArray array of ranges over which the
          *                         corresponding functions are defined
-         * @return {Raphael set}
+         * @return {Set<any>}      set of paths
          */
         plotPiecewise: function (fnArray, rangeArray) {
             const paths = raphael.set();
@@ -1058,8 +1058,8 @@ GraphUtils.createGraphie = function (el: any) {
          * return a Raphael set of Raphael circle objects at those
          * coordinates
          *
-         * @param  {Array of arrays} endpointArray
-         * @return {Raphael set}
+         * @param  {Array<[number, number]>} endpointArray
+         * @return {Set<any>} set of circles
          */
         plotEndpointCircles: function (endpointArray) {
             const circles = raphael.set();

package/src/util/interactive.ts

@@ -3510,7 +3510,6 @@ function Protractor(graph: any, center: any) {
         }
         const time = Math.abs(this.rotation - angle) * 5;
         $({0: this.rotation}).animate(
-            // $FlowFixMe[unsupported-syntax]
             {0: angle},
             {
                 duration: time,
@@ -3578,11 +3577,8 @@ function Ruler(graphie: any, options: any) {
     if (options.ticksPerUnit === 10) {
         // decimal, as on a centimeter ruler
         tickHeightMap = {
-            // $FlowFixMe[unsupported-syntax]
             10: tickHeight,
-            // $FlowFixMe[unsupported-syntax]
             5: tickHeight * 0.55,
-            // $FlowFixMe[unsupported-syntax]
             1: tickHeight * 0.35,
         };
     } else {

package/src/util/math.ts

@@ -91,8 +91,6 @@ const KhanMath = {
 
         return true;
     },
-
-    // $FlowFixMe[incompatible-return]
     // @ts-expect-error [FEI-5003] - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
     getPrimeFactorization: function (number: number): ReadonlyArray<number> {
         if (number === 1) {
@@ -160,7 +158,6 @@ const KhanMath = {
     // tolerance can't be bigger than 1, sorry
     toFraction: function (
         decimal: number,
-        // $FlowFixMe[incompatible-return]
         tolerance?: number,
     ): [number, number] {
         if (tolerance == null) {

package/src/widgets/__stories__/categorizer.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/cs-program.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/definition.stories.tsx

@@ -94,18 +94,14 @@ const article = {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const MultipleDefinitions: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleDefinitions = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };
 
-export const ArticleDefintion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ArticleDefintion = (args: StoryArgs): React.ReactElement => {
     return <ArticleRenderer json={article} useNewStyles />;
 };

package/src/widgets/__stories__/dropdown.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/explanation.stories.tsx

@@ -9,10 +9,10 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const Question2: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question2 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };