compile typescript before hitting babel

.eslintrc.json

@@ -7,8 +7,8 @@
   "plugins": [
     "prettier"
   ],
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
-    "parser": "@babel/eslint-parser",
     "ecmaVersion": 2018,
     "sourceType": "script",
     "babelOptions": {
@@ -22,7 +22,7 @@
   "rules": {},
   "overrides": [{
     "files": [
-      "api/**/*.ts"
+      "**/*.ts"
     ],
     "extends": [
       "plugin:@typescript-eslint/recommended",
@@ -41,13 +41,10 @@
       "sourceType": "module"
     },
     "env": {
-      "browser": false,
+      "browser": true,
       "node": true,
       "es6": true
-    },
-    "rules": {
-      "compat/compat": "off"
     }
   }],
-  "ignorePatterns": ["public/**"]
+  "ignorePatterns": ["public/**", "postcss.config.js"]
 }

api/projects.ts

@@ -57,13 +57,16 @@ async function fetchRepos(sort: string, limit: number) {
     name: string;
     url: string;
     description: string;
-    pushedAt: string;
-    pushedAt_relative?: string;
+    primaryLanguage?: {
+      color: string;
+      name: string;
+    };
     stargazerCount: number;
     stargazerCount_pretty?: string;
     forkCount: number;
     forkCount_pretty?: string;
-    primaryLanguage?: unknown;
+    pushedAt: string;
+    pushedAt_relative?: string;
   };
 
   const response = await client.request(query, { sort, limit });

assets/js/_bundle.js → assets/js/_entry.ts

@@ -1,3 +1,6 @@
 require("./counter");
 require("./projects");
 require("./vendor/twemoji");
+
+// see TS1208.
+export {};

assets/js/counter.js → assets/js/counter.ts

@@ -1,4 +1,4 @@
-const fetch = require("node-fetch");
+import fetch from "node-fetch";
 
 // don't continue if there isn't a span#meta-hits element on this page
 const wrapper = document.getElementById("meta-hits");
@@ -9,7 +9,7 @@ if (wrapper) {
 
   // deduce a consistent identifier for this page, no matter the URL
   const canonical = document.createElement("a");
-  canonical.href = document.querySelector("link[rel='canonical']").href;
+  canonical.href = (document.querySelector("link[rel='canonical']") as HTMLAnchorElement).href;
 
   // strip beginning and ending forward slash
   const slug = canonical.pathname.slice(1, -1);
@@ -22,15 +22,15 @@ if (wrapper) {
         const spinner = document.getElementById("hit-spinner");
         const counter = document.getElementById("hit-counter");
 
-        spinner.style.display = "none";
+        if (spinner) spinner.style.display = "none";
+        if (counter) counter.appendChild(document.createTextNode(data.pretty_hits));
         wrapper.title = data.pretty_hits + " " + data.pretty_unit;
-        counter.appendChild(document.createTextNode(data.pretty_hits));
       } else {
         // something went horribly wrong, initiate coverup
         wrapper.style.display = "none";
       }
     })
