@khanacademy/perseus 5.0.0 → 6.0.0

package/src/widgets/__tests__/__snapshots__/video.test.ts.snap

@@ -2,160 +2,152 @@
 
 exports[`video widget should snapshot on mobile: first mobile render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Watch the Biogeography: Where Life Lives video to find the answer.
-        </div>
+        Watch the Biogeography: Where Life Lives video to find the answer.
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg"
+              class="fixed-to-responsive"
+              style="max-width: 1280px; max-height: 720px;"
             >
               <div
-                class="fixed-to-responsive"
-                style="max-width: 1280px; max-height: 720px;"
+                style="padding-bottom: 56.25%;"
+              />
+              <div
+                class="default_xu2jcg-o_O-srOnly_19bpjuy"
               >
-                <div
-                  style="padding-bottom: 56.25%;"
-                />
-                <div
-                  class="default_xu2jcg-o_O-srOnly_19bpjuy"
-                >
-                  Khan Academy video wrapper
-                </div>
-                <iframe
-                  allowfullscreen=""
-                  class="perseus-video-widget"
-                  height="720"
-                  sandbox="allow-same-origin allow-scripts"
-                  src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                  width="1280"
-                />
+                Khan Academy video wrapper
               </div>
+              <iframe
+                allowfullscreen=""
+                class="perseus-video-widget"
+                height="720"
+                sandbox="allow-same-origin allow-scripts"
+                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
+                width="1280"
+              />
+            </div>
+            <div
+              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+            >
+              <span
+                class="text_f1191h"
+              />
               <div
-                class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+                aria-hidden="true"
+                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
+              />
+              <a
+                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                href="/transcript/videoNotFound"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <span
-                  class="text_f1191h"
-                />
-                <div
-                  aria-hidden="true"
-                  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-                />
-                <a
-                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
-                  href="/transcript/videoNotFound"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  See video transcript
-                </a>
-              </div>
+                See video transcript
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`video widget should snapshot: first render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          Watch the Biogeography: Where Life Lives video to find the answer.
-        </div>
+        Watch the Biogeography: Where Life Lives video to find the answer.
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg"
+              class="fixed-to-responsive"
+              style="max-width: 1280px; max-height: 720px;"
             >
               <div
-                class="fixed-to-responsive"
-                style="max-width: 1280px; max-height: 720px;"
+                style="padding-bottom: 56.25%;"
+              />
+              <div
+                class="default_xu2jcg-o_O-srOnly_19bpjuy"
               >
-                <div
-                  style="padding-bottom: 56.25%;"
-                />
-                <div
-                  class="default_xu2jcg-o_O-srOnly_19bpjuy"
-                >
-                  Khan Academy video wrapper
-                </div>
-                <iframe
-                  allowfullscreen=""
-                  class="perseus-video-widget"
-                  height="720"
-                  sandbox="allow-same-origin allow-scripts"
-                  src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
-                  width="1280"
-                />
+                Khan Academy video wrapper
               </div>
+              <iframe
+                allowfullscreen=""
+                class="perseus-video-widget"
+                height="720"
+                sandbox="allow-same-origin allow-scripts"
+                src="https://www.khanacademy.org/embed_video?slug=biogeography-where-life-lives&internal_video_only=1"
+                width="1280"
+              />
+            </div>
+            <div
+              class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+            >
+              <span
+                class="text_f1191h"
+              />
               <div
-                class="default_xu2jcg-o_O-transcriptLink_18xwqfz"
+                aria-hidden="true"
+                class="default_xu2jcg-o_O-inlineStyles_sc01dy"
+              />
+              <a
+                class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
+                href="/transcript/videoNotFound"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <span
-                  class="text_f1191h"
-                />
-                <div
-                  aria-hidden="true"
-                  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
-                />
-                <a
-                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
-                  href="/transcript/videoNotFound"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  See video transcript
-                </a>
-              </div>
+                See video transcript
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;

package/src/widgets/__tests__/matcher.test.tsx

@@ -1,4 +1,3 @@
-import getRenderA11yString from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
@@ -26,15 +25,18 @@ describe("matcher widget", () => {
 
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
             ...testDependencies,
-            getKaTeX: () => {
-                return Promise.resolve({});
+            TeX: ({
+                children,
+                onRender: onLoad,
+            }: {
+                children: React.ReactNode;
+                onRender?: () => unknown;
+            }) => {
+                React.useLayoutEffect(() => {
+                    onLoad?.();
+                }, [onLoad]);
+                return <span className="tex-mock">{children}</span>;
             },
-            TeX: ({children}: {children: React.ReactNode}) => (
-                <span className="tex-mock">{children}</span>
-            ),
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Promise<any>' is not assignable to type '() => Promise<katexA11y>'.
-            getRenderA11yString: Promise.resolve(getRenderA11yString),
-            shouldUseFutureKaTeX: (flag: boolean) => {},
         });
     });
 
