@anmiles/theme-switcher 1.0.2 → 2.0.0

package/src/lib/__tests__/eventEmitter.test.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../eventEmitter';
 
 describe('src/lib/eventEmitter', () => {
-	const data = { key : 'value' };
+	const data = { key: 'value' };
 
 	const changeListener1 = jest.fn();
 	const changeListener2 = jest.fn();
@@ -23,8 +23,8 @@ describe('src/lib/eventEmitter', () => {
 
 	it('should register added listeners', () => {
 		const expectedListeners = {
-			change : [ changeListener1, changeListener2 ],
-			delete : [ deleteListener1, deleteListener2 ],
+			change: [ changeListener1, changeListener2 ],
+			delete: [ deleteListener1, deleteListener2 ],
 		};
 
 		expect(eventEmitter['listeners']).toEqual(expectedListeners);
@@ -93,7 +93,7 @@ describe('src/lib/eventEmitter', () => {
 	it('should work correctly in derived class', () => {
 		const spy = jest.fn();
 
-		class EventEmitterChild extends EventEmitter<{ myEvent : [{ id : number }, string] }> {
+		class EventEmitterChild extends EventEmitter<{ myEvent: [{ id: number }, string] }> {
 		}
 
 		const instance = new EventEmitterChild();
@@ -102,8 +102,8 @@ describe('src/lib/eventEmitter', () => {
 			spy(...data);
 		});
 
-		instance['emit']('myEvent', { id : 1 }, 'something');
+		instance['emit']('myEvent', { id: 1 }, 'something');
 
-		expect(spy).toHaveBeenCalledWith({ id : 1 }, 'something');
+		expect(spy).toHaveBeenCalledWith({ id: 1 }, 'something');
 	});
 });

package/src/lib/eventEmitter.ts

@@ -1,11 +1,11 @@
-class EventEmitter<TEventMap extends Record<string, Array<unknown>>> {
-	private readonly listeners : {
-		[TEvent in keyof TEventMap]?: Array<(...data: TEventMap[TEvent]) => void>
+export class EventEmitter<TEventMap extends Record<string, Array<unknown>>> {
+	private readonly listeners: {
+		[TEvent in keyof TEventMap]?: Array<(...data: TEventMap[TEvent])=> void>
 	} = {};
 
 	public on<TEvent extends keyof TEventMap>(
 		event: TEvent,
-		listener: (...data: TEventMap[TEvent]) => void,
+		listener: (...data: TEventMap[TEvent])=> void,
 	): void {
 		const listeners = this.listeners[event] ??= [];
 		listeners.push(listener);
@@ -13,7 +13,7 @@ class EventEmitter<TEventMap extends Record<string, Array<unknown>>> {
 
 	public off<TEvent extends keyof TEventMap>(
 		event: TEvent,
-		listener: (...data: TEventMap[TEvent]) => void,
+		listener: (...data: TEventMap[TEvent])=> void,
 	): void {
 		const listeners = this.listeners[event] ??= [];
 		listeners.splice(listeners.indexOf(listener), 1);
@@ -28,5 +28,3 @@ class EventEmitter<TEventMap extends Record<string, Array<unknown>>> {
 		});
 	}
 }
-
-export { EventEmitter };

package/src/lib/theme.ts

@@ -1,21 +1,19 @@
-const themes = [ 'light', 'dark' ] as const;
-type Theme = typeof themes[number];
-const defaultTheme: Theme = 'light';
+export const themes = [ 'light', 'dark' ] as const;
+export type Theme = typeof themes[number];
+export const defaultTheme: Theme = 'light';
 
-function isTheme(arg: unknown): arg is Theme {
-	return typeof arg === 'string' && themes.includes(arg as Theme);
+export function isTheme(arg: unknown): arg is Theme {
+	return typeof arg === 'string' && themes.map(String).includes(arg);
 }
 
-function getThemeName(theme: Theme | undefined): string {
+export function getThemeName(theme: Theme | undefined): string {
 	switch (theme) {
 		case 'light':
 			return 'Light';
 		case 'dark':
 			return 'Dark';
+		case undefined:
 		default:
 			return 'System';
 	}
 }
-
-export type { Theme };
-export { themes, defaultTheme, isTheme, getThemeName };

package/src/providers/__tests__/systemProvider.test.ts

@@ -6,29 +6,29 @@ import { SystemProvider } from '../systemProvider';
 let systemProvider: SystemProvider;
 const changeSpy = jest.fn();
 
-class MediaQueryListEvents extends EventEmitter<{ change : [Partial<MediaQueryListEvent>] }> {}
+class MediaQueryListEvents extends EventEmitter<{ change: [Partial<MediaQueryListEvent>] }> {}
 
 const mediaQueryListEvents: Record<Theme, InstanceType<typeof MediaQueryListEvents>> = {
-	light : new MediaQueryListEvents(),
-	dark  : new MediaQueryListEvents(),
+	light: new MediaQueryListEvents(),
+	dark : new MediaQueryListEvents(),
 };
 
 let systemPreference: Theme | undefined;
 
 beforeEach(() => {
-	window.localStorage.clear();
+	localStorage.clear();
 	systemProvider = new SystemProvider();
 	systemProvider.on('change', changeSpy);
 	systemPreference = undefined;
 
 	window.matchMedia = jest.fn().mockImplementation((query: string): Partial<MediaQueryList> => {
-		const parsedTheme = /\(prefers-color-scheme: (.*)\)/.exec(query)?.[1] as Theme;
+		const parsedTheme = /\(prefers-color-scheme: (.*)\)/.exec(query)?.[1] as Theme; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
 
 		return {
-			matches          : parsedTheme === systemPreference,
-			addEventListener : (
+			matches         : parsedTheme === systemPreference,
+			addEventListener: (
 				event: keyof MediaQueryListEventMap,
-				listener: (ev: Partial<MediaQueryListEvent>) => void,
+				listener: (ev: Partial<MediaQueryListEvent>)=> void,
 			) => {
 				mediaQueryListEvents[parsedTheme].on(event, listener);
 			},
@@ -64,37 +64,37 @@ describe('src/providers/systemProvider', () => {
 			// @ts-expect-error window always has matchMedia
 			delete window.matchMedia;
 			systemProvider.watch();
-			mediaQueryListEvents.light['emit']('change', { matches : true });
-			mediaQueryListEvents.dark['emit']('change', { matches : true });
+			mediaQueryListEvents.light['emit']('change', { matches: true });
+			mediaQueryListEvents.dark['emit']('change', { matches: true });
 
 			expect(changeSpy).not.toHaveBeenCalled();
 		});
 
 		it('should never emit change events if not called', () => {
-			mediaQueryListEvents.light['emit']('change', { matches : true });
-			mediaQueryListEvents.dark['emit']('change', { matches : true });
+			mediaQueryListEvents.light['emit']('change', { matches: true });
+			mediaQueryListEvents.dark['emit']('change', { matches: true });
 
 			expect(changeSpy).not.toHaveBeenCalled();
 		});
 
 		it('should emit change event on mediaQueryList change for light theme with match', () => {
 			systemProvider.watch();
-			mediaQueryListEvents.light['emit']('change', { matches : true });
+			mediaQueryListEvents.light['emit']('change', { matches: true });
 
 			expect(changeSpy).toHaveBeenCalledWith('light');
 		});
 
 		it('should emit change event on mediaQueryList change for dark theme with match', () => {
 			systemProvider.watch();
-			mediaQueryListEvents.dark['emit']('change', { matches : true });
+			mediaQueryListEvents.dark['emit']('change', { matches: true });
 
 			expect(changeSpy).toHaveBeenCalledWith('dark');
 		});
 
 		it('should not emit change event on mediaQueryList changes with no match', () => {
 			systemProvider.watch();
-			mediaQueryListEvents.light['emit']('change', { matches : false });
-			mediaQueryListEvents.dark['emit']('change', { matches : false });
+			mediaQueryListEvents.light['emit']('change', { matches: false });
+			mediaQueryListEvents.dark['emit']('change', { matches: false });
 
 			expect(changeSpy).not.toHaveBeenCalled();
 		});

package/src/providers/__tests__/userProvider.test.ts

@@ -5,7 +5,7 @@ const changeSpy  = jest.fn();
 let userProvider: UserProvider;
 
 beforeEach(() => {
-	window.localStorage.clear();
+	localStorage.clear();
 	userProvider = new UserProvider();
 	userProvider.on('change', changeSpy);
 });
@@ -13,19 +13,19 @@ beforeEach(() => {
 describe('src/providers/userProvider', () => {
 	describe('get', () => {
 		it('should return light theme if set in localStorage', () => {
-			window.localStorage.setItem(storageKey, 'light');
+			localStorage.setItem(storageKey, 'light');
 
 			expect(userProvider.get()).toEqual('light');
 		});
 
 		it('should return dark theme if set in localStorage', () => {
-			window.localStorage.setItem(storageKey, 'dark');
+			localStorage.setItem(storageKey, 'dark');
 
 			expect(userProvider.get()).toEqual('dark');
 		});
 
 		it('should return undefined if unknown string set in localStorage', () => {
-			window.localStorage.setItem(storageKey, 'unknown');
+			localStorage.setItem(storageKey, 'unknown');
 
 			expect(userProvider.get()).toEqual(undefined);
 		});

package/src/providers/systemProvider.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../lib/eventEmitter';
 import { defaultTheme, themes } from '../lib/theme';
 import type { Theme } from '../lib/theme';
 
-class SystemProvider extends EventEmitter<{ change : [Theme] }> {
+export class SystemProvider extends EventEmitter<{ change: [Theme] }> {
 
 	public get(): Theme {
 		if (!('matchMedia' in window)) {
@@ -36,5 +36,3 @@ class SystemProvider extends EventEmitter<{ change : [Theme] }> {
 		}
 	}
 }
-
-export { SystemProvider };

package/src/providers/userProvider.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../lib/eventEmitter';
 import { isTheme  } from '../lib/theme';
 import type { Theme } from '../lib/theme';
 
-class UserProvider extends EventEmitter<{ change : [Theme | undefined] }> {
+export class UserProvider extends EventEmitter<{ change: [Theme | undefined] }> {
 	private readonly storageKey = 'theme';
 
 	public get(): Theme | undefined {
@@ -20,5 +20,3 @@ class UserProvider extends EventEmitter<{ change : [Theme | undefined] }> {
 		this.emit('change', theme);
 	}
 }
-
-export { UserProvider };

package/static/development/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Theme switcher</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://dev.anmiles.net/index.css" type="text/css">
+	<link rel="icon" href="https://dev.anmiles.net/favicon.ico" type="image/x-icon">
+	<style type="text/css">
+		.theme {
+			cursor: pointer;
+			float: right;
+		}
+	</style>
+</head>
+<body>
+
+<div class="top">
+	<div class="theme"></div>
+</div>
+
+<div class="box">
+
+	<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward. Danger nearer length oppose really add now either. But ask regret eat branch fat garden. Become am he except wishes. Past so at door we walk want such sang. Feeling colonel get her garrets own.</p>
+
+	<p>Boisterous he on understood attachment as entreaties ye devonshire. In mile an form snug were been sell. Hastened admitted joy nor absolute gay its. Extremely ham any his departure for contained curiosity defective. Way now instrument had eat diminution melancholy expression sentiments stimulated. One built fat you out manor books. Mrs interested now his affronting inquietude contrasted cultivated. Lasting showing expense greater on colonel no.</p>
+
+	<p>Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.</p>
+
+</div>
+
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-18.3.1.js"></script>
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-dom-18.3.1.js"></script>
+<script type="text/javascript" src="./theme-switcher-1.0.2.js"></script>
+<script type="text/javascript">
+	new ThemeSwitcher.Element({ float: 'right' }).render(document.querySelector('.theme'));
+</script>
+
+</body>
+</html>

package/static/production/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Theme switcher</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://dev.anmiles.net/index.css" type="text/css">
+	<link rel="icon" href="https://dev.anmiles.net/favicon.ico" type="image/x-icon">
+	<style type="text/css">
+		.theme {
+			cursor: pointer;
+			float: right;
+		}
+	</style>
+</head>
+<body>
+
+<div class="top">
+	<div class="theme"></div>
+</div>
+
+<div class="box">
+
+	<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward. Danger nearer length oppose really add now either. But ask regret eat branch fat garden. Become am he except wishes. Past so at door we walk want such sang. Feeling colonel get her garrets own.</p>
+
+	<p>Boisterous he on understood attachment as entreaties ye devonshire. In mile an form snug were been sell. Hastened admitted joy nor absolute gay its. Extremely ham any his departure for contained curiosity defective. Way now instrument had eat diminution melancholy expression sentiments stimulated. One built fat you out manor books. Mrs interested now his affronting inquietude contrasted cultivated. Lasting showing expense greater on colonel no.</p>
+
+	<p>Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.</p>
+
+</div>
+
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-18.3.1.min.js"></script>
+<script type="text/javascript" src="https://dev.anmiles.net/libs/react-dom-18.3.1.min.js"></script>
+<script type="text/javascript" src="./theme-switcher-1.0.2.min.js"></script>
+<script type="text/javascript">
+	new ThemeSwitcher.Element({ float: 'right' }).render(document.querySelector('.theme'));
+</script>
+
+</body>
+</html>

package/tsconfig.json

@@ -1,16 +1,12 @@
 {
-	"extends" : "./node_modules/@anmiles/tsconfig/tsconfig.json",
-
-	"compilerOptions" : {
-		"rootDir" : "./src",
-		"outDir" : "./dist",
-		"jsx" : "react-jsx",
-		"sourceMap" : false,
-		"declaration" : false,
-		"declarationMap" : false
-	},
+	"extends" : "./node_modules/@anmiles/tsconfig/tsconfig.client.json",
 
 	"include" : [
-		"src"
+		"src",
+		"vite.config.mts",
 	],
+
+	"compilerOptions" : {
+		"types" : [ "vite/client" ],
+	},
 }

package/tsconfig.test.json

@@ -2,6 +2,6 @@
 	"extends" : "./tsconfig.json",
 
 	"compilerOptions" : {
-		"sourceMap" : true,
+		"isolatedModules" : true,
 	},
 }

package/vite.config.mts

@@ -0,0 +1,54 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+
+import { version } from './package.json';
+
+export default defineConfig(({ mode }) => {
+	const isProduction = mode === 'production';
+
+	return {
+		plugins: [
+			react(),
+			libInjectCss(),
+		],
+		resolve: {
+			extensions: [
+				'.js', '.mjs', '.cjs',
+				'.ts', '.cts', '.mts',
+				'.jsx', '.tsx', '.json',
+			],
+		},
+		server: {
+			open: true,
+		},
+		build: {
+			lib: {
+				entry   : 'src/index.tsx',
+				name    : 'ThemeSwitcher',
+				fileName: () =>
+					isProduction
+						? `theme-switcher-${version}.min.js`
+						: `theme-switcher-${version}.js`,
+				formats: [ 'iife' ],
+			},
+			rollupOptions: {
+				external: [
+					'react',
+					'react-dom',
+				],
+				output: {
+					globals: {
+						'react'    : 'React',
+						'react-dom': 'ReactDOM',
+					},
+				},
+			},
+			minify     : isProduction ? 'esbuild' : false,
+			emptyOutDir: false,
+		},
+		define: {
+			'process.env.NODE_ENV': JSON.stringify(process.env['NODE_ENV'] || 'development'),
+		},
+	};
+});

package/.eslintignore

@@ -1,2 +0,0 @@
-coverage
-dist

package/.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-	root : true,
-
-	extends : [
-		'./node_modules/@anmiles/eslint-config/src/base.preset.js',
-		'./node_modules/@anmiles/eslint-config/src/ts.preset.js',
-		'./node_modules/@anmiles/eslint-config/src/jest.preset.js',
-		'./node_modules/@anmiles/eslint-config/src/react.preset.js',
-	],
-};

package/.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-	"cSpell.words": [
-		"anmiles",
-		"nycrc"
-	]
-}

package/coverage.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-	'check-coverage' : true,
-	'statements'     : 100,
-	'branches'       : 100,
-	'lines'          : 100,
-	'functions'      : 100,
-	'reporter'       : [ 'html', 'text' ],
-};

package/dev/index.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Debug</title>
-	<meta charset="utf-8">
-	<link rel="stylesheet" href="https://dev.anmiles.net/index.css" type="text/css">
-	<link rel="icon" href="https://dev.anmiles.net/favicon.ico" type="image/x-icon">
-	<style type="text/css">
-		.theme {
-			cursor: pointer;
-			float: right;
-		}
-	</style>
-</head>
-<body>
-
-<div class="top">
-	<div class="theme"></div>
-</div>
-
-<div class="box">
-
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper pretium nunc vel fermentum. Morbi egestas dictum maximus. Sed convallis vulputate nibh nec elementum. Nunc maximus posuere ipsum sit amet sollicitudin. In ullamcorper sagittis neque non tristique. Phasellus ac purus sit amet enim cursus aliquet et quis enim. Suspendisse sit amet tincidunt ante, at interdum tellus. Proin mauris nulla, porttitor a neque nec, lacinia tristique turpis. Aenean ac commodo turpis.</p>
-
-	<p>Nulla consectetur magna eget felis dignissim, ut pellentesque libero venenatis. Suspendisse tempus blandit dui, ut volutpat nisl. Nam laoreet sit amet dui eu pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi blandit, volutpat sem sed, placerat eros. Duis dignissim id velit eu placerat. Sed a magna efficitur diam ultrices pulvinar. Suspendisse placerat massa orci. Ut a facilisis nisi. Morbi imperdiet neque id orci luctus facilisis. Suspendisse sit amet consectetur tortor, a elementum ipsum.</p>
-
-</div>
-
-<script type="text/javascript" src="https://dev.anmiles.net/libs/react-18.3.1.js"></script>
-<script type="text/javascript" src="https://dev.anmiles.net/libs/react-dom-18.3.1.js"></script>
-<script type="text/javascript" src="./theme-switcher-1.0.2.js"></script>
-<script type="text/javascript">new ThemeSwitcherElement({ float: 'right' }).render(document.querySelector('.theme'));</script>
-
-</body>
-</html>