@khanacademy/perseus 8.0.0 → 9.0.0

package/dist/index.js

@@ -183,11 +183,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__namespace.createContext({
+  analytics: {
+    onAnalyticsEvent: async () => {}
+  }
+});
+
+/**
+ * useDependencies provides easy access to the current Perseus dependencies.
+ */
+const useDependencies = () => {
+  const deps = React__namespace.useContext(DependenciesContext);
+  return deps;
+};
 
 var dependencies = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setDependencies: setDependencies,
-    getDependencies: getDependencies
+    getDependencies: getDependencies,
+    DependenciesContext: DependenciesContext,
+    useDependencies: useDependencies
 });
 
 const prettyBig = {
@@ -2489,14 +2504,6 @@ const KhanAnswerTypes = {
   }
 };
 
-const sendExpressionEvaluatedEvent = result => {
-  getDependencies().analytics({
-    type: "perseus:expression-evaluated",
-    payload: {
-      result
-    }
-  });
-};
 const ERROR_MESSAGE = i18n__namespace._("Sorry, I don't understand that!");
 const insertBraces = value => {
   // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
@@ -2519,6 +2526,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__namespace.Component {
   constructor() {
@@ -2575,7 +2589,9 @@ class Expression extends React__namespace.Component {
     });
     _defineProperty(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;
     });
     _defineProperty(this, "getUserInput", () => {
       return Expression.getUserInputFromProps(this.props);
@@ -2733,8 +2749,6 @@ class Expression extends React__namespace.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.
@@ -2748,8 +2762,6 @@ class Expression extends React__namespace.Component {
         };
       }
       if (allEmpty) {
-        sendExpressionEvaluatedEvent("invalid");
-
         // If everything graded as empty, it's invalid.
         return {
           type: "invalid",
@@ -2758,7 +2770,6 @@ class Expression extends React__namespace.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,
@@ -2771,7 +2782,6 @@ class Expression extends React__namespace.Component {
       const apiResult = onInputError(null,
       // Reserved for some widget identifier
       userInput, matchMessage);
-      sendExpressionEvaluatedEvent("invalid");
       return {
         type: "invalid",
         message: apiResult === false ? null : matchMessage
@@ -2783,7 +2793,6 @@ class Expression extends React__namespace.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,
@@ -2809,6 +2818,15 @@ class Expression extends React__namespace.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__namespace.createElement(mathInput.KeypadInput
@@ -2969,11 +2987,18 @@ const propUpgrades$2 = {
     }]
   })
 };
+const ExpressionWithDependencies = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  const deps = useDependencies();
+  return /*#__PURE__*/React__namespace.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,
@@ -44299,7 +44324,9 @@ class ArticleRenderer extends React__namespace.Component {
     // TODO(alex): Add mobile api functions and pass them down here
     const sections = this._sections().map((section, i) => {
       const refForSection = "section-".concat(i);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+        value: this.props.dependencies
+      }, /*#__PURE__*/React__namespace.createElement("div", {
         key: i,
         className: "clearfix"
       }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, section, {
@@ -44318,7 +44345,7 @@ class ArticleRenderer extends React__namespace.Component {
         },
         linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "article"),
         legacyPerseusLint: this.props.legacyPerseusLint
-      })));
+      }))));
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes
@@ -44784,7 +44811,9 @@ class ItemRenderer extends React__namespace.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__namespace.createElement(Renderer, _extends({
+    render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({
       ref: node => {
         if (!node) {
           return;
@@ -44812,10 +44841,12 @@ class ItemRenderer extends React__namespace.Component {
       linterContext: PerseusLinter__namespace.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__namespace.createElement(HintsRenderer, {
+    render( /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement(HintsRenderer, {
       ref: node => this.hintsRenderer = node,
       hints: this.props.item.hints,
       hintsVisible: this.state.hintsVisible
@@ -44823,7 +44854,7 @@ class ItemRenderer extends React__namespace.Component {
       ,
       apiOptions: apiOptions,
       linterContext: PerseusLinter__namespace.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 || {};
@@ -45040,7 +45071,9 @@ class ItemRenderer extends React__namespace.Component {
     this.questionRenderer.deselectIncorrectSelectedChoices();
   }
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null);
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement("div", null));
   }
 }
 _defineProperty(ItemRenderer, "defaultProps", {
@@ -45363,14 +45396,16 @@ class ServerItemRenderer extends React__namespace.Component {
       apiOptions: apiOptions,
       ref: elem => this.hintsRenderer = elem
     });
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, questionRenderer), /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, questionRenderer), /*#__PURE__*/React__namespace.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 : aphrodite.css(styles$3.hintsContainer)
-    }, hintsRenderer));
+    }, hintsRenderer)));
   }
 }
 _defineProperty(ServerItemRenderer, "defaultProps", {
@@ -46727,9 +46762,11 @@ class MultiRenderer extends React__namespace.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__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, this.props.children({
       renderers: this._getRenderers()
-    });
+    }));
   }
 }
 const styles = aphrodite.StyleSheet.create({