Convert to TypeScript

2020-05-28 17:15:41 -04:00 · 2020-05-28 17:15:41 -04:00 · f86b90021c
--- a/.babelrc
+++ b/.babelrc
@ -1,10 +0,0 @@
-{
-  "presets": ["github"],
-  "env": {
-    "umd": {
-      "plugins": [
-        "@babel/plugin-transform-modules-umd"
-      ]
-    }
-  }
-}
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,7 +1,7 @@
 {
  "extends": [
-    "plugin:github/es6",
-    "plugin:github/browser"
+    "plugin:github/browser",
+    "plugin:github/typescript"
  ],
  "overrides": [
    {
--- a/examples/index.html
+++ b/examples/index.html
@ -6,7 +6,7 @@
 </head>
 <body>
  <include-fragment src="./pull.html">Loading</include-fragment>
-  <!-- <script src="../dist/index-umd.js"></script> -->
-  <script src="https://unpkg.com/@github/include-fragment-element@latest"></script>
+  <!-- <script type="module" src="../dist/index.js"></script> -->
+  <script type="module" src="https://unpkg.com/@github/include-fragment-element@latest?module"></script>
 </body>
 </html>
--- a/include-fragment-element.js.flow
+++ b/include-fragment-element.js.flow
@ -1,12 +0,0 @@
-/* @flow strict */
-
-declare module '@github/include-fragment-element' {
-  declare export default class IncludeFragmentElement extends HTMLElement {
-    get data(): Promise<string>;
-    get src(): string;
-    set src(url: string): void;
-    get accept(): string;
-    set accept(accept: string): void;
-    fetch(request: Request): Promise<Response>;
-  }
-}
--- a/index.d.ts
+++ b/index.d.ts
@ -1,15 +0,0 @@
-export default class IncludeFragmentElement extends HTMLElement {
-  readonly data: Promise<string>;
-  src: string;
-  accept: string;
-  fetch(request: Request): Promise<Response>;
-}
-
-declare global {
-  interface Window {
-    IncludeFragmentElement: typeof IncludeFragmentElement
-  }
-  interface HTMLElementTagNameMap {
-    'include-fragment': IncludeFragmentElement
-  }
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,42 +1,39 @@
 {
  "name": "@github/include-fragment-element",
  "version": "5.1.2",
-  "main": "dist/index-umd.js",
-  "module": "dist/index-es.js",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
  "license": "MIT",
  "repository": "github/include-fragment-element",
  "files": [
-    "dist",
-    "index.d.ts"
+    "dist"
  ],
  "scripts": {
    "clean": "rm -rf dist",
-    "lint": "github-lint",
+    "lint": "eslint . --ext .js,.ts && tsc --noEmit",
    "prebuild": "npm run clean && npm run lint && mkdir dist",
-    "build": "npm run build-es && npm run build-umd",
-    "build-es": "babel include-fragment-element.js -o dist/index-es.js && cp include-fragment-element.js.flow dist/index-es.js.flow",
-    "build-umd": "BABEL_ENV=umd babel include-fragment-element.js -o dist/index-umd.js && cp include-fragment-element.js.flow dist/index-umd.js.flow",
+    "build": "tsc && cp src/index.css dist/index.css",
    "pretest": "npm run build",
-    "test": "karma start ./test/karma.config.js",
+    "test": "karma start ./test/karma.config.cjs",
    "prepublishOnly": "npm run build",
    "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
  },
+  "prettier": "@github/prettier-config",
  "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-transform-modules-umd": "^7.2.0",
-    "babel-preset-github": "^3.2.1",
+    "@github/prettier-config": "0.0.4",
    "chai": "^4.2.0",
    "eslint": "^6.5.1",
-    "eslint-plugin-github": "^3.1.3",
+    "eslint-plugin-github": "^4.0.1",
    "karma": "^4.3.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-firefox-launcher": "^1.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^6.2.1"
+    "mocha": "^6.2.1",
+    "typescript": "^3.9.3"
  },
  "eslintIgnore": [
    "dist/"
--- a/prettier.config.js
+++ b/prettier.config.js
@ -1 +0,0 @@
-module.exports = require('eslint-plugin-github/prettier.config')
--- a/include-fragment-element.css
+++ b/include-fragment-element.css
--- a/include-fragment-element.js
+++ b/include-fragment-element.js
@ -1,27 +1,28 @@
 const privateData = new WeakMap()

-function fire(name, target) {
-  setTimeout(function() {
+function fire(name: string, target: Element) {
+  setTimeout(function () {
    target.dispatchEvent(new Event(name))
  }, 0)
 }

-function handleData(el) {
+async function handleData(el: IncludeFragmentElement) {
+  // eslint-disable-next-line github/no-then
  return getData(el).then(
-    function(html) {
+    function (html: string) {
      const parentNode = el.parentNode
      if (parentNode) {
        el.insertAdjacentHTML('afterend', html)
        parentNode.removeChild(el)
      }
    },
-    function() {
+    function () {
      el.classList.add('is-error')
    }
  )
 }

-function getData(el) {
+function getData(el: IncludeFragmentElement) {
  const src = el.src
  let data = privateData.get(el)
  if (data && data.src === src) {
@ -37,13 +38,16 @@ function getData(el) {
  }
 }

-function isWildcard(accept) {
+function isWildcard(accept: string | null) {
  return accept && !!accept.split(',').find(x => x.match(/^\s*\*\/\*/))
 }

 export default class IncludeFragmentElement extends HTMLElement {
+  _attached: boolean
+
  constructor() {
    super()
+    this._attached = false
  }

  static get observedAttributes() {
@ -53,7 +57,7 @@ export default class IncludeFragmentElement extends HTMLElement {
  get src() {
    const src = this.getAttribute('src')
    if (src) {
-      const link = this.ownerDocument.createElement('a')
+      const link = this.ownerDocument!.createElement('a')
      link.href = src
      return link.href
    } else {
@ -61,15 +65,15 @@ export default class IncludeFragmentElement extends HTMLElement {
    }
  }

-  set src(val) {
+  set src(val: string) {
    this.setAttribute('src', val)
  }

  get accept() {
-    return this.getAttribute('accept')
+    return this.getAttribute('accept') || ''
  }

-  set accept(val) {
+  set accept(val: string) {
    this.setAttribute('accept', val)
  }

@ -77,7 +81,7 @@ export default class IncludeFragmentElement extends HTMLElement {
    return getData(this)
  }

-  attributeChangedCallback(attribute) {
+  attributeChangedCallback(attribute: string) {
    if (attribute === 'src') {
      // Source changed after attached so replace element.
      if (this._attached) {
@ -143,11 +147,19 @@ export default class IncludeFragmentElement extends HTMLElement {
      )
  }

-  fetch(request) {
+  fetch(request: RequestInfo): Promise<Response> {
    return fetch(request)
  }
 }

+declare global {
+  interface Window {
+    IncludeFragmentElement: typeof IncludeFragmentElement
+  }
+  interface HTMLElementTagNameMap {
+    'include-fragment': IncludeFragmentElement
+  }
+}
 if (!window.customElements.get('include-fragment')) {
  window.IncludeFragmentElement = IncludeFragmentElement
  window.customElements.define('include-fragment', IncludeFragmentElement)
--- a/test/karma.config.cjs
+++ b/test/karma.config.cjs
@ -1,7 +1,7 @@
 module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai'],
-    files: ['../dist/index-umd.js', 'test.js'],
+    files: [{pattern: '../dist/index.js', type: 'module'}, 'test.js'],
    reporters: ['mocha'],
    port: 9876,
    client: {mocha: {ui: 'tdd'}},
--- a/test/test.js
+++ b/test/test.js
@ -70,13 +70,12 @@ function when(el, eventType) {
  })
 }

-window.IncludeFragmentElement.prototype.fetch = function(request) {
-  const pathname = new URL(request.url).pathname
-  return Promise.resolve(responses[pathname](request))
-}
-
 setup(function() {
  count = 0
+  window.IncludeFragmentElement.prototype.fetch = function (request) {
+    const pathname = new URL(request.url).pathname
+    return Promise.resolve(responses[pathname](request))
+  }
 })

 suite('include-fragment-element', function() {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2017",
+    "strict": true,
+    "declaration": true,
+    "outDir": "dist",
+    "removeComments": true
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}
				`@ -1 +0,0 @@`
				`module.exports = require('eslint-plugin-github/prettier.config')`