#210

Committed 08 Oct 2024 07:26AM CUT coverage: 93.734% (-0.09%) from 93.826%

Build # #210

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #554 from alovajs/changeset-release/main

ci: release

Run Details

1608 of 1761 branches covered (91.31%)

Branch coverage included in aggregate %.

9537 of 10129 relevant lines covered (94.16%)

60.43 hits per line

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

85.42

/packages/vue-options/src/stateHook.ts

import { isObject } from '@alova/shared/function';
import { ObjectCls, trueValue } from '@alova/shared/vars';
import { StatesHook } from 'alova';
import { VueOptionExportType } from '~/typings';

const on = (component: any, lifecycle: 'um' | 'm', handler: () => void) => {
  const { $, $options } = component;
  let eventHandlers = [];
  /* c8 ignore start */
  if ($) {
    // vue3，它将在npm run test:vue3中测试到
    // um为生命周期unmounted，它保存在了$中
    // m为生命周期mounted，它保存在了$中
    // 动态注入生命周期函数，组件卸载时移除对应状态
    eventHandlers = $[lifecycle] = $[lifecycle] || [];
  } /* c8 ignore stop */ else {
    const lifecycleVue2 = {
      um: 'destroyed',
      m: 'mounted'
    }[lifecycle];
    // vue2中销毁事件名为destroyed，生命周期保存在了$options中
    // vue2中mounted事件名为mounted，生命周期保存在了$options中
    const lifecycleContext = ObjectCls.getPrototypeOf($options);
    eventHandlers = lifecycleContext[lifecycleVue2] = lifecycleContext[lifecycleVue2] || [];
  }
  eventHandlers.push(handler);
};

export default {
  name: 'VueOption',
  create: (data, key) => ({ value: data, key, type: 's' }),

  // 解释：在computed中一般会依赖states，因此必须访问组件上的states才能实现依赖追踪
  dehydrate: (_, key, { component, dataKey }) => component[dataKey][key],
  update: (newValue, _, key, { component, dataKey }) => {
    component[dataKey][key] = newValue;
  },
  effectRequest({ handler, removeStates, immediate, watchingStates }, referingObject) {
    // 需要异步执行，在mapAlovaHook中对config注入component和dataKey
    setTimeout(() => {
      const { component, dataKey } = referingObject;
      on(component, 'um', removeStates);
      immediate && handler();
      let timer: NodeJS.Timeout | void;
      (watchingStates || []).forEach((state, i) => {
        component.$watch(
          // watchingStates 可能来自请求策略hooks，此时接收到的是state或computed
          isObject(state) ? `${dataKey}.${(state as any).key}` : state,
          () => {
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
              handler(i);
              timer = undefined;
            });
          },
          { deep: trueValue }
        );
      });
    });
  },
  computed: (getter, _, key) => ({
    value: getter,
    key,
    type: 'c'
  }),
  watch: (states, callback, { component }) => {
    (states || []).forEach(state => {
      component.$watch(state, callback, { deep: trueValue });
    });
  },
  onMounted: (callback, { component }) => {
    on(component, 'm', callback);
  },
  onUnmounted: (callback, { component }) => {
    on(component, 'm', callback);
  }
} as StatesHook<VueOptionExportType<unknown>>;

1	import { isObject } from '@alova/shared/function';	1✔
2	import { ObjectCls, trueValue } from '@alova/shared/vars';	1✔
3	import { StatesHook } from 'alova';	1✔
4	import { VueOptionExportType } from '~/typings';	1✔
5		1✔
6	const on = (component: any, lifecycle: 'um' \| 'm', handler: () => void) => {	1✔
7	const { $, $options } = component;	11✔
8	let eventHandlers = [];	11✔
9	/* c8 ignore start */	1✔
10	if ($) {	1✔
11	// vue3，它将在npm run test:vue3中测试到	1✔
12	// um为生命周期unmounted，它保存在了$中	1✔
13	// m为生命周期mounted，它保存在了$中	1✔
14	// 动态注入生命周期函数，组件卸载时移除对应状态	1✔
15	eventHandlers = $[lifecycle] = $[lifecycle] \|\| [];	1✔
16	} /* c8 ignore stop */ else {	1✔
17	const lifecycleVue2 = {	×
18	um: 'destroyed',	×
19	m: 'mounted'	×
20	}[lifecycle];	×
21	// vue2中销毁事件名为destroyed，生命周期保存在了$options中	×
22	// vue2中mounted事件名为mounted，生命周期保存在了$options中	×
23	const lifecycleContext = ObjectCls.getPrototypeOf($options);	×
24	eventHandlers = lifecycleContext[lifecycleVue2] = lifecycleContext[lifecycleVue2] \|\| [];	×
25	}	×
26	eventHandlers.push(handler);	11✔
27	};	11✔
28		1✔
29	export default {	1✔
30	name: 'VueOption',	1✔
31	create: (data, key) => ({ value: data, key, type: 's' }),	1✔
32		1✔
33	// 解释：在computed中一般会依赖states，因此必须访问组件上的states才能实现依赖追踪	1✔
34	dehydrate: (_, key, { component, dataKey }) => component[dataKey][key],	1✔
35	update: (newValue, _, key, { component, dataKey }) => {	1✔
36	component[dataKey][key] = newValue;	41✔
37	},	1✔
38	effectRequest({ handler, removeStates, immediate, watchingStates }, referingObject) {	1✔
39	// 需要异步执行，在mapAlovaHook中对config注入component和dataKey	11✔
40	setTimeout(() => {	11✔
41	const { component, dataKey } = referingObject;	11✔
42	on(component, 'um', removeStates);	11✔
43	immediate && handler();	11✔
44	let timer: NodeJS.Timeout \| void;	11✔
45	(watchingStates \|\| []).forEach((state, i) => {	11✔
46	component.$watch(	8✔
47	// watchingStates 可能来自请求策略hooks，此时接收到的是state或computed	8✔
48	isObject(state) ? `${dataKey}.${(state as any).key}` : state,	8✔
49	() => {	8✔
50	timer && clearTimeout(timer);	9✔
51	timer = setTimeout(() => {	9✔
52	handler(i);	8✔
53	timer = undefined;	8✔
54	});	9✔
55	},	8✔
56	{ deep: trueValue }	8✔
57	);	8✔
58	});	11✔
59	});	11✔
60	},	1✔
61	computed: (getter, _, key) => ({	1✔
62	value: getter,	2✔
63	key,	2✔
64	type: 'c'	2✔
65	}),	1✔
66	watch: (states, callback, { component }) => {	1✔
67	(states \|\| []).forEach(state => {	1!
68	component.$watch(state, callback, { deep: trueValue });	×
69	});	1✔
70	},	1✔
71	onMounted: (callback, { component }) => {	1✔
72	on(component, 'm', callback);	×
73	},	1✔
74	onUnmounted: (callback, { component }) => {	1✔
75	on(component, 'm', callback);	×
76	}	×
77	} as StatesHook<VueOptionExportType<unknown>>;	1✔

alovajs / alova / #210

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