react-simplikit 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,8 +28,6 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
28
28
  * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
29
29
  *
30
30
  * @example
31
- * import { ImpressionArea } from 'react-simplikit';
32
- *
33
31
  * function App() {
34
32
  * return (
35
33
  * <ImpressionArea
@@ -38,7 +36,7 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
38
36
  * timeThreshold={1000}
39
37
  * areaThreshold={0.5}
40
38
  * >
41
- * <div>Track my visibility!</div>
39
+ * <div>Track me!</div>
42
40
  * </ImpressionArea>
43
41
  * );
44
42
  * }
@@ -16,9 +16,9 @@ import { DependencyList } from 'react';
16
16
  * setData(data);
17
17
  *
18
18
  * return () => {
19
- * console.log('Cleanup on unmount or dependency change');
19
+ * console.log('Cleanup on unmount or dependencies change');
20
20
  * };
21
- * }, [dependency]);
21
+ * }, [dependencies]);
22
22
  */
23
23
  declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
24
24
 
@@ -5,11 +5,11 @@
5
5
  *
6
6
  * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
7
7
  *
8
- * @returns {readonly [boolean, () => void, () => void, () => void]} A tuple containing:
9
- * - `boolean` - The current state value.
10
- * - `() => void` - A function to set the state to `true`.
11
- * - `() => void` - A function to set the state to `false`.
12
- * - `() => void` - A function to toggle the state.
8
+ * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
9
+ * - state `boolean` - The current state value.
10
+ * - setTrue `() => void` - A function to set the state to `true`.
11
+ * - setFalse `() => void` - A function to set the state to `false`.
12
+ * - toggle `() => void` - A function to toggle the state.
13
13
  *
14
14
  * @example
15
15
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
@@ -12,10 +12,10 @@ import { DependencyList } from 'react';
12
12
  * @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
13
13
  *
14
14
  * @example
15
- * import { useCallbackOnce } from 'react-simplikit';
15
+ * import { useCallbackOncePerRender } from 'react-simplikit';
16
16
  *
