Convert to TypeScript/ESM

Makefile

@@ -4,3 +4,10 @@
 
 .makefiles/%:
 	@curl -sfL https://makefiles.dev/v1 | bash /dev/stdin "$@"
+
+################################################################################
+
+artifacts/dist: tsconfig.build.json artifacts/link-dependencies.touch $(JS_SOURCE_FILES)
+	@rm -rf "$@"
+	$(JS_EXEC) tsc -p "$<"
+	@touch "$@"

package.json

@@ -10,21 +10,26 @@
   "publishConfig": {
     "access": "public"
   },
-  "types": "src/main.d.ts",
-  "main": "src/main.js",
+  "type": "module",
+  "main": "artifacts/dist/index.js",
+  "types": "artifacts/dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/main.d.ts",
-      "default": "./src/main.js"
-    },
-    "./sandbox": {
-      "types": "./src/sandbox.d.ts",
-      "default": "./src/sandbox.js"
+      "types": "./artifacts/dist/index.d.ts",
+      "import": "./artifacts/dist/index.js",
+      "default": "./artifacts/dist/index.js"
     }
   },
+  "sideEffects": false,
   "files": [
-    "/src/"
+    "/artifacts/dist/"
   ],
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "prepublishOnly": "make artifacts/dist"
+  },
   "dependencies": {
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/module-type-aliases": "^3.0.0",

src/main.js → src/create-config.ts

@@ -1,22 +1,29 @@
-const { readFileSync } = require("fs");
-const { resolve } = require("path");
+import { Config } from "@docusaurus/types";
+import { ThemeConfig } from "@docusaurus/preset-classic";
+import { Options } from "@docusaurus/plugin-client-redirects";
+import { readFileSync } from "fs";
+import { resolve } from "path";
 
-module.exports = {
-  createConfig,
-};
+type FooterLinks = NonNullable<NonNullable<ThemeConfig["footer"]>["links"]>;
+type NavbarItems = NonNullable<NonNullable<ThemeConfig["navbar"]>["items"]>;
+type Redirects = Options["redirects"];
 
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
-function createConfig(options) {
-  const {
-    footerLinks = [],
-    navbarItems = [],
-    redirects = [],
-    rootPath,
-    title,
-  } = options;
+export function createConfig({
+  footerLinks = [],
+  navbarItems = [],
+  redirects = [],
+  rootPath,
+  title,
+}: {
+  rootPath: string;
+  title: string;
 
+  footerLinks?: FooterLinks;
+  navbarItems?: NavbarItems;
+  redirects?: Redirects;
+}): Config {
   const { description, homepage, repository } = JSON.parse(
-    readFileSync(resolve(rootPath, "../package.json")),
+    readFileSync(resolve(rootPath, "../package.json")).toString(),
   );
 
   const orgUrl = new URL(homepage);

src/index.ts

@@ -0,0 +1,3 @@
+import "./theme.d.ts";
+
+export { createConfig } from "./create-config.js";

src/sandbox.js → src/sandbox.ts

@@ -1,8 +1,4 @@
-module.exports = {
-  buildUrl,
-};
-
-function buildUrl(id) {
+export function buildSandboxUrl(id: string): string {
   const url = new URL("https://codesandbox.io/");
   url.pathname = `/s/${id}`;
 

src/theme.d.ts

@@ -0,0 +1,5 @@
+import type Sandbox from "./theme/Sandbox.js";
+
+declare module "@theme/Sandbox" {
+  export default Sandbox;
+}

src/theme/LayoutHead.js → src/theme/LayoutHead.tsx

@@ -1,9 +1,11 @@
 import Head from "@docusaurus/Head";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ThemeLayoutHead from "@theme-init/LayoutHead";
-import React from "react";
+import React, { ComponentProps } from "react";
 
-export default function LayoutHead(props) {
+type Props = ComponentProps<typeof ThemeLayoutHead>;
+
+export default function LayoutHead(props: Props) {
   const {
     siteConfig: { url },
   } = useDocusaurusContext();

src/theme/Sandbox.js → src/theme/Sandbox.tsx

@@ -5,7 +5,16 @@ import styles from "./Sandbox.module.css";
 const sandboxProp =
   "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts";
 
-export default function Sandbox(props) {
+type Props = {
+  codeMirror?: boolean;
+  height: number | string;
+  hideDevTools?: boolean;
+  id: string;
+  inline?: boolean;
+  previewWindow?: "browser" | "console" | "tests";
+};
+
+export default function Sandbox(props: Props) {
   const {
     codeMirror = true,
     height,

tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "artifacts/dist"
+  },
+  "include": ["src/**/*"]
+}

src/tsconfig.json → tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "@snout/tsconfig",
   "compilerOptions": {
-    "alwaysStrict": false,
-    "sourceMap": false
+    "jsx": "react"
   }
 }