Rename createHooks generic params.

embellishing · Jun 19, 2024 · f072c28 · f072c28
1 parent 8e3d2e5
commit f072c28
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/docs/api/react.createhooks.md b/docs/api/react.createhooks.md
@@ -9,10 +9,10 @@ Creates the specified CSS hooks.
 **Signature:**
 
 ```typescript
-export declare function createHooks<Hooks extends Selector[]>(hooks: Hooks): {
+export declare function createHooks<Selectors extends Selector[]>(selectors: Selectors): {
     StyleSheet(): JSX.Element;
     hooks: {
-        [Hook in Hooks[number]]: HookId;
+        [Hook in Selectors[number]]: HookId;
     };
 };
 ```
@@ -37,24 +37,24 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-hooks
+selectors
 
 
 </td><td>
 
-Hooks
+Selectors
 
 
 </td><td>
 
-The hooks to create.
+The selector logic for each hook
 
 
 </td></tr>
 </tbody></table>
 **Returns:**
 
-{ StyleSheet(): JSX.Element; hooks: { \[Hook in Hooks\[number\]\]: [HookId](./react.hookid.md)<!-- -->; }; }
+{ StyleSheet(): JSX.Element; hooks: { \[Hook in Selectors\[number\]\]: [HookId](./react.hookid.md)<!-- -->; }; }
 
-The created hooks along with the `StyleSheet` component required to support them.
+A set of hooks implementing the specified selector logic along with the `StyleSheet` component required to support them
 
diff --git a/docs/api/react.md b/docs/api/react.md
@@ -41,7 +41,7 @@ Creates the specified conditions based on available hooks.
 </td></tr>
 <tr><td>
 
-[createHooks(hooks)](./react.createhooks.md)
+[createHooks(selectors)](./react.createhooks.md)
 
 
 </td><td>

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -156,19 +156,21 @@ export type Selector =
 export type HookId = Branded<string, "HookId">;
 
 /** @internal */
-export function createHooks<Hooks extends Selector[]>(hooks: Hooks) {
-  const hookIds = Object.fromEntries(
-    hooks.map(hook => [hook, createHash(hook)]),
-  ) as { [Hook in Hooks[number]]: HookId };
+export function createHooks<Selectors extends Selector[]>(
+  selectors: Selectors,
+) {
+  const hooks = Object.fromEntries(
+    selectors.map(selector => [selector, createHash(selector)]),
+  ) as { [Hook in Selectors[number]]: HookId };
   return {
     styleSheet() {
       const indent = Array(2).fill(space).join("");
-      return `*${space}{${newline}${Object.entries(hookIds)
+      return `*${space}{${newline}${Object.entries(hooks)
         .flatMap(([, id]) => [
           `${indent}--${id}-0:${space}initial;`,
           `${indent}--${id}-1:${space};`,
         ])
-        .join(newline)}${newline}}${newline}${Object.entries(hookIds)
+        .join(newline)}${newline}}${newline}${Object.entries(hooks)
         .flatMap(([def, id]) => {
           if (def.startsWith("@")) {
             return [
@@ -189,7 +191,7 @@ export function createHooks<Hooks extends Selector[]>(hooks: Hooks) {
         })
         .join(newline)}`;
     },
-    hooks: hookIds,
+    hooks,
   };
 }
 

diff --git a/packages/react/src/hooks.ts b/packages/react/src/hooks.ts
@@ -5,20 +5,21 @@ import { createElement } from "react";
 /**
  * Creates the specified CSS hooks.
  *
- * @typeParam Hooks - The type of the hooks to create.
- * @param hooks - The hooks to create.
+ * @typeParam Selectors - The type of the selector logic for each hook
+ * @param selectors - The selector logic for each hook
  *
- * @returns The created hooks along with the `StyleSheet` component required to support them.
+ * @returns A set of hooks implementing the specified selector logic along with
+ * the `StyleSheet` component required to support them
  *
  * @public
  */
-export function createHooks<Hooks extends Selector[]>(
-  hooks: Hooks,
+export function createHooks<Selectors extends Selector[]>(
+  selectors: Selectors,
 ): {
   StyleSheet(): JSX.Element;
-  hooks: { [Hook in Hooks[number]]: HookId };
+  hooks: { [Hook in Selectors[number]]: HookId };
 } {
-  const { styleSheet, ...rest } = createHooksImpl(hooks);
+  const { styleSheet, ...rest } = createHooksImpl(selectors);
   return {
     ...rest,
     StyleSheet() {