preact-missing-hooks 4.1.0 → 4.3.0
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.
- package/Readme.md +4 -1
- package/dist/react.js +1708 -1
- package/llm.package.json +348 -0
- package/llm.package.txt +103 -0
- package/package.json +8 -4
- package/scripts/rollup.react.config.cjs +34 -0
package/llm.package.json
ADDED
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "preact-missing-hooks",
|
|
3
|
+
"version": "4.2.0",
|
|
4
|
+
"description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.",
|
|
5
|
+
"exports": {
|
|
6
|
+
"useTransition": {
|
|
7
|
+
"type": "function",
|
|
8
|
+
"description": "A hook that provides a transition state and a function to start a transition. It is used to defer non-urgent updates to avoid blocking the UI during high-priority updates.",
|
|
9
|
+
"hook": true,
|
|
10
|
+
"params": "options?: { timeoutMs?: number }",
|
|
11
|
+
"returns": "Array containing a boolean indicating if a transition is in progress and a function to start a transition"
|
|
12
|
+
},
|
|
13
|
+
"useMutationObserver": {
|
|
14
|
+
"type": "function",
|
|
15
|
+
"description": "A hook that observes DOM mutations on a given element and calls a callback when mutations occur. It is useful for reacting to changes in the DOM structure or attributes.",
|
|
16
|
+
"hook": true,
|
|
17
|
+
"params": "element: Element, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit",
|
|
18
|
+
"returns": "void"
|
|
19
|
+
},
|
|
20
|
+
"UseMutationObserverOptions": {
|
|
21
|
+
"type": "type",
|
|
22
|
+
"description": "An interface defining the options for the useMutationObserver hook. It extends MutationObserverInit and includes additional properties specific to the hook.",
|
|
23
|
+
"hook": false,
|
|
24
|
+
"params": "N/A",
|
|
25
|
+
"returns": "N/A"
|
|
26
|
+
},
|
|
27
|
+
"useEventBus": {
|
|
28
|
+
"type": "function",
|
|
29
|
+
"description": "A hook that provides a simple event bus for component communication. It allows components to emit and listen to events without prop drilling.",
|
|
30
|
+
"hook": true,
|
|
31
|
+
"params": "N/A",
|
|
32
|
+
"returns": "Object with emit and on methods for event handling"
|
|
33
|
+
},
|
|
34
|
+
"useWrappedChildren": {
|
|
35
|
+
"type": "function",
|
|
36
|
+
"description": "A hook that wraps child components with additional functionality or styling. It is useful for applying consistent behavior or appearance to a group of child components.",
|
|
37
|
+
"hook": true,
|
|
38
|
+
"params": "children: ReactNode, wrapper: (child: ReactNode) => ReactNode",
|
|
39
|
+
"returns": "ReactNode"
|
|
40
|
+
},
|
|
41
|
+
"InjectableProps": {
|
|
42
|
+
"type": "type",
|
|
43
|
+
"description": "An interface defining the props that can be injected into a component. It is used to specify the properties that can be dynamically added to a component.",
|
|
44
|
+
"hook": false,
|
|
45
|
+
"params": "N/A",
|
|
46
|
+
"returns": "N/A"
|
|
47
|
+
},
|
|
48
|
+
"usePreferredTheme": {
|
|
49
|
+
"type": "function",
|
|
50
|
+
"description": "A hook that provides the user's preferred theme (light or dark) based on system preferences or user settings. It is useful for implementing theme-aware components.",
|
|
51
|
+
"hook": true,
|
|
52
|
+
"params": "N/A",
|
|
53
|
+
"returns": "String representing the preferred theme ('light' or 'dark')"
|
|
54
|
+
},
|
|
55
|
+
"PreferredTheme": {
|
|
56
|
+
"type": "type",
|
|
57
|
+
"description": "A type alias for the possible theme values ('light' or 'dark'). It is used to ensure type safety when working with theme-related values.",
|
|
58
|
+
"hook": false,
|
|
59
|
+
"params": "N/A",
|
|
60
|
+
"returns": "N/A"
|
|
61
|
+
},
|
|
62
|
+
"useNetworkState": {
|
|
63
|
+
"type": "function",
|
|
64
|
+
"description": "React hook that returns the current network state of the device, including connection type, effective connection type, and whether the device is online or offline. It uses the browser's Network Information API to provide real-time updates when the network conditions change.",
|
|
65
|
+
"hook": true,
|
|
66
|
+
"params": "options?: { refreshRate?: number }",
|
|
67
|
+
"returns": "NetworkState: { online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType }",
|
|
68
|
+
"example": "const { online, type, effectiveType } = useNetworkState()"
|
|
69
|
+
},
|
|
70
|
+
"EffectiveConnectionType": {
|
|
71
|
+
"type": "type",
|
|
72
|
+
"description": "TypeScript type representing the effective connection type as defined by the Network Information API. It includes values like 'slow-2g', '2g', '3g', '4g' that indicate the effective network speed the browser detects.",
|
|
73
|
+
"hook": false,
|
|
74
|
+
"example": "'slow-2g' | '2g' | '3g' | '4g'"
|
|
75
|
+
},
|
|
76
|
+
"ConnectionType": {
|
|
77
|
+
"type": "type",
|
|
78
|
+
"description": "TypeScript type representing the connection type as defined by the Network Information API. It includes values like 'bluetooth', 'cellular', 'ethernet', 'wifi', 'wimax', 'none', 'unknown', 'other' that indicate the physical connection type.",
|
|
79
|
+
"hook": false,
|
|
80
|
+
"example": "'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'unknown' | 'other'"
|
|
81
|
+
},
|
|
82
|
+
"NetworkState": {
|
|
83
|
+
"type": "type",
|
|
84
|
+
"description": "TypeScript type representing the complete network state object returned by useNetworkState hook. It includes online status, timestamps, bandwidth information, effective connection type, round-trip time, data saver status, and connection type.",
|
|
85
|
+
"hook": false,
|
|
86
|
+
"example": "{ online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType }"
|
|
87
|
+
},
|
|
88
|
+
"useClipboard": {
|
|
89
|
+
"type": "function",
|
|
90
|
+
"description": "React hook that provides access to the system clipboard, allowing reading and writing of clipboard content. It returns an object with methods to read and write text to the clipboard, handling browser compatibility and permissions.",
|
|
91
|
+
"hook": true,
|
|
92
|
+
"params": "options?: UseClipboardOptions",
|
|
93
|
+
"returns": "UseClipboardReturn: { readText: () => Promise<string>, writeText: (text: string) => Promise<void> }",
|
|
94
|
+
"example": "const { readText, writeText } = useClipboard()"
|
|
95
|
+
},
|
|
96
|
+
"UseClipboardOptions": {
|
|
97
|
+
"type": "type",
|
|
98
|
+
"description": "TypeScript type representing the options object for the useClipboard hook. Currently it may include configuration options for clipboard behavior, though the exact properties depend on the implementation.",
|
|
99
|
+
"hook": false,
|
|
100
|
+
"example": "{}"
|
|
101
|
+
},
|
|
102
|
+
"UseClipboardReturn": {
|
|
103
|
+
"type": "type",
|
|
104
|
+
"description": "TypeScript type representing the return value of the useClipboard hook. It includes readText and writeText methods that return promises for asynchronous clipboard operations.",
|
|
105
|
+
"hook": false,
|
|
106
|
+
"example": "{ readText: () => Promise<string>, writeText: (text: string) => Promise<void> }"
|
|
107
|
+
},
|
|
108
|
+
"useRageClick": {
|
|
109
|
+
"type": "function",
|
|
110
|
+
"description": "React hook that detects rapid, repeated clicks on an element, commonly known as rage clicks. It helps identify user frustration by tracking multiple clicks in quick succession and provides a callback when such behavior is detected.",
|
|
111
|
+
"hook": true,
|
|
112
|
+
"params": "options?: { threshold?: number, timeWindow?: number, callback?: (event: MouseEvent) => void }",
|
|
113
|
+
"returns": "void",
|
|
114
|
+
"example": "useRageClick({ threshold: 3, timeWindow: 1000, callback: (event) => console.log('Rage click detected!') })"
|
|
115
|
+
},
|
|
116
|
+
"RageClickPayload": {
|
|
117
|
+
"type": "type",
|
|
118
|
+
"description": "Interface describing the payload structure for rage click events, typically containing timestamp, element info, and click count. Used when tracking rapid repeated clicks for UX analysis or error reporting.",
|
|
119
|
+
"hook": false
|
|
120
|
+
},
|
|
121
|
+
"UseRageClickOptions": {
|
|
122
|
+
"type": "type",
|
|
123
|
+
"description": "Configuration options for the useRageClick hook, including threshold for clicks per second, timeout duration, and callback handler. Allows customization of rage click detection sensitivity and behavior.",
|
|
124
|
+
"hook": false
|
|
125
|
+
},
|
|
126
|
+
"useThreadedWorker": {
|
|
127
|
+
"type": "function",
|
|
128
|
+
"description": "Hook that creates and manages a Web Worker thread for offloading heavy computations or operations. Returns worker instance and control methods for communication and lifecycle management.",
|
|
129
|
+
"hook": true,
|
|
130
|
+
"params": "options: UseThreadedWorkerOptions",
|
|
131
|
+
"returns": "UseThreadedWorkerReturn",
|
|
132
|
+
"example": "const { worker, postMessage, terminate } = useThreadedWorker({ worker: myWorker });"
|
|
133
|
+
},
|
|
134
|
+
"ThreadedWorkerMode": {
|
|
135
|
+
"type": "type",
|
|
136
|
+
"description": "Enumeration defining worker modes: 'shared' for SharedWorker instances or 'dedicated' for standard Web Workers. Determines how worker threads are instantiated and shared across components.",
|
|
137
|
+
"hook": false
|
|
138
|
+
},
|
|
139
|
+
"UseThreadedWorkerOptions": {
|
|
140
|
+
"type": "type",
|
|
141
|
+
"description": "Configuration object for useThreadedWorker hook containing worker script URL or blob, mode selection, and optional initialization parameters. Defines how the worker thread should be created and configured.",
|
|
142
|
+
"hook": false
|
|
143
|
+
},
|
|
144
|
+
"RunOptions": {
|
|
145
|
+
"type": "type",
|
|
146
|
+
"description": "Options object for controlling execution behavior of threaded operations, including timeout settings, retry logic, and error handling strategies. Used to customize how tasks run in worker threads.",
|
|
147
|
+
"hook": false
|
|
148
|
+
},
|
|
149
|
+
"UseThreadedWorkerReturn": {
|
|
150
|
+
"type": "type",
|
|
151
|
+
"description": "Return type from useThreadedWorker hook containing worker instance, message posting method, event listeners, and cleanup functions. Provides complete interface for interacting with the managed worker thread.",
|
|
152
|
+
"hook": false
|
|
153
|
+
},
|
|
154
|
+
"useIndexedDB": {
|
|
155
|
+
"type": "function",
|
|
156
|
+
"description": "Hook for managing IndexedDB database operations including opening connections, reading, writing, and deleting data. Provides reactive state management for database changes and error handling.",
|
|
157
|
+
"hook": true,
|
|
158
|
+
"params": "dbName: string, options?: { version?: number, objectStores?: string[] }",
|
|
159
|
+
"returns": "{ db: IDBDatabase | null, error: Error | null, isOpen: boolean, close: () => void }",
|
|
160
|
+
"example": "const { db, isOpen, error } = useIndexedDB('myDatabase');"
|
|
161
|
+
},
|
|
162
|
+
"IndexedDBConfig": {
|
|
163
|
+
"type": "type",
|
|
164
|
+
"description": "Configuration object for IndexedDB operations, specifying database name, version, and store schema. Use when setting up persistent client-side storage with custom store structures.",
|
|
165
|
+
"hook": false,
|
|
166
|
+
"params": "{ dbName: string, version?: number, stores: { name: string, keyPath?: string, autoIncrement?: boolean }[] }"
|
|
167
|
+
},
|
|
168
|
+
"IDBController": {
|
|
169
|
+
"type": "class",
|
|
170
|
+
"description": "Controller class managing IndexedDB instance lifecycle, providing methods to open, close, and interact with the database. Use when you need programmatic control over IndexedDB operations beyond basic hooks.",
|
|
171
|
+
"hook": false,
|
|
172
|
+
"params": "constructor(config: IndexedDBConfig)",
|
|
173
|
+
"returns": "IDBController instance with open(), close(), getStore(), and transaction methods"
|
|
174
|
+
},
|
|
175
|
+
"UseIndexedDBReturn": {
|
|
176
|
+
"type": "type",
|
|
177
|
+
"description": "Return type from useIndexedDB hook containing database instance, store references, and utility methods. Use to access structured data operations and transaction capabilities within React components.",
|
|
178
|
+
"hook": false,
|
|
179
|
+
"params": "{ db: IDBDatabase, stores: Record<string, IDBObjectStore>, transaction: (stores: string[], mode?: IDBTransactionMode) => IDBTransaction }"
|
|
180
|
+
},
|
|
181
|
+
"useWebRTCIP": {
|
|
182
|
+
"type": "function",
|
|
183
|
+
"description": "Hook that retrieves local WebRTC IP addresses by creating a peer connection and parsing ICE candidates. Use when you need to detect client IP addresses for WebRTC signaling or network diagnostics.",
|
|
184
|
+
"hook": true,
|
|
185
|
+
"params": "options?: UseWebRTCIPOptions",
|
|
186
|
+
"returns": "UseWebRTCIPReturn containing ipAddresses: string[] and loading: boolean"
|
|
187
|
+
},
|
|
188
|
+
"UseWebRTCIPOptions": {
|
|
189
|
+
"type": "type",
|
|
190
|
+
"description": "Configuration options for useWebRTCIP hook, allowing customization of timeout duration and STUN/TURN server configuration. Use to control how long the hook waits for ICE gathering and which servers to use.",
|
|
191
|
+
"hook": false,
|
|
192
|
+
"params": "{ timeout?: number, iceServers?: RTCIceServer[] }"
|
|
193
|
+
},
|
|
194
|
+
"UseWebRTCIPReturn": {
|
|
195
|
+
"type": "type",
|
|
196
|
+
"description": "Return object from useWebRTCIP hook containing detected IP addresses and loading state. Use to access the gathered IP addresses and determine when the operation is complete.",
|
|
197
|
+
"hook": false,
|
|
198
|
+
"params": "{ ipAddresses: string[], loading: boolean }"
|
|
199
|
+
},
|
|
200
|
+
"useWasmCompute": {
|
|
201
|
+
"type": "function",
|
|
202
|
+
"description": "Hook that loads and executes WebAssembly modules for high-performance computation in the browser. Use when you need to run CPU-intensive tasks like image processing, cryptography, or numerical computations without blocking the main thread.",
|
|
203
|
+
"hook": true,
|
|
204
|
+
"params": "options: UseWasmComputeOptions",
|
|
205
|
+
"returns": "Promise resolving to Wasm module instance with exported functions"
|
|
206
|
+
},
|
|
207
|
+
"UseWasmComputeOptions": {
|
|
208
|
+
"type": "type",
|
|
209
|
+
"description": "Configuration object for useWasmCompute hook specifying WASM module source, imports, and execution parameters. Use to configure memory limits, import objects, and execution environment for WebAssembly modules.",
|
|
210
|
+
"hook": false,
|
|
211
|
+
"params": "{ moduleUrl: string, imports?: Record<string, any>, memorySize?: number }"
|
|
212
|
+
},
|
|
213
|
+
"UseWasmComputeReturn": {
|
|
214
|
+
"type": "type",
|
|
215
|
+
"description": "Type definition for the return value of a WASM compute function. Represents the structured result of a WebAssembly-based computation, typically containing status, data, and error information.",
|
|
216
|
+
"hook": false
|
|
217
|
+
},
|
|
218
|
+
"useWorkerNotifications": {
|
|
219
|
+
"type": "function",
|
|
220
|
+
"description": "React hook that subscribes to notifications from a Web Worker. Provides real-time updates from background processing tasks, allowing components to react to worker events without manual event listener management.",
|
|
221
|
+
"hook": true,
|
|
222
|
+
"params": "options: UseWorkerNotificationsOptions",
|
|
223
|
+
"returns": "UseWorkerNotificationsReturn",
|
|
224
|
+
"example": "const { notifications, error } = useWorkerNotifications({ worker: myWorker })"
|
|
225
|
+
},
|
|
226
|
+
"WorkerEventType": {
|
|
227
|
+
"type": "type",
|
|
228
|
+
"description": "Enumeration of possible event types that can be emitted by a Web Worker. Defines the standard set of notification categories for worker-to-main-thread communication, enabling type-safe event handling.",
|
|
229
|
+
"hook": false
|
|
230
|
+
},
|
|
231
|
+
"WorkerNotificationEvent": {
|
|
232
|
+
"type": "type",
|
|
233
|
+
"description": "Type definition for a worker notification event object. Contains metadata about a specific event from a Web Worker, including type, timestamp, and payload data for structured communication.",
|
|
234
|
+
"hook": false
|
|
235
|
+
},
|
|
236
|
+
"UseWorkerNotificationsOptions": {
|
|
237
|
+
"type": "type",
|
|
238
|
+
"description": "Configuration object type for the useWorkerNotifications hook. Specifies parameters like the worker instance, event filters, and optional callback handlers for customizing notification subscription behavior.",
|
|
239
|
+
"hook": false
|
|
240
|
+
},
|
|
241
|
+
"UseWorkerNotificationsReturn": {
|
|
242
|
+
"type": "type",
|
|
243
|
+
"description": "Return type for the useWorkerNotifications hook. Provides an object containing the current notifications array, error state, and optional methods for managing the subscription to worker events.",
|
|
244
|
+
"hook": false
|
|
245
|
+
},
|
|
246
|
+
"useLLMMetadata": {
|
|
247
|
+
"type": "function",
|
|
248
|
+
"description": "React hook that retrieves metadata about the underlying LLVM/WebAssembly compilation environment. Provides information about the current runtime capabilities, version, and available features for debugging and optimization.",
|
|
249
|
+
"hook": true,
|
|
250
|
+
"returns": "object containing metadata properties",
|
|
251
|
+
"example": "const metadata = useLLMMetadata()"
|
|
252
|
+
},
|
|
253
|
+
"OGType": {
|
|
254
|
+
"type": "type",
|
|
255
|
+
"description": "Type definition for Open Graph metadata types. Represents the standardized vocabulary for social media sharing metadata, used to control how content appears when shared on platforms like Facebook and Twitter.",
|
|
256
|
+
"hook": false
|
|
257
|
+
},
|
|
258
|
+
"LLMConfig": {
|
|
259
|
+
"type": "type",
|
|
260
|
+
"description": "Configuration object for setting up an LLM client, including model details, API keys, and connection parameters. Use this to define how the LLM should behave and connect.",
|
|
261
|
+
"hook": false,
|
|
262
|
+
"params": "Optional: { model: string, apiKey: string, endpoint: string, temperature?: number, maxTokens?: number }",
|
|
263
|
+
"returns": "A typed configuration object for LLM initialization",
|
|
264
|
+
"sideEffect": false,
|
|
265
|
+
"example": "const config: LLMConfig = { model: 'gpt-4', apiKey: 'your-key', endpoint: 'https://api.openai.com/v1' }"
|
|
266
|
+
},
|
|
267
|
+
"LLMPayload": {
|
|
268
|
+
"type": "type",
|
|
269
|
+
"description": "Payload structure for sending requests to an LLM, containing the prompt, conversation context, and optional parameters. Use this to format data sent to the LLM service.",
|
|
270
|
+
"hook": false,
|
|
271
|
+
"params": "Optional: { prompt: string, messages?: Message[], temperature?: number, maxTokens?: number, stream?: boolean }",
|
|
272
|
+
"returns": "A typed payload object for LLM requests",
|
|
273
|
+
"sideEffect": false,
|
|
274
|
+
"example": "const payload: LLMPayload = { prompt: 'Translate to French:', messages: [{ role: 'user', content: 'Hello world' }] }"
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
"hooks": [
|
|
278
|
+
"useTransition",
|
|
279
|
+
"useMutationObserver",
|
|
280
|
+
"useEventBus",
|
|
281
|
+
"useWrappedChildren",
|
|
282
|
+
"usePreferredTheme",
|
|
283
|
+
"useNetworkState",
|
|
284
|
+
"useClipboard",
|
|
285
|
+
"useRageClick",
|
|
286
|
+
"useThreadedWorker",
|
|
287
|
+
"useIndexedDB",
|
|
288
|
+
"useWebRTCIP",
|
|
289
|
+
"useWasmCompute",
|
|
290
|
+
"useWorkerNotifications",
|
|
291
|
+
"useLLMMetadata"
|
|
292
|
+
],
|
|
293
|
+
"frameworks": [
|
|
294
|
+
"preact",
|
|
295
|
+
"react"
|
|
296
|
+
],
|
|
297
|
+
"generatedBy": "hayagriva-llm@1.2.0",
|
|
298
|
+
"mode": "ai",
|
|
299
|
+
"summary": "Preact-Missing-Hooks is a lightweight, extendable collection of missing React-like hooks for Preact, offering both familiar hooks and fresh, powerful new ones designed specifically for modern Preact apps.",
|
|
300
|
+
"sideEffects": [],
|
|
301
|
+
"keywords": [
|
|
302
|
+
"preact",
|
|
303
|
+
"hooks",
|
|
304
|
+
"react-hooks",
|
|
305
|
+
"useTransition",
|
|
306
|
+
"useMutationObserver",
|
|
307
|
+
"useEventBus",
|
|
308
|
+
"useWrappedChildren",
|
|
309
|
+
"usePreferredTheme",
|
|
310
|
+
"useNetworkState",
|
|
311
|
+
"useClipboard",
|
|
312
|
+
"useRageClick",
|
|
313
|
+
"useThreadedWorker",
|
|
314
|
+
"useIndexedDB",
|
|
315
|
+
"useWebRTCIP",
|
|
316
|
+
"useWasmCompute",
|
|
317
|
+
"useWorkerNotifications",
|
|
318
|
+
"typescript",
|
|
319
|
+
"modern-web"
|
|
320
|
+
],
|
|
321
|
+
"whenToUse": "Choose Preact-Missing-Hooks when building modern Preact applications that need advanced, React-like hooks not natively available in Preact, or when you want to leverage powerful new hooks for tasks like clipboard management, WebRTC IP detection, WebAssembly computation, IndexedDB access, or rage-click detection. It's ideal for developers seeking a lightweight, extendable hook library that works seamlessly with both Preact and React.",
|
|
322
|
+
"reasonToUse": [
|
|
323
|
+
"Provides missing React-like hooks for Preact",
|
|
324
|
+
"Offers powerful new hooks for modern web features",
|
|
325
|
+
"Lightweight and extendable",
|
|
326
|
+
"Framework-agnostic (works with Preact and React)",
|
|
327
|
+
"Production-ready with TypeScript support"
|
|
328
|
+
],
|
|
329
|
+
"useCases": [
|
|
330
|
+
"Building a Preact app that needs React's useTransition functionality",
|
|
331
|
+
"Managing clipboard operations in a Preact component",
|
|
332
|
+
"Detecting user rage clicks and reporting to error tracking tools",
|
|
333
|
+
"Running WebAssembly computations in a Web Worker",
|
|
334
|
+
"Accessing IndexedDB with a clean, React-like hook API",
|
|
335
|
+
"Observing DOM mutations reactively",
|
|
336
|
+
"Wrapping children components to inject additional props",
|
|
337
|
+
"Detecting user's preferred theme for dark/light mode support",
|
|
338
|
+
"Monitoring network state changes for offline/online handling",
|
|
339
|
+
"Tracking worker notifications and task execution in real-time"
|
|
340
|
+
],
|
|
341
|
+
"documentation": "See README",
|
|
342
|
+
"relatedPackages": [
|
|
343
|
+
"preact",
|
|
344
|
+
"react",
|
|
345
|
+
"react-hooks",
|
|
346
|
+
"preact/hooks"
|
|
347
|
+
]
|
|
348
|
+
}
|
package/llm.package.txt
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
Package: preact-missing-hooks
|
|
2
|
+
Version: 4.2.0
|
|
3
|
+
|
|
4
|
+
Description:
|
|
5
|
+
A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.
|
|
6
|
+
|
|
7
|
+
Summary:
|
|
8
|
+
Preact-Missing-Hooks is a lightweight, extendable collection of missing React-like hooks for Preact, offering both familiar hooks and fresh, powerful new ones designed specifically for modern Preact apps.
|
|
9
|
+
|
|
10
|
+
When to use:
|
|
11
|
+
Choose Preact-Missing-Hooks when building modern Preact applications that need advanced, React-like hooks not natively available in Preact, or when you want to leverage powerful new hooks for tasks like clipboard management, WebRTC IP detection, WebAssembly computation, IndexedDB access, or rage-click detection. It's ideal for developers seeking a lightweight, extendable hook library that works seamlessly with both Preact and React.
|
|
12
|
+
|
|
13
|
+
Reason to use:
|
|
14
|
+
- Provides missing React-like hooks for Preact
|
|
15
|
+
- Offers powerful new hooks for modern web features
|
|
16
|
+
- Lightweight and extendable
|
|
17
|
+
- Framework-agnostic (works with Preact and React)
|
|
18
|
+
- Production-ready with TypeScript support
|
|
19
|
+
|
|
20
|
+
Use cases:
|
|
21
|
+
- Building a Preact app that needs React's useTransition functionality
|
|
22
|
+
- Managing clipboard operations in a Preact component
|
|
23
|
+
- Detecting user rage clicks and reporting to error tracking tools
|
|
24
|
+
- Running WebAssembly computations in a Web Worker
|
|
25
|
+
- Accessing IndexedDB with a clean, React-like hook API
|
|
26
|
+
- Observing DOM mutations reactively
|
|
27
|
+
- Wrapping children components to inject additional props
|
|
28
|
+
- Detecting user's preferred theme for dark/light mode support
|
|
29
|
+
- Monitoring network state changes for offline/online handling
|
|
30
|
+
- Tracking worker notifications and task execution in real-time
|
|
31
|
+
|
|
32
|
+
Keywords:
|
|
33
|
+
preact, hooks, react-hooks, useTransition, useMutationObserver, useEventBus, useWrappedChildren, usePreferredTheme, useNetworkState, useClipboard, useRageClick, useThreadedWorker, useIndexedDB, useWebRTCIP, useWasmCompute, useWorkerNotifications, typescript, modern-web
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
Documentation:
|
|
37
|
+
See README
|
|
38
|
+
|
|
39
|
+
Related packages:
|
|
40
|
+
preact, react, react-hooks, preact/hooks
|
|
41
|
+
|
|
42
|
+
Exports:
|
|
43
|
+
- ConnectionType : TypeScript type representing the connection type as defined by the Network Information API. It includes values like 'bluetooth', 'cellular', 'ethernet', 'wifi', 'wimax', 'none', 'unknown', 'other' that indicate the physical connection type. — e.g. 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'unknown' | 'other'
|
|
44
|
+
- EffectiveConnectionType : TypeScript type representing the effective connection type as defined by the Network Information API. It includes values like 'slow-2g', '2g', '3g', '4g' that indicate the effective network speed the browser detects. — e.g. 'slow-2g' | '2g' | '3g' | '4g'
|
|
45
|
+
- IDBController : Controller class managing IndexedDB instance lifecycle, providing methods to open, close, and interact with the database. Use when you need programmatic control over IndexedDB operations beyond basic hooks. — params: constructor(config: IndexedDBConfig) — returns: IDBController instance with open(), close(), getStore(), and transaction methods
|
|
46
|
+
- IndexedDBConfig : Configuration object for IndexedDB operations, specifying database name, version, and store schema. Use when setting up persistent client-side storage with custom store structures. — params: { dbName: string, version?: number, stores: { name: string, keyPath?: string, autoIncrement?: boolean }[] }
|
|
47
|
+
- InjectableProps : An interface defining the props that can be injected into a component. It is used to specify the properties that can be dynamically added to a component. — params: N/A — returns: N/A
|
|
48
|
+
- LLMConfig : Configuration object for setting up an LLM client, including model details, API keys, and connection parameters. Use this to define how the LLM should behave and connect. — params: Optional: { model: string, apiKey: string, endpoint: string, temperature?: number, maxTokens?: number } — returns: A typed configuration object for LLM initialization — e.g. const config: LLMConfig = { model: 'gpt-4', apiKey: 'your-key', endpoint: 'https://api.openai.com/v1' }
|
|
49
|
+
- LLMPayload : Payload structure for sending requests to an LLM, containing the prompt, conversation context, and optional parameters. Use this to format data sent to the LLM service. — params: Optional: { prompt: string, messages?: Message[], temperature?: number, maxTokens?: number, stream?: boolean } — returns: A typed payload object for LLM requests — e.g. const payload: LLMPayload = { prompt: 'Translate to French:', messages: [{ role: 'user', content: 'Hello world' }] }
|
|
50
|
+
- NetworkState : TypeScript type representing the complete network state object returned by useNetworkState hook. It includes online status, timestamps, bandwidth information, effective connection type, round-trip time, data saver status, and connection type. — e.g. { online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType }
|
|
51
|
+
- OGType : Type definition for Open Graph metadata types. Represents the standardized vocabulary for social media sharing metadata, used to control how content appears when shared on platforms like Facebook and Twitter.
|
|
52
|
+
- PreferredTheme : A type alias for the possible theme values ('light' or 'dark'). It is used to ensure type safety when working with theme-related values. — params: N/A — returns: N/A
|
|
53
|
+
- RageClickPayload : Interface describing the payload structure for rage click events, typically containing timestamp, element info, and click count. Used when tracking rapid repeated clicks for UX analysis or error reporting.
|
|
54
|
+
- RunOptions : Options object for controlling execution behavior of threaded operations, including timeout settings, retry logic, and error handling strategies. Used to customize how tasks run in worker threads.
|
|
55
|
+
- ThreadedWorkerMode : Enumeration defining worker modes: 'shared' for SharedWorker instances or 'dedicated' for standard Web Workers. Determines how worker threads are instantiated and shared across components.
|
|
56
|
+
- useClipboard (Hook) : React hook that provides access to the system clipboard, allowing reading and writing of clipboard content. It returns an object with methods to read and write text to the clipboard, handling browser compatibility and permissions. — params: options?: UseClipboardOptions — returns: UseClipboardReturn: { readText: () => Promise<string>, writeText: (text: string) => Promise<void> } — e.g. const { readText, writeText } = useClipboard()
|
|
57
|
+
- UseClipboardOptions : TypeScript type representing the options object for the useClipboard hook. Currently it may include configuration options for clipboard behavior, though the exact properties depend on the implementation. — e.g. {}
|
|
58
|
+
- UseClipboardReturn : TypeScript type representing the return value of the useClipboard hook. It includes readText and writeText methods that return promises for asynchronous clipboard operations. — e.g. { readText: () => Promise<string>, writeText: (text: string) => Promise<void> }
|
|
59
|
+
- useEventBus (Hook) : A hook that provides a simple event bus for component communication. It allows components to emit and listen to events without prop drilling. — params: N/A — returns: Object with emit and on methods for event handling
|
|
60
|
+
- useIndexedDB (Hook) : Hook for managing IndexedDB database operations including opening connections, reading, writing, and deleting data. Provides reactive state management for database changes and error handling. — params: dbName: string, options?: { version?: number, objectStores?: string[] } — returns: { db: IDBDatabase | null, error: Error | null, isOpen: boolean, close: () => void } — e.g. const { db, isOpen, error } = useIndexedDB('myDatabase');
|
|
61
|
+
- UseIndexedDBReturn : Return type from useIndexedDB hook containing database instance, store references, and utility methods. Use to access structured data operations and transaction capabilities within React components. — params: { db: IDBDatabase, stores: Record<string, IDBObjectStore>, transaction: (stores: string[], mode?: IDBTransactionMode) => IDBTransaction }
|
|
62
|
+
- useLLMMetadata (Hook) : React hook that retrieves metadata about the underlying LLVM/WebAssembly compilation environment. Provides information about the current runtime capabilities, version, and available features for debugging and optimization. — returns: object containing metadata properties — e.g. const metadata = useLLMMetadata()
|
|
63
|
+
- useMutationObserver (Hook) : A hook that observes DOM mutations on a given element and calls a callback when mutations occur. It is useful for reacting to changes in the DOM structure or attributes. — params: element: Element, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit — returns: void
|
|
64
|
+
- UseMutationObserverOptions : An interface defining the options for the useMutationObserver hook. It extends MutationObserverInit and includes additional properties specific to the hook. — params: N/A — returns: N/A
|
|
65
|
+
- useNetworkState (Hook) : React hook that returns the current network state of the device, including connection type, effective connection type, and whether the device is online or offline. It uses the browser's Network Information API to provide real-time updates when the network conditions change. — params: options?: { refreshRate?: number } — returns: NetworkState: { online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType } — e.g. const { online, type, effectiveType } = useNetworkState()
|
|
66
|
+
- usePreferredTheme (Hook) : A hook that provides the user's preferred theme (light or dark) based on system preferences or user settings. It is useful for implementing theme-aware components. — params: N/A — returns: String representing the preferred theme ('light' or 'dark')
|
|
67
|
+
- useRageClick (Hook) : React hook that detects rapid, repeated clicks on an element, commonly known as rage clicks. It helps identify user frustration by tracking multiple clicks in quick succession and provides a callback when such behavior is detected. — params: options?: { threshold?: number, timeWindow?: number, callback?: (event: MouseEvent) => void } — returns: void — e.g. useRageClick({ threshold: 3, timeWindow: 1000, callback: (event) => console.log('Rage click detected!') })
|
|
68
|
+
- UseRageClickOptions : Configuration options for the useRageClick hook, including threshold for clicks per second, timeout duration, and callback handler. Allows customization of rage click detection sensitivity and behavior.
|
|
69
|
+
- useThreadedWorker (Hook) : Hook that creates and manages a Web Worker thread for offloading heavy computations or operations. Returns worker instance and control methods for communication and lifecycle management. — params: options: UseThreadedWorkerOptions — returns: UseThreadedWorkerReturn — e.g. const { worker, postMessage, terminate } = useThreadedWorker({ worker: myWorker });
|
|
70
|
+
- UseThreadedWorkerOptions : Configuration object for useThreadedWorker hook containing worker script URL or blob, mode selection, and optional initialization parameters. Defines how the worker thread should be created and configured.
|
|
71
|
+
- UseThreadedWorkerReturn : Return type from useThreadedWorker hook containing worker instance, message posting method, event listeners, and cleanup functions. Provides complete interface for interacting with the managed worker thread.
|
|
72
|
+
- useTransition (Hook) : A hook that provides a transition state and a function to start a transition. It is used to defer non-urgent updates to avoid blocking the UI during high-priority updates. — params: options?: { timeoutMs?: number } — returns: Array containing a boolean indicating if a transition is in progress and a function to start a transition
|
|
73
|
+
- useWasmCompute (Hook) : Hook that loads and executes WebAssembly modules for high-performance computation in the browser. Use when you need to run CPU-intensive tasks like image processing, cryptography, or numerical computations without blocking the main thread. — params: options: UseWasmComputeOptions — returns: Promise resolving to Wasm module instance with exported functions
|
|
74
|
+
- UseWasmComputeOptions : Configuration object for useWasmCompute hook specifying WASM module source, imports, and execution parameters. Use to configure memory limits, import objects, and execution environment for WebAssembly modules. — params: { moduleUrl: string, imports?: Record<string, any>, memorySize?: number }
|
|
75
|
+
- UseWasmComputeReturn : Type definition for the return value of a WASM compute function. Represents the structured result of a WebAssembly-based computation, typically containing status, data, and error information.
|
|
76
|
+
- useWebRTCIP (Hook) : Hook that retrieves local WebRTC IP addresses by creating a peer connection and parsing ICE candidates. Use when you need to detect client IP addresses for WebRTC signaling or network diagnostics. — params: options?: UseWebRTCIPOptions — returns: UseWebRTCIPReturn containing ipAddresses: string[] and loading: boolean
|
|
77
|
+
- UseWebRTCIPOptions : Configuration options for useWebRTCIP hook, allowing customization of timeout duration and STUN/TURN server configuration. Use to control how long the hook waits for ICE gathering and which servers to use. — params: { timeout?: number, iceServers?: RTCIceServer[] }
|
|
78
|
+
- UseWebRTCIPReturn : Return object from useWebRTCIP hook containing detected IP addresses and loading state. Use to access the gathered IP addresses and determine when the operation is complete. — params: { ipAddresses: string[], loading: boolean }
|
|
79
|
+
- useWorkerNotifications (Hook) : React hook that subscribes to notifications from a Web Worker. Provides real-time updates from background processing tasks, allowing components to react to worker events without manual event listener management. — params: options: UseWorkerNotificationsOptions — returns: UseWorkerNotificationsReturn — e.g. const { notifications, error } = useWorkerNotifications({ worker: myWorker })
|
|
80
|
+
- UseWorkerNotificationsOptions : Configuration object type for the useWorkerNotifications hook. Specifies parameters like the worker instance, event filters, and optional callback handlers for customizing notification subscription behavior.
|
|
81
|
+
- UseWorkerNotificationsReturn : Return type for the useWorkerNotifications hook. Provides an object containing the current notifications array, error state, and optional methods for managing the subscription to worker events.
|
|
82
|
+
- useWrappedChildren (Hook) : A hook that wraps child components with additional functionality or styling. It is useful for applying consistent behavior or appearance to a group of child components. — params: children: ReactNode, wrapper: (child: ReactNode) => ReactNode — returns: ReactNode
|
|
83
|
+
- WorkerEventType : Enumeration of possible event types that can be emitted by a Web Worker. Defines the standard set of notification categories for worker-to-main-thread communication, enabling type-safe event handling.
|
|
84
|
+
- WorkerNotificationEvent : Type definition for a worker notification event object. Contains metadata about a specific event from a Web Worker, including type, timestamp, and payload data for structured communication.
|
|
85
|
+
|
|
86
|
+
Hooks:
|
|
87
|
+
- useTransition
|
|
88
|
+
- useMutationObserver
|
|
89
|
+
- useEventBus
|
|
90
|
+
- useWrappedChildren
|
|
91
|
+
- usePreferredTheme
|
|
92
|
+
- useNetworkState
|
|
93
|
+
- useClipboard
|
|
94
|
+
- useRageClick
|
|
95
|
+
- useThreadedWorker
|
|
96
|
+
- useIndexedDB
|
|
97
|
+
- useWebRTCIP
|
|
98
|
+
- useWasmCompute
|
|
99
|
+
- useWorkerNotifications
|
|
100
|
+
- useLLMMetadata
|
|
101
|
+
|
|
102
|
+
Frameworks:
|
|
103
|
+
preact, react
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "preact-missing-hooks",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.",
|
|
5
5
|
"author": "Prakhar Dubey",
|
|
6
6
|
"license": "MIT",
|
|
@@ -90,7 +90,8 @@
|
|
|
90
90
|
},
|
|
91
91
|
"scripts": {
|
|
92
92
|
"build": "microbundle --alias react=preact/compat && npm run build:react && node scripts/generate-entry.cjs",
|
|
93
|
-
"
|
|
93
|
+
"llm:generate": "hayagriva-llm generate",
|
|
94
|
+
"build:react": "rollup -c scripts/rollup.react.config.cjs",
|
|
94
95
|
"dev": "microbundle watch",
|
|
95
96
|
"prepublishOnly": "npm run build",
|
|
96
97
|
"test": "vitest run",
|
|
@@ -102,7 +103,8 @@
|
|
|
102
103
|
"format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
|
|
103
104
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
|
|
104
105
|
"prepare": "husky",
|
|
105
|
-
"
|
|
106
|
+
"clean:cache": "node -e \"try{require('fs').rmSync('node_modules/.cache',{recursive:true,force:true});console.log('Cache cleared');}catch(e){}\"",
|
|
107
|
+
"size": "npm run clean:cache && npm run build && size-limit"
|
|
106
108
|
},
|
|
107
109
|
"size-limit": [
|
|
108
110
|
{
|
|
@@ -142,7 +144,7 @@
|
|
|
142
144
|
],
|
|
143
145
|
"repository": {
|
|
144
146
|
"type": "git",
|
|
145
|
-
"url": "https://github.com/prakhardubey2002/Preact-Missing-Hooks"
|
|
147
|
+
"url": "git+https://github.com/prakhardubey2002/Preact-Missing-Hooks.git"
|
|
146
148
|
},
|
|
147
149
|
"dependencies": {
|
|
148
150
|
"preact": ">=10.0.0"
|
|
@@ -154,9 +156,11 @@
|
|
|
154
156
|
"@testing-library/preact": "^3.2.4",
|
|
155
157
|
"@testing-library/react": "^16.0.1",
|
|
156
158
|
"@types/jest": "^29.5.14",
|
|
159
|
+
"@types/react": "^18.3.0",
|
|
157
160
|
"eslint": "^9.15.0",
|
|
158
161
|
"eslint-config-prettier": "^9.1.0",
|
|
159
162
|
"fake-indexeddb": "^6.0.2",
|
|
163
|
+
"hayagriva-llm": "^1.2.0",
|
|
160
164
|
"husky": "^9.1.7",
|
|
161
165
|
"jsdom": "^26.1.0",
|
|
162
166
|
"microbundle": "^0.15.1",
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rollup config for the React build (preact aliased to react).
|
|
3
|
+
* Uses rollup-plugin-typescript2 with clean: true to avoid EPERM cache
|
|
4
|
+
* rename issues on Windows.
|
|
5
|
+
*/
|
|
6
|
+
const path = require("path");
|
|
7
|
+
const alias = require("@rollup/plugin-alias");
|
|
8
|
+
const { nodeResolve } = require("@rollup/plugin-node-resolve");
|
|
9
|
+
const commonjs = require("@rollup/plugin-commonjs");
|
|
10
|
+
const typescript = require("rollup-plugin-typescript2");
|
|
11
|
+
|
|
12
|
+
module.exports = {
|
|
13
|
+
input: path.join(__dirname, "..", "src", "index.ts"),
|
|
14
|
+
output: {
|
|
15
|
+
file: path.join(__dirname, "..", "dist", "react.js"),
|
|
16
|
+
format: "cjs",
|
|
17
|
+
sourcemap: false,
|
|
18
|
+
},
|
|
19
|
+
external: ["react", "react-dom"],
|
|
20
|
+
plugins: [
|
|
21
|
+
alias({
|
|
22
|
+
entries: [
|
|
23
|
+
{ find: "preact/hooks", replacement: "react" },
|
|
24
|
+
{ find: "preact", replacement: "react" },
|
|
25
|
+
],
|
|
26
|
+
}),
|
|
27
|
+
nodeResolve(),
|
|
28
|
+
commonjs(),
|
|
29
|
+
typescript({
|
|
30
|
+
clean: true,
|
|
31
|
+
tsconfig: path.join(__dirname, "..", "tsconfig.json"),
|
|
32
|
+
}),
|
|
33
|
+
],
|
|
34
|
+
};
|