Generate types from JS (#14)

Author: goto-bus-stop

index.js

@@ -1,23 +1,41 @@
 import React from 'react'
 import mitt from 'mitt'
 
-export const BusContext = React.createContext(null)
+export const BusContext = React.createContext(/** @type {null|import('mitt').Emitter} */ (null))
 const P = BusContext.Provider
 
+/**
+ * Return the event emitter.
+ *
+ * @return {import('mitt').Emitter}
+ */
 export function useBus () {
-  return React.useContext(BusContext)
+  const bus = React.useContext(BusContext)
+  if (!bus) throw new Error('useBus: missing context')
+  return bus
 }
 
-export function useListener (name, fn) {
+/**
+ * Attach an event listener to the bus while this component is mounted. Adds the listener after mount, and removes it before unmount.
+
+ * @param {import('mitt').EventType} name
+ * @param {import('mitt').Handler} listener
+ */
+export function useListener (name, listener) {
   const bus = useBus()
   React.useEffect(() => {
-    bus.on(name, fn)
+    bus.on(name, listener)
     return () => {
-      bus.off(name, fn)
+      bus.off(name, listener)
     }
-  }, [bus, name, fn])
+  }, [bus, name, listener])
 }
 
+/**
+ * Create an event emitter that will be available to all deeply nested child elements using the useBus() hook.
+ *
+ * @param {{ children?: import('react').ReactNode }} props
+ */
 export function Provider ({ children }) {
   const [bus] = React.useState(() => mitt())
   return <P value={bus}>{children}</P>

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/goto-bus-stop/react-bus/issues"
   },
   "dependencies": {
+    "@types/react": "^18.0.8",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -18,7 +19,8 @@
     "react": "^17.0.0",
     "react-test-renderer": "^17.0.0",
     "rollup": "^2.38.0",
-    "tape": "^5.1.1"
+    "tape": "^5.1.1",
+    "typescript": "^4.6.4"
   },
   "homepage": "https://github.com/goto-bus-stop/react-bus#readme",
   "keywords": [

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"],
+    "allowJs": true,
+    "checkJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "preserve",
+    "strict": true,
+    "esModuleInterop": true,
+    "outDir": "types"
+  },
+  "files": ["index.js"]
+}

types/index.d.ts

@@ -1,29 +1,23 @@
-import React, { FC, ReactNode } from 'react';
-import { Emitter, EventType, Handler } from 'mitt';
-export declare const BusContext: React.Context<Emitter | null>;
 /**
  * Return the event emitter.
  *
- * @export
- * @return {*}
+ * @return {import('mitt').Emitter}
  */
-export declare function useBus(): Emitter;
+export function useBus(): import('mitt').Emitter;
 /**
  * Attach an event listener to the bus while this component is mounted. Adds the listener after mount, and removes it before unmount.
- *
- * @export
- * @param {string} name
- * @param {Handler} fn
+
+ * @param {import('mitt').EventType} name
+ * @param {import('mitt').Handler} listener
  */
-export declare function useListener<T = any>(name: EventType, fn: Handler<T>): void;
-export interface ProviderProps {
-    children?: ReactNode;
-}
+export function useListener(name: import('mitt').EventType, listener: import('mitt').Handler): void;
 /**
  * Create an event emitter that will be available to all deeply nested child elements using the useBus() hook.
  *
- * @export
- * @param {ProviderProps} { children }
- * @return {*}
+ * @param {{ children?: import('react').ReactNode }} props
  */
-export declare const Provider: FC<ProviderProps>;
+export function Provider({ children }: {
+    children?: import('react').ReactNode;
+}): JSX.Element;
+export const BusContext: React.Context<import("mitt").Emitter | null>;
+import React from "react";