@fringeworks/react-utils 0.9.1 → 0.9.2

package/README.ja.md

@@ -50,6 +50,7 @@ import useLatestRef from '@fringeworks/react-utils/hooks/useLatestRef';
 | `extendElement(element, overrideProps?, ...children)` | `className` と `style` をマージしてエレメントを複製する            |
 | `forEachContent(children, callback)`                  | Fragment を透過し、エレメント・文字列・数値を順に処理する          |
 | `forEachElement(children, callback)`                  | Fragment を透過し、エレメントを順に処理する                        |
+| `getComponentName(Component)`                         | HOC の `displayName` などに使う、コンポーネントの名前を返す        |
 | `markAt()`                                            | 呼び出すたびに増加する値を返す                                     |
 | `setRefCurrent(value, ...refs)`                       | 複数の ref に値を設定し、クリーンアップ関数を返す                  |
 | `transformContent(children, callback)`                | Fragment を透過し、エレメント・文字列・数値を変換した配列を返す    |
@@ -242,6 +243,18 @@ Fragment を透過して `children` を順に処理します。`forEachContent`
 - 配列や iterable も展開します。
 - `index` は、Fragment をまたいだ連番です。
 
+### `getComponentName`
+
+```ts
+getComponentName(Component: ElementType): string
+```
+
+HOC の `displayName` などに使う、コンポーネントの名前を返します。
+
+- 組み込みタグ（`'div'` など）はそのまま返します。
+- `displayName` を関数名より優先します。
+- どちらも無い（空文字の）場合は `Unknown` を返します。
+
 ### `markAt`
 
 ```ts

package/README.md

@@ -50,6 +50,7 @@ import useLatestRef from '@fringeworks/react-utils/hooks/useLatestRef';
 | `extendElement(element, overrideProps?, ...children)` | Clones an element, merging `className` and `style`                         |
 | `forEachContent(children, callback)`                  | Iterates over elements, strings, and numbers, looking through Fragments    |
 | `forEachElement(children, callback)`                  | Iterates over elements, looking through Fragments                          |
+| `getComponentName(Component)`                         | Returns the name of a component, for use in an HOC's `displayName`         |
 | `markAt()`                                            | Returns a value that increases on every call                               |
 | `setRefCurrent(value, ...refs)`                       | Sets a value to multiple refs and returns a cleanup function               |
 | `transformContent(children, callback)`                | Maps elements, strings, and numbers to an array, looking through Fragments |
@@ -242,6 +243,18 @@ Iterates over `children`, looking through Fragments. `forEachContent` handles el
 - Arrays and iterables are also expanded.
 - `index` is a sequential number across Fragments.
 
+### `getComponentName`
+
+```ts
+getComponentName(Component: ElementType): string
+```
+
+Returns the name of a component, for use in an HOC's `displayName` and the like.
+
+- A built-in tag (such as `'div'`) is returned as is.
+- `displayName` takes precedence over the function name.
+- Returns `Unknown` when neither is available (or both are empty).
+
 ### `markAt`
 
 ```ts

package/index.cjs

@@ -14,6 +14,7 @@ const require_utils_ensureComponent_ensureComponent = require("./utils/ensureCom
 const require_utils_extendElement_extendElement = require("./utils/extendElement/extendElement.cjs");
 const require_utils_forEachContent_forEachContent = require("./utils/forEachContent/forEachContent.cjs");
 const require_utils_forEachElement_forEachElement = require("./utils/forEachElement/forEachElement.cjs");
+const require_utils_getComponentName_getComponentName = require("./utils/getComponentName/getComponentName.cjs");
 const require_utils_transformContent_transformContent = require("./utils/transformContent/transformContent.cjs");
 const require_utils_transformElement_transformElement = require("./utils/transformElement/transformElement.cjs");
 require("./utils/index.cjs");
@@ -23,6 +24,7 @@ exports.ensureComponent = require_utils_ensureComponent_ensureComponent.default;
 exports.extendElement = require_utils_extendElement_extendElement.default;
 exports.forEachContent = require_utils_forEachContent_forEachContent.default;
 exports.forEachElement = require_utils_forEachElement_forEachElement.default;
+exports.getComponentName = require_utils_getComponentName_getComponentName.default;
 exports.markAt = require_utils_markAt_markAt.default;
 exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
 exports.transformContent = require_utils_transformContent_transformContent.default;

package/index.d.cts

@@ -19,8 +19,9 @@ import { ExtendableProps } from "./utils/extendElement/types.cjs";
 import extendElement from "./utils/extendElement/extendElement.cjs";
 import forEachContent from "./utils/forEachContent/forEachContent.cjs";
 import forEachElement from "./utils/forEachElement/forEachElement.cjs";
+import getComponentName from "./utils/getComponentName/getComponentName.cjs";
 import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.cjs";
 import transformContent from "./utils/transformContent/transformContent.cjs";
 import transformElement from "./utils/transformElement/transformElement.cjs";
 import "./utils/index.cjs";
-export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };

