alibaba / hooks / #31

pending completion

Build # #31

Build Type

push

travis-pro

Committed by

web-flow

Commit Message

chore: update to jest 29 (#2048)

* chore: update to jest 29

* chore: fix `ts-jest` config is deprecated

Run Details

895 of 1206 branches covered (74.21%)

Branch coverage included in aggregate %.

2190 of 2576 relevant lines covered (85.02%)

81.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/use-url-state/src/index.ts

import { useMemoizedFn, useUpdate } from 'ahooks';
import { parse, stringify } from 'query-string';
import type { ParseOptions, StringifyOptions } from 'query-string';
import { useMemo, useRef } from 'react';
import type * as React from 'react';
import * as tmp from 'react-router';

// ignore waring `"export 'useNavigate' (imported as 'rc') was not found in 'react-router'`
const rc = tmp as any;

export interface Options {
  navigateMode?: 'push' | 'replace';
  parseOptions?: ParseOptions;
  stringifyOptions?: StringifyOptions;
}

const baseParseConfig: ParseOptions = {
  parseNumbers: false,
  parseBooleans: false,
};

const baseStringifyConfig: StringifyOptions = {
  skipNull: false,
  skipEmptyString: false,
};

type UrlState = Record<string, any>;

const useUrlState = <S extends UrlState = UrlState>(
  initialState?: S | (() => S),
  options?: Options,
) => {
  type State = Partial<{ [key in keyof S]: any }>;
  const { navigateMode = 'push', parseOptions, stringifyOptions } = options || {};

  const mergedParseOptions = { ...baseParseConfig, ...parseOptions };
  const mergedStringifyOptions = { ...baseStringifyConfig, ...stringifyOptions };

  const location = rc.useLocation();

  // react-router v5
  const history = rc.useHistory?.();
  // react-router v6
  const navigate = rc.useNavigate?.();

  const update = useUpdate();

  const initialStateRef = useRef(
    typeof initialState === 'function' ? (initialState as () => S)() : initialState || {},
  );

  const queryFromUrl = useMemo(() => {
    return parse(location.search, mergedParseOptions);
  }, [location.search]);

  const targetQuery: State = useMemo(
    () => ({
      ...initialStateRef.current,
      ...queryFromUrl,
    }),
    [queryFromUrl],
  );

  const setState = (s: React.SetStateAction<State>) => {
    const newQuery = typeof s === 'function' ? s(targetQuery) : s;

    // 1. 如果 setState 后，search 没变化，就需要 update 来触发一次更新。比如 demo1 直接点击 clear，就需要 update 来触发更新。
    // 2. update 和 history 的更新会合并，不会造成多次更新
    update();
    if (history) {
      history[navigateMode](
        {
          hash: location.hash,
          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
        },
        location.state,
      );
    }
    if (navigate) {
      navigate(
        {
          hash: location.hash,
          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
        },
        {
          replace: navigateMode === 'replace',
          state: location.state,
        },
      );
    }
  };

  return [targetQuery, useMemoizedFn(setState)] as const;
};

export default useUrlState;

1	import { useMemoizedFn, useUpdate } from 'ahooks';	×
2	import { parse, stringify } from 'query-string';	×
3	import type { ParseOptions, StringifyOptions } from 'query-string';
4	import { useMemo, useRef } from 'react';	×
5	import type * as React from 'react';
6	import * as tmp from 'react-router';	×
7
8	// ignore waring `"export 'useNavigate' (imported as 'rc') was not found in 'react-router'`
9	const rc = tmp as any;	×
10
11	export interface Options {
12	navigateMode?: 'push' \| 'replace';
13	parseOptions?: ParseOptions;
14	stringifyOptions?: StringifyOptions;
15	}
16
17	const baseParseConfig: ParseOptions = {	×
18	parseNumbers: false,
19	parseBooleans: false,
20	};
21
22	const baseStringifyConfig: StringifyOptions = {	×
23	skipNull: false,
24	skipEmptyString: false,
25	};
26
27	type UrlState = Record<string, any>;
28
29	const useUrlState = <S extends UrlState = UrlState>(	×
30	initialState?: S \| (() => S),
31	options?: Options,
32	) => {
33	type State = Partial<{ [key in keyof S]: any }>;
34	const { navigateMode = 'push', parseOptions, stringifyOptions } = options \|\| {};	×
35
36	const mergedParseOptions = { ...baseParseConfig, ...parseOptions };	×
37	const mergedStringifyOptions = { ...baseStringifyConfig, ...stringifyOptions };	×
38
39	const location = rc.useLocation();	×
40
41	// react-router v5
42	const history = rc.useHistory?.();	×
43	// react-router v6
44	const navigate = rc.useNavigate?.();	×
45
46	const update = useUpdate();	×
47
48	const initialStateRef = useRef(	×
49	typeof initialState === 'function' ? (initialState as () => S)() : initialState \|\| {},	×
50	);
51
52	const queryFromUrl = useMemo(() => {	×
53	return parse(location.search, mergedParseOptions);	×
54	}, [location.search]);
55
56	const targetQuery: State = useMemo(	×
57	() => ({	×
58	...initialStateRef.current,
59	...queryFromUrl,
60	}),
61	[queryFromUrl],
62	);
63
64	const setState = (s: React.SetStateAction<State>) => {	×
65	const newQuery = typeof s === 'function' ? s(targetQuery) : s;	×
66
67	// 1. 如果 setState 后，search 没变化，就需要 update 来触发一次更新。比如 demo1 直接点击 clear，就需要 update 来触发更新。
68	// 2. update 和 history 的更新会合并，不会造成多次更新
69	update();	×
70	if (history) {	×
71	history[navigateMode](	×
72	{
73	hash: location.hash,
74	search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) \|\| '?',	×
75	},
76	location.state,
77	);
78	}
79	if (navigate) {	×
80	navigate(	×
81	{
82	hash: location.hash,
83	search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) \|\| '?',	×
84	},
85	{
86	replace: navigateMode === 'replace',
87	state: location.state,
88	},
89	);
90	}
91	};
92
93	return [targetQuery, useMemoizedFn(setState)] as const;	×
94	};
95
96	export default useUrlState;	×

alibaba / hooks / #31

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous