refactor(scripts): convert to TypeScript (#338)

package.json

@@ -8,8 +8,8 @@
   "scripts": {
     "dev": "bunx --bun astro dev",
     "build": "bunx --bun astro build",
-    "build:lib": "bun scripts/index.js",
-    "package": "bun scripts/npm-package.js",
+    "build:lib": "bun scripts/index.ts",
+    "package": "bun scripts/npm-package.ts",
     "test:unit": "bun test tests/*.ts",
     "test:e2e": "playwright test",
     "format": "bunx --bun prettier --write .",

scripts/build-languages.js → scripts/build-languages.ts

@@ -1,9 +1,9 @@
-// @ts-check
 import hljs from "highlight.js";
-import { createMarkdown } from "./utils/create-markdown.js";
-import { mkdir } from "./utils/fs.js";
-import { toCamelCase } from "./utils/to-pascal-case.js";
-import { writeTo } from "./utils/write-to.js";
+import { createMarkdown } from "./utils/create-markdown";
+import { mkdir } from "./utils/fs";
+import { toCamelCase } from "./utils/to-pascal-case";
+import { writeTo } from "./utils/write-to";
+import type { ModuleNames } from "./build-styles";
 
 export async function buildLanguages() {
   console.time("build languages");
@@ -20,8 +20,7 @@ export async function buildLanguages() {
     register: LanguageFn;
   }\n\n`;
 
-  /** @type {import("./build-styles").ModuleNames} */
-  let lang = [];
+  let lang: ModuleNames = [];
 
   languages.forEach(async (name) => {
     let moduleName = name;

scripts/build-styles.js → scripts/build-styles.ts

@@ -1,27 +1,20 @@
-// @ts-check
-import path from "path";
+import path from "node:path";
 import { totalist } from "totalist";
-import { createMarkdown } from "./utils/create-markdown.js";
-import { copyFile, mkdir, readFile } from "./utils/fs.js";
-import { minifyCss } from "./utils/minify-css.js";
-import { toCamelCase } from "./utils/to-pascal-case.js";
-import { writeTo } from "./utils/write-to.js";
+import { createMarkdown } from "./utils/create-markdown";
+import { copyFile, mkdir, readFile } from "./utils/fs";
+import { minifyCss } from "./utils/minify-css";
+import { toCamelCase } from "./utils/to-pascal-case";
+import { writeTo } from "./utils/write-to";
 
-/**
- * @typedef {Array<{ name: string; moduleName: string; }>} ModuleNames
- */
+export type ModuleNames = Array<{ name: string; moduleName: string }>;
 
 export async function buildStyles() {
   console.time("build styles");
   mkdir("src/styles");
 
   let scoped_styles = "";
-
-  /** @type {string[]} */
-  let names = [];
-
-  /** @type {ModuleNames} */
-  let styles = [];
+  let names: string[] = [];
+  let styles: ModuleNames = [];
 
   await totalist("node_modules/highlight.js/styles", async (file, absPath) => {
     /**

scripts/index.ts

@@ -0,0 +1,10 @@
+import { buildLanguages } from "./build-languages";
+import { buildStyles } from "./build-styles";
+import { mkdir } from "./utils/fs";
+
+(async () => {
+  mkdir("www/data");
+
+  await buildLanguages();
+  await buildStyles();
+})();

scripts/npm-package.js → scripts/npm-package.ts

@@ -1,15 +1,14 @@
-// @ts-check
 import fs from "node:fs";
-import { copyFile, mkdir, writeFile } from "./utils/fs.js";
+import { mkdir, writeFile } from "./utils/fs";
 
 async function npmPackage() {
   console.time("package");
 
   mkdir("./package");
 
-  await copyFile("./package.json", "./package/package.json");
-  await copyFile("./README.md", "./package/README.md");
-  await copyFile("./LICENSE", "./package/LICENSE");
+  await Bun.write("./package/package.json", Bun.file("./package.json"));
+  await Bun.write("./package/README.md", Bun.file("./README.md"));
+  await Bun.write("./package/LICENSE", Bun.file("./LICENSE"));
 
   // Copy source folder to package
   mkdir("./package/src");

scripts/utils/create-markdown.js → scripts/utils/create-markdown.ts

@@ -1,15 +1,11 @@
-// @ts-check
 import fs from "node:fs";
 
 const pkg = JSON.parse(
   fs.readFileSync(new URL("../../package.json", import.meta.url), "utf8"),
 );
 
-/**
- * Creates header metadata for supported languages/styles
- * @type {(type: "Languages" | "Styles", len: number) => string}
- */
-export const createMarkdown = (type, len) =>
+/** Creates header metadata for supported languages/styles */
+export const createMarkdown = (type: "Languages" | "Styles", len: number) =>
   `
 # Supported ${type}
 

scripts/utils/fs.js → scripts/utils/fs.ts

@@ -1,9 +1,7 @@
-// @ts-check
 import fs from "node:fs";
 import fsp from "node:fs/promises";
 
-/** @type {(dir: string, noRemove?: boolean) => void} */
-export const mkdir = (dir) => {
+export const mkdir = (dir: string) => {
   if (fs.existsSync(dir)) {
     fs.rmSync(dir, { recursive: true });
   }

scripts/utils/index.ts

@@ -0,0 +1,3 @@
+export { createMarkdown } from "./create-markdown";
+export { toCamelCase } from "./to-pascal-case";
+export { writeTo } from "./write-to";

scripts/utils/minify-css.ts

@@ -0,0 +1,12 @@
+import cssnano from "cssnano";
+import litePreset, { type LiteOptions } from "cssnano-preset-lite";
+import postcss from "postcss";
+
+export const minifyCss = (
+  css: string,
+  discardComments?: LiteOptions["discardComments"],
+) => {
+  return postcss([
+    cssnano({ preset: litePreset({ discardComments }) }),
+  ]).process(css).css;
+};

scripts/utils/to-pascal-case.js → scripts/utils/to-pascal-case.ts

@@ -1,11 +1,9 @@
-// @ts-check
 /**
- * @type {(str: string) => string}
  * Converts a dash/period separated string into pascal case
  * @example
  * "one-two-three" --> "oneTwoThree"
  */
-export const toCamelCase = (str) =>
+export const toCamelCase = (str: string) =>
   str
     .split(new RegExp(/-|\./g))
     .map((fragment, index) => {

scripts/utils/write-to.ts

@@ -0,0 +1,21 @@
+import path from "node:path";
+import prettier, { type BuiltInParserName } from "prettier";
+import { writeFile } from "./fs";
+
+const PARSER: Record<string, BuiltInParserName> = {
+  ".md": "markdown",
+  ".js": "babel",
+  ".ts": "typescript",
+  ".json": "json",
+  ".css": "css",
+};
+
+export async function writeTo(file: string, source: string | object) {
+  const value =
+    typeof source === "string" ? source : JSON.stringify(source, null, 2);
+  const parser = PARSER[path.parse(file).ext];
+
+  if (!parser) throw new Error(`No parser found for ${file}`);
+
+  await writeFile(file, await prettier.format(value, { parser }));
+}

tsconfig.json

@@ -13,5 +13,5 @@
       "svelte-highlight/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "www/**/*", "tests/**/*"]
+  "include": ["src/**/*", "www/**/*", "tests/**/*", "scripts/**/*"],
 }