@hairy/react-lib 1.15.0 → 1.16.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/dist/index.js CHANGED
@@ -1,26 +1,3 @@
1
- var __getOwnPropNames = Object.getOwnPropertyNames;
2
- var __esm = (fn, res) => function __init() {
3
- return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
4
- };
5
-
6
- // ../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs
7
- var __assign;
8
- var init_tslib_es6 = __esm({
9
- "../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs"() {
10
- "use strict";
11
- __assign = function() {
12
- __assign = Object.assign || function __assign2(t) {
13
- for (var s, i = 1, n = arguments.length; i < n; i++) {
14
- s = arguments[i];
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
16
- }
17
- return t;
18
- };
19
- return __assign.apply(this, arguments);
20
- };
21
- }
22
- });
23
-
24
1
  // src/utils/cls.ts
25
2
  var hasOwn = {}.hasOwnProperty;
26
3
  function cls(...args) {
@@ -168,80 +145,26 @@ function renderNodes(tokens, values) {
168
145
  // src/hooks/useAsyncCallback.ts
169
146
  import { useState } from "react";
170
147
  function useAsyncCallback(fun) {
171
- const [error, setError] = useState();
172
- const [loading, setLoading] = useState(false);
148
+ const [state, set] = useState({ loading: false });
173
149
  async function execute(...args) {
174
- try {
175
- setLoading(true);
176
- const result = await fun(...args);
177
- setLoading(false);
178
- return result;
179
- } catch (error2) {
180
- setLoading(false);
181
- setError(error2);
182
- throw error2;
183
- }
184
- }
185
- return [loading, execute, error];
186
- }
187
-
188
- // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useAsyncFn.js
189
- init_tslib_es6();
190
- import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
191
-
192
- // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMountedState.js
193
- import { useCallback, useEffect, useRef } from "react";
194
- function useMountedState() {
195
- var mountedRef = useRef(false);
196
- var get = useCallback(function() {
197
- return mountedRef.current;
198
- }, []);
199
- useEffect(function() {
200
- mountedRef.current = true;
201
- return function() {
202
- mountedRef.current = false;
203
- };
204
- }, []);
205
- return get;
206
- }
207
-
208
- // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useAsyncFn.js
209
- function useAsyncFn(fn, deps, initialState) {
210
- if (deps === void 0) {
211
- deps = [];
212
- }
213
- if (initialState === void 0) {
214
- initialState = { loading: false };
215
- }
216
- var lastCallId = useRef2(0);
217
- var isMounted = useMountedState();
218
- var _a = useState2(initialState), state = _a[0], set = _a[1];
219
- var callback = useCallback2(function() {
220
- var args = [];
221
- for (var _i = 0; _i < arguments.length; _i++) {
222
- args[_i] = arguments[_i];
223
- }
224
- var callId = ++lastCallId.current;
225
- if (!state.loading) {
226
- set(function(prevState) {
227
- return __assign(__assign({}, prevState), { loading: true });
228
- });
229
- }
230
- return fn.apply(void 0, args).then(function(value) {
231
- isMounted() && callId === lastCallId.current && set({ value, loading: false });
150
+ return fun(...args).then((value) => {
151
+ set({ loading: false });
232
152
  return value;
233
- }, function(error) {
234
- isMounted() && callId === lastCallId.current && set({ error, loading: false });
235
- return error;
153
+ }).catch((err) => {
154
+ set({ loading: false, error: err });
155
+ return Promise.reject(err);
236
156
  });
237
- }, deps);
238
- return [state, callback];
157
+ }
158
+ return [state.loading, execute, state.error];
239
159
  }
240
160
 
161
+ // src/hooks/useAsyncState.ts
162
+ import { useEffect as useEffect2, useState as useState2 } from "react";
163
+
241
164
  // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
242
- import { useEffect as useEffect2 } from "react";
165
+ import { useEffect } from "react";
243
166
  var useEffectOnce = function(effect) {
244
- useEffect2(effect, []);
167
+ useEffect(effect, []);
245
168
  };
246
169
  var useEffectOnce_default = useEffectOnce;
247
170
 
@@ -254,10 +177,14 @@ var useMount = function(fn) {
254
177
  var useMount_default = useMount;
255
178
 
256
179
  // src/hooks/useAsyncState.ts
257
- function useAsyncState(fn, deps, options) {
258
- const [state, _fn] = useAsyncFn(fn, deps, options?.initial);
259
- useMount_default(() => options?.immediate && _fn());
260
- return [state, _fn];
180
+ function useAsyncState(fun, options) {
181
+ const [value, set] = useState2(options?.initial);
182
+ const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
183
+ useMount_default(() => options?.immediate && execute());
184
+ useEffect2(() => {
185
+ execute();
186
+ }, [execute]);
187
+ return [{ value, loading, error }, execute];
261
188
  }
262
189
 
263
190
  // src/hooks/useDebounce.ts
@@ -273,10 +200,10 @@ function useDebounce(value, delay) {
273
200
 
274
201
  // src/hooks/useEventBus.ts
275
202
  import mitt from "mitt";
276
- import { useEffect as useEffect4, useRef as useRef3 } from "react";
203
+ import { useEffect as useEffect4, useRef } from "react";
277
204
  var emitter = mitt();
278
205
  function useEventBus(key) {
279
- const onRef = useRef3();
206
+ const onRef = useRef();
280
207
  function on(listener) {
281
208
  emitter.on(key, listener);
282
209
  onRef.current = listener;
@@ -334,10 +261,10 @@ function useMounted() {
334
261
  }
335
262
 
336
263
  // src/hooks/useWatch.ts
337
- import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef4 } from "react";
264
+ import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef2 } from "react";
338
265
  function useWatch(source, callback, options = {}) {
339
- const firstUpdate = useRef4(false);
340
- const then = useRef4();
266
+ const firstUpdate = useRef2(false);
267
+ const then = useRef2();
341
268
  const deps = useMemo2(
342
269
  () => Array.isArray(source) ? source : [source],
343
270
  [source]
@@ -376,7 +303,7 @@ function jsonTryParse(text) {
376
303
  }
377
304
  }
378
305
 
379
- // src/storage/proxyWithPersistant.ts
306
+ // src/storage/persistant.ts
380
307
  import { proxy, subscribe } from "valtio";
381
308
  function proxyWithPersistant(keyOrOptions, initialObject) {
382
309
  let options;
@@ -411,12 +338,15 @@ function defineStore(store, options = {}) {
411
338
  const $status = proxy2(status);
412
339
  const $actions = {};
413
340
  const $getters = {};
414
- markActions($state, actions, $actions);
415
- markGetters(state, $state, getters, $getters);
416
- markStatus($actions, $status);
341
+ setupActions($state, actions, $actions, $status);
342
+ setupGetters(state, $state, getters, $getters);
343
+ setupStatus($actions, $status);
417
344
  function $subscribe(listener) {
418
345
  return subscribe2($state, () => listener($state));
419
346
  }
347
+ $subscribe.status = function(listener) {
348
+ return subscribe2($status, () => listener($status));
349
+ };
420
350
  function $patch(patch) {
421
351
  if (typeof patch === "function")
422
352
  patch($state);
@@ -437,15 +367,41 @@ function defineStore(store, options = {}) {
437
367
  $actions,
438
368
  $getters,
439
369
  $signal,
440
- ...$actions,
441
- ...$state
370
+ ...$actions
442
371
  };
443
372
  }
444
- function markActions($state, actions, $actions) {
445
- for (const key in actions)
446
- $actions[key] = actions[key].bind($state);
373
+ function track(action, status) {
374
+ let loadings = 0;
375
+ const tracking = () => loadings++ === 0 && (status.loading = true);
376
+ const done = () => !--loadings && (status.loading = false);
377
+ const fulfilled = () => {
378
+ status.finished = true;
379
+ done();
380
+ };
381
+ const rejected = (error) => {
382
+ status.error = error;
383
+ done();
384
+ };
385
+ return function(...args) {
386
+ tracking();
387
+ try {
388
+ const result = action(...args);
389
+ if (result instanceof Promise)
390
+ result.then(fulfilled).catch(rejected);
391
+ else
392
+ fulfilled();
393
+ } catch (error) {
394
+ rejected(error);
395
+ }
396
+ };
447
397
  }
448
- function markGetters(state, $state, getters, $getters) {
398
+ function setupActions($state, actions, $actions, $status) {
399
+ for (const key in actions) {
400
+ $status[key] = { finished: false, loading: false, error: null };
401
+ $actions[key] = track(actions[key].bind($state), $status[key]);
402
+ }
403
+ }
404
+ function setupGetters(state, $state, getters, $getters) {
449
405
  for (const key in getters) {
450
406
  Object.defineProperty(state, key, {
451
407
  get: () => getters[key].call($state),
@@ -457,7 +413,7 @@ function markGetters(state, $state, getters, $getters) {
457
413
  });
458
414
  }
459
415
  }
460
- function markStatus($actions, $status) {
416
+ function setupStatus($actions, $status) {
461
417
  Object.defineProperty($status, "loading", {
462
418
  get: () => Object.keys($actions).some((key) => $status[key].loading),
463
419
  enumerable: true
@@ -470,92 +426,35 @@ function markStatus($actions, $status) {
470
426
  get: () => Object.keys($actions).find((key) => $status[key].error),
471
427
  enumerable: true
472
428
  });
473
- for (const key in $actions) {
474
- let subscribe4 = function() {
475
- if (subscribers === 0)
476
- $status[key].loading = true;
477
- subscribers++;
478
- }, done2 = function() {
479
- subscribers--;
480
- if (!subscribers)
481
- $status[key].loading = false;
482
- };
483
- var subscribe3 = subscribe4, done = done2;
484
- const action = $actions[key];
485
- $status[key] = { finished: false, loading: false, error: null };
486
- let subscribers = 0;
487
- $actions[key] = function(...args) {
488
- subscribe4();
489
- try {
490
- const result = action(...args);
491
- if (result instanceof Promise) {
492
- result.then(() => $status[key].finished = true).catch((error) => $status[key].error = error).finally(done2);
493
- } else {
494
- $status[key].finished = true;
495
- done2();
496
- }
497
- } catch (error) {
498
- $status[key].error = error;
499
- done2();
500
- }
501
- };
502
- }
503
- }
504
-
505
- // src/storage/useStore.ts
506
- import { useSnapshot as useSnapshot2 } from "valtio";
507
- function useStore(store) {
508
- return useSnapshot2(store.$state);
509
429
  }
510
430
 
511
431
  // src/storage/defineAsyncStore.ts
512
- function defineAsyncStore(options) {
432
+ function defineAsyncStore(fetch, options = {}) {
513
433
  const store = defineStore(
514
434
  {
515
- state: () => ({
516
- promise: void 0,
517
- value: options.initial,
518
- loading: false,
519
- error: void 0
520
- })
435
+ state: () => ({ value: options.initial }),
436
+ actions: {
437
+ fetch,
438
+ refresh(value) {
439
+ this.value = value || options.initial;
440
+ }
441
+ }
521
442
  },
522
- { persist: options.persist ? { id: options.persist, pick: ["value"] } : void 0 }
443
+ { persist: options.persist }
523
444
  );
524
- function use() {
525
- const fn = options.setup();
526
- const state = useStore(store);
527
- function fetch(...args) {
528
- if (state.loading)
529
- return;
530
- store.$state.loading = true;
531
- store.$state.promise = fn(...args);
532
- store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
533
- store.$state.error = error;
534
- throw error;
535
- });
536
- return store.$state.promise;
537
- }
538
- function refresh(value) {
539
- store.$state.value = value || options.initial;
540
- }
541
- return [state, fetch, refresh];
542
- }
543
- return use;
445
+ return store;
544
446
  }
545
447
 
546
- // src/storage/defineAsyncStoreLayered.ts
547
- function defineAsyncStoreLayered(fn, options = {}) {
548
- return defineAsyncStore({
549
- setup: () => fn,
550
- initial: options.initial,
551
- persist: options.persist
552
- });
448
+ // src/storage/useStatus.tsx
449
+ import { useSnapshot as useSnapshot2 } from "valtio";
450
+ function useStatus(store) {
451
+ return useSnapshot2(store.$status);
553
452
  }
554
453
 
555
- // src/storage/useStatus.tsx
454
+ // src/storage/useStore.ts
556
455
  import { useSnapshot as useSnapshot3 } from "valtio";
557
- function useStatus(store) {
558
- return useSnapshot3(store.$status);
456
+ function useStore(store) {
457
+ return useSnapshot3(store.$state);
559
458
  }
560
459
  export {
561
460
  Case,
@@ -569,7 +468,6 @@ export {
569
468
  Unless,
570
469
  cls,
571
470
  defineAsyncStore,
572
- defineAsyncStoreLayered,
573
471
  defineStore,
574
472
  proxyWithPersistant,
575
473
  useAsyncCallback,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hairy/react-lib",
3
3
  "type": "module",
4
- "version": "1.15.0",
4
+ "version": "1.16.0",
5
5
  "description": "Library for react",
6
6
  "author": "Hairyf <wwu710632@gmail.com>",
7
7
  "license": "MIT",
@@ -38,7 +38,7 @@
38
38
  "react-dom": "^18.2.0",
39
39
  "react-i18next": "^14.1.2",
40
40
  "react-use": "^17.6.0",
41
- "@hairy/utils": "1.15.0"
41
+ "@hairy/utils": "1.16.0"
42
42
  },
43
43
  "scripts": {
44
44
  "build": "tsup",