create ts check action

.github/workflows/ts-check.yml

@@ -0,0 +1,26 @@
+name: TypeScript Check
+
+on:
+  pull_request:
+    types: [opened, reopened, edited]
+
+jobs:
+  # Test job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Install Dependencies
+        run: |
+          yarn install
+
+      - name: Build Project
+        run: |
+          yarn tsc --noEmit

package.json

@@ -52,6 +52,7 @@
 		"@types/esprima": "^4.0.3",
 		"@types/grecaptcha": "^3.0.4",
 		"@types/js-beautify": "^1.14.3",
+		"@types/node-statsd": "^0.1.6",
 		"@types/three": "^0.149.0",
 		"@types/throttle-debounce": "^5.0.0",
 		"@types/w3c-web-serial": "^1.0.3"

src/components/big-interactive-pages/login.tsx

@@ -36,11 +36,11 @@ export default function Login({ session, email, to }: LoginProps) {
 					<h1>Log In to Sprig</h1>
 					{auth.stage.value === 'EMAIL' ? (<>
 						<p>Please enter your email address below. We'll send you a code to access all your games.</p>
-	
+
 						<label for='email'>Email:</label>
-						<Input type='email' id='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={auth.email} />
+						<Input onChange={() => undefined} value={auth.email.value} type='email' id='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={auth.email} />
 						{auth.state.value === 'EMAIL_INCORRECT' && <p class={styles.error}>Failed sending login code. Did you enter the right email?</p>}
-	
+
 						<Button class={styles.submit} icon={IoPaperPlaneOutline} iconSide='right' accent type='submit' disabled={!auth.emailValid.value} loading={auth.isLoading.value}>
 							Send code
 						</Button>
@@ -54,9 +54,9 @@ export default function Login({ session, email, to }: LoginProps) {
 								</LinkButton>
 							</span>
 						</p>
-						
+
 						<label for='code'>Code:</label>
-						<Input id='code' type='text' maxLength={6} placeholder='123456'  bind={auth.code} />
+						<Input onChange={() => undefined} value={auth.code.value} id='code' type='text' maxLength={6} placeholder='123456'  bind={auth.code} />
 						{auth.state.value === 'CODE_INCORRECT' && <p class={styles.error}>Incorrect login code.</p>}
 
 						<Button class={styles.submit} accent type='submit' disabled={!auth.codeValid.value} loading={auth.isLoading.value}>
@@ -67,4 +67,4 @@ export default function Login({ session, email, to }: LoginProps) {
 			</div>
 		</div>
 	)
-}
+}

src/components/big-interactive-pages/migrate.tsx

@@ -167,7 +167,7 @@ export default function Migrate({ session, intitialEmail }: MigrateProps) {
 						.map((game) => ({ id: gameIds[game.name], legacy: game }))
 
 					localStorage.setItem('seenMigration', 'true')
-					
+
 					if (session?.session.full) {
 						window.location.replace('/~')
 					} else {
@@ -177,7 +177,7 @@ export default function Migrate({ session, intitialEmail }: MigrateProps) {
 					{session?.session.full ? null : (
 						<div class={styles.emailEntry}>
 							<label for='email'>Enter your email:</label>
-							<Input type='email' autoComplete='email' id='email' placeholder={'fiona@hackclub.com'} bind={email} />
+							<Input onChange={() => undefined} value={email.value} type='email' autoComplete='email' id='email' placeholder={'fiona@hackclub.com'} bind={email} />
 						</div>
 					)}
 
@@ -195,4 +195,4 @@ export default function Migrate({ session, intitialEmail }: MigrateProps) {
 			</div>
 		</div>
 	)
-}
+}

src/components/navbar-editor.tsx

@@ -106,7 +106,7 @@ const prettifyCode = () => {
 	// Set the options for js_beautify
 	const options = {
 		indent_size: 2, // Indent by 2 spaces
-		brace_style: "collapse,preserve-inline", // Collapse braces and preserve inline
+		brace_style: "collapse,preserve-inline" as any, // Collapse braces and preserve inline
 	};
 
 	const { js_beautify } = beautifier;

src/components/navbar-main.tsx

@@ -2,7 +2,7 @@ import { IoAdd, IoLogoGithub, IoOpenOutline } from "react-icons/io5";
 import Button from "./design-system/button";
 import styles from "./navbar.module.css";
 import { SessionInfo } from "../lib/game-saving/account";
-import AnnouncementBanner from "./popups-etc/announcement-banner";
+// import AnnouncementBanner from "./popups-etc/announcement-banner";
 interface MainNavbarProps {
 	session: SessionInfo | null;
 	transparent?: boolean;

src/components/popups-etc/chat-component.tsx

@@ -120,7 +120,7 @@ Answer the questions that follow based on this unless new code is provided.`;
 		} catch (err) {
 			loading.value = false;
 			// info.value = "An error occurred...";
-			info.value = err.message;
+			info.value = (err as Error).message;
 		}
 	};
 

src/components/popups-etc/draft-warning.tsx

@@ -39,7 +39,7 @@ export default function DraftWarningModal(props: DraftWarningModalProps) {
 						if (auth.state.value === 'EMAIL_INCORRECT') persist(props.persistenceState, auth.email.value)
 					}} class={styles.stack}>
 						<div class={styles.inputRow}>
-							<Input type='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={auth.email} />
+							<Input onChange={() => undefined} value={auth.email.value} type='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={auth.email} />
 							<Button accent type='submit' disabled={!auth.emailValid.value} loading={auth.isLoading.value}>
 								Start coding
 							</Button>
@@ -70,7 +70,7 @@ export default function DraftWarningModal(props: DraftWarningModalProps) {
 						<p>You've used Sprig before, so we emailed you a code to log in and access all your games. Enter login code:</p>
 
 						<div class={`${styles.inputRow} ${styles.limited}`}>
-							<Input maxLength={6} class={styles.center} type='text' bind={auth.code} placeholder='123456' />
+							<Input onChange={() => undefined} value={auth.code.value} maxLength={6} class={styles.center} type='text' bind={auth.code} placeholder='123456' />
 							<Button accent type='submit' disabled={!auth.codeValid.value} loading={auth.isLoading.value}>
 								Log in
 							</Button>
@@ -88,4 +88,4 @@ export default function DraftWarningModal(props: DraftWarningModalProps) {
 			</div>
 		</div>
 	)
-}
+}

src/components/popups-etc/save-prompt.tsx

@@ -12,7 +12,7 @@ interface SavePromptProps {
 	persistenceState: Signal<PersistenceState>
 	onClose: () => void
 }
-	
+
 export default function SavePrompt(props: SavePromptProps) {
 	const email = useSignal(props.persistenceState.value.session?.user.email ?? '')
 	const emailValid = useComputed(() => isValidEmail(email.value))
@@ -38,7 +38,7 @@ export default function SavePrompt(props: SavePromptProps) {
 				}}>
 					<p>Enter your email to save your work, we'll send you a link for later:</p>
 					<div class={popupStyles.inputRow}>
-						<Input type='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={email} />
+						<Input onChange={() => undefined} value={email.value} type='email' autoComplete='email' placeholder='fiona@hackclub.com' bind={email} />
 						<Button accent type='submit' disabled={!emailValid.value}>
 							Save
 						</Button>
@@ -54,10 +54,10 @@ export default function SavePrompt(props: SavePromptProps) {
 			<Button accent onClick={() => props.onClose()}>Done</Button>
 		</>)
 	}
-	
+
 	return (
 		<div class={popupStyles.popup}>
 			{content}
 		</div>
 	)
-}
+}

src/integrations/generate-metadata.ts

@@ -1,6 +1,6 @@
 /**
  * Astro integration that generatest the game/metadata.json
- * 
+ *
  * How it works:
  * 1. It walks/scans the ./games/ directory
  * 2. It searches each file for metadata, if anything isn't found it halts the build/dev
@@ -26,7 +26,7 @@ const regexExpr = {
  *
  * TODO!
  */
-const isMetadataValid = (meta: any): boolean => {
+const isMetadataValid = (_: any): boolean => {
 	return true;
 };
 

src/lib/state.ts

@@ -134,23 +134,23 @@ export const themes: Partial<Record<ThemeType, Theme>> = {
 
 export const switchTheme = (themeType: ThemeType) => {
 	theme.value = themeType;
-	
+
 	// store the new theme value in local storage
 	localStorage.setItem("theme", themeType);
 
 	const themeValue = themes[themeType];
 	// set the document values
 	const documentStyle = document.body.style;
-	documentStyle.background = themeValue.background;
-	document.documentElement.style.setProperty(`--accent`, themeValue.accent);
-	document.documentElement.style.setProperty(`--accent-dark`, themeValue.accentDark);
-	document.documentElement.style.setProperty(`--fg-muted-on-accent`, themeValue.fgMutedOnAccent);
-	documentStyle.color = themeValue.color;
-	
+	documentStyle.background = themeValue!.background;
+	document.documentElement.style.setProperty(`--accent`, themeValue!.accent);
+	document.documentElement.style.setProperty(`--accent-dark`, themeValue!.accentDark);
+	document.documentElement.style.setProperty(`--fg-muted-on-accent`, themeValue!.fgMutedOnAccent);
+	documentStyle.color = themeValue!.color;
+
 	// change the color of the text in elements having .copy-container style
 	// These includes pages such as 'Gallery' and 'Your Games'
 	const copyContainer = document.querySelector(".copy-container") as HTMLDivElement;
 	if (copyContainer) {
-		copyContainer.style.color = themeValue.copyContainerText;
+		copyContainer.style.color = themeValue!.copyContainerText;
 	}
-}
+}

src/pages/gallery/gallery.tsx

@@ -3,7 +3,7 @@ import { loadThumbnailUrl } from "../../lib/thumbnail";
 import { GameMetadata } from "../../lib/game-saving/gallery";
 import Button from "../../components/design-system/button";
 import Input from "../../components/design-system/input";
-import { IoCaretDown, IoSearch, IoClose } from "react-icons/io5";
+import { IoCaretDown, IoSearch } from "react-icons/io5";
 import "./gallery.css";
 
 enum SortOrder {
@@ -269,4 +269,4 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
 			</div>
 		</div>
 	)
-}
+}

yarn.lock

@@ -1570,6 +1570,13 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/node-statsd@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@types/node-statsd/-/node-statsd-0.1.6.tgz#87c2de1f1a1eda6ab4187f4475ee3dc3caa56b8b"
+  integrity sha512-C3E7STmDzLmXLbIK+C9P5Su6FFW1Ki+Uzjfh6NCBU+5iveeDJl69bmc+0wMSOEymSbPLqPvBsF84mtYDGILlPw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "18.13.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850"