refactor: convert js to ts

Author: pjshy

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 lib
+*.d.ts

package.json

@@ -4,6 +4,7 @@
   "description": "Vim keybindings for monaco-editor",
   "main": "./lib/index.js",
   "scripts": {
+    "test": "echo \"No test in this repo\"",
     "start": "webpack-dev-server --mode development --host=0.0.0.0 --port=8080",
     "lint": "eslint . --ext .js,.ts --cache --cache-location ./.cache-eslint/",
     "clean": "rm -rf lib dist local",
@@ -57,7 +58,7 @@
   "lint-staged": {
     "*.@(ts|tsx|js|jsx)": [
       "prettier --write",
-      "yarn lint -- --fix",
+      "yarn lint --fix",
       "git add"
     ]
   },

src/cm/keymap_vim.d.ts

@@ -0,0 +1,11 @@
+import { editor } from 'monaco-editor'
+
+export default class VimMode {
+  constructor(editor: editor.IStandaloneCodeEditor)
+
+  attach(): void
+
+  on(key: string, callback: any): void
+
+  setStatusBar(bar: any): void
+}

src/index.ts

@@ -1,12 +1,12 @@
 import { editor } from 'monaco-editor'
 
 import { default as VimMode } from './cm/keymap_vim'
-import StatusBar from './statusbar'
+import { VimStatusBar } from './statusbar'
 
 export function initVimMode(
   editor: editor.IStandaloneCodeEditor,
-  statusbarNode = null,
-  StatusBarClass = StatusBar,
+  statusbarNode: HTMLElement | null = null,
+  StatusBarClass = VimStatusBar,
   sanitizer = null,
 ) {
   const vimAdapter = new VimMode(editor)
@@ -19,11 +19,11 @@ export function initVimMode(
   const statusBar = new StatusBarClass(statusbarNode, editor, sanitizer)
   let keyBuffer = ''
 
-  vimAdapter.on('vim-mode-change', (mode) => {
+  vimAdapter.on('vim-mode-change', (mode: any) => {
     statusBar.setMode(mode)
   })
 
-  vimAdapter.on('vim-keypress', (key) => {
+  vimAdapter.on('vim-keypress', (key: any) => {
     if (key === ':') {
       keyBuffer = ''
     } else {
@@ -49,5 +49,3 @@ export function initVimMode(
 
   return vimAdapter
 }
-
-export { VimMode, StatusBar }

src/statusbar.js src/statusbar.ts

@@ -1,22 +1,40 @@
-export default class VimStatusBar {
-  constructor(node, editor, sanitizer = null) {
+import { editor } from 'monaco-editor'
+
+export class VimStatusBar {
+  private node: HTMLElement | null
+
+  private editor: editor.IStandaloneCodeEditor
+
+  private modeInfoNode = document.createElement('span')
+
+  private secInfoNode = document.createElement('span')
+
+  private notifNode = document.createElement('span')
+
+  private keyInfoNode = document.createElement('span')
+
+  private input: null | { node: HTMLInputElement; options: any; callback: any } = null
+
+  private notifTimeout: number | null = null
+
+  private sanitizer: null | ((content: string) => HTMLElement)
+
+  constructor(node: HTMLElement | null, editor: editor.IStandaloneCodeEditor, sanitizer = null) {
     this.node = node
-    this.modeInfoNode = document.createElement('span')
-    this.secInfoNode = document.createElement('span')
-    this.notifNode = document.createElement('span')
+    if (this.node) {
+      this.node.appendChild(this.modeInfoNode)
+      this.node.appendChild(this.secInfoNode)
+      this.node.appendChild(this.notifNode)
+      this.node.appendChild(this.keyInfoNode)
+    }
     this.notifNode.className = 'vim-notification'
-    this.keyInfoNode = document.createElement('span')
     this.keyInfoNode.setAttribute('style', 'float: right')
-    this.node.appendChild(this.modeInfoNode)
-    this.node.appendChild(this.secInfoNode)
-    this.node.appendChild(this.notifNode)
-    this.node.appendChild(this.keyInfoNode)
     this.toggleVisibility(false)
     this.editor = editor
     this.sanitizer = sanitizer
   }
 
-  setMode(ev) {
+  setMode(ev: { mode: string; subMode: string }) {
     if (ev.mode === 'visual' && ev.subMode === 'linewise') {
       this.setText('--VISUAL LINE--')
       return
@@ -25,11 +43,11 @@ export default class VimStatusBar {
     this.setText(`--${ev.mode.toUpperCase()}--`)
   }
 
-  setKeyBuffer(key) {
+  setKeyBuffer(key: string) {
     this.keyInfoNode.textContent = key
   }
 
-  setSec(text, callback, options) {
+  setSec(text: string, callback?: any, options?: any) {
     this.notifNode.textContent = ''
     if (text === undefined) {
       return
@@ -62,22 +80,20 @@ export default class VimStatusBar {
     return this.closeInput
   }
 
-  setText(text) {
+  setText(text: string) {
     this.modeInfoNode.textContent = text
   }
 
-  toggleVisibility(toggle) {
-    if (toggle) {
-      this.node.style.display = 'block'
-    } else {
-      this.node.style.display = 'none'
+  toggleVisibility(toggle: boolean) {
+    if (this.node) {
+      this.node.style.display = toggle ? 'block' : 'none'
     }
 
     if (this.input) {
       this.removeInputListeners()
     }
 
-    clearInterval(this.notifTimeout)
+    this.notifTimeout && clearInterval(this.notifTimeout)
   }
 
   closeInput = () => {
@@ -94,22 +110,30 @@ export default class VimStatusBar {
     this.setInnerHtml_(this.node, '')
   }
 
-  inputKeyUp = (e) => {
-    const { options } = this.input
-    if (options && options.onKeyUp) {
-      options.onKeyUp(e, e.target.value, this.closeInput)
+  inputKeyUp = (e: any) => {
+    if (this.input) {
+      const { options } = this.input
+      if (options && options.onKeyUp) {
+        options.onKeyUp(e, e.target.value, this.closeInput)
+      }
     }
   }
 
   inputBlur = () => {
+    if (!this.input) {
+      return
+    }
     const { options } = this.input
 
     if (options.closeOnBlur) {
       this.closeInput()
     }
   }
 
-  inputKeyDown = (e) => {
+  inputKeyDown = (e: any) => {
+    if (!this.input) {
+      return
+    }
     const { options, callback } = this.input
 
     if (options && options.onKeyDown && options.onKeyDown(e, e.target.value, this.closeInput)) {
@@ -130,10 +154,12 @@ export default class VimStatusBar {
   }
 
   addInputListeners() {
+    if (!this.input) {
+      return
+    }
     const { node } = this.input
     node.addEventListener('keyup', this.inputKeyUp)
     node.addEventListener('keydown', this.inputKeyDown)
-    node.addEventListener('input', this.inputKeyInput)
     node.addEventListener('blur', this.inputBlur)
   }
 
@@ -145,20 +171,22 @@ export default class VimStatusBar {
     const { node } = this.input
     node.removeEventListener('keyup', this.inputKeyUp)
     node.removeEventListener('keydown', this.inputKeyDown)
-    node.removeEventListener('input', this.inputKeyInput)
     node.removeEventListener('blur', this.inputBlur)
   }
 
-  showNotification(text) {
+  showNotification(text: string) {
     const sp = document.createElement('span')
     this.setInnerHtml_(sp, text)
     this.notifNode.textContent = sp.textContent
-    this.notifTimeout = setTimeout(() => {
+    this.notifTimeout = window.setTimeout(() => {
       this.notifNode.textContent = ''
     }, 5000)
   }
 
-  setInnerHtml_(element, htmlContents) {
+  setInnerHtml_(element: HTMLElement | null, htmlContents: string) {
+    if (!element) {
+      return
+    }
     if (this.sanitizer) {
       // Clear out previous contents first.
       while (element.children.length) {

tools/eslint-pre-commit.js

@@ -30,26 +30,23 @@ module.exports = (_env, argv) => {
       'monaco-vim': isProd ? './src/index.ts' : './example/demo.js',
     },
     output: getOutput(isProd),
+    resolve: {
+      extensions: ['.wasm', '.mjs', '.js', '.json', '.ts'],
+    },
     module: {
       rules: [
         {
-          test: /\.(js|ts)$/,
+          test: /\.(t|j)sx?$/,
           exclude: /node_modules/,
-          use: {
-            loader: 'ts-loader',
-          },
+          loader: 'ts-loader',
         },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
         },
         {
           test: /\.(ttf|eot|woff|woff2)$/i,
-          use: [
-            {
-              loader: 'file-loader',
-            },
-          ],
+          use: 'file-loader',
         },
       ],
     },