@khanacademy/perseus 8.0.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/perseus
 
+## 9.0.0
+
+### Major Changes
+
+-   dd800c22: Rename analytics prop from onEvent to onAnalyticsEvent
+-   2b99fbda: Remove 'analytics' key from PerseusDependencies
+
+### Minor Changes
+
+-   ec50a510: Switch `virtualKeypadVersion` on `perseus:expression-evaluated` event to be non-optional
+-   673f61b3: Introduce `dependencies` on ArticleRenderer, ItemRenderer, MultiRenderer, and ServerItemRenderer.
+
+### Patch Changes
+
+-   2c69b0dc: Fix APIOptions `trackInteraction` type for better Flow type generation
+-   Updated dependencies [dd800c22]
+-   Updated dependencies [5352d512]
+-   Updated dependencies [673f61b3]
+    -   @khanacademy/math-input@10.0.0
+    -   @khanacademy/perseus-core@0.2.0
+
 ## 8.0.0
 
 ### Major Changes

package/dist/article-renderer.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
-import type { APIOptions } from "./types";
+import type { APIOptions, PerseusDependenciesV2 } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     apiOptions: APIOptions;
@@ -16,6 +16,7 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
+    dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];

package/dist/dependencies.d.ts

@@ -1,3 +1,9 @@
-import type { PerseusDependencies } from "./types";
+import * as React from "react";
+import type { PerseusDependencies, PerseusDependenciesV2 } from "./types";
 export declare const setDependencies: (dependencies: PerseusDependencies) => void;
 export declare const getDependencies: () => PerseusDependencies;
+export declare const DependenciesContext: React.Context<PerseusDependenciesV2>;
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+export declare const useDependencies: () => PerseusDependenciesV2;

package/dist/es/index.js

@@ -113,11 +113,26 @@ const getDependencies = () => {
   }
   throw new Error(["Perseus has not been provided required dependencies.", "setDependencies(dependencies) must be called first.", "Make sure Perseus is being imported from javascript/perseus/perseus.js."].join("\n"));
 };
+const DependenciesContext = /*#__PURE__*/React.createContext({
+  analytics: {
+    onAnalyticsEvent: async () => {}
+  }
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+const useDependencies = () => {
+  const deps = React.useContext(DependenciesContext);
+  return deps;
+};
 
 var dependencies = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setDependencies: setDependencies,
-    getDependencies: getDependencies
+    getDependencies: getDependencies,
+    DependenciesContext: DependenciesContext,
+    useDependencies: useDependencies
 });
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -2430,14 +2445,6 @@ const KhanAnswerTypes = {
   }
 };
 
