6781076723

Committed 07 Nov 2023 07:02AM UTC coverage: 90.795% (+0.03%) from 90.77%

Build # 6781076723

Build Type

Pull #399

github

Committed by

alexgrozav

Commit Message

feat: add consistent type imports eslint rule

Pull Request Pull Request #399: feat: add consistent type imports eslint rule

Run Details

1288 of 1490 branches covered (0.0%)

Branch coverage included in aggregate %.

146 of 148 new or added lines in 69 files covered. (98.65%)

126 existing lines in 8 files now uncovered.

13310 of 14588 relevant lines covered (91.24%)

7.08 hits per line

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

67.02

/src/plugins/colorMode.ts

import type { Plugin} from 'vue';
import { watch } from 'vue';
import { addClass, removeClass } from '@grozav/utils';
import type { InklineService } from '@inkline/inkline/plugin';

export interface InklineColorModeOptions {
    colorMode: 'system' | 'light' | 'dark' | string;
    colorModeStrategy: 'localStorage' | null;
}

export interface InklineColorModePluginOptions {
    inkline: InklineService;
    renderMode: 'client' | 'universal';
}

/**
 * Color mode change handler
 */
export const onChangeColorMode = (colorMode: 'system' | 'light' | 'dark' | string) => {
    let color;
    if (colorMode === 'system') {
        color = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    } else {
        color = colorMode;
    }

    removeClass(document.body, 'light-theme dark-theme');
    addClass(document.body, `${color}-theme`);
};

/**
 * Color mode localStorage key
 */
export const colorModeLocalStorageKey = 'inkline-color-mode';

export const ColorModePlugin: Plugin = {
    install: (app, { inkline, renderMode }: InklineColorModePluginOptions) => {
        if (typeof window !== 'undefined') {
            /**
             * Add color mode on change handler
             */

            const onDarkModeMediaQueryChange = () => {
                if (inkline.options.colorMode === 'system') {
                    onChangeColorMode(inkline.options.colorMode);
                }
            };

            const darkModeMediaQuery: MediaQueryList = matchMedia('(prefers-color-scheme: dark)');
            if (darkModeMediaQuery.addEventListener) {
                darkModeMediaQuery.addEventListener('change', onDarkModeMediaQueryChange);
            } else {
                darkModeMediaQuery.addListener(onDarkModeMediaQueryChange);
            }

            watch(
                () => inkline.options.colorMode,
                (colorMode) => {
                    onChangeColorMode(colorMode);

                    if (inkline.options.colorModeStrategy === 'localStorage') {
                        localStorage.setItem(colorModeLocalStorageKey, colorMode);
                    }
                }
            );

            /**
             * Get preferred theme based on selected color mode
             */

            if (inkline.options.colorModeStrategy === 'localStorage' && renderMode === 'client') {
                const storedColorMode = localStorage.getItem(colorModeLocalStorageKey);
                if (storedColorMode) {
                    inkline.options.colorMode = storedColorMode;
                }
            } else {
                onChangeColorMode(inkline.options.colorMode);
            }
        }
    }
};

1	import type { Plugin} from 'vue';	1✔
2	import { watch } from 'vue';	1✔
3	import { addClass, removeClass } from '@grozav/utils';	1✔
4	import type { InklineService } from '@inkline/inkline/plugin';	1✔
5		1✔
6	export interface InklineColorModeOptions {	1✔
7	colorMode: 'system' \| 'light' \| 'dark' \| string;	1✔
8	colorModeStrategy: 'localStorage' \| null;	1✔
9	}	1✔
10		1✔
11	export interface InklineColorModePluginOptions {	1✔
12	inkline: InklineService;	1✔
13	renderMode: 'client' \| 'universal';	1✔
14	}	1✔
15		1✔
16	/**	1✔
17	* Color mode change handler	1✔
18	*/	1✔
19	export const onChangeColorMode = (colorMode: 'system' \| 'light' \| 'dark' \| string) => {	1✔
20	let color;	×
21	if (colorMode === 'system') {	×
22	color = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';	✔
23	} else {	12✔
24	color = colorMode;	12✔
25	}	12✔
26		12✔
NEW 27	removeClass(document.body, 'light-theme dark-theme');	✔
NEW 28	addClass(document.body, `${color}-theme`);	×
UNCOV 29	};	×
30		1✔
31	/**	1✔
32	* Color mode localStorage key	1✔
33	*/	1✔
34	export const colorModeLocalStorageKey = 'inkline-color-mode';	1✔
35		1✔
36	export const ColorModePlugin: Plugin = {	1✔
37	install: (app, { inkline, renderMode }: InklineColorModePluginOptions) => {	1✔
38	if (typeof window !== 'undefined') {	1!
39	/**	×
40	* Add color mode on change handler	×
41	*/	×
42		×
43	const onDarkModeMediaQueryChange = () => {	×
44	if (inkline.options.colorMode === 'system') {	×
45	onChangeColorMode(inkline.options.colorMode);	✔
46	}	2✔
47	};	1✔
48		1✔
49	const darkModeMediaQuery: MediaQueryList = matchMedia('(prefers-color-scheme: dark)');	×
50	if (darkModeMediaQuery.addEventListener) {	×
51	darkModeMediaQuery.addEventListener('change', onDarkModeMediaQueryChange);	✔
52	} else {	10✔
53	darkModeMediaQuery.addListener(onDarkModeMediaQueryChange);	✔
54	}	1✔
55		1✔
56	watch(	1✔
57	() => inkline.options.colorMode,	1✔
58	(colorMode) => {	×
59	onChangeColorMode(colorMode);	✔
60		12✔
61	if (inkline.options.colorModeStrategy === 'localStorage') {	✔
62	localStorage.setItem(colorModeLocalStorageKey, colorMode);	1✔
63	}	1✔
64	}	1✔
65	);	1✔
66		1✔
67	/**	1✔
68	* Get preferred theme based on selected color mode	1✔
69	*/	1✔
70		1✔
71	if (inkline.options.colorModeStrategy === 'localStorage' && renderMode === 'client') {	×
72	const storedColorMode = localStorage.getItem(colorModeLocalStorageKey);	×
73	if (storedColorMode) {	×
74	inkline.options.colorMode = storedColorMode;	×
75	}	×
76	} else {	×
77	onChangeColorMode(inkline.options.colorMode);	×
78	}	×
79	}	×
80	}	1✔
81	};	1✔

inkline / inkline / 6781076723

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