Migrate project to TypeScript

eslint.config.mjs

@@ -4,6 +4,7 @@ import { ESLintConfig, globals } from "@openally/config.eslint";
 export default [
   ...ESLintConfig,
   {
+    files: ["**/*.js", "**/*.mjs"],
     languageOptions: {
       sourceType: "module",
       globals: {

index.html

@@ -185,8 +185,8 @@ <h2>Join Us</h2>
     </div>
   </section>
 
-  <script type="module" src="./src/particules.js"></script>
-  <script type="module" src="./src/hydrate-contributors.js"></script>
+  <script type="module" src="./src/particules.ts"></script>
+  <script type="module" src="./src/hydrate-contributors.ts"></script>
 </body>
 
 </html>

package.json

@@ -6,10 +6,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "contributors": "node scripts/generate-contributors.js",
+    "contributors": "node scripts/generate-contributors.ts",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint src scripts plugins"
+    "lint": "eslint \"**/*.{js,mjs}\""
   },
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/NodeSecure/landing#readme",
   "devDependencies": {
     "@openally/config.eslint": "2.4.2",
+    "@types/node": "25.6.0",
     "vite": "8.0.5"
   },
   "dependencies": {

plugins/zupTransformer.js → plugins/zupTransformer.ts

@@ -5,17 +5,29 @@ import path from "node:path";
 // Import Third-party Dependencies
 import compile from "zup";
 
+interface ZupTransformerOptions {
+  [key: string]: any;
+}
+
+interface TransformResult {
+  code: string;
+  map: null;
+}
+
 export default function zupTransformer(
-  data = {}
-) {
+  data: ZupTransformerOptions = {}
+): {
+  name: string;
+  transform: (src: string, id: string) => TransformResult | undefined;
+} {
   return {
     name: "zup-transformer",
 
     /**
      * @param {!string} src
      * @param {!string} id
      */
-    transform(src, id) {
+    transform(src: string, id: string): TransformResult | undefined {
       if (
         path.extname(id) === ".html" &&
         path.basename(id) === "index.html"

scripts/generate-contributors.js → scripts/generate-contributors.ts

@@ -2,12 +2,36 @@
 import { writeFile } from "node:fs/promises";
 import { loadEnvFile } from "node:process";
 import path from "node:path";
-loadEnvFile();
+import { fileURLToPath } from "node:url";
 
-async function generateContributors() {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+try {
+  loadEnvFile();
+} catch {
+  // .env file is optional
+}
+
+interface Contributor {
+  login: string;
+  html_url: string;
+  avatar_url: string;
+  type?: "core" | "contributor";
+}
+
+interface CoreContributor {
+  github: string;
+}
+
+interface CoreContributorsResponse {
+  core: CoreContributor[];
+}
+
+async function generateContributors(): Promise<void> {
   const contributors = await getContributors();
   const filepath = path.join(
-    import.meta.dirname,
+    __dirname,
     "..",
     "public",
     "contributors.json"
@@ -17,7 +41,7 @@ async function generateContributors() {
   await writeFile(filepath, payload);
 }
 
-const bots = [
+const bots: string[] = [
   "dependabot[bot]",
   "allcontributors[bot]",
   "snyk-bot",
@@ -26,7 +50,7 @@ const bots = [
   "greenkeeper[bot]"
 ];
 
-const repositories = [
+const repositories: string[] = [
   "cli",
   "vulnera",
   "ci",
@@ -40,8 +64,8 @@ const repositories = [
   "flags"
 ];
 
-async function getRepositoryContributors(repository) {
-  const headers = {};
+async function getRepositoryContributors(repository: string): Promise<Contributor[]> {
+  const headers: Record<string, string> = {};
   // GITHUB_TOKEN is not necessary to make request to /contributors
   // but the rate limits for calls without auth is very low.
   if (process.env.GITHUB_TOKEN) {
@@ -55,24 +79,37 @@ async function getRepositoryContributors(repository) {
     }
   );
 
-  return response.json();
+  if (!response.ok) {
+    throw new Error(`Failed to fetch contributors for ${repository}: ${response.status}`);
+  }
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+  throw new Error("Invalid response format");
 }
 
-async function getCoreContributors() {
+return data as Contributor[];
+}
+
+async function getCoreContributors(): Promise<string[]> {
   const responseCore = await fetch("https://raw.githubusercontent.com/NodeSecure/Governance/main/contributors.json");
-  const responseCoreContributors = await responseCore.json();
-  const coreContributors = responseCoreContributors.core.map((contributor) => contributor.github);
+
+  if (!responseCore.ok) {
+    throw new Error(`Failed to fetch core contributors: ${responseCore.status}`);
+  }
+
+  const responseCoreContributors = await responseCore.json() as CoreContributorsResponse;
+  const coreContributors = responseCoreContributors.core.map((contributor: CoreContributor) => contributor.github);
 
   return coreContributors;
 }
 
-async function getContributors() {
+async function getContributors(): Promise<Contributor[]> {
   const allContributors = await Promise.all(
     repositories.map((repository) => getRepositoryContributors(repository))
   );
   const contributors = allContributors.flat();
 
-  const uniqueContributors = new Map();
+  const uniqueContributors = new Map<string, Contributor>();
 
   const coreContributors = await getCoreContributors();
 
@@ -92,4 +129,5 @@ async function getContributors() {
 
   return Array.from(uniqueContributors.values());
 }
+
 await generateContributors();

src/hydrate-contributors.js → src/hydrate-contributors.ts

@@ -1,14 +1,26 @@
-async function hydrateContributors() {
+interface Contributor {
+  login: string;
+  html_url: string;
+  avatar_url: string;
+  type?: "core" | "contributor";
+}
+
+async function hydrateContributors(): Promise<void> {
   const coreRow = document.getElementById("core-row");
   const commitersRow = document.getElementById("contributors-row");
 
+  if (!coreRow || !commitersRow) {
+    console.error("Required elements not found in DOM");
+    return;
+  }
+
   const response = await fetch("/contributors.json");
 
   if (!response.ok) {
     throw new Error(`Error while fetching contributors list: ${response.status}`);
   }
 
-  const contributors = await response.json();
+  const contributors: Contributor[] = await response.json();
 
   for (const contributor of contributors) {
     if (contributor.type === "core") {
@@ -25,7 +37,7 @@ async function hydrateContributors() {
   }
 }
 
-function createContributorElement(data, type = "contributor") {
+function createContributorElement(data: Contributor, type: "core" | "contributor" = "contributor"): HTMLAnchorElement {
   const cLink = document.createElement("a");
 
   cLink.href = data.html_url;
@@ -46,4 +58,4 @@ function createContributorElement(data, type = "contributor") {
   return cLink;
 }
 
-hydrateContributors();
+hydrateContributors().catch(console.error);

src/particules.js → src/particules.ts

@@ -1,14 +1,29 @@
-(function particulesIIFE() {
+interface Point {
+  x: number;
+  y: number;
+  dx: number;
+  dy: number;
+  color: string;
+}
+
+function particulesIIFE(): void {
   const palette = ["#00D1FF", "#3722AF", "#5A44DA"];
-  const canvas = document.getElementById("network-bg");
-  const ctx = canvas.getContext("2d");
+  const canvas = document.getElementById("network-bg") as HTMLCanvasElement;
+  const ctx = canvas.getContext("2d")!;
+
+  if (!ctx) {
+    console.error("Unable to get 2D context");
+    return;
+  }
+
   let width = window.innerWidth;
   let height = window.innerHeight;
   canvas.width = width;
   canvas.height = height;
 
-  const points = [];
+  const points: Point[] = [];
   const numPoints = Math.floor((width * height) / 9000);
+
   for (let i = 0; i < numPoints; i++) {
     points.push({
       x: Math.random() * width,
@@ -19,8 +34,9 @@
     });
   }
 
-  function draw() {
+  function draw(): void {
     ctx.clearRect(0, 0, width, height);
+
     // Draw lines
     for (let i = 0; i < points.length; i++) {
       for (let j = i + 1; j < points.length; j++) {
@@ -36,6 +52,7 @@
         }
       }
     }
+
     // Draw points
     for (const p of points) {
       ctx.globalAlpha = 0.38;
@@ -47,7 +64,7 @@
     ctx.globalAlpha = 1;
   }
 
-  function animate() {
+  function animate(): void {
     for (const p of points) {
       p.x += p.dx;
       p.y += p.dy;
@@ -62,13 +79,15 @@
     requestAnimationFrame(animate);
   }
 
-  function resize() {
+  function resize(): void {
     width = window.innerWidth;
     height = window.innerHeight;
     canvas.width = width;
     canvas.height = height;
   }
+
   window.addEventListener("resize", resize);
-
   animate();
-}());
+}
+
+particulesIIFE();

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": false,
+    "types": ["node"]
+  },
+  "include": [
+    "src/**/*",
+    "scripts/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

types/zup.d.ts

@@ -0,0 +1,9 @@
+declare module "zup" {
+  interface ZupData {
+    [key: string]: any;
+  }
+
+  function zup(html: string): (data?: ZupData) => string;
+
+  export default zup;
+}

vite.config.js

@@ -2,10 +2,16 @@
 import { defineConfig } from "vite";
 
 // Import Internal Dependencies
-import zupTransformer from "./plugins/zupTransformer.js";
+import zupTransformer from "./plugins/zupTransformer.ts";
 
 export default defineConfig({
   plugins: [
     zupTransformer({})
-  ]
+  ],
+  esbuild: {
+    target: "es2020",
+    supported: {
+      "top-level-await": true
+    }
+  }
 });