JIPT (Just In Place Translation) fix up dependency types

.changeset/fair-walls-give.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Nest JIPT config options in Perseus dependencies so when its disabled you don't have to pass any supporting functions

packages/perseus/src/article-renderer.tsx

@@ -173,7 +173,8 @@ class ArticleRenderer
         // translatable strings found on Crowdin when rendering articles in
         // the WYSIWYG mode for translation. This is needed for the jipt.js
         // integration in order to attribute the rendered strings on Crowdin.
-        if (getDependencies().JIPT.useJIPT) {
+        const {JIPT} = getDependencies();
+        if (JIPT.useJIPT) {
             const paragraphs: Array<PerseusRenderer> = [];
 
             for (const section of sections) {

packages/perseus/src/components/graphie-movables.ts

@@ -125,12 +125,14 @@ const Label: any = GraphieClasses.createSimpleClass((graphie, props) => {
         coord = graphie.unscalePoint(coord);
     }
     let elem = null;
+    const {JIPT} = getDependencies();
+
     // If the label is rendered for a locale other than "en", push the label
     // element to an array. This array is used to lookup the label element
     // and processed with jipt('just in place translation', crowdin specific
     // program) to replace the passed in crowdin string with the translated
     // string. For "en" locale, the jipt processing is skipped.
-    if (getDependencies().JIPT.useJIPT) {
+    if (JIPT.useJIPT) {
         elem = graphie.label(
             coord,
             props.text,
@@ -139,7 +141,7 @@ const Label: any = GraphieClasses.createSimpleClass((graphie, props) => {
             props.style,
         );
 
-        getDependencies().graphieMovablesJiptLabels.addLabel(elem, props.tex);
+        JIPT.graphieMovablesJiptLabels.addLabel(elem, props.tex);
     } else {
         elem = graphie.label(
             coord,

packages/perseus/src/components/svg-image.tsx

@@ -487,10 +487,7 @@ class SvgImage extends React.Component<Props, State> {
                     false,
                 );
 
-                getDependencies().svgImageJiptLabels.addLabel(
-                    elem,
-                    labelData.typesetAsMath,
-                );
+                JIPT.svgImageJiptLabels.addLabel(elem, labelData.typesetAsMath);
             } else if (labelData.coordinates) {
                 // Create labels from the data
                 // TODO(charlie): Some erroneous labels are being sent down

packages/perseus/src/renderer.tsx

@@ -410,13 +410,14 @@ class Renderer
         // widgetIds and the child refs of the renderer.
         // See: https://phabricator.khanacademy.org/D32420.)
         this.widgetIds = [];
+        const {JIPT} = getDependencies();
 
-        if (this.translationIndex != null) {
+        if (this.translationIndex != null && JIPT.useJIPT) {
             // NOTE(jeremy): Since the translationIndex is simply the array
             // index of each renderer, we can't remove Renderers from this
             // list, rather, we simply null out the entry (which means that
             // this array's growth is unbounded until a page reload).
-            getDependencies().rendererTranslationComponents.removeComponentAtIndex(
+            JIPT.rendererTranslationComponents.removeComponentAtIndex(
                 this.translationIndex,
             );
         }
@@ -907,9 +908,10 @@ class Renderer
         props: Props,
         state: State,
     ): boolean => {
+        const {JIPT} = getDependencies();
         // TODO(aria): Pass this in via webapp as an apiOption
         return (
-            getDependencies().JIPT.useJIPT &&
+            JIPT.useJIPT &&
             state.jiptContent == null &&
             props.content.indexOf("crwdns") !== -1
         );
@@ -1839,11 +1841,10 @@ class Renderer
             // before jipt has a chance to replace its contents, so this check
             // will keep us from adding the component to the registry a second
             // time.
-            if (!this.translationIndex) {
+            const {JIPT} = getDependencies();
+            if (!this.translationIndex && JIPT.useJIPT) {
                 this.translationIndex =
-                    getDependencies().rendererTranslationComponents.addComponent(
-                        this,
-                    );
+                    JIPT.rendererTranslationComponents.addComponent(this);
             }
 
             // For articles, we add jipt data to individual paragraphs. For

packages/perseus/src/types.ts

@@ -412,9 +412,16 @@ export type DomInsertCheckFn = (
     jiptString?: string,
 ) => string | false;
 
-export type JIPT = {
-    useJIPT: boolean;
-};
+export type JIPT =
+    | {
+          useJIPT: false;
+      }
+    | {
+          useJIPT: true;
+          graphieMovablesJiptLabels: JiptLabelStore;
+          svgImageJiptLabels: JiptLabelStore;
+          rendererTranslationComponents: JiptTranslationComponents;
+      };
 
 export type JiptLabelStore = {
     addLabel: (label?: any, useMath?: any) => void;
@@ -469,15 +476,14 @@ export type VideoKind = "YOUTUBE_ID" | "READABLE_ID";
 // 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
+    // misc
+    // Provides a function to transform a relative or absolute URL into a
+    // request to a static hosting service (think something like an S3 or GCS
+    // bucket).
     staticUrl: StaticUrlFn;
     InitialRequestUrl: InitialRequestUrlInterface;
 

packages/perseus/src/widgets/graded-group-set/graded-group-set-jipt.test.ts

@@ -16,6 +16,16 @@ describe("graded-group-set", () => {
             ...testDependencies,
             JIPT: {
                 useJIPT: true,
+                graphieMovablesJiptLabels: {
+                    addLabel: (label, useMath) => {},
+                },
+                svgImageJiptLabels: {
+                    addLabel: (label, useMath) => {},
+                },
+                rendererTranslationComponents: {
+                    addComponent: (renderer) => 0,
+                    removeComponentAtIndex: (index) => undefined,
+                },
             },
         });
     });