@khanacademy/perseus 7.2.1 → 9.0.0

package/src/multi-items/multi-renderer.tsx

@@ -41,6 +41,7 @@ import {StyleSheet, css} from "aphrodite"; // eslint-disable-line import/no-extr
 import lens from "hubble"; // eslint-disable-line import/no-extraneous-dependencies
 import * as React from "react";
 
+import {DependenciesContext} from "../dependencies";
 import HintsRenderer from "../hints-renderer";
 import {Errors, Log} from "../logging/log";
 import Renderer from "../renderer";
@@ -50,7 +51,12 @@ import {itemToTree} from "./items";
 import {buildMapper} from "./trees";
 
 import type {Widget} from "../renderer";
-import type {APIOptions, FilterCriterion, PerseusScore} from "../types";
+import type {
+    APIOptions,
+    FilterCriterion,
+    PerseusDependenciesV2,
+    PerseusScore,
+} from "../types";
 import type {Item, ContentNode, HintNode, TagsNode} from "./item-types";
 import type {Shape, ArrayShape} from "./shape-types";
 import type {Tree} from "./tree-types";
@@ -62,7 +68,7 @@ type SerializedState = any; // TODO(mdr)
 
 type RendererProps = JSX.LibraryManagedAttributes<
     typeof Renderer,
-    // @ts-expect-error [FEI-5003] - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
+    // @ts-expect-error - TS2344 - Type 'typeof Renderer' does not satisfy the constraint 'keyof IntrinsicElements | JSXElementConstructor<any>'.
     React.ComponentProps<typeof Renderer>
 >;
 
@@ -82,7 +88,7 @@ type HintRendererData = {
     hint: Hint;
 };
 type RendererData = ContentRendererData | HintRendererData;
-// @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 type RendererDataTree = Tree<ContentRendererData, HintRendererData, null>;
 
 /**
@@ -93,11 +99,11 @@ type RendererDataTree = Tree<ContentRendererData, HintRendererData, null>;
  * really helping us out as I now have to suppress this rather than
  * get value from the type. :(
  */