17
17
  * function Component() {
18
- * const handleOneTimeEvent = useCallbackOnce(() => {
18
+ * const handleOneTimeEvent = useCallbackOncePerRender(() => {
19
19
  * console.log('This will only run once');
20
20
  * }, []);
21
21
  *
@@ -25,7 +25,7 @@ import { DependencyList } from 'react';
25
25
  * @example
26
26
  * // With dependencies
27
27
  * function TrackingComponent({ userId }: { userId: string }) {
28
- * const trackUserVisit = useCallbackOnce(() => {
28
+ * const trackUserVisit = useCallbackOncePerRender(() => {
29
29
  * analytics.trackVisit(userId);
30
30
  * }, [userId]);
31
31
  *
@@ -36,6 +36,6 @@ import { DependencyList } from 'react';
36
36
  * return <div>User page</div>;
37
37
  * }
38
38
  */
39
- declare function useCallbackOnce<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
39
+ declare function useCallbackOncePerRender<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
40
40
 
41
- export { useCallbackOnce };
41
+ export { useCallbackOncePerRender };
@@ -17,14 +17,14 @@ var __copyProps = (to, from, except, desc) => {
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
19
 
20
- // src/hooks/useCallbackOnce/index.ts
21
- var useCallbackOnce_exports = {};
22
- __export(useCallbackOnce_exports, {
23
- useCallbackOnce: () => useCallbackOnce
20
+ // src/hooks/useCallbackOncePerRender/index.ts
21
+ var useCallbackOncePerRender_exports = {};
22
+ __export(useCallbackOncePerRender_exports, {
23
+ useCallbackOncePerRender: () => useCallbackOncePerRender
24
24
  });
25
- module.exports = __toCommonJS(useCallbackOnce_exports);
25
+ module.exports = __toCommonJS(useCallbackOncePerRender_exports);
26
26
 
27
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
27
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
28
28
  var import_react2 = require("react");
29
29
 
30
30
  // src/hooks/usePreservedCallback/usePreservedCallback.ts
@@ -39,8 +39,8 @@ function usePreservedCallback(callback) {
39
39
  }, []);
40
40
  }
41
41
 
42
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
43
- function useCallbackOnce(callback, deps) {
42
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
43
+ function useCallbackOncePerRender(callback, deps) {
44
44
  const hasFired = (0, import_react2.useRef)(false);
45
45
  (0, import_react2.useEffect)(() => {
46
46
  hasFired.current = false;
@@ -55,5 +55,5 @@ function useCallbackOnce(callback, deps) {
55
55
  }
56
56
  // Annotate the CommonJS export names for ESM import in node:
57
57
  0 && (module.exports = {
58
- useCallbackOnce
58
+ useCallbackOncePerRender
59
59
  });
@@ -12,9 +12,10 @@ type DebounceOptions = {
12
12
  * `useDebounce` is a React hook that returns a debounced version of the provided callback function.
13
13
  * It helps optimize event handling by delaying function execution and grouping multiple calls into one.
14
14
  *
15
+ * @template {(...args: unknown[]) => unknown} F - The type of the callback function.
15
16
  * @param {F} callback - The function to debounce.
16
17
  * @param {number} wait - The number of milliseconds to delay the function execution.
17
- * @param {object} [options] - Configuration options for debounce behavior.
18
+ * @param {DebounceOptions} [options] - Configuration options for debounce behavior.
18
19
  * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
19
20
  * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
20
21
  *
@@ -4,13 +4,13 @@ import { ChangeEventHandler } from 'react';
4
4
  * @description
5
5
  * `useInputState` is a React hook that manages an input state with optional value transformation.
6
6
  *
7
- * @param {string} initialValue - The initial value of the input. Defaults to an empty string (`""`).
8
- * @param {(value: string) => string} [transformValue] - A function to transform the input value.
7
+ * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
8
+ * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
9
9
  * Defaults to an identity function that returns the input unchanged.
10
10
  *
11
- * @returns {readonly [string, (value: string) => void]} A tuple containing:
12
- * - `string` - The current state value.
13
- * - `(value: string) => void` - A function to update the state.
11
+ * @returns {readonly [value: string, onChange: (value: string) => void]} A tuple containing:
12
+ * - value `string` - The current state value.
13
+ * - onChange `(value: string) => void` - A function to update the state.
14
14
  *
15
15
  * @example
16
16
  * import { useInputState } from 'react-simplikit';
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ export { Separated } from './components/Separated/index.js';
3
3
  export { SwitchCase } from './components/SwitchCase/index.js';
4
4
  export { useAsyncEffect } from './hooks/useAsyncEffect/index.js';
5
5
  export { useBooleanState } from './hooks/useBooleanState/index.js';
6
- export { useCallbackOnce } from './hooks/useCallbackOnce/index.js';
6
+ export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.js';
7
7
  export { useDebounce } from './hooks/useDebounce/index.js';
8
8
  export { useImpressionRef } from './hooks/useImpressionRef/index.js';
9
9
  export { useInputState } from './hooks/useInputState/index.js';
package/dist/index.js CHANGED
@@ -27,7 +27,7 @@ __export(index_exports, {
27
27
  mergeRefs: () => mergeRefs,
28
28
  useAsyncEffect: () => useAsyncEffect,
29
29
  useBooleanState: () => useBooleanState,
30
- useCallbackOnce: () => useCallbackOnce,
30
+ useCallbackOncePerRender: () => useCallbackOncePerRender,
31
31
  useDebounce: () => useDebounce,
32
32
  useImpressionRef: () => useImpressionRef,
33
33
  useInputState: () => useInputState,
@@ -341,9 +341,9 @@ var useBooleanState = (defaultValue = false) => {
341
341
  return [bool, setTrue, setFalse, toggle2];
342
342
  };
343
343
 
344
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
344
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
345
345
  var import_react10 = require("react");
346
- function useCallbackOnce(callback, deps) {
346
+ function useCallbackOncePerRender(callback, deps) {
347
347
  const hasFired = (0, import_react10.useRef)(false);
348
348
  (0, import_react10.useEffect)(() => {
349
349
  hasFired.current = false;
@@ -741,7 +741,7 @@ function buildContext(contextName, defaultContextValues) {
741
741
  mergeRefs,
742
742
  useAsyncEffect,
743
743
  useBooleanState,
744
- useCallbackOnce,
744
+ useCallbackOncePerRender,
745
745
  useDebounce,
746
746
  useImpressionRef,
747
747
  useInputState,
@@ -28,8 +28,6 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
28
28
  * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
29
29
  *
30
30
  * @example
31
- * import { ImpressionArea } from 'react-simplikit';
32
- *
33
31
  * function App() {
34
32
  * return (
35
33
  * <ImpressionArea
@@ -38,7 +36,7 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
38
36
  * timeThreshold={1000}
39
37
  * areaThreshold={0.5}
40
38
  * >
41
- * <div>Track my visibility!</div>
39
+ * <div>Track me!</div>
42
40
  * </ImpressionArea>
43
41
  * );
44
42
  * }
@@ -16,9 +16,9 @@ import { DependencyList } from 'react';
16
16
  * setData(data);
17
17
  *
18
18
  * return () => {
19
- * console.log('Cleanup on unmount or dependency change');
19
+ * console.log('Cleanup on unmount or dependencies change');
20
20
  * };
21
- * }, [dependency]);
21
+ * }, [dependencies]);
22
22
  */
23
23
  declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
24
24
 
@@ -5,11 +5,11 @@
5
5
  *
6
6
  * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
7
7
  *
8
- * @returns {readonly [boolean, () => void, () => void, () => void]} A tuple containing:
9
- * - `boolean` - The current state value.
10
- * - `() => void` - A function to set the state to `true`.
11
- * - `() => void` - A function to set the state to `false`.
12
- * - `() => void` - A function to toggle the state.
8
+ * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
9
+ * - state `boolean` - The current state value.
10
+ * - setTrue `() => void` - A function to set the state to `true`.
11
+ * - setFalse `() => void` - A function to set the state to `false`.
12
+ * - toggle `() => void` - A function to toggle the state.
13
13
  *
14
14
  * @example
15
15
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
@@ -12,10 +12,10 @@ import { DependencyList } from 'react';
12
12
  * @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
13
13
  *
14
14
  * @example
15
- * import { useCallbackOnce } from 'react-simplikit';
15
+ * import { useCallbackOncePerRender } from 'react-simplikit';
16
16
  *
17
17
  * function Component() {
18
- * const handleOneTimeEvent = useCallbackOnce(() => {
18
+ * const handleOneTimeEvent = useCallbackOncePerRender(() => {
19
19
  * console.log('This will only run once');
20
20
  * }, []);
21
21
  *
@@ -25,7 +25,7 @@ import { DependencyList } from 'react';
25
25
  * @example
26
26
  * // With dependencies
27
27
  * function TrackingComponent({ userId }: { userId: string }) {
28
- * const trackUserVisit = useCallbackOnce(() => {
28
+ * const trackUserVisit = useCallbackOncePerRender(() => {
29
29
  * analytics.trackVisit(userId);
30
30
  * }, [userId]);
31
31
  *
@@ -36,6 +36,6 @@ import { DependencyList } from 'react';
36
36
  * return <div>User page</div>;
37
37
  * }
38
38
  */
39
- declare function useCallbackOnce<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
39
+ declare function useCallbackOncePerRender<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
40
40
 
41
- export { useCallbackOnce };
41
+ export { useCallbackOncePerRender };
@@ -1,4 +1,4 @@
1
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
1
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
2
2
  import { useEffect as useEffect2, useRef as useRef2 } from "react";
3
3
 
4
4
  // src/hooks/usePreservedCallback/usePreservedCallback.ts
@@ -13,8 +13,8 @@ function usePreservedCallback(callback) {
13
13
  }, []);
14
14
  }
15
15
 
16
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
17
- function useCallbackOnce(callback, deps) {
16
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
17
+ function useCallbackOncePerRender(callback, deps) {
18
18
  const hasFired = useRef2(false);
19
19
  useEffect2(() => {
20
20
  hasFired.current = false;
@@ -28,5 +28,5 @@ function useCallbackOnce(callback, deps) {
28
28
  });
29
29
  }
30
30
  export {
31
- useCallbackOnce
31
+ useCallbackOncePerRender
32
32
  };
@@ -12,9 +12,10 @@ type DebounceOptions = {
12
12
  * `useDebounce` is a React hook that returns a debounced version of the provided callback function.
13
13
  * It helps optimize event handling by delaying function execution and grouping multiple calls into one.
14
14
  *
15
+ * @template {(...args: unknown[]) => unknown} F - The type of the callback function.
15
16
  * @param {F} callback - The function to debounce.
16
17
  * @param {number} wait - The number of milliseconds to delay the function execution.
17
- * @param {object} [options] - Configuration options for debounce behavior.
18
+ * @param {DebounceOptions} [options] - Configuration options for debounce behavior.
18
19
  * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
19
20
  * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
20
21
  *
@@ -4,13 +4,13 @@ import { ChangeEventHandler } from 'react';
4
4
  * @description
5
5
  * `useInputState` is a React hook that manages an input state with optional value transformation.
6
6
  *
7
- * @param {string} initialValue - The initial value of the input. Defaults to an empty string (`""`).
8
- * @param {(value: string) => string} [transformValue] - A function to transform the input value.
7
+ * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
8
+ * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
9
9
  * Defaults to an identity function that returns the input unchanged.
10
10
  *
11
- * @returns {readonly [string, (value: string) => void]} A tuple containing:
12
- * - `string` - The current state value.
13
- * - `(value: string) => void` - A function to update the state.
11
+ * @returns {readonly [value: string, onChange: (value: string) => void]} A tuple containing:
12
+ * - value `string` - The current state value.
13
+ * - onChange `(value: string) => void` - A function to update the state.
14
14
  *
15
15
  * @example
16
16
  * import { useInputState } from 'react-simplikit';
package/esm/index.d.mts CHANGED
@@ -3,7 +3,7 @@ export { Separated } from './components/Separated/index.mjs';
3
3
  export { SwitchCase } from './components/SwitchCase/index.mjs';
4
4
  export { useAsyncEffect } from './hooks/useAsyncEffect/index.mjs';
5
5
  export { useBooleanState } from './hooks/useBooleanState/index.mjs';
6
- export { useCallbackOnce } from './hooks/useCallbackOnce/index.mjs';
6
+ export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.mjs';
7
7
  export { useDebounce } from './hooks/useDebounce/index.mjs';
8
8
  export { useImpressionRef } from './hooks/useImpressionRef/index.mjs';
9
9
  export { useInputState } from './hooks/useInputState/index.mjs';
package/esm/index.mjs CHANGED
@@ -292,9 +292,9 @@ var useBooleanState = (defaultValue = false) => {
292
292
  return [bool, setTrue, setFalse, toggle2];
293
293
  };
294
294
 
295
- // src/hooks/useCallbackOnce/useCallbackOnce.ts
295
+ // src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
296
296
  import { useEffect as useEffect5, useRef as useRef5 } from "react";
297
- function useCallbackOnce(callback, deps) {
297
+ function useCallbackOncePerRender(callback, deps) {
298
298
  const hasFired = useRef5(false);
299
299
  useEffect5(() => {
300
300
  hasFired.current = false;
@@ -691,7 +691,7 @@ export {
691
691
  mergeRefs,
692
692
  useAsyncEffect,
693
693
  useBooleanState,
694
- useCallbackOnce,
694
+ useCallbackOncePerRender,
695
695
  useDebounce,
696
696
  useImpressionRef,
697
697
  useInputState,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simplikit",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "main": "./dist/index.js",
5
5
  "sideEffects": false,
6
6
  "files": [
@@ -8,6 +8,7 @@
8
8
  "esm/**/*"
9
9
  ],
10
10
  "scripts": {
11
+ "docs:gen": "tsx .scripts/index.ts generate-docs",
11
12
  "docs:dev": "vitepress dev",
12
13
  "docs:build": "vitepress build",
13
14
  "docs:preview": "vitepress preview",
@@ -34,6 +35,7 @@
34
35
  },
35
36
  "devDependencies": {
36
37
  "@eslint/js": "^9.16.0",
38
+ "@openai/openai": "npm:@jsr/openai__openai@^4.93.0",
37
39
  "@testing-library/dom": "^10.4.0",
38
40
  "@testing-library/jest-dom": "^6.6.3",
39
41
  "@testing-library/react": "^16.1.0",
@@ -41,7 +43,10 @@
41
43
  "@types/node": "^22.10.2",
42
44
  "@types/react": "^19.0.7",
43
45
  "@vitest/coverage-v8": "^2.1.8",
46
+ "commander": "^13.1.0",
47
+ "comment-parser": "^1.4.1",
44
48
  "corepack": "^0.30.0",
49
+ "dotenv": "^16.4.7",
45
50
  "esbuild": "^0.24.0",
46
51
  "eslint": "^9.16.0",
47
52
  "eslint-config-prettier": "^9.1.0",
@@ -54,11 +59,14 @@
54
59
  "fast-glob": "^3.3.3",
55
60
  "globals": "^15.13.0",
56
61
  "jsdom": "^25.0.1",
62
+ "listr2": "^8.2.5",
63
+ "ora": "^8.2.0",
57
64
  "prettier": "^3.4.2",
58
65
  "prettier-plugin-sort-re-exports": "^0.1.0",
59
66
  "react": "^19.0.0",
60
67
  "react-dom": "^19.0.0",
61
68
  "tsup": "^8.3.5",
69
+ "tsx": "^4.19.2",
62
70
  "typescript": "^5.7.2",
63
71
  "typescript-eslint": "^8.18.0",
64
72
  "vitepress": "^1.5.0",