Exporting top level core service (#147)

Author: asgvard

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [2.2.2]
+## Added
+- New export for `SpatialNavigation` core service with types
+
+## Fixed
+- Some Prettier formatting issues
+
 # [2.2.1]
 ## Added
 - New init config option `distanceCalculationMethod` that allows switching between edge-based, center-based and corner-based (default) distance calculations.

README.md

@@ -272,6 +272,9 @@ IMPORTANT TO NOTE:
 
 # API
 ## Top Level exports
+### `SpatialNavigation` (advanced)
+Top level API class singleton that provides access to the Navigation Service and its methods. Not recommended for beginners as it provides access to all internal methods of the core navigation service.
+
 ### `init`
 #### Init options
 ##### `debug`: boolean (default: false)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/norigin-spatial-navigation",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React hooks based Spatial Navigation solution",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package.json

@@ -1721,7 +1721,6 @@ class SpatialNavigationService {
 /**
  * Export singleton
  */
-/** @internal */
 export const SpatialNavigation = new SpatialNavigationService();
 
 export const {

src/SpatialNavigation.ts

@@ -1,4 +1,4 @@
-import WritingDirection from "./WritingDirection";
+import WritingDirection from './WritingDirection';
 
 // We'll make VisualDebugger no-op for any environments lacking a DOM (e.g. SSR and React Native non-web platforms).
 const hasDOM = typeof window !== 'undefined' && window.document;
@@ -24,18 +24,33 @@ class VisualDebugger {
 
   constructor(writingDirection: WritingDirection) {
     if (hasDOM) {
-      this.debugCtx = VisualDebugger.createCanvas('sn-debug', '1010', writingDirection);
-      this.layoutsCtx = VisualDebugger.createCanvas('sn-layouts', '1000', writingDirection);
+      this.debugCtx = VisualDebugger.createCanvas(
+        'sn-debug',
+        '1010',
+        writingDirection
+      );
+      this.layoutsCtx = VisualDebugger.createCanvas(
+        'sn-layouts',
+        '1000',
+        writingDirection
+      );
       this.writingDirection = writingDirection;
     }
   }
 
-  static createCanvas(id: string, zIndex: string, writingDirection: WritingDirection) {
+  static createCanvas(
+    id: string,
+    zIndex: string,
+    writingDirection: WritingDirection
+  ) {
     const canvas: HTMLCanvasElement =
       document.querySelector(`#${id}`) || document.createElement('canvas');
 
     canvas.setAttribute('id', id);
-    canvas.setAttribute('dir', writingDirection === WritingDirection.LTR ? "ltr" : "rtl");
+    canvas.setAttribute(
+      'dir',
+      writingDirection === WritingDirection.LTR ? 'ltr' : 'rtl'
+    );
 
     const ctx = canvas.getContext('2d');
 
@@ -82,11 +97,20 @@ class VisualDebugger {
     this.layoutsCtx.font = '8px monospace';
     this.layoutsCtx.fillStyle = 'red';
 
-    const horizontalStartDirection = this.writingDirection === WritingDirection.LTR ? "left" : "right";
+    const horizontalStartDirection =
+      this.writingDirection === WritingDirection.LTR ? 'left' : 'right';
     const horizontalStartCoordinate = layout[horizontalStartDirection];
 
-    this.layoutsCtx.fillText(focusKey, horizontalStartCoordinate, layout.top + 10);
-    this.layoutsCtx.fillText(parentFocusKey, horizontalStartCoordinate, layout.top + 25);
+    this.layoutsCtx.fillText(
+      focusKey,
+      horizontalStartCoordinate,
+      layout.top + 10
+    );
+    this.layoutsCtx.fillText(
+      parentFocusKey,
+      horizontalStartCoordinate,
+      layout.top + 25
+    );
     this.layoutsCtx.fillText(
       `${horizontalStartDirection}: ${horizontalStartCoordinate}`,
       horizontalStartCoordinate,

src/VisualDebugger.ts

@@ -1,6 +1,6 @@
 enum WritingDirection {
   LTR,
   RTL
-};
+}
 
 export default WritingDirection;