@khanacademy/perseus 4.0.2 → 6.0.0

package/src/widgets/matcher.tsx

@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import Sortable from "../components/sortable";
+import Sortable, {Layout} from "../components/sortable";
 import {getDependencies} from "../dependencies";
 import {ApiOptions} from "../perseus-api";
 import Renderer from "../renderer";
@@ -21,6 +21,12 @@ import type {WidgetExports} from "../types";
 const {shuffle, seededRNG} = Util;
 const HACKY_CSS_CLASSNAME = "perseus-widget-matcher";
 
+type State = {
+    leftHeight: number;
+    rightHeight: number;
+    texRendererLoaded: boolean;
+};
+
 class Matcher extends React.Component<any, any> {
     static propTypes = {
         apiOptions: ApiOptions.propTypes,
@@ -46,27 +52,40 @@ class Matcher extends React.Component<any, any> {
         linterContext: linterContextDefault,
     };
 
-    state: any = {
+    state: State = {
         leftHeight: 0,
         rightHeight: 0,
-        katex: null,
+        texRendererLoaded: false,
     };
 
-    componentDidMount() {
-        getDependencies()
-            .getKaTeX()
-            .then((katex) => this.setState({katex}));
-    }
-
-    render(): React.ReactNode {
-        // We don't render the Matcher until KaTeX has fully loaded, in case
-        // the sortables are rendering KaTeX content. This is un-optimal as
-        // we end up loading KaTeX even when we may not need it, however it
-        // helps to ensure that the dimensions of the sortables (and thus the
-        // Matcher) will be correct when they render, if their contents are
-        // KaTeX-derived.
-        if (!this.state.katex) {
-            return <CircularSpinner />;
+    render(): React.ReactElement {
+        // To minimize layout shift, we display a spinner until our math
+        // renderer is ready to render the math inside the matcher. To
+        // do this, we:
+        // - render a dummy TeX component to force the math renderer to load
+        // - display a spinner until the TeX component calls its onRender
+        //   callback, signifying that the math is rendered (from which we can
+        //   infer that the math renderer has loaded)
+        //
+        // If we didn't do this, the user might see a matcher with empty
+        // columns on first render, and then the math would pop in a few
+        // moments later once the rendering library loaded.
+        if (!this.state.texRendererLoaded) {
+            const {TeX} = getDependencies();
+            return (
+                <>
+                    <CircularSpinner />
+                    <div style={{display: "none"}}>
+                        <TeX
+                            onRender={() => {
+                                this.setState({texRendererLoaded: true});
+                            }}
+                        >
+                            1
+                        </TeX>
+                    </div>
+                </>
+            );
         }
 
         // Use the same random() function to shuffle both columns sequentially
@@ -123,7 +142,7 @@ class Matcher extends React.Component<any, any> {
                         <td className={css(styles.column)}>
                             <Sortable
                                 options={left}
-                                layout="vertical"
+                                layout={Layout.VERTICAL}
                                 padding={this.props.padding}
                                 disabled={!this.props.orderMatters}
                                 constraints={constraints}
@@ -139,7 +158,7 @@ class Matcher extends React.Component<any, any> {
                             <Sortable
                                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'readonly unknown[]' is not assignable to type 'readonly string[]'.
                                 options={right}
-                                layout="vertical"
+                                layout={Layout.VERTICAL}
                                 padding={this.props.padding}
                                 constraints={constraints}
                                 onMeasure={this.onMeasureRight}
@@ -172,10 +191,10 @@ class Matcher extends React.Component<any, any> {
     };
 
     getUserInput: () => any = () => {
-        // If KaTeX hasn't loaded then we won't be able to get the contents
-        // of the sortables on the left and right, so we just return empty
-        // arrays until we render for the first time.
-        if (!this.state.katex) {
+        // If the math renderer hasn't loaded then we won't be able to get the
+        // contents of the sortables on the left and right, so we just return
+        // empty arrays until we render for the first time.
+        if (!this.state.texRendererLoaded) {
             return {
                 left: [],
                 right: [],

package/src/widgets/number-line.tsx

@@ -192,7 +192,7 @@ const TickMarks: any = Graphie.createSimpleClass((graphie, props) => {
 });
 
 type Props = ChangeableProps & {
-    range: ReadonlyArray<number>;
+    range: [number, number];
     labelRange: ReadonlyArray<number | null>;
     labelStyle: string;
     labelTicks: boolean;

package/src/widgets/numeric-input.tsx

@@ -76,7 +76,6 @@ type Props = ExternalProps & {
     answerForms: NonNullable<ExternalProps["answerForms"]>;
     labelText: NonNullable<ExternalProps["labelText"]>;
     linterContext: NonNullable<ExternalProps["linterContext"]>;
-    multipleNumberInput: NonNullable<ExternalProps["multipleNumberInput"]>;
     currentValue: string;
 };
 
@@ -89,7 +88,6 @@ type DefaultProps = {
     answerForms: Props["answerForms"];
     labelText: Props["labelText"];
     linterContext: Props["linterContext"];
-    multipleNumberInput: Props["multipleNumberInput"];
 };
 
 type State = {
@@ -110,7 +108,6 @@ export class NumericInput extends React.Component<Props, State> {
         answerForms: [],
         labelText: "",
         linterContext: linterContextDefault,
-        multipleNumberInput: false,
     };
 
     static getUserInputFromProps(props: Props): UserInput {

package/src/widgets/passage/passage-markdown.tsx

@@ -48,7 +48,7 @@ type HighlightNode = {
     content: string;
 };
 
-type RefStartProps = {
+type Props = {
     refContent: React.ReactNode;
 };
 
@@ -63,7 +63,7 @@ function getInitialParseState(): ParseState {
     };
 }
 
-class RefStart extends React.Component<RefStartProps> {
+class RefStart extends React.Component<Props> {
     render(): React.ReactNode {
         return <span style={REF_STYLE}>{i18n.doNotTranslate("_")}</span>;
     }

package/src/widgets/radio/__stories__/base-radio.stories.tsx

@@ -60,27 +60,27 @@ const defaultProps = {
     isLastUsedWidget: false,
 } as const;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     const overwrittenProps = {...defaultProps, ...args} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleSelectWithNothingSelected: React.FC<StoryArgs> = (
-    args,
+export const SingleSelectWithNothingSelected = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {...defaultProps, multipleSelect: false} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelectWithNothingSelected: React.FC<StoryArgs> = (
-    args,
+export const MultipleSelectWithNothingSelected = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {...defaultProps, multipleSelect: true} as const;
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelectWithCountChoicesLabel: React.FC<StoryArgs> = (
-    args,
+export const MultipleSelectWithCountChoicesLabel = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const overwrittenProps = {
         ...defaultProps,
@@ -91,9 +91,7 @@ export const MultipleSelectWithCountChoicesLabel: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleSelected = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
@@ -107,9 +105,7 @@ export const SingleSelected: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleSelected: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleSelected = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
@@ -124,9 +120,7 @@ export const MultipleSelected: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const SingleKitchenSink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleKitchenSink = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => {
@@ -162,9 +156,7 @@ export const SingleKitchenSink: React.FC<StoryArgs> = (
     return <BaseRadio {...overwrittenProps} />;
 };
 
-export const MultipleKitchenSink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultipleKitchenSink = (args: StoryArgs): React.ReactElement => {
     const choices = Array(4)
         .fill(null)
         .map((_, i) => {

package/src/widgets/radio/__stories__/choice-icon.stories.tsx

@@ -40,13 +40,11 @@ export default {
     args: defaultProps,
 };
 
-const Panel: React.FC<{
-    children: React.ReactNode;
-}> = (props): React.ReactElement => {
+const Panel = (props: {children: React.ReactNode}): React.ReactElement => {
     return <div style={{padding: "10px"}}>{props.children}</div>;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...args} />
@@ -54,7 +52,7 @@ export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} />
@@ -63,7 +61,7 @@ export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Focused = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} focused={true} />
@@ -76,7 +74,7 @@ export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} checked={true} />
@@ -89,7 +87,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const CrossedOut = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} crossedOut={true} />
@@ -102,7 +100,7 @@ export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Correct = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -124,7 +122,7 @@ export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Incorrect = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -146,7 +144,7 @@ export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const AllPositions: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const AllPositions = (args: StoryArgs): React.ReactElement => {
     // @ts-expect-error [FEI-5003] - TS2554 - Expected 1-3 arguments, but got 0.
     const allLetters = Array(26).fill();
     return (

package/src/widgets/radio/__stories__/choice-none-above.stories.tsx

@@ -34,7 +34,7 @@ const ChoiceDefaults = {
     onChange: action("changed"),
 } as const;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     const combineProps = {...ChoiceDefaults, ...args} as const;
     return <ChoiceNoneAbove {...combineProps} />;
 };

package/src/widgets/radio/__stories__/choice.stories.tsx

@@ -45,11 +45,11 @@ export default {
     args: defaultProps,
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <Choice {...args} />;
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,
@@ -73,7 +73,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ReviewMode = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         showCorrectness: true,
@@ -108,7 +108,7 @@ export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Rationale: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Rationale = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,

package/src/widgets/radio/__stories__/focus-ring.stories.tsx

@@ -25,7 +25,7 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     // faux choice is just for demonstration
     const fauxChoiceStyles = {
         height: "20px",

package/src/widgets/radio/__stories__/option-status.stories.tsx

@@ -26,13 +26,11 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <OptionStatus {...args} />;
 };
 
-export const AllPossibleOutputs: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllPossibleOutputs = (args: StoryArgs): React.ReactElement => {
     return (
         <>
             <div>

package/src/widgets/radio/base-radio.tsx

@@ -86,7 +86,7 @@ function getInstructionsText(
     return i18n._("Choose 1 answer:");
 }
 
-const BaseRadio: React.FC<Props> = function (props): React.ReactElement {
+const BaseRadio = function (props: Props): React.ReactElement {
     const {
         apiOptions,
         reviewModeRubric,

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -27,11 +27,13 @@ type ChoiceIconProps = {
     previouslyAnswered: boolean;
 };
 
-function ChoiceInner(props: {
+type ChoiceInnerProps = {
     pos: number;
     showCorrectness: boolean;
     correct: boolean | null | undefined;
-}) {
+};
+
+function ChoiceInner(props: ChoiceInnerProps) {
     const {pos, showCorrectness, correct} = props;
     const letter = getChoiceLetter(pos);
 
@@ -96,9 +98,7 @@ function getDynamicStyles(
     return {backgroundColor, borderColor, color, borderRadius};
 }
 
-const ChoiceIcon: React.FC<ChoiceIconProps> = function (
-    props,
-): React.ReactElement {
+const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
     const {
         checked,
         crossedOut,

package/src/widgets/radio/choice-icon/cross-out-line.tsx

@@ -14,9 +14,7 @@ const CROSS_OUT_LINE_SIZE = CHOICE_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-const CrossOutLine: React.FC<{
-    color: string;
-}> = function (props): React.ReactElement {
+const CrossOutLine = function (props: {color: string}): React.ReactElement {
     return (
         <svg
             width={CROSS_OUT_LINE_SIZE}

package/src/widgets/radio/choice-none-above.tsx

@@ -17,8 +17,8 @@ type WithForwardRef = {
 
 type PropsWithForwardRef = Props & WithForwardRef;
 
-const ChoiceNoneAbove: React.FC<PropsWithForwardRef> = function (
-    props,
+const ChoiceNoneAbove = function (
+    props: PropsWithForwardRef,
 ): React.ReactElement {
     const {showContent, content, forwardedRef, ...rest} = props;
 

package/src/widgets/radio/choice.tsx

@@ -78,9 +78,7 @@ function uniqueId() {
     return `choice-${id++}`;
 }
 
-const Choice: React.FC<ChoicePropsWithForwardRef> = function (
-    props,
-): React.ReactElement {
+const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
     const {
         disabled = false,
         checked = false,

package/src/widgets/radio/focus-ring.tsx

@@ -18,7 +18,7 @@ type Props = {
     multipleSelect: boolean;
 };
 
-const FocusRing: React.FC<Props> = function (props): React.ReactElement {
+const FocusRing = function (props: Props): React.ReactElement {
     const {visible, color, children, multipleSelect} = props;
 
     const borderColor = visible ? color : "transparent";

package/src/widgets/radio/option-status.tsx

@@ -11,7 +11,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-type OptionStatusProps = {
+type Props = {
     // Was this option the correct answer?
     correct: boolean;
     // Did the user select this option as the answer?
@@ -47,9 +47,7 @@ function renderText(
     return i18n._("Incorrect");
 }
 
-const OptionStatus: React.FC<OptionStatusProps> = function (
-    props,
-): React.ReactElement {
+const OptionStatus = function (props: Props): React.ReactElement {
     const {checked, correct, crossedOut, previouslyAnswered, reviewMode} =
         props;
 

package/src/widgets/radio/widget.tsx

@@ -502,7 +502,6 @@ class Radio extends React.Component<Props> {
         return (
             <BaseRadio
                 labelWrap={true}
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'boolean | undefined' is not assignable to type 'boolean'.
                 multipleSelect={this.props.multipleSelect}
                 countChoices={this.props.countChoices}
                 numCorrect={this.props.numCorrect}

package/src/widgets/reaction-diagram.tsx

@@ -7,6 +7,8 @@ import {Molecule} from "./molecule";
 import type {WidgetExports} from "../types";
 
 class Separator extends React.Component<any> {
+    arrowLength = 100;
+
     static propTypes = {
         // TODO(colin): figure out and add shape.
         data: PropTypes.any,
@@ -21,8 +23,6 @@ class Separator extends React.Component<any> {
         this.drawArrow();
     }
 
-    arrowLength = 100;
-
     drawArrow = () => {
         // eslint-disable-next-line react/no-string-refs
         const canvas = this.refs["arrowCanvas" + this.props.index];

package/src/widgets/simulator.tsx

@@ -8,7 +8,6 @@ import _ from "underscore";
 
 import Graphie from "../components/graphie";
 import InfoTip from "../components/info-tip";
-import MathOutput from "../components/math-output";
 import NumberInput from "../components/number-input";
 import InteractiveUtil from "../interactive2/interactive-util";
 import * as Changeable from "../mixins/changeable";
@@ -17,6 +16,7 @@ import Util from "../util";
 import KhanColors from "../util/colors";
 import KhanMath from "../util/math";
 
+import type {Range} from "../perseus-types";
 import type {WidgetExports} from "../types";
 
 const {assert} = InteractiveUtil;
@@ -231,9 +231,7 @@ class Histogram extends React.Component<any, any> {
             range: range,
             data: data,
             scale: [
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Coordinates'.
                 Util.scaleFromExtent(range[0], this.props.box[0]),
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Coordinates'.
                 Util.scaleFromExtent(range[1], this.props.box[1]),
             ],
         } as const;
@@ -352,8 +350,8 @@ class Histogram extends React.Component<any, any> {
     };
 
     /* Convenience functions that help calculate props based on other props. */
-    _range = (props) => {
-        const defaultRange = [
+    _range = (props): [Range, Range] => {
+        const defaultRange: [Range, Range] = [
             [0, 100],
             [-1, 10],
         ];
@@ -361,7 +359,7 @@ class Histogram extends React.Component<any, any> {
         return props.data ? this._getRangeForData(props.data) : defaultRange;
     };
 
-    _getRangeForData = (data: any) => {
+    _getRangeForData = (data: any): [Range, Range] => {
         // Find first/last non-zero entry and add some padding
         const padding = 10;
         const firstIndex = _.indexOf(

package/src/widgets/video-transcript-link.tsx

@@ -31,7 +31,7 @@ type Props = {
 /**
  * Video Transcript Link Component.
  */
-const VideoTranscriptLink: React.FC<Props> = (props): React.ReactElement => {
+const VideoTranscriptLink = (props: Props): React.ReactElement => {
     const {location} = props;
     const {useVideo} = getDependencies();
     const [id, kind] = IS_URL.test(location)

package/{tsconfig.json → tsconfig-build.json}

@@ -15,11 +15,11 @@
         }
     },
     "references": [
-        {"path": "../kas"},
-        {"path": "../kmath"},
-        {"path": "../math-input"},
-        {"path": "../perseus-linter"},
-        {"path": "../pure-markdown"},
-        {"path": "../simple-markdown"},
+        {"path": "../kas/tsconfig-build.json"},
+        {"path": "../kmath/tsconfig-build.json"},
+        {"path": "../math-input/tsconfig-build.json"},
+        {"path": "../perseus-linter/tsconfig-build.json"},
+        {"path": "../pure-markdown/tsconfig-build.json"},
+        {"path": "../simple-markdown/tsconfig-build.json"},
     ]
 }