alibaba / hooks / #25

pending completion

Build # #25

Build Type

push

travis-pro

Committed by

web-flow

Commit Message

<a href="https://github.com/alibaba/hooks/commit/<a class=hub.com/alibaba/hooks/commit/66d531d1afb389476153ed32933bdcc033dd2c9f">66d531d1a<a href="https://github.com/alibaba/hooks/commit/66d531d1afb389476153ed32933bdcc033dd2c9f">&quot;&gt;Revert &amp;quot;refactor: Remove the unnecessary logic (#1928)&amp;quot; (#1947)

This reverts commit </a><a class="double-link" href="https://github.com/alibaba/hooks/commit/<a class="double-link" href="https://github.com/alibaba/hooks/commit/1f2c1b4a52bf13d6a0d506c73a2be6ca3f54fddb">1f2c1b4a5</a>">1f2c1b4a5</a><a href="https://github.com/alibaba/hooks/commit/66d531d1afb389476153ed32933bdcc033dd2c9f">.

Run Details

938 of 1185 branches covered (79.16%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

2442 of 2558 relevant lines covered (95.47%)

85.93 hits per line

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

80.77

/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) || '?',
      });
    }
    if (navigate) {
      navigate(
        {
          hash: location.hash,
          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
        },
        {
          replace: navigateMode === 'replace',
        },
      );
    }
  };

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

export default useUrlState;

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

alibaba / hooks / #25

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