@@ -149,4 +151,26 @@ describe("matcher widget", () => {
         // Assert
         expect(renderer).toHaveBeenAnsweredIncorrectly();
     });
+
+    it("is scored incorrect if the math renderer hasn't loaded yet", () => {
+        // Arrange: stub the TeX renderer to never call its onRender prop,
+        // which is how the matcher knows the math renderer is ready.
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            TeX: () => {
+                return null;
+            },
+        });
+
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+        const {renderer} = renderQuestion(question1, apiOptions);
+
+        // Act
+        renderer.guessAndScore();
+
+        // Assert
+        expect(renderer).toHaveBeenAnsweredIncorrectly();
+    });
 });

package/src/widgets/expression.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import * as KAS from "@khanacademy/kas";
-import {KeypadInput, KeypadTypes} from "@khanacademy/math-input";
+import {KeypadInput, KeypadType} from "@khanacademy/math-input";
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
@@ -9,7 +9,10 @@ import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon";
 import MathInput from "../components/math-input";
-import Tooltip from "../components/tooltip";
+import Tooltip, {
+    HorizontalDirection,
+    VerticalDirection,
+} from "../components/tooltip";
 import {iconExclamationSign} from "../icon-paths";
 import {Errors as PerseusErrors, Log} from "../logging/log";
 import * as Changeable from "../mixins/changeable";
@@ -478,9 +481,9 @@ export class Expression extends React.Component<Props, ExpressionState> {
             <span className="error-tooltip" role="tooltip">
                 <Tooltip
                     className="error-text-container"
-                    horizontalPosition="right"
-                    horizontalAlign="left"
-                    verticalPosition="top"
+                    horizontalPosition={HorizontalDirection.Right}
+                    horizontalAlign={HorizontalDirection.Left}
+                    verticalPosition={VerticalDirection.Top}
                     arrowSize={10}
                     borderColor="#fcc335"
                     show={this.state.showErrorText}
@@ -549,7 +552,7 @@ const keypadConfigurationForProps = (
 ) => {
     // Always use the Expression keypad, regardless of the button sets that have
     // been enabled.
-    const keypadType = KeypadTypes.EXPRESSION;
+    const keypadType = KeypadType.EXPRESSION;
 
     // Extract any and all variables and constants from the answer forms.
     const uniqueExtraVariables: Record<string, any> = {};

package/src/widgets/grapher.tsx

@@ -476,15 +476,15 @@ class Grapher extends React.Component<Props> {
     _calculateMobileTickStep(
         gridStep: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["gridStep"],
         step: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["step"],
         ranges: JSX.LibraryManagedAttributes<
             typeof Graphie,
-            React.ComponentProps<typeof Graphie>
+            Required<React.ComponentProps<typeof Graphie>>
         >["ranges"],
     ): any {
         const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);

package/src/widgets/image.tsx

@@ -12,7 +12,7 @@ import Renderer from "../renderer";
 import {baseUnitPx} from "../styles/constants";
 import mediaQueries from "../styles/media-queries";
 
-import type {PerseusImageWidgetOptions} from "../perseus-types";
+import type {Range, PerseusImageWidgetOptions} from "../perseus-types";
 import type {
     ChangeFn,
     PerseusScore,
@@ -21,7 +21,7 @@ import type {
 } from "../types";
 
 const defaultBoxSize = 400;
-const defaultRange = [0, 10];
+const defaultRange: Range = [0, 10];
 const defaultBackgroundImage = {
     url: null,
     width: 0,

package/src/widgets/interactive-graph.tsx

@@ -43,7 +43,7 @@ const TRASH_ICON_URI =
 
 const defaultBackgroundImage = {
     url: null,
-} as const;
+};
 
 const eq = Util.eq;
 const deepEq = Util.deepEq;
@@ -417,7 +417,6 @@ class InteractiveGraph extends React.Component<Props, State> {
             [-10, 10],
         ],
         step: [1, 1],
-        // @ts-expect-error [FEI-5003] - TS2739 - Type '{ readonly url: null; }' is missing the following properties from type 'PerseusImageBackground': width, height
         backgroundImage: defaultBackgroundImage,
         markings: "graph",
         showTooltips: false,
@@ -1984,9 +1983,10 @@ class InteractiveGraph extends React.Component<Props, State> {
             instructions = undefined;
         }
 
-        const onMouseDown = this.isClickToAddPoints()
-            ? this.handleAddPointsMouseDown
-            : null;
+        let onMouseDown;
+        if (this.isClickToAddPoints()) {
+            onMouseDown = this.handleAddPointsMouseDown;
+        }
 
         const gridStep =
             this.props.gridStep ||

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/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/{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"},
     ]
 }