Typescriptify Phase VI 🥃🧉 (#749)

* MIGRATES TESTS!!! 🤯

* Don’t need these 🎲

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     ],
     "globals": {
         "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
+        "SharedArrayBuffer": "readonly",
     },
     "plugins": ["@typescript-eslint"],
     "parser": "@typescript-eslint/parser",
@@ -62,7 +62,6 @@ module.exports = {
             "error",
             "last"
         ],
-        "complexity": "error",
         "computed-property-spacing": [
             "error",
             "never"

package.json

@@ -52,6 +52,8 @@
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^5.0.2",
+    "@types/jquery": "^3.5.2",
+    "@types/qunit": "^2.9.5",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
     "conventional-changelog-cli": "^2.0.34",

src/js/editor/editor.ts

@@ -31,7 +31,7 @@ import Card, { CardMode, CardPayload } from '../models/card'
 import assert from '../utils/assert'
 import MutationHandler from '../editor/mutation-handler'
 import EditHistory from '../editor/edit-history'
-import EventManager, { EventType, EventForType } from '../editor/event-manager'
+import EventManager, { DOMEventType, DOMEventForType } from '../editor/event-manager'
 import EditState from '../editor/edit-state'
 import DOMRenderer from 'mobiledoc-dom-renderer'
 import TextRenderer from 'mobiledoc-text-renderer'
@@ -56,27 +56,27 @@ import { TextInputHandlerListener } from './text-input-handler'
 export { EDITOR_ELEMENT_CLASS_NAME } from '../renderers/editor-dom'
 
 export interface EditorOptions {
-  parserPlugins: SectionParserPlugin[]
-  placeholder: string
-  spellcheck: boolean
-  autofocus: boolean
-  showLinkTooltips: boolean
-  undoDepth: number
-  undoBlockTimeout: number
-  cards: CardData[]
-  atoms: AtomData[]
-  cardOptions: {}
-  unknownCardHandler: CardRenderHook
-  unknownAtomHandler: CardRenderHook
-  mobiledoc: Option<Mobiledoc>
-  html: Option<string>
-  tooltipPlugin: TooltipPlugin
+  parserPlugins?: SectionParserPlugin[]
+  placeholder?: string
+  spellcheck?: boolean
+  autofocus?: boolean
+  showLinkTooltips?: boolean
+  undoDepth?: number
+  undoBlockTimeout?: number
+  cards?: CardData[]
+  atoms?: AtomData[]
+  cardOptions?: {}
+  unknownCardHandler?: CardRenderHook
+  unknownAtomHandler?: CardRenderHook
+  mobiledoc?: Option<Mobiledoc>
+  html?: Option<string>
+  tooltipPlugin?: TooltipPlugin
 
   /** @internal */
   nodeType?: number
 }
 
-const defaults: Partial<EditorOptions> = {
+const defaults: EditorOptions = {
   placeholder: 'Write here...',
   spellcheck: true,
   autofocus: true,
@@ -239,7 +239,7 @@ export default class Editor implements EditorOptions {
    *        Set to 0 to disable undo/redo functionality.
    * @public
    */
-  constructor(options: Partial<EditorOptions> = {}) {
+  constructor(options: EditorOptions = {}) {
     assert(
       'editor create accepts an options object. For legacy usage passing an element for the first argument, consider the `html` option for loading DOM or HTML posts. For other cases call `editor.render(domNode)` after editor creation',
       options && !options.nodeType
@@ -1304,7 +1304,7 @@ export default class Editor implements EditorOptions {
     }
   }
 
-  triggerEvent(context: HTMLElement, eventName: EventType, event: EventForType<typeof eventName>) {
+  triggerEvent(context: HTMLElement, eventName: DOMEventType, event: DOMEventForType<typeof eventName>) {
     this._eventManager._trigger(context, eventName, event)
   }
 

src/js/editor/event-manager.ts

@@ -28,16 +28,17 @@ declare global {
   }
 }
 
-export type EventType = typeof ELEMENT_EVENT_TYPES[number]
-export type EventForType<T extends EventType> = HTMLElementEventMap[T]
+export type DOMEventType = typeof ELEMENT_EVENT_TYPES[number]
+export type DOMEventForType<T extends DOMEventType> = HTMLElementEventMap[T]
+export type DOMEvent = HTMLElementEventMap[DOMEventType]
 
 interface ModifierKeys {
   shift: boolean
 }
 
 type EventManagerListener = [
   HTMLElement,
-  EventType,
+  DOMEventType,
   (event: CompositionEvent | KeyboardEvent | ClipboardEvent | DragEvent) => void
 ]
 
@@ -100,10 +101,10 @@ export default class EventManager {
     this._textInputHandler = new TextInputHandler(this.editor)
   }
 
-  _addListener(context: HTMLElement, type: EventType) {
+  _addListener(context: HTMLElement, type: DOMEventType) {
     assert(`Missing listener for ${type}`, !!this[type])
 
-    let listener: (event: EventForType<typeof type>) => void = event => this._handleEvent(type, event)
+    let listener: (event: DOMEventForType<typeof type>) => void = event => this._handleEvent(type, event)
     context.addEventListener(type, listener)
     this._listeners.push([context, type, listener])
   }
@@ -117,7 +118,7 @@ export default class EventManager {
 
   // This is primarily useful for programmatically simulating events on the
   // editor from the tests.
-  _trigger(context: HTMLElement, type: EventType, event: EventForType<typeof type>) {
+  _trigger(context: HTMLElement, type: DOMEventType, event: DOMEventForType<typeof type>) {
     forEach(
       filter(this._listeners, ([_context, _type]) => {
         return _context === context && _type === type
@@ -134,7 +135,7 @@ export default class EventManager {
     this._removeListeners()
   }
 
-  _handleEvent(type: EventType, event: EventForType<typeof type>) {
+  _handleEvent(type: DOMEventType, event: DOMEventForType<typeof type>) {
     let { target: element } = event
     if (!this.started) {
       // abort handling this event

src/js/models/atom-node.ts

@@ -1,17 +1,18 @@
-import assert from '../utils/assert'
 import Atom from './atom'
+import assert from '../utils/assert'
+import { JsonData, Dict, Maybe } from '../utils/types'
 
-export interface AtomOptions {}
+export type AtomOptions = Dict<unknown>
 
 export type TeardownCallback = () => void
 export interface AtomRenderOptions {
   options: AtomOptions
   env: any
   value: unknown
-  payload: {}
+  payload: JsonData
 }
 
-export type AtomRenderHook = (options: AtomRenderOptions) => Element
+export type AtomRenderHook = (options: AtomRenderOptions) => Maybe<Element>
 
 export type AtomData = {
   name: string
@@ -27,7 +28,7 @@ export default class AtomNode {
   atomOptions: AtomOptions
 
   _teardownCallback: TeardownCallback | null = null
-  _rendered: Node | null = null
+  _rendered: Maybe<Node>
 
   constructor(editor: any, atom: AtomData, model: Atom, element: Element, atomOptions: AtomOptions) {
     this.editor = editor

src/js/models/card-node.ts

@@ -1,9 +1,10 @@
-import assert from '../utils/assert'
 import Card, { CardMode } from './card'
+import assert from '../utils/assert'
+import { Dict, Maybe } from '../utils/types'
 
-export interface CardNodeOptions {}
+export type CardNodeOptions = Dict<unknown>
 
-export type CardRenderHook = (...args: any[]) => Element
+export type CardRenderHook = (...args: any[]) => Maybe<Element>
 
 type DidRenderCallback = null | (() => void)
 type TeardownCallback = null | (() => void)
@@ -25,14 +26,14 @@ export default class CardNode {
   card: CardData
   section: Card
   element: Element
-  options: CardNodeOptions
+  options?: CardNodeOptions
 
   mode!: CardMode
   _rendered: Element | null = null
   _teardownCallback: TeardownCallback = null
   _didRenderCallback: DidRenderCallback = null
 
-  constructor(editor: any, card: CardData, section: Card, element: Element, options: CardNodeOptions) {
+  constructor(editor: any, card: CardData, section: Card, element: Element, options?: CardNodeOptions) {
     this.editor = editor
     this.card = card
     this.section = section
@@ -112,7 +113,7 @@ export default class CardNode {
     this.editor.run((postEditor: any) => postEditor.removeSection(this.section))
   }
 
-  _validateAndAppendRenderResult(rendered: Element | null) {
+  _validateAndAppendRenderResult(rendered: Maybe<Element>) {
     if (!rendered) {
       return
     }

src/js/renderers/editor-dom.ts

@@ -14,7 +14,7 @@ import { Attributable } from '../models/_attributable'
 import { TagNameable } from '../models/_tag-nameable'
 import ListSection from '../models/list-section'
 import RenderNode from '../models/render-node'
-import { Option, Maybe } from '../utils/types'
+import { Option, Maybe, Dict } from '../utils/types'
 import Atom from '../models/atom'
 import Editor from '../editor/editor'
 import { hasChildSections } from '../models/_has-child-sections'
@@ -306,15 +306,15 @@ class Visitor {
   unknownCardHandler: CardRenderHook
   unknownAtomHandler: AtomRenderHook
 
-  options: {}
+  options: Dict<unknown>
 
   constructor(
     editor: Editor,
     cards: CardData[],
     atoms: AtomData[],
     unknownCardHandler: CardRenderHook,
     unknownAtomHandler: AtomRenderHook,
-    options: {}
+    options: Dict<unknown>
   ) {
     this.editor = editor
     this.cards = validateCards(cards)

src/js/utils/keycodes.ts

@@ -1,4 +1,4 @@
-export default {
+export default <const>{
   BACKSPACE: 8,
   SPACE: 32,
   ENTER: 13,

src/js/utils/object-utils.ts

@@ -9,3 +9,7 @@ export function entries<T extends { [key: string]: unknown }, K extends Extract<
 
   return resArray
 }
+
+export function keys<T extends { [key: string]: unknown }>(obj: T): (keyof T)[] {
+  return Object.keys(obj)
+}

src/js/utils/types.ts

@@ -2,3 +2,10 @@ export type Option<T> = T | null
 export type Maybe<T> = T | null | undefined
 
 export type Dict<T> = { [key: string]: T }
+
+export type ValueOf<T> = T[keyof T]
+
+export type JsonPrimitive = string | number | boolean | null
+export type JsonArray = JsonData[]
+export type JsonObject = { [key: string]: JsonData }
+export type JsonData = JsonPrimitive | JsonArray | JsonObject

tests/.eslintrc.js

@@ -1,8 +1,12 @@
 module.exports = {
+  "globals": {
+    "$": "readonly"
+  },
   "rules": {
     "dot-location": "off",
     "no-new": "off",
     "no-use-before-define": "off",
     "no-unused-vars": "off"
   }
+
 };