-const sendExpressionEvaluatedEvent = result => {
-  getDependencies().analytics({
-    type: "perseus:expression-evaluated",
-    payload: {
-      result
-    }
-  });
-};
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 const insertBraces = value => {
   // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
@@ -2460,6 +2467,13 @@ const insertBraces = value => {
   // TODO(alex): Properly hack MathQuill to always use explicit braces.
   return value.replace(/([_^])([^{])/g, "$1{$2}");
 };
+const deriveKeypadVersion = apiOptions => {
+  // We can derive which version of the keypad is in use. This is
+  // a bit tricky, but this code will be relatively short-lived
+  // as we coalesce onto the new, v2 Keypad, at which point we
+  // can remove this `virtualKeypadVersion` field entirely.
+  return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : apiOptions.customKeypad === true ? apiOptions.useV2Keypad === true ? "MATH_INPUT_KEYPAD_V2" : "MATH_INPUT_KEYPAD_V1" : "PERSEUS_MATH_INPUT";
+};
 // The new, MathQuill input expression widget
 class Expression extends React.Component {
   constructor(..._args) {
@@ -2514,7 +2528,9 @@ class Expression extends React.Component {
     };
     this.simpleValidate = (rubric, onInputError) => {
       onInputError = onInputError || function () {};
-      return Expression.validate(this.getUserInput(), rubric, onInputError);
+      const result = Expression.validate(this.getUserInput(), rubric, onInputError);
+      this.sendExpressionEvaluatedEvent(result.type === "invalid" ? "invalid" : result.earned === result.total ? "correct" : "incorrect");
+      return result;
     };
     this.getUserInput = () => {
       return Expression.getUserInputFromProps(this.props);
@@ -2670,8 +2686,6 @@ class Expression extends React.Component {
     // 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.
@@ -2685,8 +2699,6 @@ class Expression extends React.Component {
         };
       }
       if (allEmpty) {
-        sendExpressionEvaluatedEvent("invalid");
-
         // If everything graded as empty, it's invalid.
         return {
           type: "invalid",
@@ -2695,7 +2707,6 @@ class Expression extends React.Component {
       }
       // We fell through all the possibilities and we're not empty,
       // so the answer is considered incorrect.
-      sendExpressionEvaluatedEvent("incorrect");
       return {
         type: "points",
         earned: 0,
@@ -2708,7 +2719,6 @@ class Expression extends React.Component {
       const apiResult = onInputError(null,
       // Reserved for some widget identifier
       userInput, matchMessage);
-      sendExpressionEvaluatedEvent("invalid");
       return {
         type: "invalid",
         message: apiResult === false ? null : matchMessage
@@ -2720,7 +2730,6 @@ class Expression extends React.Component {
     // 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,
@@ -2746,6 +2755,15 @@ class Expression extends React.Component {
     // @ts-expect-error - TS2339 - Property 'insert' does not exist on type 'ReactInstance'.
     this.refs.input.insert(keyPressed);
   }
+  sendExpressionEvaluatedEvent(result) {
+    this.props.analytics.onAnalyticsEvent({
+      type: "perseus:expression-evaluated",
+      payload: {
+        result,
+        virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
+      }
+    });
+  }
   render() {
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(KeypadInput
@@ -2906,11 +2924,18 @@ const propUpgrades$2 = {
     }]
   })
 };
+const ExpressionWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React.createElement(Expression, _extends({
+    ref: ref,
+    analytics: deps.analytics
+  }, props));
+});
 var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
   defaultAlignment: "inline-block",
-  widget: Expression,
+  widget: ExpressionWithDependencies,
   transform: widgetOptions => {
     const {
       times,
@@ -44033,7 +44058,9 @@ class ArticleRenderer extends React.Component {
     // TODO(alex): Add mobile api functions and pass them down here
     const sections = this._sections().map((section, i) => {
       const refForSection = `section-${i}`;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+        value: this.props.dependencies
+      }, /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "clearfix"
       }, /*#__PURE__*/React.createElement(Renderer, _extends({}, section, {
@@ -44051,7 +44078,7 @@ class ArticleRenderer extends React.Component {
         }),
         linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }))));
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classes
@@ -44508,7 +44535,9 @@ class ItemRenderer extends React.Component {
     // that have completely different places in the DOM, we have to do this
     // strangeness instead of relying on React's normal render() method.
     // TODO(alpert): Figure out how to clean this up somehow
-    render( /*#__PURE__*/React.createElement(Renderer, _extends({
+    render( /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({
       ref: node => {
         if (!node) {
           return;
@@ -44536,10 +44565,12 @@ class ItemRenderer extends React.Component {
       linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "question")
     }, this.props.item.question, {
       legacyPerseusLint: this.props.legacyPerseusLint
-    })),
+    }))),
     // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
     workArea);
-    render( /*#__PURE__*/React.createElement(HintsRenderer, {
+    render( /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement(HintsRenderer, {
       ref: node => this.hintsRenderer = node,
       hints: this.props.item.hints,
       hintsVisible: this.state.hintsVisible
@@ -44547,7 +44578,7 @@ class ItemRenderer extends React.Component {
       ,
       apiOptions: apiOptions,
       linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "hints")
-    }),
+    })),
     // @ts-expect-error - TS2345 - Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
     hintsArea);
     const answerArea = this.props.item.answerArea || {};
@@ -44764,7 +44795,9 @@ class ItemRenderer extends React.Component {
     this.questionRenderer.deselectIncorrectSelectedChoices();
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", null);
+    return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement("div", null));
   }
 }
 ItemRenderer.defaultProps = {
@@ -45084,14 +45117,16 @@ class ServerItemRenderer extends React.Component {
       apiOptions: apiOptions,
       ref: elem => this.hintsRenderer = elem
     });
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, questionRenderer), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, questionRenderer), /*#__PURE__*/React.createElement("div", {
       className:
       // Avoid adding any horizontal padding when applying the
       // mobile hint styles, which are flush to the left.
       // NOTE(charlie): We may still want to apply this
       // padding for desktop exercises.
       apiOptions.isMobile ? undefined : css(styles$3.hintsContainer)
-    }, hintsRenderer));
+    }, hintsRenderer)));
   }
 }
 ServerItemRenderer.defaultProps = {
@@ -46492,9 +46527,11 @@ class MultiRenderer extends React.Component {
 
     // Pass the renderer tree to the `children` function, which will
     // determine the actual content of this component.
-    return this.props.children({
+    return /*#__PURE__*/React.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, this.props.children({
       renderers: this._getRenderers()
-    });
+    }));
   }
 }
 const styles = StyleSheet.create({