Switch package to use ES modules everywhere

Use native ES modules everywhere for consistency between source and
tests and to allow the output of TypeScript compilation to function both
as input to Rollup packaging and execution by mocha.

Node ES module support requires that file extensions are always
explicitly specified. TypeScript does not generate the ".js" extension
itself but counter-intuitively does allow it to be specified in the
original source [1].

[1] microsoft/TypeScript#42151 (comment)

Author: robertknight

package.json

@@ -24,5 +24,6 @@
   },
   "files": [
     "dist/**"
-  ]
+  ],
+  "type": "module"
 }

src/context.ts

@@ -1,4 +1,4 @@
-import { registerContext, useRef } from "./hooks";
+import { registerContext, useRef } from "./hooks.js";
 
 export class ContextProvider<T> {
   private _listeners: Array<() => void>;

src/dom-props.ts

@@ -1,4 +1,4 @@
-import { Props } from "./jsx";
+import { Props } from "./jsx.js";
 
 // Properties added to DOM elements rendered by UReact.
 interface UReactElement extends Element {

src/hooks.ts

@@ -1,4 +1,4 @@
-import { ContextProvider } from "./context";
+import { ContextProvider } from "./context.js";
 
 interface StateHook<S> {
   type: "state";

src/index.ts

@@ -1,6 +1,6 @@
-export { createElement, isValidElement, jsx } from "./jsx";
-export { render, unmountComponentAtNode } from "./render";
-export { createContext } from "./context";
+export { createElement, isValidElement, jsx } from "./jsx.js";
+export { render, unmountComponentAtNode } from "./render.js";
+export { createContext } from "./context.js";
 export {
   useCallback,
   useContext,
@@ -10,5 +10,5 @@ export {
   useReducer,
   useRef,
   useState,
-} from "./hooks";
-export { Fragment, createRef, memo } from "./utils";
+} from "./hooks.js";
+export { Fragment, createRef, memo } from "./utils.js";

src/render.ts

@@ -1,7 +1,7 @@
-import { Props, VNode, VNodeChildren, isValidElement } from "./jsx";
-import { ContextProvider } from "./context";
-import { EffectTiming, HookState, setHookState } from "./hooks";
-import { diffElementProps } from "./dom-props";
+import { Props, VNode, VNodeChildren, isValidElement } from "./jsx.js";
+import { ContextProvider } from "./context.js";
+import { EffectTiming, HookState, setHookState } from "./hooks.js";
+import { diffElementProps } from "./dom-props.js";
 
 /**
  * Backing tree for a rendered vnode.

src/test-utils.ts

@@ -1,4 +1,4 @@
-import { getRoots } from "./render";
+import { getRoots } from "./render.js";
 
 let actDepth = 0;
 

src/utils.ts

@@ -1,6 +1,6 @@
-import { Props, Ref, VNodeChildren } from "./jsx";
+import { Props, Ref, VNodeChildren } from "./jsx.js";
 
-import { useMemo, useRef } from "./hooks";
+import { useMemo, useRef } from "./hooks.js";
 
 export function Fragment(props: Props) {
   return props.children;

test/context.js

@@ -1,16 +1,17 @@
-const { assert } = require("chai");
-const sinon = require("sinon");
-const { JSDOM } = require("jsdom");
+import chai from "chai";
+import sinon from "sinon";
+import { JSDOM } from "jsdom";
+const { assert } = chai;
 
-const {
-  createElement: h,
+import {
+  createElement as h,
   render,
   createContext,
   useContext,
   useMemo,
-} = require("../build/index");
+} from "../build/index.js";
 
-const { delay } = require("./utils/delay");
+import { delay } from "./utils/delay.js";
 
 describe("context", () => {
   let jsdom;

test/hooks.js

@@ -1,11 +1,11 @@
-const { assert } = require("chai");
-const sinon = require("sinon");
-const { JSDOM } = require("jsdom");
+import chai from "chai";
+import * as sinon from "sinon";
+import { JSDOM } from "jsdom";
+const { assert } = chai;
 
-const {
-  createElement: h,
+import {
+  createElement as h,
   render,
-
   useCallback,
   // `useContext` is not here because it is tested separately.
   useEffect,
@@ -14,7 +14,7 @@ const {
   useReducer,
   useRef,
   useState,
-} = require("../build/index");
+} from "../build/index.js";
 
 describe("hooks", () => {
   let jsdom;

test/jsx.js

@@ -1,7 +1,8 @@
-const { assert } = require("chai");
+import chai from "chai";
+const { assert } = chai;
 
-const { elementSymbol } = require("../build/jsx");
-const { createElement, isValidElement } = require("../build");
+import { elementSymbol } from "../build/jsx.js";
+import { createElement, isValidElement } from "../build/index.js";
 
 describe("JSX", () => {
   describe("createElement", () => {

test/render.js

@@ -1,12 +1,13 @@
-const { assert } = require("chai");
-const sinon = require("sinon");
-const { JSDOM } = require("jsdom");
+import chai from "chai";
+import sinon from "sinon";
+import { JSDOM } from "jsdom";
+const { assert } = chai;
 
-const {
-  createElement: h,
+import {
+  createElement as h,
   render,
   unmountComponentAtNode,
-} = require("../build/index");
+} from "../build/index.js";
 
 /**
  * Attach a numeric tag, starting at 1, to each node in a sequence.

test/test-utils.js

@@ -1,16 +1,17 @@
-const { assert } = require("chai");
-const sinon = require("sinon");
-const { JSDOM } = require("jsdom");
+import chai from "chai";
+import * as sinon from "sinon";
+import { JSDOM } from "jsdom";
+const { assert } = chai;
 
-const {
-  createElement: h,
+import {
+  createElement as h,
   render,
   useEffect,
   useLayoutEffect,
   useState,
-} = require("../build/index");
+} from "../build/index.js";
 
-const { act } = require("../build/test-utils");
+import { act } from "../build/test-utils.js";
 
 describe("test-utils", () => {
   let jsdom;

test/utils.js

@@ -1,15 +1,15 @@
-const { assert } = require("chai");
-const sinon = require("sinon");
-const { JSDOM } = require("jsdom");
+import chai from "chai";
+import * as sinon from "sinon";
+import { JSDOM } from "jsdom";
+const { assert } = chai;
 
-const {
-  createElement: h,
+import {
+  createElement as h,
   render,
-
   Fragment,
   createRef,
   memo,
-} = require("../build/index");
+} from "../build/index.js";
 
 describe("utilities", () => {
   let jsdom;

test/utils/delay.js

@@ -1,5 +1,3 @@
-function delay(ms) {
+export function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
-
-module.exports = { delay };