improvement(esm): use full file paths in import module specifiers

packages/demo/src/apps/ConsoleUI/index.tsx

@@ -2,13 +2,7 @@ import * as React from "react"
 import { useCallback } from "react"
 import { useHistory } from "react-router-dom"
 
-import {
-    Direction,
-    Focusable,
-    FocusableTreeNode,
-    FocusEvent,
-    unstable_defaultGetPreferredChildOnFocusReceive,
-} from "react-sunbeam"
+import { Direction, Focusable, FocusableTreeNode, FocusEvent, defaultGetPreferredChildOnFocus } from "react-sunbeam"
 
 import { ProfilesMenu } from "./ProfilesMenu"
 import { GamesGallery } from "./GamesGallery"
@@ -52,7 +46,7 @@ export function ConsoleUI() {
 
                         history.goBack()
                     }}
-                    unstable_getPreferredChildOnFocusReceive={({
+                    getPreferredChildOnFocus={({
                         focusableChildren,
                         focusOrigin,
                         direction,
@@ -66,7 +60,7 @@ export function ConsoleUI() {
                             if (focusableChildren.has("gamesGallery")) return focusableChildren.get("gamesGallery")
                         }
 
-                        return unstable_defaultGetPreferredChildOnFocusReceive({
+                        return defaultGetPreferredChildOnFocus({
                             focusableChildren,
                             focusOrigin,
                             direction,

packages/react-sunbeam/.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
             version: "detect",
         },
     },
-    plugins: ["@typescript-eslint", "react", "react-hooks"],
+    plugins: ["@typescript-eslint", "react", "react-hooks", "import"],
     extends: [
         "plugin:@typescript-eslint/recommended",
         "plugin:react/recommended",
@@ -23,5 +23,6 @@ module.exports = {
         "@typescript-eslint/no-use-before-define": ["error", { functions: false }],
         "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
         "@typescript-eslint/no-empty-function": "off",
+        "import/extensions": ["error", "always"],
     },
 }

packages/react-sunbeam/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
     preset: "ts-jest",
     testMatch: ["<rootDir>/src/**/*.spec.ts", "<rootDir>/src/**/*.spec.tsx"],
+    resolver: "<rootDir>/jest/js-extension-resolver",
 }

packages/react-sunbeam/jest/js-extension-resolver.js

@@ -0,0 +1,40 @@
+let defaultResolver
+
+function requireDefaultResolver() {
+    if (!defaultResolver) {
+        try {
+            defaultResolver = require(`jest-resolve/build/defaultResolver`).default
+        } catch (error) {
+            defaultResolver = require(`jest-resolve/build/default_resolver`).default
+        }
+    }
+
+    return defaultResolver
+}
+
+function resolveWithTypeScript(resolver, request, options) {
+    let error
+    for (const ext of [".ts", ".tsx"]) {
+        try {
+            const result = resolver(request.replace(/\.js$/, ext), options)
+            return result
+        } catch (err) {
+            error = err
+        }
+    }
+    throw error
+}
+
+module.exports = (request, options) => {
+    let { defaultResolver: resolver } = options
+
+    if (!resolver) {
+        resolver = requireDefaultResolver()
+    }
+
+    try {
+        return resolver(request, options)
+    } catch (e) {
+        return resolveWithTypeScript(resolver, request, options)
+    }
+}

packages/react-sunbeam/package.json

@@ -33,9 +33,11 @@
         "concurrently": "^5.1.0",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.10.1",
+        "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-react": "^7.19.0",
         "eslint-plugin-react-hooks": "^2.5.1",
         "jest": "^25.1.0",
+        "jest-ts-webcompat-resolver": "^1.0.0",
         "react": "^16.13.1",
         "ts-jest": "^25.2.1",
         "typescript": "^3.8.3"

packages/react-sunbeam/src/focus/FocusManager.spec.tsx

@@ -1,8 +1,8 @@
 import * as React from "react"
 import { act, render } from "@testing-library/react"
-import { SunbeamProvider } from "./components/SunbeamProvider"
-import { Focusable } from "./components/Focusable"
-import { FocusManager } from "./FocusManager"
+import { SunbeamProvider } from "./components/SunbeamProvider/index.js"
+import { Focusable } from "./components/Focusable.js"
+import { FocusManager } from "./FocusManager.js"
 
 describe("FocusManager", () => {
     describe("setFocus", () => {

packages/react-sunbeam/src/focus/FocusManager.ts

@@ -1,7 +1,7 @@
-import { FocusableTreeNode, FocusPath } from "./types"
-import { getNodeByPath, getPathToNode, getSiblings, validateAndFixFocusPathIfNeeded } from "./FocusableTreeUtils"
-import { Direction, getBestCandidate } from "../spatialNavigation"
-import { boxesWithinFrustumOfOrigin } from "../spatialNavigation/frustumFilteringUtils"
+import type { FocusableTreeNode, FocusPath } from "./types.js"
+import { getNodeByPath, getPathToNode, getSiblings, validateAndFixFocusPathIfNeeded } from "./FocusableTreeUtils.js"
+import { Direction, getBestCandidate } from "../spatialNavigation/index.js"
+import { boxesWithinFrustumOfOrigin } from "../spatialNavigation/frustumFilteringUtils.js"
 
 interface Options {
     initialFocusPath: FocusPath

packages/react-sunbeam/src/focus/FocusableTreeContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react"
-import { FocusableNodesMap, FocusableTreeNode } from "./types"
+import type { FocusableNodesMap, FocusableTreeNode } from "./types.js"
 
 export interface FocusableTreeContextValue {
     addFocusableToMap: (focusableChildrenMap: FocusableNodesMap, focusableTreeNode: FocusableTreeNode) => void

packages/react-sunbeam/src/focus/FocusableTreeUtils.ts

@@ -1,5 +1,5 @@
-import { FocusableNodesMap, FocusableTreeNode, FocusPath } from "./types"
-import { FOCUSABLE_TREE_ROOT_KEY } from "./Constants"
+import type { FocusableNodesMap, FocusableTreeNode, FocusPath } from "./types.js"
+import { FOCUSABLE_TREE_ROOT_KEY } from "./Constants.js"
 
 export function validateAndFixFocusPathIfNeeded(focusPath: FocusPath, treeRoot: FocusableTreeNode): FocusPath | null {
     let fixedFocusPath: string[] | null = null // only initialize if we need to fix the path

packages/react-sunbeam/src/focus/components/Focusable.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { act, render } from "@testing-library/react"
-import { FocusManager, SunbeamProvider } from ".."
-import { Focusable } from "./Focusable"
-import { mockGetBoundingClientRect, waitForFocusTreeUpdates } from "../../test/utils"
-import { Direction } from "../../spatialNavigation"
+import { FocusManager, SunbeamProvider } from "../index.js"
+import { Focusable } from "./Focusable.js"
+import { mockGetBoundingClientRect, waitForFocusTreeUpdates } from "../../test/utils.js"
+import { Direction } from "../../spatialNavigation/index.js"
 
 describe("Focusable", () => {
     mockGetBoundingClientRect()

packages/react-sunbeam/src/focus/components/Focusable.tsx

@@ -1,13 +1,13 @@
 import * as React from "react"
 import { useMemo, useRef, useCallback, useEffect } from "react"
-import { FocusableTreeContext } from "../FocusableTreeContext"
-import { BoundingBox, Direction } from "../../spatialNavigation"
-import { KeyPressListener, KeyPressTreeContextProvider } from "../../keyPressManagement"
-import { FocusableNodesMap, FocusableTreeNode, FocusEvent } from "../types"
-import { useGeneratedFocusKey } from "../hooks/useGeneratedFocusKey"
-import { useOnFocusedChange } from "../hooks/useOnFocusedChange"
-import { useKeyPressTreeNode } from "../hooks/useKeyPressTreeNode"
-import getPreferredNode from "../getPreferredNode"
+import { FocusableTreeContext } from "../FocusableTreeContext.js"
+import type { BoundingBox, Direction } from "../../spatialNavigation/index.js"
+import { KeyPressListener, KeyPressTreeContextProvider } from "../../keyPressManagement/index.js"
+import type { FocusableNodesMap, FocusableTreeNode, FocusEvent } from "../types.js"
+import { useGeneratedFocusKey } from "../hooks/useGeneratedFocusKey.js"
+import { useOnFocusedChange } from "../hooks/useOnFocusedChange.js"
+import { useKeyPressTreeNode } from "../hooks/useKeyPressTreeNode.js"
+import getPreferredNode from "../getPreferredNode.js"
 
 interface Props {
     focusKey?: string

packages/react-sunbeam/src/focus/components/SunbeamProvider/SunbeamProvider.spec.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { act, render, fireEvent } from "@testing-library/react"
-import { Focusable, FocusManager } from "../.."
-import { KeyPressManager } from "../../../keyPressManagement"
-import { SunbeamProvider } from "."
+import { Focusable, FocusManager } from "../../index.js"
+import { KeyPressManager } from "../../../keyPressManagement/index.js"
+import { SunbeamProvider } from "./index.js"
 
 describe("<SunbeamProvider>", () => {
     it("should call focusManager.revalidateFocusPath() only once when multiple nodes are added/removed from the tree", async () => {

packages/react-sunbeam/src/focus/components/SunbeamProvider/index.tsx

@@ -1,20 +1,20 @@
 import * as React from "react"
 import { useCallback, useEffect, useMemo, useRef } from "react"
-import { FOCUSABLE_TREE_ROOT_KEY } from "../../Constants"
-import { FocusableTreeContext, FocusableTreeContextValue } from "../../FocusableTreeContext"
-import { SunbeamContext } from "../../SunbeamContext"
-import { FocusableNodesMap, FocusableTreeNode, FocusPath } from "../../types"
-import { FocusManager } from "../../FocusManager"
+import { FOCUSABLE_TREE_ROOT_KEY } from "../../Constants.js"
+import { FocusableTreeContext, FocusableTreeContextValue } from "../../FocusableTreeContext.js"
+import { SunbeamContext } from "../../SunbeamContext.js"
+import type { FocusableNodesMap, FocusableTreeNode, FocusPath } from "../../types.js"
+import type { FocusManager } from "../../FocusManager.js"
 import {
     KeyPressManager,
     KeyPressListener,
     KeyPressTreeContextProvider,
     KeyPressTreeNode,
-} from "../../../keyPressManagement"
-import { BoundingBox, Direction } from "../../../spatialNavigation"
-import getPreferredNode from "../../getPreferredNode"
-import { useChildKeyPressTreeContextValue } from "../../hooks/useChildKeyPressTreeContextValue"
-import useFocusPath from "./useFocusPath"
+} from "../../../keyPressManagement/index.js"
+import type { BoundingBox, Direction } from "../../../spatialNavigation/index.js"
+import getPreferredNode from "../../getPreferredNode.js"
+import { useChildKeyPressTreeContextValue } from "../../hooks/useChildKeyPressTreeContextValue.js"
+import useFocusPath from "./useFocusPath.js"
 
 type Props = {
     focusManager: FocusManager

packages/react-sunbeam/src/focus/components/SunbeamProvider/useFocusPath.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react"
-import { FocusManager } from "../../FocusManager"
-import { FocusPath } from "../../types"
+import type { FocusManager } from "../../FocusManager.js"
+import type { FocusPath } from "../../types.js"
 
 export default function useFocusPath(
     focusManager: FocusManager,

packages/react-sunbeam/src/focus/getClosestFocusableNodeInDirection.ts

@@ -1,13 +1,13 @@
-import { FocusableNodesMap, FocusableTreeNode } from "./types"
-import { Direction, getBestCandidate, BoundingBox } from "../spatialNavigation"
+import type { FocusableNodesMap, FocusableTreeNode } from "./types.js"
+import { Direction, getBestCandidate, BoundingBox } from "../spatialNavigation/index.js"
 
 export function getClosestFocusableNodeInDirection(
     focusableNodes: FocusableNodesMap,
     focusOrigin: BoundingBox,
     direction: Direction
 ): FocusableTreeNode | undefined {
     const focusableNodesArray = Array.from(focusableNodes.values())
-    const nodeBoxes = focusableNodesArray.map(node => node.getBoundingBox())
+    const nodeBoxes = focusableNodesArray.map((node) => node.getBoundingBox())
 
     const bestChildCandidateBox = getBestCandidate(focusOrigin, nodeBoxes, direction)
     if (!bestChildCandidateBox) return undefined

packages/react-sunbeam/src/focus/getPreferredNode.ts

@@ -1,6 +1,6 @@
-import { FocusableNodesMap, FocusableTreeNode } from "./types"
-import { Direction } from "../spatialNavigation"
-import { getClosestFocusableNodeInDirection } from "./getClosestFocusableNodeInDirection"
+import type { FocusableNodesMap, FocusableTreeNode } from "./types.js"
+import type { Direction } from "../spatialNavigation/index.js"
+import { getClosestFocusableNodeInDirection } from "./getClosestFocusableNodeInDirection.js"
 
 interface Arguments {
     nodes: FocusableNodesMap

packages/react-sunbeam/src/focus/hooks/useChildKeyPressTreeContextValue.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, useCallback, useMemo } from "react"
-import { KeyPressTreeNode, KeyPressTreeContextValue } from "../../keyPressManagement"
+import type { KeyPressTreeNode, KeyPressTreeContextValue } from "../../keyPressManagement/index.js"
 
 export function useChildKeyPressTreeContextValue(
     childKeyPressTreeNodeRef: MutableRefObject<KeyPressTreeNode | undefined>

packages/react-sunbeam/src/focus/hooks/useFocusable.spec.tsx

@@ -1,11 +1,11 @@
 import React, { useRef } from "react"
 import { render, act } from "@testing-library/react"
-import { FocusManager } from "../FocusManager"
-import { SunbeamProvider } from "../components/SunbeamProvider"
-import { useFocusable } from "./useFocusable"
-import { Focusable } from ".."
-import { mockGetBoundingClientRect, waitForFocusTreeUpdates } from "../../test/utils"
-import { Direction } from "../../spatialNavigation"
+import { FocusManager } from "../FocusManager.js"
+import { SunbeamProvider } from "../components/SunbeamProvider/index.js"
+import { useFocusable } from "./useFocusable.js"
+import { Focusable } from "../index.js"
+import { mockGetBoundingClientRect, waitForFocusTreeUpdates } from "../../test/utils.js"
+import { Direction } from "../../spatialNavigation/index.js"
 
 describe("useFocusable", () => {
     mockGetBoundingClientRect()

packages/react-sunbeam/src/focus/hooks/useFocusable.ts

@@ -1,11 +1,11 @@
 import React, { RefObject, useCallback, useMemo, useEffect } from "react"
-import { FocusableTreeNode, FocusEvent } from "../types"
-import { BoundingBox, Direction } from "../../spatialNavigation"
-import { FocusableTreeContext } from "../FocusableTreeContext"
-import { useGeneratedFocusKey } from "./useGeneratedFocusKey"
-import { useOnFocusedChange } from "./useOnFocusedChange"
-import { useKeyPressTreeNode } from "./useKeyPressTreeNode"
-import { KeyPressListener } from "../../keyPressManagement"
+import type { FocusableTreeNode, FocusEvent } from "../types.js"
+import type { BoundingBox, Direction } from "../../spatialNavigation/index.js"
+import { FocusableTreeContext } from "../FocusableTreeContext.js"
+import { useGeneratedFocusKey } from "./useGeneratedFocusKey.js"
+import { useOnFocusedChange } from "./useOnFocusedChange.js"
+import { useKeyPressTreeNode } from "./useKeyPressTreeNode.js"
+import type { KeyPressListener } from "../../keyPressManagement/index.js"
 
 // TODO: add other options: () => ClientRect | ClientRect
 type Element = RefObject<{

packages/react-sunbeam/src/focus/hooks/useKeyPressTreeNode.ts

@@ -4,8 +4,8 @@ import {
     KeyPressTreeContextValue,
     KeyPressTreeNode,
     useKeyPressTreeContext,
-} from "../../keyPressManagement"
-import { useChildKeyPressTreeContextValue } from "./useChildKeyPressTreeContextValue"
+} from "../../keyPressManagement/index.js"
+import { useChildKeyPressTreeContextValue } from "./useChildKeyPressTreeContextValue.js"
 
 export function useKeyPressTreeNode({
     focused,

packages/react-sunbeam/src/focus/hooks/useSunbeam.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react"
-import { SunbeamContext, SunbeamContextValue } from "../SunbeamContext"
+import { SunbeamContext, SunbeamContextValue } from "../SunbeamContext.js"
 
 export function useSunbeam(): SunbeamContextValue {
     return useContext(SunbeamContext)

packages/react-sunbeam/src/focus/index.ts

@@ -1,16 +1,16 @@
-import getPreferredNode from "./getPreferredNode"
-import { FocusableTreeNode } from "./types"
-import { Direction } from "../spatialNavigation"
+import getPreferredNode from "./getPreferredNode.js"
+import type { FocusableTreeNode } from "./types.js"
+import type { Direction } from "../spatialNavigation/index.js"
 
-export { FocusEvent, FocusableTreeNode } from "./types"
-export { FocusManager } from "./FocusManager"
-export { Focusable } from "./components/Focusable"
-export { SunbeamProvider } from "./components/SunbeamProvider"
-export { useSunbeam } from "./hooks/useSunbeam"
-export { useFocusable } from "./hooks/useFocusable"
+export type { FocusEvent, FocusableTreeNode } from "./types.js"
+export { FocusManager } from "./FocusManager.js"
+export { Focusable } from "./components/Focusable.js"
+export { SunbeamProvider } from "./components/SunbeamProvider/index.js"
+export { useSunbeam } from "./hooks/useSunbeam.js"
+export { useFocusable } from "./hooks/useFocusable.js"
 
 // eslint-disable-next-line @typescript-eslint/camelcase
-export function unstable_defaultGetPreferredChildOnFocusReceive({
+export function defaultGetPreferredChildOnFocus({
     focusableChildren,
     focusOrigin,
     direction,

packages/react-sunbeam/src/focus/types.ts

@@ -1,4 +1,4 @@
-import { BoundingBox, Direction } from "../spatialNavigation"
+import type { BoundingBox, Direction } from "../spatialNavigation/index.js"
 
 export type FocusEvent = {
     getBoundingClientRect: () => ClientRect

packages/react-sunbeam/src/index.ts

@@ -7,7 +7,7 @@ export {
     FocusableTreeNode,
     FocusEvent,
     // eslint-disable-next-line @typescript-eslint/camelcase
-    unstable_defaultGetPreferredChildOnFocusReceive,
-} from "./focus"
-export { Direction } from "./spatialNavigation"
-export { KeyPressManager, KeyPressListener } from "./keyPressManagement"
+    defaultGetPreferredChildOnFocus,
+} from "./focus/index.js"
+export { Direction } from "./spatialNavigation/index.js"
+export { KeyPressManager, KeyPressListener } from "./keyPressManagement/index.js"

packages/react-sunbeam/src/keyPressManagement.integration.spec.tsx

@@ -1,15 +1,15 @@
 import React, { useRef } from "react"
 import { act, render, fireEvent } from "@testing-library/react"
-import { SunbeamProvider, FocusManager, Focusable, useFocusable } from "./focus"
-import { KeyPressListener } from "./keyPressManagement"
+import { SunbeamProvider, FocusManager, Focusable, useFocusable } from "./focus/index.js"
+import type { KeyPressListener } from "./keyPressManagement/index.js"
 
 describe("Key press management integration", () => {
     test("Nested key handlers", () => {
-        const sunbeamProviderKeyHandler = jest.fn(event => event.stopPropagation())
-        const focusable1KeyHandler = jest.fn(event => event.stopPropagation())
+        const sunbeamProviderKeyHandler = jest.fn((event) => event.stopPropagation())
+        const focusable1KeyHandler = jest.fn((event) => event.stopPropagation())
         const focusable2KeyHandler = jest.fn()
         const focusableButton1KeyHandler = jest.fn()
-        const focusableButton2KeyHandler = jest.fn(event => event.stopPropagation())
+        const focusableButton2KeyHandler = jest.fn((event) => event.stopPropagation())
 
         function FocusableButton({ focusKey, onKeyPress }: { focusKey: string; onKeyPress: KeyPressListener }) {
             const ref = useRef(null)