Convert to TypeScript

2020-05-21 16:10:07 -04:00 · 2020-05-21 16:10:07 -04:00 · 1bd1772056
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -2,20 +2,24 @@
  "extends": [
    "plugin:github/es6",
    "plugin:github/browser",
-    "plugin:github/flow"
+    "plugin:github/typescript"
  ],
+  "globals": {
+    "ClipboardCopyElement": "readable"
+  },
  "overrides": [
    {
      "files": "test/**/*.js",
-      "rules": {
-        "flowtype/require-valid-file-annotation": "off"
-      },
      "env": {
        "mocha": true
      },
      "globals": {
        "assert": true
      }
+    },
+    {
+      "files": "*.js",
+      "parser": "espree"
    }
  ]
 }
--- a/.flowconfig
+++ b/.flowconfig
@ -1,9 +0,0 @@
-[ignore]
-
-[include]
-
-[libs]
-
-[options]
-
-[lints]
--- a/.travis.yml
+++ b/.travis.yml
@ -1,9 +0,0 @@
-language: node_js
-sudo: required
-node_js:
-  - "node"
-addons:
-  chrome: stable
-cache:
-  directories:
-    - node_modules
--- a/examples/index.html
+++ b/examples/index.html
@ -3,7 +3,7 @@
  <head>
    <title>Clipboard copy examples</title>
    <script src="https://unpkg.com/@github/clipboard-copy-element@latest" defer></script>
