Factor out language selector into its own component

Author: miorel

tools/adventure-pack/src/app/App.tsx renamed to 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}

tools/adventure-pack/src/app/Checkbox.tsx renamed to tools/adventure-pack/src/app/components/Checkbox.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 = {

tools/adventure-pack/src/app/GoodyCard.tsx renamed to tools/adventure-pack/src/app/components/GoodyCard.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 =

tools/adventure-pack/src/app/HighlightedCode.tsx renamed to tools/adventure-pack/src/app/components/HighlightedCode.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>
+  );
+}

tools/adventure-pack/src/app/components/LanguageSelector.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;
 

tools/adventure-pack/src/app/constants.tsx renamed to tools/adventure-pack/src/app/constants.ts

@@ -12,11 +12,11 @@ import { mergeJavaCode } from "./mergeJavaCode";
 import type { JavaGoody } from "./parsers/javaGoodyParser";
 
 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);
 
@@ -76,16 +76,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"
@@ -139,26 +139,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` +
@@ -175,31 +175,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();
 }

tools/adventure-pack/src/app/goodyToText.tsx renamed to tools/adventure-pack/src/app/goodyToText.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);
       }