Merge pull request #18 from github/typescript

Convert project to Typescript

.babelrc

@@ -1,18 +0,0 @@
-{
-  "env": {
-    "esm": {
-      "presets": ["github"]
-    },
-    "umd": {
-      "plugins": [
-        ["@babel/plugin-transform-modules-umd", {
-          "globals": {
-            "selector-set": "SelectorSet"
-          }
-        }]
-      ],
-      "moduleId": "remoteForm",
-      "presets": ["github"]
-    }
-  }
-}

.eslintrc.json

@@ -1,12 +1,20 @@
 {
+  "parser": "@typescript-eslint/parser",
   "extends": [
     "plugin:github/es6",
     "plugin:github/browser",
-    "plugin:github/flow"
+    "plugin:github/typescript"
   ],
+  "rules": {
+    "@typescript-eslint/no-non-null-assertion": "off"
+  },
   "overrides": [
     {
       "files": "test/**/*.js",
+      "parser": "espree",
+      "parserOptions": {
+        "ecmaVersion": 2020
+      },
       "rules": {
         "flowtype/require-valid-file-annotation": "off",
         "github/unescaped-html-literal": "off",

.flowconfig

@@ -1,11 +0,0 @@
-[ignore]
-
-[include]
-
-[libs]
-
-[lints]
-
-[options]
-
-[strict]

CODEOWNERS

@@ -0,0 +1 @@
+* @github/web-systems-reviewers

index.d.ts

@@ -1,32 +0,0 @@
-type Kicker = {
-  text: () => Promise<SimpleResponse>,
-  json: () => Promise<SimpleResponse>,
-  html: () => Promise<SimpleResponse>
-}
-
-type SimpleRequest = {
-  method: string,
-  url: string,
-  body: FormData | null,
-  headers: Headers
-}
-
-export type SimpleResponse = {
-  url: string,
-  status: number,
-  statusText: string,
-  headers: Headers,
-  text: string,
-  json: {[key: string]: any},
-  html: DocumentFragment
-}
-
-export type ErrorWithResponse = {
-  response: SimpleResponse
-}
-
-export type RemoteFormHandler = (form: HTMLFormElement, kicker: Kicker, req: SimpleRequest) => void | Promise<void>;
-export function afterRemote(fn: (form: HTMLFormElement) => void | Promise<void>): void;
-export function beforeRemote(fn: (form: HTMLFormElement) => void | Promise<void>): void;
-export function remoteForm(selector: string, fn: RemoteFormHandler): void;
-export function remoteUninstall(selector: string, fn: RemoteFormHandler): void;

package.json

@@ -4,24 +4,22 @@
   "description": "Decorator that will submit a form over AJAX",
   "repository": "github/remote-form",
   "files": [
-    "dist",
+    "dist"
-    "index.d.ts"
   ],
-  "main": "dist/index.umd.js",
+  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.js",
-  "types:": "index.d.ts",
+  "types:": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
     "lint": "github-lint",
     "prebuild": "npm run clean && npm run lint && mkdir dist",
-    "build-umd": "BABEL_ENV=umd babel src/index.js -o dist/index.umd.js",
+    "build": "tsc",
-    "build-esm": "BABEL_ENV=esm babel src/index.js -o dist/index.esm.js",
-    "build": "npm run build-umd && npm run build-esm && cp src/index.js.flow dist/index.umd.js.flow && cp src/index.js.flow dist/index.esm.js.flow",
     "pretest": "npm run build",
     "test": "karma start test/karma.config.js",
     "prepublishOnly": "npm run build",
     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
   },
+  "prettier": "@github/prettier-config",
   "keywords": [
     "decorator",
     "remote-form",
@@ -32,21 +30,17 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
+    "@github/prettier-config": "0.0.4",
-    "@babel/core": "^7.7.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
-    "@babel/plugin-transform-modules-umd": "^7.7.0",
-    "babel-preset-github": "^3.2.1",
     "chai": "^4.2.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.8.0",
-    "eslint-plugin-github": "^3.2.1",
+    "eslint-plugin-github": "^3.4.1",
-    "flow-bin": "^0.102.0",
+    "karma": "^5.0.2",
-    "karma": "^4.4.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.0",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^6.2.2"
+    "mocha": "^7.1.1",
+    "typescript": "^3.8.3"
   },
   "dependencies": {}
 }

prettier.config.js

@@ -1,2 +0,0 @@
-/* @flow strict */
-module.exports = require('eslint-plugin-github/prettier.config')

src/index.js.flow

@@ -1,30 +0,0 @@
-/* @flow strict */
-
-type Kicker = {
-  text: () => Promise<SimpleResponse>,
-  json: () => Promise<SimpleResponse>,
-  html: () => Promise<SimpleResponse>
-}
-
-type SimpleRequest = {
-  method: string,
-  url: string,
-  body: ?FormData,
-  headers: Headers
-}
-
-export type SimpleResponse = {
-  url: string,
-  status: number,
-  statusText: string,
-  headers: Headers,
-  text: string,
-  json: {[string]: any},
-  html: DocumentFragment
-}
-export type RemoteFormHandler = (form: HTMLFormElement, kicker: Kicker, req: SimpleRequest) => void | Promise<void>;
-
-declare export function afterRemote(fn: (form: HTMLFormElement) => void | Promise<void>): void;
-declare export function beforeRemote(fn: (form: HTMLFormElement) => void | Promise<void>): void;
-declare export function remoteForm(selector: string, fn: RemoteFormHandler): void;
-declare export function remoteUninstall(selector: string, fn: RemoteFormHandler): void;

src/index.ts

@@ -1,5 +1,3 @@
-/* @flow strict */
-
 // Parse HTML text into document fragment.
 function parseHTML(document: Document, html: string): DocumentFragment {
   const template = document.createElement('template')
@@ -19,61 +17,59 @@ function serialize(form: HTMLFormElement): string {
 class ErrorWithResponse extends Error {
   response: SimpleResponse
 
-  constructor(message, response) {
+  constructor(message: string, response: SimpleResponse) {
     super(message)
     this.response = response
   }
 }
 
-function makeDeferred<T>(): [Promise<T>, () => T, () => T] {
+function makeDeferred<T>(): [Promise<T>, () => void, () => void] {
-  let resolve
+  let resolve: () => void
-  let reject
+  let reject: () => void
   const promise = new Promise(function (_resolve, _reject) {
     resolve = _resolve
     reject = _reject
   })
 
-  // eslint-disable-next-line flowtype/no-flow-fix-me-comments
+  return [promise as Promise<T>, resolve!, reject!]
-  // $FlowFixMe
-  return [promise, resolve, reject]
 }
 
-type SimpleRequest = {
+interface SimpleRequest {
-  method: string,
+  method: string
-  url: string,
+  url: string
-  body: ?FormData,
+  body: FormData | null
   headers: Headers
 }
 
-export type SimpleResponse = {
+export interface SimpleResponse {
-  url: string,
+  url: string
-  status: number,
+  status: number
-  statusText: string,
+  statusText: string
-  headers: Headers,
+  headers: Headers
-  text: string,
+  text: string
-  // eslint-disable-next-line flowtype/no-weak-types
+  json: {[key: string]: unknown}
-  json: {[string]: any},
   html: DocumentFragment
 }
 
-type Kicker = {
+interface Kicker {
-  text: () => Promise<SimpleResponse>,
+  text: () => Promise<SimpleResponse>
-  json: () => Promise<SimpleResponse>,
+  json: () => Promise<SimpleResponse>
   html: () => Promise<SimpleResponse>
 }
 
 export type RemoteFormHandler = (form: HTMLFormElement, kicker: Kicker, req: SimpleRequest) => void
 
 let formHandlers: Map<string, RemoteFormHandler[]>
+type Handler = (form: HTMLFormElement) => void
 
-const afterHandlers = []
+const afterHandlers: Handler[] = []
-const beforeHandlers = []
+const beforeHandlers: Handler[] = []
 
-export function afterRemote(fn: (form: HTMLFormElement) => mixed) {
+export function afterRemote(fn: Handler) {
   afterHandlers.push(fn)
 }
 
-export function beforeRemote(fn: (form: HTMLFormElement) => mixed) {
+export function beforeRemote(fn: Handler) {
   beforeHandlers.push(fn)
 }
 
@@ -89,7 +85,10 @@ export function remoteForm(selector: string, fn: RemoteFormHandler) {
 export function remoteUninstall(selector: string, fn: RemoteFormHandler) {
   if (formHandlers) {
     const handlers = formHandlers.get(selector) || []
-    formHandlers.set(selector, handlers.filter(x => x !== fn))
+    formHandlers.set(
+      selector,
+      handlers.filter(x => x !== fn)
+    )
   }
 }
 
@@ -115,11 +114,11 @@ function handleSubmit(event: Event) {
   }
 
   const req = buildRequest(form)
-  const [kickerPromise, ultimateResolve, ultimateReject] = makeDeferred()
+  const [kickerPromise, ultimateResolve, ultimateReject] = makeDeferred<SimpleResponse>()
 
   event.preventDefault()
   processHandlers(matches, form, req, kickerPromise).then(
-    async performAsyncSubmit => {
+    async (performAsyncSubmit: unknown) => {
       if (performAsyncSubmit) {
         for (const handler of beforeHandlers) {
           await handler(form)
@@ -128,6 +127,7 @@ function handleSubmit(event: Event) {
         // TODO: ensure that these exceptions are processed by our global error handler
         remoteSubmit(req)
           .then(ultimateResolve, ultimateReject)
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
           .catch(() => {})
           .then(() => {
             for (const handler of afterHandlers) {
@@ -139,7 +139,7 @@ function handleSubmit(event: Event) {
         form.submit()
       }
     },
-    err => {
+    (err: Error) => {
       // TODO: special "cancel" error object to halt processing and avoid
       // submitting the form
       form.submit()
@@ -202,7 +202,7 @@ function buildRequest(form: HTMLFormElement): SimpleRequest {
   return req
 }
 
-async function remoteSubmit(req): Promise<SimpleResponse> {
+async function remoteSubmit(req: SimpleRequest): Promise<SimpleResponse> {
   const response = await window.fetch(req.url, {
     method: req.method,
     body: req.body !== null ? req.body : undefined,
@@ -217,7 +217,7 @@ async function remoteSubmit(req): Promise<SimpleResponse> {
     headers: response.headers,
     text: '',
     get json() {
-      // eslint-disable-next-line no-shadow
+      // eslint-disable-next-line no-shadow, @typescript-eslint/no-this-alias
       const response: SimpleResponse = this
       const data = JSON.parse(response.text)
       delete response.json
@@ -225,7 +225,7 @@ async function remoteSubmit(req): Promise<SimpleResponse> {
       return response.json
     },
     get html() {
-      // eslint-disable-next-line no-shadow
+      // eslint-disable-next-line no-shadow, @typescript-eslint/no-this-alias
       const response: SimpleResponse = this
       delete response.html
 

test/karma.config.js

@@ -24,7 +24,10 @@ module.exports = function(config) {
   config.set({
     basePath: '..',
     frameworks: ['mocha', 'chai'],
-    files: [{pattern: 'dist/index.esm.js', type: 'module'}, {pattern: 'test/test.js', type: 'module'}],
+    files: [
+      {pattern: 'dist/index.js', type: 'module'},
+      {pattern: 'test/test.js', type: 'module'}
+    ],
     reporters: ['mocha'],
     port: 9876,
     colors: true,

test/test.js

@@ -1,4 +1,4 @@
-import {remoteForm as _remoteForm, remoteUninstall} from '../dist/index.esm.js'
+import {remoteForm as _remoteForm, remoteUninstall} from '../dist/index.js'
 
 describe('remoteForm', function () {
   let htmlForm
@@ -102,6 +102,7 @@ describe('remoteForm', function() {
       event.preventDefault()
     }
     const originalMochaError = window.onerror
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     window.onerror = function () {}
     window.addEventListener('error', errorHandler)
 

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "strict": true,
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "lib": ["es6", "dom", "dom.iterable"],
+    "target": "ES2020",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  }
+}