package/index.d.mts

@@ -19,8 +19,9 @@ import { ExtendableProps } from "./utils/extendElement/types.mjs";
 import extendElement from "./utils/extendElement/extendElement.mjs";
 import forEachContent from "./utils/forEachContent/forEachContent.mjs";
 import forEachElement from "./utils/forEachElement/forEachElement.mjs";
+import getComponentName from "./utils/getComponentName/getComponentName.mjs";
 import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
 import transformContent from "./utils/transformContent/transformContent.mjs";
 import transformElement from "./utils/transformElement/transformElement.mjs";
 import "./utils/index.mjs";
-export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };

package/index.mjs

@@ -13,8 +13,9 @@ import ensureComponent from "./utils/ensureComponent/ensureComponent.mjs";
 import extendElement from "./utils/extendElement/extendElement.mjs";
 import forEachContent from "./utils/forEachContent/forEachContent.mjs";
 import forEachElement from "./utils/forEachElement/forEachElement.mjs";
+import getComponentName from "./utils/getComponentName/getComponentName.mjs";
 import transformContent from "./utils/transformContent/transformContent.mjs";
 import transformElement from "./utils/transformElement/transformElement.mjs";
 import "./utils/index.mjs";
 
-export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fringeworks/react-utils",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "A library some will find handy, providing utilities for React.",
   "keywords": [
     "react"
@@ -164,6 +164,16 @@
         "default": "./utils/forEachElement/index.cjs"
       }
     },