-    <!-- <script src="../dist/index.umd.js" defer></script> -->
+    <!-- <script src="../dist/index.js" defer></script> -->
    <style>
      clipboard-copy {
        -webkit-appearance: button;
--- a/index.d.ts
+++ b/index.d.ts
@ -1,12 +0,0 @@
-export default class ClipboardCopyElement extends HTMLElement {
-  value: string
-}
-
-declare global {
-  interface Window {
-    ClipboardCopyElement: typeof ClipboardCopyElement
-  }
-  interface HTMLElementTagNameMap {
-    'clipboard-copy': ClipboardCopyElement
-  }
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,16 +3,17 @@
  "version": "1.1.2",
  "description": "Copy element text content or input values to the clipboard.",
  "repository": "github/clipboard-copy-element",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.esm.js",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
  "scripts": {
    "clean": "rm -rf dist",
    "lint": "github-lint",
-    "prebuild": "npm run clean && npm run lint",
-    "build": "rollup -c && cp src/clipboard-copy-element.js.flow dist/index.esm.js.flow && cp src/clipboard-copy-element.js.flow dist/index.umd.js.flow",
+    "prebuild": "npm run clean && npm run lint && tsc",
+    "build": "rollup -c",
    "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'"
  },
@ -21,24 +22,23 @@
  ],
  "license": "MIT",
  "files": [
-    "dist",
-    "index.d.ts"
+    "dist"
  ],
+  "prettier": "@github/prettier-config",
  "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "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",
-    "flow-bin": "^0.111.1",
-    "karma": "^4.3.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-github": "^3.4.1",
+    "karma": "^5.0.9",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
    "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^6.2.1",
-    "rollup": "^1.23.1",
-    "rollup-plugin-babel": "^4.3.3"
+    "mocha": "^7.1.2",
+    "rollup": "^1.32.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "typescript": "^3.9.3"
  },
  "eslintIgnore": [
    "dist/"
--- a/prettier.config.js
+++ b/prettier.config.js
@ -1,2 +0,0 @@
-/* @flow */
-module.exports = require('eslint-plugin-github/prettier.config')
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,25 +1,11 @@
-/* @flow */
-
-import babel from 'rollup-plugin-babel'
-
-const pkg = require('./package.json')
+import pkg from './package.json'

 export default {
-  input: 'src/index.js',
+  input: 'dist/index.js',
  output: [
    {
      file: pkg['module'],
      format: 'es'
-    },
-    {
-      file: pkg['main'],
-      format: 'umd',
-      name: 'ClipboardCopyElement'
    }
-  ],
-  plugins: [
-    babel({
-      presets: ['github']
-    })
  ]
 }
--- a/src/clipboard-copy-element.js.flow
+++ b/src/clipboard-copy-element.js.flow
@ -1,8 +0,0 @@
-/* @flow strict */
-
-declare module '@github/clipboard-copy-element' {
-  declare export default class ClipboardCopyElement extends HTMLElement {
-    get value(): string;
-    set value(value: string): void;
-  }
-}
--- a/src/clipboard-copy-element.ts
+++ b/src/clipboard-copy-element.ts
@ -1,5 +1,3 @@
-/* @flow strict */
-
 import {copyNode, copyText} from './clipboard'

 function copy(button: HTMLElement) {
@ -48,11 +46,11 @@ function keydown(event: KeyboardEvent) {
 }

 function focused(event: FocusEvent) {
-  event.currentTarget.addEventListener('keydown', keydown)
+  ;(event.currentTarget as HTMLElement).addEventListener('keydown', keydown)
 }

 function blurred(event: FocusEvent) {
-  event.currentTarget.removeEventListener('keydown', keydown)
+  ;(event.currentTarget as HTMLElement).removeEventListener('keydown', keydown)
 }

 export default class ClipboardCopyElement extends HTMLElement {
@ -63,7 +61,7 @@ export default class ClipboardCopyElement extends HTMLElement {
    this.addEventListener('blur', blurred)
  }

-  connectedCallback() {
+  connectedCallback(): void {
    if (!this.hasAttribute('tabindex')) {
      this.setAttribute('tabindex', '0')
    }
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@ -1,5 +1,3 @@
-/* @flow strict */
-
 function createNode(text: string): Element {
  const node = document.createElement('pre')
  node.style.width = '1px'
@ -12,9 +10,7 @@ function createNode(text: string): Element {

 export function copyNode(node: Element): Promise<void> {
  if ('clipboard' in navigator) {
-    // eslint-disable-next-line flowtype/no-flow-fix-me-comments
-    // $FlowFixMe Clipboard is not defined in Flow yet.
-    return navigator.clipboard.writeText(node.textContent)
+    return navigator.clipboard.writeText(node.textContent || '')
  }

  const selection = getSelection()
@ -35,8 +31,6 @@ export function copyNode(node: Element): Promise<void> {

 export function copyText(text: string): Promise<void> {
  if ('clipboard' in navigator) {
-    // eslint-disable-next-line flowtype/no-flow-fix-me-comments
-    // $FlowFixMe Clipboard is not defined in Flow yet.
    return navigator.clipboard.writeText(text)
  }

--- a/src/index.ts
+++ b/src/index.ts
@ -1,9 +1,13 @@
-/* @flow strict */
-
 import ClipboardCopyElement from './clipboard-copy-element'

 export default ClipboardCopyElement

+declare global {
+  interface Window {
+    ClipboardCopyElement: typeof ClipboardCopyElement
+  }
+}
+
 if (!window.customElements.get('clipboard-copy')) {
  window.ClipboardCopyElement = ClipboardCopyElement
  window.customElements.define('clipboard-copy', ClipboardCopyElement)
--- 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,
    colors: true,
--- a/test/test.js
+++ b/test/test.js
@ -1,19 +1,19 @@
-describe('clipboard-copy element', function() {
-  describe('element creation', function() {
-    it('creates from document.createElement', function() {
+describe('clipboard-copy element', function () {
+  describe('element creation', function () {
+    it('creates from document.createElement', function () {
      const el = document.createElement('clipboard-copy')
      assert.equal('CLIPBOARD-COPY', el.nodeName)
      assert(el instanceof window.ClipboardCopyElement)
    })

-    it('creates from constructor', function() {
+    it('creates from constructor', function () {
      const el = new window.ClipboardCopyElement()
      assert.equal('CLIPBOARD-COPY', el.nodeName)
    })
  })

-  describe('clicking the button', function() {
-    beforeEach(function() {
+  describe('clicking the button', function () {
+    beforeEach(function () {
      const container = document.createElement('div')
      container.innerHTML = `
        <clipboard-copy value="target text">
@ -22,11 +22,11 @@ describe('clipboard-copy element', function() {
      document.body.append(container)
    })

-    afterEach(function() {
+    afterEach(function () {
      document.body.innerHTML = ''
    })

-    it('retains focus on the button', function() {
+    it('retains focus on the button', function () {
      const button = document.querySelector('clipboard-copy')
      button.focus()
      assert.equal(document.activeElement, button)
@ -35,10 +35,10 @@ describe('clipboard-copy element', function() {
    })
  })

-  describe('target element', function() {
+  describe('target element', function () {
    const nativeClipboard = navigator.clipboard
    let whenCopied
-    beforeEach(function() {
+    beforeEach(function () {
      const container = document.createElement('div')
      container.innerHTML = `
        <clipboard-copy for="copy-target">
@ -59,12 +59,12 @@ describe('clipboard-copy element', function() {
      })
    })

-    afterEach(function() {
+    afterEach(function () {
      document.body.innerHTML = ''
      defineClipboard(nativeClipboard)
    })

-    it('node', function() {
+    it('node', function () {
      const target = document.createElement('div')
      target.innerHTML = 'Hello <b>world!</b>'
      target.id = 'copy-target'
@ -78,7 +78,7 @@ describe('clipboard-copy element', function() {
      })
    })

-    it('hidden input', function() {
+    it('hidden input', function () {
      const target = document.createElement('input')
      target.type = 'hidden'
      target.value = 'Hello world!'
@ -93,7 +93,7 @@ describe('clipboard-copy element', function() {
      })
    })

-    it('input field', function() {
+    it('input field', function () {
      const target = document.createElement('input')
      target.value = 'Hello world!'
      target.id = 'copy-target'
@ -107,7 +107,7 @@ describe('clipboard-copy element', function() {
      })
    })

-    it('textarea', function() {
+    it('textarea', function () {
      const target = document.createElement('textarea')
      target.value = 'Hello world!'
      target.id = 'copy-target'
@ -121,7 +121,7 @@ describe('clipboard-copy element', function() {
      })
    })

-    it('a[href]', function() {
+    it('a[href]', function () {
      const target = document.createElement('a')
      target.href = '/hello#world'
      target.textContent = 'I am a link'
@ -136,7 +136,7 @@ describe('clipboard-copy element', function() {
      })
    })

-    it('a[id]', function() {
+    it('a[id]', function () {
      const target = document.createElement('a')
      target.textContent = 'I am a link'
      target.id = 'copy-target'
@ -151,10 +151,10 @@ describe('clipboard-copy element', function() {
    })
  })

-  describe('shadow DOM context', function() {
+  describe('shadow DOM context', function () {
    const nativeClipboard = navigator.clipboard
    let whenCopied
-    beforeEach(function() {
+    beforeEach(function () {
      const container = document.createElement('div')
      container.id = 'shadow'
      const elementInDocument = document.createElement('div')
@ -183,12 +183,12 @@ describe('clipboard-copy element', function() {
      })
    })

-    afterEach(function() {
+    afterEach(function () {
      document.body.innerHTML = ''
      defineClipboard(nativeClipboard)
    })

-    it('copies from within its shadow root', function() {
+    it('copies from within its shadow root', function () {
      const shadow = document.querySelector('#shadow')
      shadow.shadowRoot.querySelector('clipboard-copy').click()

--- 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"
+  ]
+}