Types

package.json

@@ -3,6 +3,7 @@
   "version": "3.1.0",
   "description": "Left, Right, Up, Down. A spatial navigation library for devices with input via directional controls",
   "main": "dist/index.min.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://github.com/bbc/lrud",
   "license": "Apache-2.0",
   "files": [
@@ -58,7 +59,7 @@
     "minify": "uglifyjs dist/index.js --compress --mangle -o dist/index.min.js",
     "prebuild": "npm run clean",
     "build": "rollup -c",
-    "postbuild": "npm run minify",
+    "postbuild": "npx tsc && npm run minify",
     "watch": "npm run build -- -w"
   }
 }

src/events.test.js

@@ -26,7 +26,6 @@ describe('event scenarios', () => {
     // only called once, as `left` is already the activeChild of `root`
     expect(activeSpy).toHaveBeenCalledWith({
       parent: 'left',
-      parents: ['left', 'root'],
       isFocusable: true,
       id: 'b',
       index: 1
@@ -58,28 +57,24 @@ describe('event scenarios', () => {
     expect(activeSpy.mock.calls).toEqual([
       [expect.objectContaining({
         parent: 'right',
-        parents: ['right', 'root'],
         isFocusable: true,
         id: 'd',
         index: 1
       })],
       [expect.objectContaining({
         id: 'right',
         parent: 'root',
-        parents: ['root'],
         index: 1,
         activeChild: 'd',
         children: {
           c: {
             parent: 'right',
-            parents: ['right', 'root'],
             isFocusable: true,
             id: 'c',
             index: 0
           },
           d: {
             parent: 'right',
-            parents: ['right', 'root'],
             isFocusable: true,
             id: 'd',
             index: 1
@@ -91,28 +86,24 @@ describe('event scenarios', () => {
     expect(inactiveSpy.mock.calls).toEqual([
       [expect.objectContaining({
         parent: 'right',
-        parents: ['right', 'root'],
         isFocusable: true,
         id: 'c',
         index: 0
       })],
       [expect.objectContaining({
         id: 'left',
-        parents: ['root'],
         parent: 'root',
         index: 0,
         activeChild: 'a',
         children: {
           a: {
             parent: 'left',
-            parents: ['left', 'root'],
             isFocusable: true,
             id: 'a',
             index: 0
           },
           b: {
             parent: 'left',
-            parents: ['left', 'root'],
             isFocusable: true,
             id: 'b',
             index: 1
@@ -145,14 +136,12 @@ describe('event scenarios', () => {
         id: 'a',
         index: 0,
         parent: 'root',
-        parents: ['root'],
         isFocusable: true
       },
       enter: {
         id: 'b',
         index: 1,
         parent: 'root',
-        parents: ['root'],
         isFocusable: true
       },
       direction: 'RIGHT',
@@ -183,14 +172,12 @@ describe('event scenarios', () => {
         id: 'b',
         index: 1,
         parent: 'root',
-        parents: ['root'],
         isFocusable: true
       },
       enter: {
         id: 'a',
         index: 0,
         parent: 'root',
-        parents: ['root'],
         isFocusable: true
       },
       direction: 'LEFT',
@@ -215,11 +202,11 @@ describe('event scenarios', () => {
       .registerNode('d', { isFocusable: true })
 
     navigation.assignFocus('a')
-    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', parents: ['root'], index: 0 })
+    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', index: 0 })
 
     navigation.assignFocus('b')
-    expect(blurSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', parents: ['root'], index: 0 })
-    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'b', parent: 'root', parents: ['root'], index: 1 })
+    expect(blurSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', index: 0 })
+    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'b', parent: 'root', index: 1 })
   })
 
   test('standard blur and focus should fire after doing a move', () => {
@@ -239,12 +226,12 @@ describe('event scenarios', () => {
       .registerNode('d', { isFocusable: true })
 
     navigation.assignFocus('a')
-    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', parents: ['root'], index: 0 })
+    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', index: 0 })
 
     navigation.handleKeyEvent({ direction: 'right' })
 
-    expect(blurSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', parents: ['root'], index: 0 })
-    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'b', parent: 'root', parents: ['root'], index: 1 })
+    expect(blurSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'a', parent: 'root', index: 0 })
+    expect(focusSpy).toHaveBeenCalledWith({ isFocusable: true, id: 'b', parent: 'root', index: 1 })
   })
 
   test('`onLeave` and `onEnter` functions should fire on a node', () => {

src/handle-key-event.test.js

@@ -80,7 +80,6 @@ describe('handleKeyEvent()', () => {
 
     expect(spy).toHaveBeenCalledWith({
       parent: 'root',
-      parents: ['root'],
       index: 1,
       id: 'child_2',
       isFocusable: true
@@ -92,7 +91,6 @@ describe('handleKeyEvent()', () => {
 
     expect(spy).toHaveBeenCalledWith({
       parent: 'root',
-      parents: ['root'],
       id: 'child_3',
       index: 2,
       isFocusable: true
@@ -116,7 +114,6 @@ describe('handleKeyEvent()', () => {
 
     expect(spy).toHaveBeenCalledWith({
       parent: 'root',
-      parents: ['root'],
       id: 'child_2',
       index: 1,
       isFocusable: true
@@ -128,7 +125,6 @@ describe('handleKeyEvent()', () => {
 
     expect(spy).toHaveBeenCalledWith({
       parent: 'root',
-      parents: ['root'],
       id: 'child_1',
       index: 0,
       isFocusable: true

src/index.ts

@@ -1,5 +1,6 @@
 import { Get } from './get'
 import { Set } from './set'
+import { Node, Override, KeyEvent } from './interfaces'
 
 import {
   isNodeFocusable,
@@ -48,7 +49,7 @@ export class Lrud {
    *
    * @param {object} node
    */
-  reindexChildrenOfNode(node) {
+  reindexChildrenOfNode(node: Node) {
     if (!node.children) {
       return
     }
@@ -99,7 +100,7 @@ export class Lrud {
    *
    * @param {string} nodeId
    */
-  getPathForNodeId(nodeId) {
+  getPathForNodeId(nodeId: string) {
     if (nodeId === this.rootNodeId) {
       return this.rootNodeId
     }
@@ -123,7 +124,7 @@ export class Lrud {
    * @param {function} [node.onLeave] if a node has an `onLeave` function, it will be run when a move event leaves this node
    * @param {function} [node.onEnter] if a node has an `onEnter` function, it will be run when a move event enters this node
    */
-  registerNode(nodeId, node: any = {}) {
+  registerNode(nodeId: string, node: Node = { id: null }) {
     if (!node.id) {
       node.id = nodeId
     }
@@ -141,12 +142,6 @@ export class Lrud {
       node.parent = this.rootNodeId
     }
 
-    // if we have a parent but no parents, work out the parents
-    if (node.parent && node.parents == null) {
-      const list = this.nodePathList.find(path => path.includes(node.parent));
-      node.parents = list.split('.').filter(i => i != 'children').reverse();
-    }
-
     // if this node is the first child of its parent, we need to set its parent's `activeChild`
     // to it so that the parent always has an `activeChild` value
     // we can tell if its parent has any children by checking the nodePathList for
@@ -187,7 +182,7 @@ export class Lrud {
   /**
    * maintained for legacy API reasons
    */
-  register(nodeId, node: any = {}) {
+  register(nodeId: string, node: any = {}) {
     return this.registerNode(nodeId, node)
   }
 
@@ -197,7 +192,7 @@ export class Lrud {
    * 
    * @param {string} nodeId
    */
-  unregister(nodeId) {
+  unregister(nodeId: string) {
     this.unregisterNode(nodeId);
   }
 
@@ -206,7 +201,7 @@ export class Lrud {
    * 
    * @param {string} nodeId
    */
-  unregisterNode(nodeId) {
+  unregisterNode(nodeId: string) {
     if (nodeId === this.rootNodeId) {
       this.tree = {}
       this.overrides = {};
@@ -284,7 +279,7 @@ export class Lrud {
    * @param {string} override.direction
    * @param {string} override.target
    */
-  registerOverride(overrideId, override) {
+  registerOverride(overrideId: string, override: Override) {
     if (!overrideId) {
       throw new Error('need an ID to register an override')
     }
@@ -310,7 +305,7 @@ export class Lrud {
    *
    * @param {string} overrideId
    */
-  unregisterOverride(overrideId) {
+  unregisterOverride(overrideId: string) {
     delete this.overrides[overrideId]
 
     return this
@@ -321,7 +316,7 @@ export class Lrud {
    *
    * @param {string} nodeId node id
    */
-  getNode(nodeId) {
+  getNode(nodeId: string) {
     return Get(this.tree, (this.getPathForNodeId(nodeId)))
   }
 
@@ -330,7 +325,7 @@ export class Lrud {
    *
    * @param {string} nodeId node id
    */
-  pickNode(nodeId) {
+  pickNode(nodeId: string) {
     const node = this.getNode(nodeId)
 
     if (!node) {
@@ -350,7 +345,7 @@ export class Lrud {
    * @param {object} node
    * @param {string} direction
    */
-  climbUp(node, direction) {
+  climbUp(node: Node, direction: string) {
     if (!node) {
       return null
     }
@@ -408,7 +403,7 @@ export class Lrud {
    *
    * @param {object} node
    */
-  digDown(node, direction = null) {
+  digDown(node: Node, direction: string = null) {
     // if the active child is focusable, return it
     if (isNodeFocusable(node)) {
       return node
@@ -485,7 +480,7 @@ export class Lrud {
    * @param {object} node
    * @param {string} direction
    */
-  getNextChildInDirection(node, direction) {
+  getNextChildInDirection(node: Node, direction: string) {
     direction = direction.toUpperCase()
 
     if (node.orientation === 'horizontal' && direction === 'RIGHT') {
@@ -509,7 +504,7 @@ export class Lrud {
    *
    * @param {object} node
    */
-  getNextChild(node) {
+  getNextChild(node: Node) {
     if (!node.activeChild) {
       node.activeChild = this.getNodeFirstChild(node).id
     }
@@ -533,7 +528,7 @@ export class Lrud {
    * get the semantic "previous" child for a node
    * @param {object} node
    */
-  getPrevChild(node) {
+  getPrevChild(node: Node) {
     if (!node.activeChild) {
       node.activeChild = this.getNodeFirstChild(node).id
     }
@@ -558,7 +553,7 @@ export class Lrud {
    * get the first child of a node, based on index
    * @param {object} node
    */
-  getNodeFirstChild(node) {
+  getNodeFirstChild(node: Node) {
     if (!node.children) {
       return undefined
     }
@@ -572,7 +567,7 @@ export class Lrud {
    * get the last child of a node, based on index
    * @param {object} node
    */
-  getNodeLastChild(node) {
+  getNodeLastChild(node: Node) {
     if (!node.children) {
       return undefined
     }
@@ -590,7 +585,7 @@ export class Lrud {
    * @param {string} [event.keyCode]
    * @param {string} [event.direction]
    */
-  handleKeyEvent(event) {
+  handleKeyEvent(event: KeyEvent) {
     const direction = (event.keyCode) ? getDirectionForKeyCode(event.keyCode) : event.direction.toUpperCase()
     const currentFocusNode = this.getNode(this.currentFocusNodeId)
 
@@ -656,7 +651,7 @@ export class Lrud {
    * @param {string} parentId
    * @param {string} childId
    */
-  setActiveChild(parentId, childId) {
+  setActiveChild(parentId: string, childId: string) {
     const child = this.getNode(childId)
     const parent = this.getNode(parentId)
     if (!child) {
@@ -699,7 +694,7 @@ export class Lrud {
    *
    * @param {string} nodeId
    */
-  assignFocus(nodeId) {
+  assignFocus(nodeId: string) {
     let node = this.getNode(nodeId)
 
     if (!isNodeFocusable(node)) {