+    "./utils/getComponentName": {
+      "import": {
+        "types": "./utils/getComponentName/index.d.mts",
+        "default": "./utils/getComponentName/index.mjs"
+      },
+      "require": {
+        "types": "./utils/getComponentName/index.d.cts",
+        "default": "./utils/getComponentName/index.cjs"
+      }
+    },
     "./utils/markAt": {
       "import": {
         "types": "./utils/markAt/index.d.mts",

package/utils/getComponentName/getComponentName.cjs

@@ -0,0 +1,18 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+//#region src/utils/getComponentName/getComponentName.ts
+/**
+* コンポーネントの名前を取得する（HOCのdisplayNameなどに使う）
+*
+* - HTMLの要素名はそのまま使う
+* - displayName・関数名が無い（空文字の）場合は`Unknown`
+* @param Component コンポーネント
+* @returns
+*/
+function getComponentName(Component) {
+	if (typeof Component === "string") return Component;
+	const { displayName, name } = Component;
+	return displayName || name || "Unknown";
+}
+
+//#endregion
+exports.default = getComponentName;

package/utils/getComponentName/getComponentName.d.cts

@@ -0,0 +1,12 @@
+import { ElementType } from "react";
+//#region src/utils/getComponentName/getComponentName.d.ts
+/**
+ * コンポーネントの名前を取得する（HOCのdisplayNameなどに使う）
+ *
+ * - HTMLの要素名はそのまま使う
+ * - displayName・関数名が無い（空文字の）場合は`Unknown`
+ * @param Component コンポーネント
+ * @returns
+ */
+declare function getComponentName(Component: ElementType): string;
+export = getComponentName;

package/utils/getComponentName/getComponentName.d.mts

@@ -0,0 +1,12 @@
+import { ElementType } from "react";
+//#region src/utils/getComponentName/getComponentName.d.ts
+/**
+ * コンポーネントの名前を取得する（HOCのdisplayNameなどに使う）
+ *
+ * - HTMLの要素名はそのまま使う
+ * - displayName・関数名が無い（空文字の）場合は`Unknown`
+ * @param Component コンポーネント
+ * @returns
+ */
+export default function getComponentName(Component: ElementType): string;
+//#endregion

package/utils/getComponentName/getComponentName.mjs

@@ -0,0 +1,17 @@
+//#region src/utils/getComponentName/getComponentName.ts
+/**
+* コンポーネントの名前を取得する（HOCのdisplayNameなどに使う）
+*
+* - HTMLの要素名はそのまま使う
+* - displayName・関数名が無い（空文字の）場合は`Unknown`
+* @param Component コンポーネント
+* @returns
+*/
+function getComponentName(Component) {
+	if (typeof Component === "string") return Component;
+	const { displayName, name } = Component;
+	return displayName || name || "Unknown";
+}
+
+//#endregion
+export { getComponentName as default };

package/utils/getComponentName/index.cjs

@@ -0,0 +1,5 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_utils_getComponentName_getComponentName = require("./getComponentName.cjs");
+
+exports.default = require_utils_getComponentName_getComponentName.default;
+exports.getComponentName = require_utils_getComponentName_getComponentName.default;

package/utils/getComponentName/index.d.cts

@@ -0,0 +1,2 @@
+import getComponentName from "./getComponentName.cjs";
+export { getComponentName as default, getComponentName };

package/utils/getComponentName/index.d.mts

@@ -0,0 +1,2 @@
+import getComponentName from "./getComponentName.mjs";
+export { getComponentName as default, getComponentName };

package/utils/getComponentName/index.mjs

@@ -0,0 +1,3 @@
+import getComponentName from "./getComponentName.mjs";
+
+export { getComponentName as default, getComponentName };

package/utils/index.cjs

@@ -10,6 +10,7 @@ const require_utils_forEachContent_forEachContent = require("./forEachContent/fo
 require("./forEachContent/index.cjs");
 const require_utils_forEachElement_forEachElement = require("./forEachElement/forEachElement.cjs");
 require("./forEachElement/index.cjs");
+const require_utils_getComponentName_getComponentName = require("./getComponentName/getComponentName.cjs");
 const require_utils_transformContent_transformContent = require("./transformContent/transformContent.cjs");
 require("./transformContent/index.cjs");
 const require_utils_transformElement_transformElement = require("./transformElement/transformElement.cjs");
@@ -20,6 +21,7 @@ exports.ensureComponent = require_utils_ensureComponent_ensureComponent.default;
 exports.extendElement = require_utils_extendElement_extendElement.default;
 exports.forEachContent = require_utils_forEachContent_forEachContent.default;
 exports.forEachElement = require_utils_forEachElement_forEachElement.default;
+exports.getComponentName = require_utils_getComponentName_getComponentName.default;
 exports.markAt = require_utils_markAt_markAt.default;
 exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
 exports.transformContent = require_utils_transformContent_transformContent.default;

package/utils/index.d.cts

@@ -11,10 +11,12 @@ import forEachContent from "./forEachContent/forEachContent.cjs";
 import "./forEachContent/index.cjs";
 import forEachElement from "./forEachElement/forEachElement.cjs";
 import "./forEachElement/index.cjs";
+import getComponentName from "./getComponentName/getComponentName.cjs";
+import "./getComponentName/index.cjs";
 import setRefCurrent from "./setRefCurrent/setRefCurrent.cjs";
 import "./setRefCurrent/index.cjs";
 import transformContent from "./transformContent/transformContent.cjs";
 import "./transformContent/index.cjs";
 import transformElement from "./transformElement/transformElement.cjs";
 import "./transformElement/index.cjs";
-export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement };
+export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };

package/utils/index.d.mts

@@ -11,10 +11,12 @@ import forEachContent from "./forEachContent/forEachContent.mjs";
 import "./forEachContent/index.mjs";
 import forEachElement from "./forEachElement/forEachElement.mjs";
 import "./forEachElement/index.mjs";
+import getComponentName from "./getComponentName/getComponentName.mjs";
+import "./getComponentName/index.mjs";
 import setRefCurrent from "./setRefCurrent/setRefCurrent.mjs";
 import "./setRefCurrent/index.mjs";
 import transformContent from "./transformContent/transformContent.mjs";
 import "./transformContent/index.mjs";
 import transformElement from "./transformElement/transformElement.mjs";
 import "./transformElement/index.mjs";
-export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement };
+export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };

package/utils/index.mjs

@@ -9,9 +9,10 @@ import forEachContent from "./forEachContent/forEachContent.mjs";
 import "./forEachContent/index.mjs";
 import forEachElement from "./forEachElement/forEachElement.mjs";
 import "./forEachElement/index.mjs";
+import getComponentName from "./getComponentName/getComponentName.mjs";
 import transformContent from "./transformContent/transformContent.mjs";
 import "./transformContent/index.mjs";
 import transformElement from "./transformElement/transformElement.mjs";
 import "./transformElement/index.mjs";
 
-export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement };
+export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };