Factor out language selector into its own component (#156)

miorel · web-flow · commit 2c7868335b8a · 2024-07-10T19:16:08.000-07:00
diff --git a/tools/adventure-pack/package.json b/tools/adventure-pack/package.json
@@ -59,7 +59,7 @@
     "jest": "29.7.0",
     "prettier": "3.3.2",
     "prettier-plugin-java": "2.6.0",
-    "ts-jest": "29.1.5",
+    "ts-jest": "29.2.2",
     "ts-loader": "9.5.1",
     "ts-morph": "23.0.0",
     "ts-node": "10.9.2",
diff --git a/tools/adventure-pack/src/app/components/App.tsx b/tools/adventure-pack/src/app/components/App.tsx
@@ -3,13 +3,11 @@ import React, { useEffect } from "react";
 import { Checkbox } from "./Checkbox";
 import { GoodyCard } from "./GoodyCard";
 import { HighlightedCode } from "./HighlightedCode";
-import { fetchGoodies } from "./fetchGoodies";
-import type { Language } from "./Language";
-import { useMergedCode } from "./useMergedCode";
-import { useAppState } from "./useAppState";
-import { Goody } from "./Goody";
-
-import { LANGUAGE_NAMES } from "./constants";
+import { fetchGoodies } from "../fetchGoodies";
+import { useMergedCode } from "../useMergedCode";
+import { useAppState } from "../useAppState";
+import { Goody } from "../Goody";
+import { LanguageSelector } from "./LanguageSelector";
 
 function Column({
   children,
@@ -56,19 +54,19 @@ export function App({ commitHash }: Props) {
   return (
     <div
       style={{
+        alignItems: "center",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
         height: "100%",
       }}
     >
       <div
         style={{
-          flex: "0 0 auto",
-          display: "flex",
           alignItems: "center",
-          justifyContent: "space-between",
+          display: "flex",
+          flex: "0 0 auto",
           gap: "24px",
+          justifyContent: "space-between",
           width: "60%",
         }}
       >
@@ -95,23 +93,15 @@ export function App({ commitHash }: Props) {
         }}
       >
         <Column title="Equip Goodies" flex="0 0 auto">
-          <select
-            value={state.activeLanguage}
-            onChange={(ev) =>
+          <LanguageSelector
+            selectedLanguage={state.activeLanguage}
+            onChange={(language) =>
               dispatch({
                 type: "select-language",
-                language: ev.target.value as Language,
+                language,
               })
             }
-          >
-            {(Object.entries(LANGUAGE_NAMES) as [Language, string][]).map(
-              ([language, languageName]) => (
-                <option key={language} value={language}>
-                  {languageName}
-                </option>
-              ),
-            )}
-          </select>
+          />
           {Object.values(goodies ?? {}).map((goody) => (
             <Checkbox
               key={goody.name}
diff --git a/tools/adventure-pack/src/app/components/Checkbox.tsx b/tools/adventure-pack/src/app/components/Checkbox.tsx
diff --git a/tools/adventure-pack/src/app/components/GoodyCard.tsx b/tools/adventure-pack/src/app/components/GoodyCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { Goody } from "./Goody";
-import { goodyToText } from "./goodyToText";
+import type { Goody } from "../Goody";
+import { goodyToText } from "../goodyToText";
 import { HighlightedCode } from "./HighlightedCode";
 
 type Props = {
diff --git a/tools/adventure-pack/src/app/components/HighlightedCode.tsx b/tools/adventure-pack/src/app/components/HighlightedCode.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow as syntaxHighlighterStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import type { Language } from "./Language";
+import type { Language } from "../Language";
 
 // Cross-reference with https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD
 type HighlighterLanguage =
diff --git a/tools/adventure-pack/src/app/components/LanguageSelector.tsx b/tools/adventure-pack/src/app/components/LanguageSelector.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { LANGUAGE_NAMES } from "../constants";
+import type { Language } from "../Language";
+
+type Props = {
+  selectedLanguage: Language;
+  onChange: (language: Language) => void;
+};
+
+export function LanguageSelector({ selectedLanguage, onChange }: Props) {
+  return (
+    <select
+      value={selectedLanguage}
+      onChange={(ev) => onChange(ev.target.value as Language)}
+    >
+      {(Object.entries(LANGUAGE_NAMES) as [Language, string][]).map(
+        ([language, languageName]) => (
+          <option key={language} value={language}>
+            {languageName}
+          </option>
+        ),
+      )}
+    </select>
+  );
+}
diff --git a/tools/adventure-pack/src/app/constants.ts b/tools/adventure-pack/src/app/constants.ts
diff --git a/tools/adventure-pack/src/app/goodyToText.ts b/tools/adventure-pack/src/app/goodyToText.ts
diff --git a/tools/adventure-pack/src/app/main.tsx b/tools/adventure-pack/src/app/main.tsx
@@ -2,7 +2,7 @@ import nullthrows from "nullthrows";
 import React from "react";
 import ReactDOM from "react-dom/client";
 
-import { App } from "./App";
+import { App } from "./components/App";
 
 declare const ADVENTURE_PACK_COMMIT_HASH: string;
 
diff --git a/tools/adventure-pack/src/app/mergeCode.ts b/tools/adventure-pack/src/app/mergeCode.ts
@@ -14,11 +14,11 @@ import { sortTypeScriptModuleAndInterfaceDeclarations } from "./sortTypeScriptMo
 import { stringifyTypeScriptModuleDeclarations } from "./stringifyTypeScriptModuleDeclarations";
 
 function topo({
-  goodies,
   equippedGoodies,
+  goodies,
 }: {
-  goodies: ReadonlyDeep<Record<string, Goody>>;
   equippedGoodies: ReadonlySet<string>;
+  goodies: ReadonlyDeep<Record<string, Goody>>;
 }): string[] {
   const pq = new BinaryHeap<string>(compareStringsCaseInsensitive);
 
@@ -78,16 +78,16 @@ function topo({
 
 export type Data = {
   commitHash: string;
+  equippedGoodies: ReadonlySet<string>;
   goodies: ReadonlyDeep<Record<string, Goody>>;
   language: Language;
-  equippedGoodies: ReadonlySet<string>;
 };
 
 export function mergeCode({
   commitHash,
+  equippedGoodies,
   goodies,
   language,
-  equippedGoodies,
 }: Data): string {
   if (equippedGoodies.size === 0) {
     return language === "python3"
@@ -159,26 +159,26 @@ export function mergeCode({
   if (language === "java") {
     return (
       centerTextInComment({
-        text: "BEGIN ADVENTURE PACK CODE",
         commentType: "//",
+        text: "BEGIN ADVENTURE PACK CODE",
       }) +
       "\n" +
       `// Adventure Pack commit ${commitHash}\n` +
       `// Running at: ${window.location.href}\n\n` +
       mergedCode +
       "\n\n" +
       centerTextInComment({
-        text: "END ADVENTURE PACK CODE",
         commentType: "//",
+        text: "END ADVENTURE PACK CODE",
       })
     );
   }
 
   if (language === "kotlin") {
     return (
       centerTextInComment({
-        text: "BEGIN ADVENTURE PACK CODE",
         commentType: "//",
+        text: "BEGIN ADVENTURE PACK CODE",
       }) +
       "\n" +
       `// Adventure Pack commit ${commitHash}\n` +
@@ -195,31 +195,31 @@ export function mergeCode({
   if (language === "python3") {
     return (
       centerTextInComment({
-        text: "BEGIN ADVENTURE PACK CODE",
         commentType: "#",
+        text: "BEGIN ADVENTURE PACK CODE",
       }) +
       "\n" +
       `# Adventure Pack commit ${commitHash}\n` +
       `# Running at: ${window.location.href}\n\n` +
       mergedCode +
       "\n\n" +
-      centerTextInComment({ text: "END ADVENTURE PACK CODE", commentType: "#" })
+      centerTextInComment({ commentType: "#", text: "END ADVENTURE PACK CODE" })
     );
   }
 
   return (
     centerTextInComment({
-      text: "BEGIN ADVENTURE PACK CODE",
       commentType: "//",
+      text: "BEGIN ADVENTURE PACK CODE",
     }) +
     "\n" +
     `// Adventure Pack commit ${commitHash}\n` +
     `// Running at: ${window.location.href}\n\n` +
     mergedCode.replaceAll(/^export\s+/gm, "") +
     "\n\n" +
     centerTextInComment({
-      text: "END ADVENTURE PACK CODE",
       commentType: "//",
+      text: "END ADVENTURE PACK CODE",
     })
   ).trim();
 }
diff --git a/tools/adventure-pack/src/app/mergeJavaCode.ts b/tools/adventure-pack/src/app/mergeJavaCode.ts
@@ -15,7 +15,7 @@ export function mergeJavaCode(goodies: Iterable<ReadonlyDeep<JavaGoody>>) {
         `Only the ${ADVENTURE_PACK_CLASS_NAME} class can exist in multiple goodies!`,
       );
 
-      classes[className] ??= { modifiers: new Set(), code: [] };
+      classes[className] ??= { code: [], modifiers: new Set() };
       for (const modifier of goody.codeByClass[className].modifiers) {
         classes[className].modifiers.add(modifier);
       }
diff --git a/tools/adventure-pack/src/app/parsers/goodyBaseParser.ts b/tools/adventure-pack/src/app/parsers/goodyBaseParser.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 import { nonBlankStringParser } from "./nonBlankStringParser";
 
 export const goodyBaseParser = z.object({
-  imports: z.array(nonBlankStringParser),
   importedBy: z.array(nonBlankStringParser),
+  imports: z.array(nonBlankStringParser),
   name: nonBlankStringParser,
 });
diff --git a/tools/adventure-pack/src/app/parsers/javaGoodyParser.ts b/tools/adventure-pack/src/app/parsers/javaGoodyParser.ts
@@ -10,8 +10,8 @@ export const javaGoodyParser = goodyBaseParser
       nonBlankStringParser,
       z
         .object({
-          modifiers: z.array(nonBlankStringParser),
           code: z.string(),
+          modifiers: z.array(nonBlankStringParser),
         })
         .strict(),
     ),
diff --git a/tools/adventure-pack/src/app/useMergedCode.ts b/tools/adventure-pack/src/app/useMergedCode.ts
@@ -7,9 +7,9 @@ import { type Data, mergeCode } from "./mergeCode";
 
 export function useMergedCode({
   commitHash,
+  equippedGoodies,
   goodies,
   language,
-  equippedGoodies,
 }: Omit<Data, "goodies"> & { goodies: Data["goodies"] | null }): string {
   const [code, setCode] = useState("");
 
@@ -25,17 +25,17 @@ export function useMergedCode({
         setCode(
           mergeCode({
             commitHash,
+            equippedGoodies,
             goodies,
             language,
-            equippedGoodies,
           }),
         );
     });
 
     return () => {
       isActive = false;
     };
-  }, [commitHash, goodies, language, equippedGoodies]);
+  }, [commitHash, equippedGoodies, goodies, language]);
 
   return code;
 }
diff --git a/tools/adventure-pack/src/scripts/build-html.tsx b/tools/adventure-pack/src/scripts/build-html.tsx
@@ -5,7 +5,7 @@ import path from "node:path";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 
-import { App } from "../app/App";
+import { App } from "../app/components/App";
 
 const exec = promisify(execWithCallback);
 
diff --git a/tools/adventure-pack/src/scripts/package-goodies/java/readBaseGoody.ts b/tools/adventure-pack/src/scripts/package-goodies/java/readBaseGoody.ts
@@ -25,8 +25,8 @@ export async function readBaseGoody(
     codeByClass,
     imports: Array.from(imports),
     importsCode,
-    name,
     language: "java",
+    name,
     packageName,
   };
 }
diff --git a/tools/adventure-pack/src/scripts/package-goodies/java/splitCodeIntoClasses.ts b/tools/adventure-pack/src/scripts/package-goodies/java/splitCodeIntoClasses.ts
@@ -24,7 +24,7 @@ export function splitCodeIntoClasses(
       modifiers.delete("public");
 
       currentClassName = classMatch[2];
-      classes[currentClassName] = { modifiers, code: [] };
+      classes[currentClassName] = { code: [], modifiers };
       continue;
     }
 
diff --git a/tools/adventure-pack/src/scripts/package-goodies/kotlin/readBaseGoody.ts b/tools/adventure-pack/src/scripts/package-goodies/kotlin/readBaseGoody.ts
@@ -22,8 +22,8 @@ export async function readBaseGoody(
     code: codeWithoutImports,
     imports: Array.from(imports),
     importsCode,
-    name,
     language: "kotlin",
+    name,
     packageName,
   };
 }
diff --git a/tools/adventure-pack/src/scripts/package-goodies/typescript/readGoodies.ts b/tools/adventure-pack/src/scripts/package-goodies/typescript/readGoodies.ts
@@ -39,7 +39,6 @@ export async function readGoodies(): Promise<{
   const goodiesByName = fillOutImportedByAndSortImports(baseGoodiesByName);
 
   return {
-    typescript: goodiesByName,
     javascript: await mapObjectValuesAsync(
       goodiesByName,
       async (goody: TypeScriptGoody): Promise<JavaScriptGoody> => {
@@ -52,5 +51,7 @@ export async function readGoodies(): Promise<{
         };
       },
     ),
+
+    typescript: goodiesByName,
   };
 }
diff --git a/tools/eslint-config/package.json b/tools/eslint-config/package.json
@@ -15,8 +15,8 @@
   "dependencies": {
     "@stylistic/eslint-plugin-js": "2.3.0",
     "@stylistic/eslint-plugin-ts": "2.3.0",
-    "@typescript-eslint/eslint-plugin": "7.15.0",
-    "@typescript-eslint/parser": "7.15.0",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
     "globals": "15.8.0"
   },
   "devDependencies": {
diff --git a/tools/yarn.lock b/tools/yarn.lock
