Add TypeScript

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": ["error", { "allowDeclarations": true }],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "no-unused-vars": "off",
+    "prettier/prettier": ["error"]
+  }
+}

package.json

@@ -39,31 +39,39 @@
     "@playwright/test": "^1.28.0",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@types/multer": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "arg": "^5.0.1",
     "body-parser": "^1.20.1",
     "chai": "~4.3.4",
     "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "express": "^4.18.2",
     "multer": "^1.4.2",
-    "rollup": "^2.35.1"
+    "prettier": "2.6.2",
+    "rollup": "^2.35.1",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "clean": "rm -fr dist",
     "clean:win": "rmdir /s /q dist",
-    "build": "rollup -c",
-    "build:win": "rollup -c",
+    "build": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types && rollup -c",
+    "build:win": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types & rollup -c",
     "watch": "rollup -wc",
-    "start": "node src/tests/server.mjs",
+    "start": "ts-node -O '{\"module\":\"commonjs\"}' src/tests/server.ts",
     "test": "yarn test:unit && yarn test:browser",
     "test:browser": "playwright test",
     "test:unit": "NODE_OPTIONS=--inspect web-test-runner",
     "test:unit:win": "SET NODE_OPTIONS=--inspect & web-test-runner",
     "release": "yarn build && npm publish",
-    "lint": "eslint . --ext .js"
+    "lint": "eslint . --ext .ts"
   },
   "engines": {
     "node": ">= 14"

playwright.config.ts

@@ -0,0 +1,28 @@
+import { type PlaywrightTestConfig, devices } from "@playwright/test"
+
+const config: PlaywrightTestConfig = {
+  projects: [
+    {
+      name: "chrome",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+  ],
+  retries: 2,
+  testDir: "./src/tests/",
+  testMatch: /(functional|integration)\/.*_tests\.ts/,
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:9000/src/tests/fixtures/test.js",
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: "http://localhost:9000/",
+  },
+}
+
+export default config

rollup.config.js

@@ -1,12 +1,13 @@
 import resolve from "@rollup/plugin-node-resolve"
+import typescript from "@rollup/plugin-typescript"
 
 import { version } from "./package.json"
 const year = new Date().getFullYear()
 const banner = `/*!\nTurbo ${version}\nCopyright © ${year} 37signals LLC\n */`
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [
       {
         name: "Turbo",
@@ -20,7 +21,10 @@ export default [
         banner
       }
     ],
-    plugins: [resolve()],
+    plugins: [
+      resolve(),
+      typescript()
+    ],
     watch: {
       include: "src/**"
     }

src/core/bardo.js → src/core/bardo.ts

@@ -1,12 +1,26 @@
+import { PermanentElementMap } from "./snapshot"
+
+export interface BardoDelegate {
+  enteringBardo(currentPermanentElement: Element, newPermanentElement: Element): void
+  leavingBardo(currentPermanentElement: Element): void
+}
+
 export class Bardo {
-  static async preservingPermanentElements(delegate, permanentElementMap, callback) {
+  readonly permanentElementMap: PermanentElementMap
+  readonly delegate: BardoDelegate
+
+  static async preservingPermanentElements(
+    delegate: BardoDelegate,
+    permanentElementMap: PermanentElementMap,
+    callback: () => void
+  ) {
     const bardo = new this(delegate, permanentElementMap)
     bardo.enter()
     await callback()
     bardo.leave()
   }
 
-  constructor(delegate, permanentElementMap) {
+  constructor(delegate: BardoDelegate, permanentElementMap: PermanentElementMap) {
     this.delegate = delegate
     this.permanentElementMap = permanentElementMap
   }
@@ -28,31 +42,31 @@ export class Bardo {
     }
   }
 
-  replaceNewPermanentElementWithPlaceholder(permanentElement) {
+  replaceNewPermanentElementWithPlaceholder(permanentElement: Element) {
     const placeholder = createPlaceholderForPermanentElement(permanentElement)
     permanentElement.replaceWith(placeholder)
   }
 
-  replaceCurrentPermanentElementWithClone(permanentElement) {
+  replaceCurrentPermanentElementWithClone(permanentElement: Element) {
     const clone = permanentElement.cloneNode(true)
     permanentElement.replaceWith(clone)
   }
 
-  replacePlaceholderWithPermanentElement(permanentElement) {
+  replacePlaceholderWithPermanentElement(permanentElement: Element) {
     const placeholder = this.getPlaceholderById(permanentElement.id)
     placeholder?.replaceWith(permanentElement)
   }
 
-  getPlaceholderById(id) {
+  getPlaceholderById(id: string) {
     return this.placeholders.find((element) => element.content == id)
   }
 
-  get placeholders() {
-    return [...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]")]
+  get placeholders(): HTMLMetaElement[] {
+    return [...document.querySelectorAll<HTMLMetaElement>("meta[name=turbo-permanent-placeholder][content]")]
   }
 }
 
-function createPlaceholderForPermanentElement(permanentElement) {
+function createPlaceholderForPermanentElement(permanentElement: Element) {
   const element = document.createElement("meta")
   element.setAttribute("name", "turbo-permanent-placeholder")
   element.setAttribute("content", permanentElement.id)

src/core/cache.js → src/core/cache.ts

@@ -1,7 +1,10 @@
+import { Session } from "./session"
 import { setMetaContent } from "../util"
 
 export class Cache {
-  constructor(session) {
+  readonly session: Session
+
+  constructor(session: Session) {
     this.session = session
   }
 
@@ -10,18 +13,18 @@ export class Cache {
   }
 
   resetCacheControl() {
-    this.#setCacheControl("")
+    this.setCacheControl("")
   }
 
   exemptPageFromCache() {
-    this.#setCacheControl("no-cache")
+    this.setCacheControl("no-cache")
   }
 
   exemptPageFromPreview() {
-    this.#setCacheControl("no-preview")
+    this.setCacheControl("no-preview")
   }
 
-  #setCacheControl(value) {
+  private setCacheControl(value: string) {
     setMetaContent("turbo-cache-control", value)
   }
 }

src/core/drive/error_renderer.js → src/core/drive/error_renderer.ts

@@ -1,8 +1,9 @@
-import { activateScriptElement } from "../../util"
+import { PageSnapshot } from "./page_snapshot"
 import { Renderer } from "../renderer"
+import { activateScriptElement } from "../../util"
 
-export class ErrorRenderer extends Renderer {
-  static renderElement(currentElement, newElement) {
+export class ErrorRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
+  static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
     const { documentElement, body } = document
 
     documentElement.replaceChild(newElement, body)