chore: convert utilities, hooks, lib, constants

Author: cgwbmp

apps/media/app/[locale]/podcasts/[podcastSlug]/client-page.tsx

@@ -111,7 +111,7 @@ export default function PodcastShowClientPage({
           {/* Podcast Header */}
           <div className="flex flex-col md:flex-row gap-8 items-start">
             {/* Cover Image */}
-            <div className="w-full md:w-64 flex-shrink-0">
+            <div className="w-full md:w-64 shrink-0">
               <div className="relative aspect-square w-full overflow-hidden shadow-lg">
                 <Image
                   src={podcast.coverImage}

apps/web/openspec/changes/enforce-ts-strict/tasks.md

@@ -9,22 +9,22 @@
 
 ## 2. Convert utilities, hooks, lib, constants (Phase 2)
 
-- [ ] 2.1 `src/utils/Link.js` → `.ts`
-- [ ] 2.2 `src/utils/dateUtils.js` → `.ts`
-- [ ] 2.3 `src/utils/emailUtils.js` → `.ts`
-- [ ] 2.4 `src/utils/fetcher.js` → `.ts`
-- [ ] 2.5 `src/utils/followerFunctions.js` → `.ts`
-- [ ] 2.6 `src/utils/getNextRequestId.js` → `.ts`
-- [ ] 2.7 `src/utils/rpcUtils.js` → `.ts`
-- [ ] 2.8 `src/utils/stringUtils.js` → `.ts`
-- [ ] 2.9 `src/utils/ytUtils.js` → `.ts`
-- [ ] 2.10 `src/hooks/useIsomorphicLayoutEffect.js` → `.ts`
-- [ ] 2.11 `src/hooks/useReducedMotion.js` → `.ts`
-- [ ] 2.12 `src/hooks/useTransactionStats.js` → `.ts`
-- [ ] 2.13 `src/lib/markdown/index.js` → `.ts`
-- [ ] 2.14 `src/lib/podcast/index.js` → `.ts`
-- [ ] 2.15 `src/lib/sitemap/media-urls.js` → `.ts`
-- [ ] 2.16 `src/constants/developerContentConfig.js` → `.ts`
+- [x] 2.1 `src/utils/Link.js` → `.ts`
+- [x] 2.2 `src/utils/dateUtils.js` → `.ts`
+- [x] 2.3 `src/utils/emailUtils.js` → `.ts`
+- [x] 2.4 `src/utils/fetcher.js` → `.ts`
+- [x] 2.5 `src/utils/followerFunctions.js` → `.ts`
+- [x] 2.6 `src/utils/getNextRequestId.js` → `.ts`
+- [x] 2.7 `src/utils/rpcUtils.js` → `.ts`
+- [x] 2.8 `src/utils/stringUtils.js` → `.ts`
+- [x] 2.9 `src/utils/ytUtils.js` → `.ts`
+- [x] 2.10 `src/hooks/useIsomorphicLayoutEffect.js` → `.ts`
+- [x] 2.11 `src/hooks/useReducedMotion.js` → `.ts`
+- [x] 2.12 `src/hooks/useTransactionStats.js` → `.ts`
+- [x] 2.13 `src/lib/markdown/index.js` → `.ts`
+- [x] 2.14 `src/lib/podcast/index.js` → `.ts`
+- [ ] 2.15 `src/lib/sitemap/media-urls.js` → `.ts` (deferred — CJS required by `next-sitemap.config.js` at runtime; convert alongside that file in Phase 6)
+- [x] 2.16 `src/constants/developerContentConfig.js` → `.ts`
 
 ## 3. Convert data files (Phase 3)
 

apps/web/src/constants/developerContentConfig.js

@@ -0,0 +1,18 @@
+// simple strings for the content record groups
+export const RECORD_GROUPS = {
+  cookbook: "cookbook",
+  guides: "guides",
+  docs: "docs",
+  rpc: "docs/rpc",
+} as const;
+
+/**
+ * the highest markdown heading size to include when generating a TOC
+ *  (e.g. `3` results in "h1, h2, h3" to be displayed)
+ */
+export const TOC_HEADING_SIZE = 3;
+
+/**
+ * Define some common content values
+ */
+export const YT_PLAYLIST_CHANGELOG = "PLilwLeBwGuK5-Qri7Pg9zd-Vvhz9kX2-R";

apps/web/src/constants/developerContentConfig.ts

@@ -3,9 +3,9 @@ import { useMemo } from "react";
 /**
  * Hook to easily grab reduced motion media query.
  *
- * @returns {[unknown, unknown]}
+ * @returns {[boolean, MediaQueryList | false]}
  */
-const useReducedMotion = () => {
+const useReducedMotion = (): [boolean, MediaQueryList | false] => {
   // Grab the prefers reduced media query and memoize it.
   const reducedMotionMatch = useMemo(
     () =>

…b/src/hooks/useIsomorphicLayoutEffect.js …b/src/hooks/useIsomorphicLayoutEffect.tsapps/web/src/hooks/useIsomorphicLayoutEffect.js renamed to apps/web/src/hooks/useIsomorphicLayoutEffect.ts apps/web/src/hooks/useIsomorphicLayoutEffect.js renamed to apps/web/src/hooks/useIsomorphicLayoutEffect.ts

@@ -13,26 +13,37 @@ if (!rpcNodeURL) {
 
 // Check for AbortController support
 const isAbortControllerSupported =
-  typeof window !== "undefined" && window.hasOwnProperty("AbortController");
-const noOp = () => null;
+  typeof window !== "undefined" && "AbortController" in window;
+const noOp = (): void => undefined;
 
 // Initializes an AbortController if supported
-const initAbortController = () =>
+const initAbortController = (): {
+  abort: () => void;
+  signal: AbortSignal | undefined;
+} =>
   isAbortControllerSupported
     ? new AbortController()
-    : { abort: noOp, signal: {} };
+    : { abort: noOp, signal: undefined };
+
+type VoteAccountsResult = {
+  result: { current: Array<{ activatedStake: string }> };
+};
+type PerformanceSamplesResult = {
+  result: Array<{ numTransactions: number; samplePeriodSecs: number }>;
+};
+type TransactionCountResult = { result: number };
 
 /**
  * Fetches the superminority count.
  *
- * @returns {Promise<number>} The count of superminority validators.
+ * @returns {Promise<number | null>} The count of superminority validators.
  */
-export const fetchSuperminority = async () => {
+export const fetchSuperminority = async (): Promise<number | null> => {
   try {
-    const voteAccounts = await makeRPCCall({
+    const voteAccounts = (await makeRPCCall({
       method: "getVoteAccounts",
-      rpcNodeURL,
-    });
+      rpcNodeURL: rpcNodeURL!,
+    })) as VoteAccountsResult;
 
     // Sort validators by stake in ascending order
     const sortedValidators = voteAccounts.result.current.sort((a, b) => {
@@ -75,35 +86,51 @@ export const fetchSuperminority = async () => {
  * @param {number} sampleHistoryHours         How many hours (60min.) the query should go back.
  * @param {boolean} getLiveTransactionCount
  * @param {boolean} getCurrentValidatorNodes
- * @returns {{availableStats: boolean, avgTps: number, validators: number, totalTransactionCount: number, superminority: number}}
+ * @returns {{availableStats: boolean, avgTps: number, validators: number, totalTransactionCount: number, superminority: number | null}}
  */
 export const useTransactionStats = ({
   visible,
   performanceUpdateSeconds,
   sampleHistoryHours,
   getLiveTransactionCount = true,
   getCurrentValidatorNodes = true,
-}) => {
+}: {
+  visible: boolean;
+  performanceUpdateSeconds: number;
+  sampleHistoryHours: number;
+  getLiveTransactionCount?: boolean;
+  getCurrentValidatorNodes?: boolean;
+}): {
+  availableStats: boolean;
+  avgTps: number;
+  totalTransactionCount: number;
+  validators: number;
+  superminority: number | null;
+} => {
   const [availableStats, setAvailableStats] = useState(false);
   const [avgTps, setAvgTps] = useState(0);
   const [totalTransactionCount, setTotalTransactionCount] = useState(0);
   const [validators, setValidators] = useState(0);
-  const [superminority, setSuperminority] = useState(null);
+  const [superminority, setSuperminority] = useState<number | null>(null);
 
   const getRPCData = useCallback(
-    async (getValidatorNodes, getTransactionCount, abortSignal) => {
+    async (
+      getValidatorNodes: boolean,
+      getTransactionCount: boolean,
+      abortSignal: AbortSignal | undefined,
+    ): Promise<boolean> => {
       try {
         if (rpcNodeURL) {
           await Promise.all([
             (async () => {
-              const recentPerformanceSamples = await makeRPCCall({
+              const recentPerformanceSamples = (await makeRPCCall({
                 abortSignal,
                 method: "getRecentPerformanceSamples",
                 params: [60 * sampleHistoryHours],
                 rpcNodeURL,
-              });
+              })) as PerformanceSamplesResult;
               // Calculate average transactions per second
-              const short = recentPerformanceSamples.result.reduce(
+              const short = recentPerformanceSamples.result.reduce<number[]>(
                 (shortResults, sample) => {
                   if (sample.numTransactions !== 0) {
                     shortResults.push(
@@ -122,23 +149,23 @@ export const useTransactionStats = ({
               if (!getValidatorNodes) {
                 return;
               }
-              const voteAccounts = await makeRPCCall({
+              const voteAccounts = (await makeRPCCall({
                 abortSignal,
                 method: "getVoteAccounts",
                 rpcNodeURL,
-              });
+              })) as VoteAccountsResult;
               setValidators(voteAccounts.result.current.length);
               setAvailableStats(true);
             })(),
             (async () => {
               if (!getTransactionCount) {
                 return;
               }
-              const transactionCount = await makeRPCCall({
+              const transactionCount = (await makeRPCCall({
                 abortSignal,
                 method: "getTransactionCount",
                 rpcNodeURL,
-              });
+              })) as TransactionCountResult;
               setTotalTransactionCount(transactionCount.result);
               setAvailableStats(true);
             })(),
@@ -148,7 +175,10 @@ export const useTransactionStats = ({
         }
         return false;
       } catch (error) {
-        if (error.name === "AbortError" || error.name === "TypeError") {
+        if (
+          error instanceof Error &&
+          (error.name === "AbortError" || error.name === "TypeError")
+        ) {
           return false;
         }
         console.error("Error fetching RPC data:", error);

apps/web/src/hooks/useReducedMotion.js apps/web/src/hooks/useReducedMotion.tsapps/web/src/hooks/useReducedMotion.js renamed to apps/web/src/hooks/useReducedMotion.ts

@@ -10,18 +10,24 @@ const markdownPostsDir = join(process.cwd(), "src", "markdown");
  *
  * @param path
  * @param slug
- * @returns {{path, frontmatter: {date: (string|any)}, content: string}}
  */
-export function getPostBySlug(path, slug) {
+export function getPostBySlug(
+  path: string,
+  slug: string,
+): {
+  path: string;
+  frontmatter: Record<string, unknown> & { date: string | null };
+  content: string;
+} {
   const dir = join(markdownPostsDir, path);
   const realSlug = slug.replace(/\.md$/, "");
   const fullPath = join(dir, `${realSlug}.md`);
   const fileContents = fs.readFileSync(fullPath, "utf8");
   const { data, content } = matter(fileContents);
   const date =
     data.date && typeof data.date !== "string"
-      ? format(data.date, "MMMM dd, yyyy")
-      : (data.date ?? null);
+      ? format(data.date as Date, "MMMM dd, yyyy")
+      : ((data.date as string | null) ?? null);
   return {
     path: realSlug,
     frontmatter: { ...data, date, reviewed: true },
@@ -33,9 +39,10 @@ export function getPostBySlug(path, slug) {
  * Returns all posts from `markdownPostsDir`.
  *
  * @param path
- * @returns {{path: *, frontmatter: {date: *}, content: *|string}[]}
  */
-export function getAllPostsInDir(path) {
+export function getAllPostsInDir(
+  path: string,
+): ReturnType<typeof getPostBySlug>[] {
   const dir = join(markdownPostsDir, path);
   const slugs = fs.readdirSync(dir);
   const posts = slugs.map((slug) => getPostBySlug(path, slug));