-    .catch((error) => {
+    .catch(() => {
       // something went horribly wrong, initiate coverup
       wrapper.style.display = "none";
     });

assets/js/projects.js → assets/js/projects.ts

@@ -1,4 +1,4 @@
-const fetch = require("node-fetch");
+import fetch from "node-fetch";
 
 // don't continue if there isn't a span#meta-hits element on this page
 const wrapper = document.getElementById("github-cards");
@@ -7,12 +7,28 @@ if (wrapper) {
   fetch("/api/projects/?top")
     .then((response) => response.json())
     .then((data) => {
-      data.forEach((repo) => {
+      type Repository = {
+        name: string;
+        url: string;
+        description: string;
+        primaryLanguage?: {
+          color: string;
+          name: string;
+        };
+        stargazerCount: number;
+        stargazerCount_pretty?: string;
+        forkCount: number;
+        forkCount_pretty?: string;
+        pushedAt: string;
+        pushedAt_relative?: string;
+      };
+
+      data.forEach((repo: Repository) => {
         let html = `
 <a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
 <p class="repo-description">${repo.description}</p>`;
 
-        if (repo.primaryLanguage !== null) {
+        if (repo.primaryLanguage) {
           html += `
 <div class="repo-meta">
 <span class="repo-language-color" style="background-color: ${repo.primaryLanguage.color}"></span>
@@ -47,7 +63,7 @@ if (wrapper) {
         wrapper.appendChild(div);
       });
     })
-    .catch((error) => {
+    .catch(() => {
       // something went horribly wrong, initiate coverup
       wrapper.style.display = "none";
     });

layouts/partials/scripts/_bundle.html

@@ -1,4 +1,4 @@
-{{ $js := resources.Get "js/_bundle.js" | js.Build (dict "targetPath" "/js/app.js") | resources.Babel (dict "config" "babel.config.json" "noComments" true) }}
+{{ $js := resources.Get "js/_entry.ts" | js.Build (dict "targetPath" "/js/app.js") | resources.Babel (dict "config" "babel.config.json" "noComments" true) }}
 
 {{- .Scratch.Set "bundlePermalink" $js.Permalink -}}
 

package.json

@@ -21,9 +21,9 @@
     "minify:html": "html-minifier --html5 --collapse-whitespace --collapse-boolean-attributes --preserve-line-breaks --minify-css --remove-comments --file-ext html --input-dir public --output-dir public **/*.html",
     "minify:img": "glob-exec --parallel --foreach 'public/**/{img,images}/' -- imagemin '{{file.path}}*' --plugin=mozjpeg --plugin.mozjpeg.progressive --plugin.mozjpeg.quality=85 --plugin=pngquant --plugin.pngquant.quality={0.1,0.3} --plugin.pngquant.speed=1 --plugin.pngquant.strip --plugin=gifsicle --plugin=svgo --out-dir='{{file.path}}'",
     "lint": "run-s lint:**",
-    "lint:scss": "stylelint 'assets/sass/**/*.scss' --syntax scss",
-    "lint:js": "eslint --ext .js,.ts .",
     "lint:ts": "tsc --noEmit",
+    "lint:js": "eslint --ext .js,.ts .",
+    "lint:scss": "stylelint 'assets/sass/**/*.scss' --syntax scss",
     "lint:md": "markdownlint 'content/**/*.md'",
     "lint:prettier": "prettier --check .",
     "docker": "docker run --rm -v $(pwd):/src:ro -p 1337:1337 $(docker build -q .)",
@@ -53,8 +53,10 @@
     "@babel/core": "^7.14.3",
     "@babel/eslint-parser": "^7.14.4",
     "@babel/preset-env": "^7.14.4",
+    "@babel/preset-typescript": "^7.13.0",
     "@types/html-escaper": "^3.0.0",
     "@types/luxon": "^1.26.5",
+    "@types/node-fetch": "^2.5.10",
     "@types/numeral": "^2.0.1",
     "@types/pluralize": "^0.0.29",
     "@types/xml2js": "^0.4.8",
@@ -113,10 +115,9 @@
       "prettier --write"
     ],
     "*.ts": [
-      "tsc --noEmit --esModuleInterop",
-      "prettier --write"
+      "tsc --noEmit --esModuleInterop"
     ],
-    "*.js": [
+    "*.{js,ts}": [
       "eslint",
       "prettier --write"
     ],

tsconfig.json

@@ -1,10 +1,16 @@
 {
   "compilerOptions": {
     "target": "es2018",
+    "lib": [
+      "esnext",
+      "es2018",
+      "dom"
+    ],
     "module": "commonjs",
     "moduleResolution": "node",
     "strict": true,
     "allowJs": true,
+    "isolatedModules": true,
     "noEmit": true,
     "noImplicitReturns": true,
     "esModuleInterop": true

yarn.lock

@@ -101,7 +101,7 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3":
+"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3", "@babel/helper-create-class-features-plugin@^7.14.4":
   version "7.14.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.4.tgz#abf888d836a441abee783c75229279748705dc42"
   integrity sha512-idr3pthFlDCpV+p/rMgGLGYIVtazeatrSOQk8YzO2pAepIjQhCN3myeihVg58ax2bbbGK9PUE1reFi7axOYIOw==
@@ -524,6 +524,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-syntax-typescript@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz#9dff111ca64154cef0f4dc52cf843d9f12ce4474"
+  integrity sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
 "@babel/plugin-transform-arrow-functions@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz#10a59bebad52d637a027afa692e8d5ceff5e3dae"
@@ -757,6 +764,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-transform-typescript@^7.13.0":
+  version "7.14.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.4.tgz#1c48829fa6d5f2de646060cd08abb6cda4b521a7"
+  integrity sha512-WYdcGNEO7mCCZ2XzRlxwGj3PgeAr50ifkofOUC/+IN/GzKLB+biDPVBUAQN2C/dVZTvEXCp80kfQ1FFZPrwykQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-typescript" "^7.12.13"
+
 "@babel/plugin-transform-unicode-escapes@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz#840ced3b816d3b5127dd1d12dcedc5dead1a5e74"
@@ -862,6 +878,15 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-typescript@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz#ab107e5f050609d806fbb039bec553b33462c60a"
+  integrity sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-validator-option" "^7.12.17"
+    "@babel/plugin-transform-typescript" "^7.13.0"
+
 "@babel/runtime@^7.8.4":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
@@ -1045,6 +1070,14 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
   integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
 
+"@types/node-fetch@^2.5.10":
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.10.tgz#9b4d4a0425562f9fcea70b12cb3fcdd946ca8132"
+  integrity sha512-IpkX0AasN44hgEad0gEF/V6EgR5n69VEqPEgnmoM8GsIGro3PowbWs4tR6IhxUTyPLpOn+fiGG6nrQhcmoCuIQ==
+  dependencies:
+    "@types/node" "*"
+    form-data "^3.0.0"
+
 "@types/node@*":
   version "15.12.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2"
@@ -1975,9 +2008,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001166, caniuse-lite@^1.0.30001179, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001230:
-  version "1.0.30001234"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001234.tgz#8fc2e709e3b0679d7af7f073a1c661155c39b975"
-  integrity sha512-a3gjUVKkmwLdNysa1xkUAwN2VfJUJyVW47rsi3aCbkRCtbHAfo+rOsCqVw29G6coQ8gzAPb5XBXwiGHwme3isA==
+  version "1.0.30001235"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001235.tgz#ad5ca75bc5a1f7b12df79ad806d715a43a5ac4ed"
+  integrity sha512-zWEwIVqnzPkSAXOUlQnPW2oKoYb2aLQ4Q5ejdjBcnH63rfypaW34CxaeBn1VMya2XaEU3P/R2qHpWyj+l0BT1A==
 
 caw@^2.0.0, caw@^2.0.1:
   version "2.0.1"