@khanacademy/perseus 6.3.1 → 6.4.0

package/dist/interactive2/movable-polygon-options.d.ts

@@ -28,7 +28,7 @@ declare const _default: {
         readonly bound: (range: any, snap: any, paddingPx: number) => (arg1: Coord, arg2: Coord) => Coord;
     };
     onMove: {
-        readonly updatePoints: (coord: Coord, prevCoord: Coord) => undefined;
+        readonly updatePoints: (coord: Coord, prevCoord: Coord) => void;
     };
     onMoveEnd: {
         standard: null;

package/dist/interactive2/movable.d.ts

@@ -1,2 +1,2 @@
-declare const Movable: (graphie: any, options: any) => undefined;
+declare const Movable: (graphie: any, options: any) => void;
 export default Movable;

package/dist/perseus-types.d.ts

@@ -140,11 +140,12 @@ export type PerseusExpressionWidgetOptions = {
     times: boolean;
     buttonsVisible?: "always" | "never" | "focused";
 };
+export declare const PerseusExpressionAnswerFormConsidered: readonly ["correct", "wrong", "ungraded"];
 export type PerseusExpressionAnswerForm = {
     value: string;
     form: boolean;
     simplify: boolean;
-    considered: string;
+    considered: typeof PerseusExpressionAnswerFormConsidered[number];
     key?: string;
 };
 export type PerseusGradedGroupWidgetOptions = {

package/dist/perseus-types.js.flow

@@ -258,11 +258,19 @@ export type PerseusExpressionWidgetOptions = {|
   times: boolean,
   buttonsVisible?: "always" | "never" | "focused",
 |};
+declare export var PerseusExpressionAnswerFormConsidered: [
+  "correct",
+  "wrong",
+  "ungraded"
+];
 export type PerseusExpressionAnswerForm = {|
   value: string,
   form: boolean,
   simplify: boolean,
-  considered: string,
+  considered: $ElementType<
+    typeof PerseusExpressionAnswerFormConsidered,
+    number
+  >,
   key?: string,
 |};
 export type PerseusGradedGroupWidgetOptions = {|

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type { ILogger } from "./logging/log";
 import type { Item } from "./multi-items/item-types";
 import type { PerseusWidget } from "./perseus-types";
 import type { SizeClass } from "./util/sizing-utils";
+import type { SendEventFn } from "@khanacademy/perseus-core";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 export type FocusPath = ReadonlyArray<string> | null | undefined;
 type State = any;
@@ -171,6 +172,7 @@ export type PerseusDependencies = {
     TeX: React.ComponentType<TeXProps>;
     staticUrl: StaticUrlFn;
     InitialRequestUrl: InitialRequestUrlInterface;
+    analytics: SendEventFn;
     useVideo(id: string, kind: VideoKind): Result<{
         video: VideoData | null | undefined;
     }>;

package/dist/types.js.flow

@@ -10,6 +10,7 @@ import type { ILogger } from "./logging/log";
 import type { Item } from "./multi-items/item-types";
 import type { PerseusWidget } from "./perseus-types";
 import type { SizeClass } from "./util/sizing-utils";
+import type { SendEventFn } from "@khanacademy/perseus-core";
 import type { Result } from "@khanacademy/wonder-blocks-data";
 export type FocusPath = $ReadOnlyArray<string> | null | void;
 declare type State = any;
@@ -201,6 +202,7 @@ export type PerseusDependencies = {|
   TeX: React.ComponentType<TeXProps>,
   staticUrl: StaticUrlFn,
   InitialRequestUrl: InitialRequestUrlInterface,
+  analytics: SendEventFn,
   useVideo(
     id: string,
     kind: VideoKind

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "6.3.1",
+    "version": "6.4.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,8 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^4.3.0",
+        "@khanacademy/math-input": "^5.0.0",
+        "@khanacademy/perseus-core": "0.0.1",
         "@khanacademy/perseus-linter": "^0.3.1",
         "@khanacademy/pure-markdown": "^0.2.3",
         "@khanacademy/simple-markdown": "^0.9.3"

package/src/__tests__/renderer.test.tsx

@@ -66,7 +66,6 @@ describe("renderer", () => {
         // _after_ and breaks it because we do setState() in the callback,
         // and by that point the component has been unmounted.
         jest.runOnlyPendingTimers();
-        jest.clearAllMocks();
     });
 
     describe("snapshots", () => {

package/src/index.ts

@@ -65,6 +65,7 @@ export {default as KhanMath} from "./util/math";
 export {default as LoadingContext} from "./loading-context";
 export {default as mediaQueries} from "./styles/media-queries";
 export {default as PerseusMarkdown} from "./perseus-markdown";
+export {PerseusExpressionAnswerFormConsidered} from "./perseus-types";
 export {traverse} from "./traversal";
 export {isItemRenderableByVersion} from "./renderability";
 export {violatingWidgets} from "./a11y";

package/src/interactive2/__tests__/movable-mock.ts

@@ -7,7 +7,6 @@ import _ from "underscore";
 import Movable from "../movable";
 
 const createMock = function (): any {
-    // @ts-expect-error [FEI-5003] - TS2350 - Only a void function can be called with the 'new' keyword.
     const movable = new Movable(null, {
         mouseTarget: null,
     });

package/src/interactive2/movable-polygon-options.ts

@@ -363,8 +363,7 @@ const constraints = {
 constraints.standard = null;
 
 const onMove = {
-    // @ts-expect-error [FEI-5003] - TS2355 - A function whose declared type is neither 'void' nor 'any' must return a value.
-    updatePoints: function (coord: Coord, prevCoord: Coord): undefined {
+    updatePoints: function (coord: Coord, prevCoord: Coord): void {
         const actualDelta = kvector.subtract(coord, prevCoord);
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'state' does not exist on type '{ readonly updatePoints: (coord: Coord, prevCoord: Coord) => undefined; }'.
         _.each(this.state.points, function (point) {

package/src/interactive2/movable.ts

@@ -49,8 +49,7 @@ const DEFAULT_STATE = {
     mouseTarget: null,
 } as const;
 
-// @ts-expect-error [FEI-5003] - TS2355 - A function whose declared type is neither 'void' nor 'any' must return a value.
-const Movable = function (graphie: any, options: any): undefined {
+const Movable = function (graphie: any, options: any): void {
     // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
     _.extend(this, {
         graphie: graphie,

package/src/interactive2.ts

@@ -7,19 +7,16 @@ import KhanColors from "./util/colors";
 const Interactive2 = {
     MovablePoint: MovablePoint,
     addMovablePoint: function (graphie: any, options: any): any {
-        // @ts-expect-error [FEI-5003] - TS2350 - Only a void function can be called with the 'new' keyword.
         const movable = new Movable(graphie, {});
         return new MovablePoint(graphie, movable, options);
     },
     MovableLine: MovableLine,
     addMovableLine: function (graphie: any, options: any): any {
-        // @ts-expect-error [FEI-5003] - TS2350 - Only a void function can be called with the 'new' keyword.
         const movable = new Movable(graphie, {});
         return new MovableLine(graphie, movable, options);
     },
     MovablePolygon: MovablePolygon,
     addMovablePolygon: function (graphie: any, options: any): any {
-        // @ts-expect-error [FEI-5003] - TS2350 - Only a void function can be called with the 'new' keyword.
         const movable = new Movable(graphie, {});
         return new MovablePolygon(graphie, movable, options);
     },

package/src/perseus-types.ts

@@ -327,6 +327,12 @@ export type PerseusExpressionWidgetOptions = {
     buttonsVisible?: "always" | "never" | "focused";
 };
 
+export const PerseusExpressionAnswerFormConsidered = [
+    "correct",
+    "wrong",
+    "ungraded",
+] as const;
+
 export type PerseusExpressionAnswerForm = {
     // The Katex form of the expression.  e.g. "x\\cdot3=y"
     value: string;
@@ -335,7 +341,7 @@ export type PerseusExpressionAnswerForm = {
     // The answer expression must be fully expanded and simplified
     simplify: boolean;
     // Whether the form is considered "correct", "wrong", or "ungraded"
-    considered: string;
+    considered: typeof PerseusExpressionAnswerFormConsidered[number];
     // A key to identify the answer form in a list
     // NOTE: perseus-format.js says this is required even though it isn't necessary.
     key?: string;

package/src/renderer.tsx

@@ -1770,7 +1770,7 @@ class Renderer extends React.Component<Props, State> {
             return widgetIsGraded && !widgetIsStatic;
         });
 
-        const widgetScores: Record<string, any> = {};
+        const widgetScores: Record<string, PerseusScore> = {};
         _.each(gradedWidgetIds, (id) => {
             const props = widgetProps[id];
             const widget = this.getWidgetInstance(id);

package/src/types.ts

@@ -5,6 +5,7 @@ import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
 import type {PerseusWidget} from "./perseus-types";
 import type {SizeClass} from "./util/sizing-utils";
+import type {SendEventFn} from "@khanacademy/perseus-core";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 
 export type FocusPath = ReadonlyArray<string> | null | undefined;
@@ -128,6 +129,7 @@ export type Path = ReadonlyArray<string>;
 
 type StubTagEditorType = any; // from "./components/stub-tag-editor";
 
+// APIOptions provides different ways to customize the behaviour of Perseus.
 export type APIOptions = Readonly<{
     isArticle?: boolean;
     // This should actually be required since renderer.jsx sets defaults for
@@ -299,16 +301,26 @@ export type VideoKind = "YOUTUBE_ID" | "READABLE_ID";
 // An object for dependency injection, to allow different clients
 // to provide different methods for logging, translation, network
 // requests, etc.
+//
+// NOTE: You should avoid adding new dependencies here as this type was added
+// as a quick fix to get around the fact that some of the dependencies Perseus
+// needs are used in places where neither `APIOptions` nor a React Context
+// could be used. Aim to shrink the footprint of PerseusDependencies and try to
+// use alternative methods where possible.
 export type PerseusDependencies = {
     // JIPT
     JIPT: JIPT;
     graphieMovablesJiptLabels: JiptLabelStore;
     svgImageJiptLabels: JiptLabelStore;
     rendererTranslationComponents: JiptTranslationComponents;
+
     TeX: React.ComponentType<TeXProps>;
+
     //misc
     staticUrl: StaticUrlFn;
     InitialRequestUrl: InitialRequestUrlInterface;
+    analytics: SendEventFn;
+
     // video widget
     // This is used as a hook to fetch data about a video which is used to
     // add a link to the video transcript.  The return value conforms to
@@ -320,7 +332,9 @@ export type PerseusDependencies = {
     ): Result<{
         video: VideoData | null | undefined;
     }>;
+
     Log: ILogger;
+
     // RequestInfo
     isDevServer: boolean;
     kaLocale: string;

package/src/widgets/__testdata__/expression.testdata.ts

@@ -71,7 +71,7 @@ export const expressionItem3Options: PerseusExpressionWidgetOptions = {
             value: "x+1",
         },
         {
-            considered: "incorrect",
+            considered: "wrong",
             form: false,
             simplify: false,
             value: "y+1",

package/src/widgets/__tests__/expression.test.ts

@@ -5,7 +5,7 @@ import "@testing-library/jest-dom";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing";
+import {PerseusItem} from "../../perseus-types";
 import {
     expressionItem2,
     expressionItem3,
@@ -15,47 +15,73 @@ import {Expression} from "../expression";
 
 import {renderQuestion} from "./renderQuestion";
 
-type Item = any;
-
-const assertComplete = (itemData: Item, input, isCorrect: boolean) => {
+const assertComplete = (itemData: PerseusItem, input, isCorrect: boolean) => {
     const {renderer} = renderQuestion(itemData.question);
     userEvent.type(screen.getByRole("textbox"), input);
     const [_, score] = renderer.guessAndScore();
+
     expect(score).toMatchObject({
         type: "points",
         earned: isCorrect ? 1 : 0,
     });
 };
 
-const assertCorrect = (itemData: Item, input) =>
+const assertCorrect = (itemData: PerseusItem, input) => {
     assertComplete(itemData, input, true);
-const assertIncorrect = (itemData: Item, input: string) =>
+
+    expect(testDependencies.analytics).toHaveBeenCalledWith({
+        type: "perseus:expression-evaluated",
+        payload: {
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
+            result: "correct",
+        },
+    });
+};
+
+const assertIncorrect = (itemData: PerseusItem, input: string) => {
     assertComplete(itemData, input, false);
 
+    expect(testDependencies.analytics).toHaveBeenCalledWith({
+        type: "perseus:expression-evaluated",
+        payload: {
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
+            result: "incorrect",
+        },
+    });
+};
+
 // TODO: actually Assert that message is being set on the score object.
-const assertInvalid = (itemData: Item, input, message?: string) => {
+const assertInvalid = (itemData: PerseusItem, input, message?: string) => {
     const {renderer} = renderQuestion(itemData.question);
     if (input.length) {
         userEvent.type(screen.getByRole("textbox"), input);
     }
     const [_, score] = renderer.guessAndScore();
     expect(score).toMatchObject({type: "invalid"});
+
+    expect(testDependencies.analytics).toHaveBeenCalledWith({
+        type: "perseus:expression-evaluated",
+        payload: {
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT",
+            result: "invalid",
+        },
+    });
 };
 
 describe("Expression Widget", function () {
     beforeEach(() => {
+        jest.spyOn(testDependencies, "analytics");
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );
-        registerAllWidgetsForTesting();
     });
 
     describe("grading", function () {
-        it("should not grade a thing that doesn't parse", function () {
+        it("should not grade a thing that doesn't parse", () => {
             assertInvalid(expressionItem2, "+++");
         });
 
-        it("should not grade a thing that is empty", function () {
+        it("should not grade a thing that is empty", () => {
             assertInvalid(expressionItem2, "");
         });
     });

package/src/widgets/__tests__/renderQuestion.tsx

@@ -1,5 +1,4 @@
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {render} from "@testing-library/react";
 import * as React from "react";
 

package/src/widgets/expression.tsx

@@ -12,6 +12,7 @@ import Tooltip, {
     HorizontalDirection,
     VerticalDirection,
 } from "../components/tooltip";
+import {getDependencies} from "../dependencies";
 import {iconExclamationSign} from "../icon-paths";
 import {Errors as PerseusErrors, Log} from "../logging/log";
 import * as Changeable from "../mixins/changeable";
@@ -24,6 +25,18 @@ import type {
 } from "../perseus-types";
 import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
 
+const sendExpressionEvaluatedEvent = (
+    result: "correct" | "incorrect" | "invalid",
+) => {
+    getDependencies().analytics({
+        type: "perseus:expression-evaluated",
+        payload: {
+            virtualKeypadVersion: "PERSEUS_MATH_INPUT", // STOPSHIP: Or do we push that onto host application?
+            result,
+        },
+    });
+};
+
 type InputPath = ReadonlyArray<string>;
 
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
@@ -198,6 +211,8 @@ export class Expression extends React.Component<Props, ExpressionState> {
         // we did, whether it's considered correct, incorrect, or ungraded
         if (!matchingAnswerForm) {
             if (firstUngradedResult) {
+                sendExpressionEvaluatedEvent("invalid");
+
                 // While we didn't directly match with any answer form, we
                 // did at some point get an "ungraded" validation result,
                 // which might indicate e.g. a mismatch in variable casing.
@@ -212,6 +227,8 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 };
             }
             if (allEmpty) {
+                sendExpressionEvaluatedEvent("invalid");
+
                 // If everything graded as empty, it's invalid.
                 return {
                     type: "invalid",
@@ -220,6 +237,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
             }
             // We fell through all the possibilities and we're not empty,
             // so the answer is considered incorrect.
+            sendExpressionEvaluatedEvent("incorrect");
             return {
                 type: "points",
                 earned: 0,
@@ -234,6 +252,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 userInput,
                 matchMessage,
             );
+            sendExpressionEvaluatedEvent("invalid");
             return {
                 type: "invalid",
                 message: apiResult === false ? null : matchMessage,
@@ -245,6 +264,12 @@ export class Expression extends React.Component<Props, ExpressionState> {
         // TODO(eater): Seems silly to translate result to this
         // invalid/points thing and immediately translate it back in
         // ItemRenderer.scoreInput()
+        sendExpressionEvaluatedEvent(
+            matchingAnswerForm.considered === "correct"
+                ? "correct"
+                : "incorrect",
+        );
+
         return {
             type: "points",
             earned: matchingAnswerForm.considered === "correct" ? 1 : 0,

package/src/widgets/matrix.tsx

@@ -503,16 +503,14 @@ class Matrix extends React.Component<Props, State> {
         value,
         cb,
     ) => {
-        const answers = _.map(this.props.answers, _.clone);
+        const answers = this.props.answers.map((answer) => [...answer]);
         if (!answers[row]) {
             answers[row] = [];
         }
-        // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
         answers[row][column] = value;
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
         this.props.onChange(
             {
-                answers: answers,
+                answers,
             },
             cb,
         );

package/tsconfig-build.json

@@ -17,6 +17,7 @@
         {"path": "../kas/tsconfig-build.json"},
         {"path": "../kmath/tsconfig-build.json"},
         {"path": "../math-input/tsconfig-build.json"},
+        {"path": "../perseus-core/tsconfig-build.json"},
         {"path": "../perseus-linter/tsconfig-build.json"},
         {"path": "../pure-markdown/tsconfig-build.json"},
         {"path": "../simple-markdown/tsconfig-build.json"},