-// @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 type RendererTree = Tree<ContentRendererElement, HintRendererElement, null>;
-// @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 type ScoreTree = Tree<Score, null, null>;
-// @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 type SerializedStateTree = Tree<SerializedState, null, null>;
 
 type Props = {
@@ -109,6 +115,8 @@ type Props = {
     onInteractWithWidget?: (id: string) => void;
     apiOptions?: APIOptions;
     reviewMode?: boolean | null | undefined;
+
+    dependencies: PerseusDependenciesV2;
 };
 type State = {
     // We cache functions to generate renderers and refs in `rendererDataTree`,
@@ -141,17 +149,17 @@ class MultiRenderer extends React.Component<Props, State> {
         super(props);
 
         this.rendererDataTreeMapper = buildMapper()
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ContentNode'.
+            // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ContentNode'.
             .setContentMapper((c, _, p) => this._makeContentRendererData(c, p))
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'HintNode'.
+            // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'HintNode'.
             .setHintMapper((h) => this._makeHintRendererData(h))
             .setTagsMapper((t) => null);
 
-        // @ts-expect-error [FEI-5003] - TS2322 - Type 'TreeMapperForLeavesAndCollections<unknown, any, unknown, any, unknown, unknown>' is not assignable to type 'TreeMapper<ContentRendererData, ContentRendererElement, HintRendererData, HintRendererElement, null, null>'.
+        // @ts-expect-error - TS2322 - Type 'TreeMapperForLeavesAndCollections<unknown, any, unknown, any, unknown, unknown>' is not assignable to type 'TreeMapper<ContentRendererData, ContentRendererElement, HintRendererData, HintRendererElement, null, null>'.
         this.getRenderersMapper = buildMapper()
-            // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
+            // @ts-expect-error - TS2571 - Object is of type 'unknown'.
             .setContentMapper((c) => c.makeRenderer())
-            // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
+            // @ts-expect-error - TS2571 - Object is of type 'unknown'.
             .setHintMapper((h) => h.makeRenderer())
             .setArrayMapper((renderers, data, shape) =>
                 this._annotateRendererArray(
@@ -264,7 +272,7 @@ class MultiRenderer extends React.Component<Props, State> {
              * if this spread is including undocumented props so mapping
              * one to one could introduce a bug. Need to work out the exact
              * type for ContentNode and then fix this.
-             */ // @ts-expect-error [FEI-5003] - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial<Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
+             */ // @ts-expect-error - TS2322 - Type '{ ref: (e: any) => any; findExternalWidgets: (criterion: any) => readonly (Widget | null | undefined)[]; serializedState: any; onSerializedStateUpdated: (state: any) => void; __type: "content" | "item"; ... 9 more ...; reviewMode?: boolean | ... 1 more ... | undefined; }' is not assignable to type 'InexactPartial<Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "content" | "images" | "onRender" | "linterContext" | "widgets" | "alwaysUpdate" | ... 6 more ... | "serializedState">>'.
             <Renderer
                 {...this._getRendererProps()}
                 {...content}
@@ -306,7 +314,7 @@ class MultiRenderer extends React.Component<Props, State> {
             makeRenderer: () => (
                 <HintsRenderer
                     {...this._getRendererProps()}
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                    // @ts-expect-error - TS2769 - No overload matches this call.
                     findExternalWidgets={findExternalWidgets}
                     hints={[hint]}
                 />
@@ -361,7 +369,7 @@ class MultiRenderer extends React.Component<Props, State> {
         // eslint-disable-next-line no-restricted-syntax
         leafMapper: ContentMapper<RendererData, O> &
             HintMapper<RendererData, O>,
-        // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+        // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
     ): Tree<O, O, null> | null | undefined {
         const {rendererDataTree} = this.state;
 
@@ -506,7 +514,7 @@ class MultiRenderer extends React.Component<Props, State> {
             (renderers as any).firstN = (n: any) => (
                 <HintsRenderer
                     {...this._getRendererProps()}
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                    // @ts-expect-error - TS2769 - No overload matches this call.
                     findExternalWidgets={
                         hintRendererDatas[0]
                             ? hintRendererDatas[0].findExternalWidgets
@@ -547,9 +555,13 @@ class MultiRenderer extends React.Component<Props, State> {
 
         // Pass the renderer tree to the `children` function, which will
         // determine the actual content of this component.
-        return this.props.children({
-            renderers: this._getRenderers(),
-        });
+        return (
+            <DependenciesContext.Provider value={this.props.dependencies}>
+                {this.props.children({
+                    renderers: this._getRenderers(),
+                })}
+            </DependenciesContext.Provider>
+        );
     }
 }
 

package/src/multi-items/prop-type-builders.ts

@@ -39,7 +39,7 @@ export function shapePropType(...args: ReadonlyArray<any>): any {
         }).isRequired,
     ]);
 
-    // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+    // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
     return itemShape(...args);
 }
 
@@ -99,7 +99,7 @@ function buildTreePropTypeForShape(shape: Shape): any {
         return PropTypes.shape(propTypeShape);
     }
     throw new PerseusError(
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'type' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
         `unexpected shape type ${shape.type}`,
         Errors.InvalidInput,
     );

package/src/multi-items/tree-types.ts

@@ -23,10 +23,10 @@
 
 // TODO(jeremy): We lost "arrayness" in D69450. It'd be nice to restore that
 // because right now ArrayNode doesn't add anything.
-// @ts-expect-error [FEI-5003] - TS2456 - Type alias 'ArrayNode' circularly references itself. | TS2315 - Type 'Tree' is not generic.
+// @ts-expect-error - TS2456 - Type alias 'ArrayNode' circularly references itself. | TS2315 - Type 'Tree' is not generic.
 export type ArrayNode<C, H, T> = Tree<C, H, T>;
 export type ObjectNode<C, H, T> = {
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
     [k: string]: Tree<C, H, T>;
 };
 
@@ -37,11 +37,11 @@ export type ObjectNode<C, H, T> = {
  * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
-// @ts-expect-error [FEI-5003] - TS2456 - Type alias 'Tree' circularly references itself. | TS2315 - Type 'ArrayNode' is not generic.
+// @ts-expect-error - TS2456 - Type alias 'Tree' circularly references itself. | TS2315 - Type 'ArrayNode' is not generic.
 export type Tree<C, H, T> =
     | C
     | H
     | T
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
     | ArrayNode<C, H, T>
     | ObjectNode<C, H, T>;

package/src/multi-items/trees.ts

@@ -98,13 +98,13 @@ export type ContentMapper<CI, CO> = (
 export type HintMapper<HI, HO> = (hint: HI, shape: HintShape, path: Path) => HO;
 export type TagsMapper<TI, TO> = (tag: TI, shape: TagsShape, path: Path) => TO;
 export type ArrayMapper<CI, CO, HI, HO, TI, TO> = (
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
     mappedArray: ArrayNode<CO, HO, TO>,
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
     originalArray: ArrayNode<CI, HI, TI>,
     shape: ArrayShape,
     path: Path,
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+    // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
 ) => ArrayNode<CO, HO, TO>;
 
 /**
@@ -120,7 +120,7 @@ export interface TreeMapper<CI, CO, HI, HO, TI, TO> {
     hint: HintMapper<HI, HO>;
     tags: TagsMapper<TI, TO>;
     array: ArrayMapper<CI, CO, HI, HO, TI, TO>;
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
     mapTree(tree: Tree<CI, HI, TI>, shape: Shape): Tree<CO, HO, TO>;
 }
 
@@ -196,7 +196,7 @@ class TreeMapperJustForLeaves<CI, CO, HI, HO, TI, TO> {
         );
     }
 
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
     mapTree(tree: Tree<CI, HI, TI>, shape: Shape): Tree<CO, HO, TO> {
         return mapTree(tree, shape, [], this);
     }
@@ -235,7 +235,7 @@ class TreeMapperForLeavesAndCollections<CI, CO, HI, HO, TI, TO> {
         );
     }
 
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic. | TS2315 - Type 'Tree' is not generic.
     mapTree(tree: Tree<CI, HI, TI>, shape: Shape): Tree<CO, HO, TO> {
         return mapTree(tree, shape, [], this);
     }
@@ -251,7 +251,7 @@ function identity<T>(x: T): T {
  * `setHintMapper`, `setTagMapper`, and `setArrayMapper` to specify
  * transformations for the individual node types.
  */
-// @ts-expect-error [FEI-5003] - TS2300 - Duplicate identifier 'C'. | TS2300 - Duplicate identifier 'H'. | TS2300 - Duplicate identifier 'T'.
+// @ts-expect-error - TS2300 - Duplicate identifier 'C'. | TS2300 - Duplicate identifier 'H'. | TS2300 - Duplicate identifier 'T'.
 export function buildMapper<C, C, H, H, T, T>(): TreeMapperJustForLeaves<
     C,
     C,
@@ -268,12 +268,12 @@ export function buildMapper<C, C, H, H, T, T>(): TreeMapperJustForLeaves<
  * TreeMapper to each node, and return the resulting tree.
  */
 function mapTree<CI, CO, HI, HO, TI, TO>(
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
     tree: Tree<CI, HI, TI>,
     shape: Shape,
     path: Path,
     mappers: TreeMapper<CI, CO, HI, HO, TI, TO>,
-    // @ts-expect-error [FEI-5003] - TS2315 - Type 'Tree' is not generic.
+    // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
 ): Tree<CO, HO, TO> {
     // We trust the shape of the multi-item to match the shape provided at
     // runtime. Therefore, in each shape branch, we cast the node to `any` and
@@ -291,20 +291,20 @@ function mapTree<CI, CO, HI, HO, TI, TO>(
         return mappers.tags(tags, shape, path);
     }
     if (shape.type === "array") {
-        // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+        // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
         const array: ArrayNode<CI, HI, TI> = tree as any;
 
         if (!Array.isArray(array)) {
             throw new PerseusError(
                 `Invalid object of type "${typeof array}" found at path ` +
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                    // @ts-expect-error - TS2769 - No overload matches this call.
                     `${["<root>"].concat(path).join(".")}. Expected array.`,
                 Errors.Internal,
             );
         }
 
         const elementShape = shape.elementShape;
-        // @ts-expect-error [FEI-5003] - TS2315 - Type 'ArrayNode' is not generic.
+        // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
         const mappedElements: ArrayNode<CO, HO, TO> = array.map((inner, i) =>
             mapTree(inner, elementShape, path.concat(i), mappers),
         );
@@ -316,7 +316,7 @@ function mapTree<CI, CO, HI, HO, TI, TO>(
         if (object && typeof object !== "object") {
             throw new PerseusError(
                 `Invalid object of type "${typeof object}" found at ` +
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                    // @ts-expect-error - TS2769 - No overload matches this call.
                     `path ${["<root>"].concat(path).join(".")}. Expected ` +
                     `"object" type.`,
                 Errors.InvalidInput,
@@ -327,7 +327,7 @@ function mapTree<CI, CO, HI, HO, TI, TO>(
         if (!valueShapes) {
             throw new PerseusError(
                 `Unexpected shape ${JSON.stringify(shape)} at path ` +
-                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                    // @ts-expect-error - TS2769 - No overload matches this call.
                     `${["<root>"].concat(path).join(".")}.`,
                 Errors.InvalidInput,
             );
@@ -337,7 +337,7 @@ function mapTree<CI, CO, HI, HO, TI, TO>(
             if (!(key in object)) {
                 throw new PerseusError(
                     `Key "${key}" is missing from shape at path ` +
-                        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                        // @ts-expect-error - TS2769 - No overload matches this call.
                         `${["<root>"].concat(path).join(".")}.`,
                     Errors.InvalidInput,
                 );
@@ -353,7 +353,7 @@ function mapTree<CI, CO, HI, HO, TI, TO>(
         return newObject;
     }
     throw new PerseusError(
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'type' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
         `unexpected shape type ${shape.type}`,
         Errors.InvalidInput,
     );

package/src/perseus-env.ts

@@ -2,7 +2,7 @@
  * Sets up the basic environment for running Perseus in.
  */
 
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'KhanUtil' does not exist on type 'Window & typeof globalThis'.
+// @ts-expect-error - TS2339 - Property 'KhanUtil' does not exist on type 'Window & typeof globalThis'.
 window.KhanUtil = {
     debugLog: function () {},
     localeToFixed: function (num, precision) {
@@ -10,7 +10,7 @@ window.KhanUtil = {
     },
 };
 
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'Exercises' does not exist on type 'Window & typeof globalThis'.
+// @ts-expect-error - TS2339 - Property 'Exercises' does not exist on type 'Window & typeof globalThis'.
 window.Exercises = {
     localMode: true,
 

package/src/perseus-markdown.tsx

@@ -128,7 +128,7 @@ const rules = {
 
                 // Splice the caption into the table's children with the
                 // caption as the first child.
-                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                // @ts-expect-error - TS2769 - No overload matches this call.
                 contents = React.cloneElement(tableOutput, null, [
                     caption,
                     ...tableOutput.props.children,
@@ -156,7 +156,7 @@ const rules = {
             // just a stub for testing.
             return (
                 <em key={state.key}>
-                    {/* @ts-expect-error [FEI-5003] - TS2554 - Expected 1-2 arguments, but got 3. */}
+                    {/* @ts-expect-error - TS2554 - Expected 1-2 arguments, but got 3. */}
                     {i18n.doNotTranslate("[Widget: ", node.id, "]")}
                 </em>
             );
@@ -211,7 +211,7 @@ const rules = {
                 : false;
             if (!isKAUrl) {
                 // Prevents "reverse tabnabbing" phishing attacks
-                // @ts-expect-error [FEI-5003] - TS2322 - Type '"noopener noreferrer"' is not assignable to type 'null'.
+                // @ts-expect-error - TS2322 - Type '"noopener noreferrer"' is not assignable to type 'null'.
                 rel = "noopener noreferrer";
             }
 
@@ -293,7 +293,7 @@ const inlineNodeTypes = {
     code: true,
 } as const;
 
-// @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ readonly columns: { readonly react: (node: any, output: any, state: any) => Element; readonly order: -2; readonly match: any; readonly parse: (capture: any, parse: any, state: any) => any; }; ... 35 more ...; readonly text: TextInOutRule; }' is not assignable to parameter of type 'ParserRules'.
+// @ts-expect-error - TS2345 - Argument of type '{ readonly columns: { readonly react: (node: any, output: any, state: any) => Element; readonly order: -2; readonly match: any; readonly parse: (capture: any, parse: any, state: any) => any; }; ... 35 more ...; readonly text: TextInOutRule; }' is not assignable to parameter of type 'ParserRules'.
 const builtParser = SimpleMarkdown.parserFor(rules);
 const parse = (source: string, state: any): any => {
     const paragraphedSource = source + "\n\n";
@@ -385,7 +385,7 @@ const getContent = (ast: any) => {
  * Markdown markup and widget references are ignored.
  */
 const characterCount = (source: string): number => {
-    // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+    // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
     const ast = parse(source);
     const content = getContent(ast).join("");
     return content.length;