Move hook naming function to preact/devtools

devtools/package.json

@@ -9,6 +9,7 @@
 	"umd:main": "dist/devtools.umd.js",
 	"source": "src/index.js",
 	"license": "MIT",
+	"types": "src/index.d.ts",
 	"peerDependencies": {
 		"preact": "^10.0.0"
 	}

devtools/src/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Customize the displayed name of a useState, useReducer or useRef hook
+ * in the devtools panel.
+ *
+ * @param value Wrapped native hook.
+ * @param name Custom name
+ */
+export function addHookName<T>(value: T, name: string): T;

devtools/src/index.js

@@ -1,3 +1,15 @@
+import { options } from 'preact';
 import { initDevTools } from './devtools';
 
 initDevTools();
+
+/**
+ * Display a custom label for a custom hook for the devtools panel
+ * @type {<T>(value: T, name: string) => T}
+ */
+export function addHookName(value, name) {
+	if (options._addHookName) {
+		options._addHookName(name);
+	}
+	return value;
+}

hooks/test/browser/useDebugName.test.js → devtools/test/browser/addHookName.test.js

@@ -1,10 +1,11 @@
 import { createElement, render, options } from 'preact';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
-import { useDebugName, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
+import { addHookName } from 'preact/devtools';
 
 /** @jsx createElement */
 
-describe('useDebugName', () => {
+describe('addHookName', () => {
 	/** @type {HTMLDivElement} */
 	let scratch;
 
@@ -14,12 +15,12 @@ describe('useDebugName', () => {
 
 	afterEach(() => {
 		teardown(scratch);
-		delete options.useDebugName;
+		delete options._addHookName;
 	});
 
 	it('should do nothing when no options hook is present', () => {
 		function useFoo() {
-			return useDebugName(useState(0), 'foo');
+			return addHookName(useState(0), 'foo');
 		}
 
 		function App() {
@@ -31,10 +32,10 @@ describe('useDebugName', () => {
 	});
 
 	it('should call options hook with value', () => {
-		let spy = (options.useDebugName = sinon.spy());
+		let spy = (options._addHookName = sinon.spy());
 
 		function useFoo() {
-			return useDebugName(useState(0), 'foo');
+			return addHookName(useState(0), 'foo');
 		}
 
 		function App() {

hooks/src/index.d.ts

@@ -125,15 +125,6 @@ export function useContext<T>(context: PreactContext<T>): T;
  */
 export function useDebugValue<T>(value: T, formatter?: (value: T) => any): void;
 
-/**
- * Customize the displayed name of a useState, useReducer or useRef hook
- * in the devtools panel.
- *
- * @param value Wrapped native hook.
- * @param name Custom name
- */
-export function useDebugName<T>(value: T, name: string): T;
-
 export function useErrorBoundary(
 	callback?: (error: any) => Promise<void> | void
 ): [any, () => void];

hooks/src/index.js

@@ -265,17 +265,6 @@ export function useDebugValue(value, formatter) {
 	}
 }
 
-/**
- * Display a custom label for a custom hook for the devtools panel
- * @type {<T>(value: T, name: string) => T}
- */
-export function useDebugName(value, name) {
-	if (options.useDebugName) {
-		options.useDebugName(name);
-	}
-	return value;
-}
-
 /**
  * @param {(error: any) => void} cb
  */

karma.conf.js

@@ -274,7 +274,7 @@ module.exports = function(config) {
 			{
 				pattern:
 					config.grep ||
-					'{debug,hooks,compat,test-utils,jsx-runtime,}/test/{browser,shared}/**/*.test.js',
+					'{debug,devtools,hooks,compat,test-utils,jsx-runtime,}/test/{browser,shared}/**/*.test.js',
 				watched: false,
 				type: 'js'
 			}
@@ -285,7 +285,7 @@ module.exports = function(config) {
 		},
 
 		preprocessors: {
-			'{debug,hooks,compat,test-utils,jsx-runtime,}/test/**/*': [
+			'{debug,devtools,hooks,compat,test-utils,jsx-runtime,}/test/**/*': [
 				'esbuild',
 				'sourcemap'
 			]

mangle.json

@@ -66,6 +66,7 @@
       "$_root": "__",
       "$_diff": "__b",
       "$_commit": "__c",
+      "$_addHookName": "__a",
       "$_render": "__r",
       "$_hook": "__h",
       "$_catchError": "__e",

src/index.d.ts

@@ -266,7 +266,7 @@ declare namespace preact {
 		requestAnimationFrame?: typeof requestAnimationFrame;
 		debounceRendering?(cb: () => void): void;
 		useDebugValue?(value: string | number): void;
-		useDebugName?(name: string | number): void;
+		_addHookName?(name: string | number): void;
 		__suspenseDidResolve?(vnode: VNode, cb: () => void): void;
 		// __canSuspenseResolve?(vnode: VNode, cb: () => void): void;
 	}