@anmiles/theme-switcher 1.0.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anmiles/theme-switcher",
-	"version": "1.0.1",
+	"version": "2.0.0",
 	"description": "Theme switcher for websites",
 	"keywords": [
 		"theme",
@@ -12,60 +12,80 @@
 	"repository": "github:anmiles/theme-switcher",
 	"license": "MIT",
 	"engines": {
-		"node": ">=18.18.0"
+		"node": ">=20.19.0"
 	},
 	"main": "src/index.tsx",
 	"scripts": {
-		"build": "rimraf dist && tsc -p ./tsconfig.build.json --noEmit && webpack --env mode=development && webpack --env mode=production",
-		"lint": "eslint .",
-		"lint:fix": "npm run lint -- --fix",
+		"spellcheck": "cspell .",
+		"prebuild": "rimraf dist && tsc --noEmit",
+		"build": "npm-run-all build:*",
+		"build:development": "vite build --mode development",
+		"build:production": "vite build --mode production",
+		"lint": "eslint",
+		"lint:fix": "eslint --fix",
 		"test": "jest --verbose",
 		"test:coverage": "npm test -- --coverage",
 		"test:ci": "npm test -- --ci --coverage",
 		"test:watch": "npm test -- --watch",
 		"test:watch:coverage": "npm test -- --watch --coverage",
-		"test:report:coverage": "nyc report --nycrc-path ./coverage.config.js -t ./coverage --report-dir ./coverage",
-		"dev": "webpack serve --env mode=development --hot --open"
+		"test:report:coverage": "nyc report",
+		"dev": "vite --mode development",
+		"start": "node ./server.mjs",
+		"start:dev": "npm start development",
+		"start:prod": "npm start production"
 	},
 	"dependencies": {
-		"@anmiles/logger": "^7.0.2",
+		"@anmiles/express-tools": "^1.0.0",
+		"@anmiles/logger": "^8.0.0",
+		"express": "^5.1.0",
+		"npm-run-all": "^4.1.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
-		"@anmiles/eslint-config": "^7.1.1",
-		"@anmiles/tsconfig": "^3.0.1",
-		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-		"@stylistic/eslint-plugin": "^1.7.0",
+		"@anmiles/eslint-config": "^9.0.0",
+		"@anmiles/tsconfig": "^4.0.0",
+		"@eslint/compat": "^1.2.9",
+		"@eslint/css": "^0.8.1",
+		"@eslint/js": "^9.27.0",
+		"@eslint/json": "^0.12.0",
+		"@eslint/markdown": "^6.4.0",
+		"@stylistic/eslint-plugin": "^4.2.0",
+		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/react": "^16.0.1",
-		"@types/jest": "^29.5.12",
-		"@types/react": "^18.3.12",
-		"@types/react-dom": "^18.3.1",
-		"@typescript-eslint/eslint-plugin": "^7.3.1",
-		"@typescript-eslint/parser": "^7.3.1",
+		"@testing-library/react": "^16.3.0",
+		"@types/jest": "^29.5.14",
+		"@types/react": "^18.3.20",
+		"@types/react-dom": "^18.3.6",
+		"@typescript-eslint/eslint-plugin": "^8.32.1",
+		"@typescript-eslint/parser": "^8.32.1",
+		"@vitejs/plugin-react": "^4.4.1",
+		"cspell": "^9.0.1",
 		"css-loader": "^7.1.2",
-		"eslint": "^8.57.0",
-		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint": "^9.27.0",
+		"eslint-import-resolver-typescript": "^4.3.5",
 		"eslint-plugin-align-assignments": "^1.1.2",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-jest": "^27.9.0",
-		"eslint-plugin-jsonc": "^2.14.1",
-		"eslint-plugin-n": "^16.6.2",
-		"eslint-plugin-promise": "^6.1.1",
+		"eslint-plugin-i18next": "^6.1.1",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-jest": "^28.11.0",
+		"eslint-plugin-n": "^17.18.0",
+		"eslint-plugin-promise": "^7.2.1",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-redux": "^4.2.2",
+		"eslint-plugin-react-refresh": "^0.4.20",
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
-		"nyc": "^15.1.0",
-		"react-refresh": "^0.14.2",
-		"react-refresh-typescript": "^2.0.9",
-		"rimraf": "^5.0.5",
+		"jiti": "^2.4.2",
+		"nyc": "^17.1.0",
+		"react-refresh": "^0.17.0",
+		"react-refresh-typescript": "^2.0.10",
+		"rimraf": "^6.0.1",
 		"style-loader": "^4.0.0",
-		"ts-jest": "^29.1.2",
-		"ts-loader": "^9.5.1",
-		"typescript": "^5.4.2",
-		"webpack": "^5.96.1",
-		"webpack-cli": "^5.1.4",
-		"webpack-dev-server": "^5.1.0",
-		"webpack-merge": "^6.0.1"
+		"ts-jest": "^29.3.4",
+		"ts-loader": "^9.5.2",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5",
+		"vite-plugin-lib-inject-css": "^2.2.2"
 	}
 }

package/server.mjs

@@ -0,0 +1,11 @@
+import { startServer, stopServer } from '@anmiles/express-tools';
+import express from 'express';
+
+const mode = process.argv[2] === 'production'
+	? 'production'
+	: 'development';
+
+const app = express();
+app.use(express.static('dist'));
+app.use(express.static(`static/${mode}`));
+startServer(app, { open: true }).catch(stopServer);

package/src/__tests__/index.test.tsx

@@ -1,13 +1,13 @@
 import '@testing-library/jest-dom';
-import { act } from '@testing-library/react';
-import type App from '../components/App';
-import { ThemeSwitcherElement } from '../index';
+import { act, screen } from '@testing-library/react';
+
+import App from '../components/App';
+import { Element } from '../index';
 
 const testId = 'app-test-id';
 
-jest.mock<typeof App>('../components/App', () => function App() {
-	return <div>{ testId }</div>;
-});
+jest.mock('../components/App');
+jest.mocked(App).mockReturnValue(<div data-testid={ testId }></div>);
 
 describe('src/index', () => {
 	describe('ThemeSwitcher', () => {
@@ -16,10 +16,12 @@ describe('src/index', () => {
 			document.body.appendChild(parentNode);
 
 			act(() => {
-				new ThemeSwitcherElement({ float : 'left' }).render(parentNode);
+				new Element({ float: 'left' }).render(parentNode);
 			});
 
-			expect(parentNode.innerHTML).toEqual(`<div>${testId}</div>`);
+			const app = screen.getByTestId(testId);
+
+			expect(parentNode).toContainElement(app);
 		});
 	});
 });

package/src/__tests__/theme.test.ts

@@ -1,4 +1,4 @@
-import { isTheme, getThemeName } from '../lib/theme';
+import { getThemeName, isTheme } from '../lib/theme';
 
 describe('src/lib/theme', () => {
 	describe('isTheme', () => {

package/src/components/App.tsx

@@ -1,14 +1,16 @@
+import '../styles/style.css';
+
 import type { CSSProperties } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 
-import { UserProvider } from '../providers/userProvider';
 import { SystemProvider } from '../providers/systemProvider';
-import '../styles/style.css';
+import { UserProvider } from '../providers/userProvider';
+
 import Icon from './Icon';
 import ThemeSelector from './ThemeSelector';
 
 export interface AppProps {
-	readonly float? : CSSProperties['float'];
+	readonly float?: CSSProperties['float'];
 }
 
 export default function App({ float }: AppProps) {
@@ -42,14 +44,14 @@ export default function App({ float }: AppProps) {
 			{ !showList
 				? null
 				: (
-					<ThemeSelector
-						currentUserTheme={ userTheme }
-						onListItemClick={ (theme) => {
-							userProvider.set(theme);
-							setShowList(false);
-						} }
-					/>
-				) }
+						<ThemeSelector
+							currentUserTheme={ userTheme }
+							onListItemClick={ (theme) => {
+								userProvider.set(theme);
+								setShowList(false);
+							} }
+						/>
+					) }
 		</div>
 	);
 }

package/src/components/Icon.tsx

@@ -1,10 +1,11 @@
 import type { Theme } from '../lib/theme';
+
 import Dark from './icons/Dark';
 import Light from './icons/Light';
 import System from './icons/System';
 
 interface IconProps {
-	readonly theme : Theme | undefined;
+	readonly theme: Theme | undefined;
 }
 
 export default function Icon({ theme }: IconProps) {
@@ -13,6 +14,7 @@ export default function Icon({ theme }: IconProps) {
 			return <Light />;
 		case 'dark':
 			return <Dark />;
+		case undefined:
 		default:
 			return <System />;
 	}

package/src/components/ThemeSelector.tsx

@@ -1,11 +1,12 @@
 import type { Theme } from '../lib/theme';
 import { getThemeName, themes } from '../lib/theme';
+
 import Icon from './Icon';
 import Checked from './icons/Checked';
 
 interface ThemeSelectorProps {
-	readonly currentUserTheme : Theme | undefined;
-	readonly onListItemClick  : (theme: Theme | undefined) => void;
+	readonly currentUserTheme: Theme | undefined;
+	readonly onListItemClick: (theme: Theme | undefined)=> void;
 }
 
 export default function ThemeSelector({ currentUserTheme, onListItemClick }: ThemeSelectorProps) {

package/src/components/__tests__/App.test.tsx

@@ -1,65 +1,64 @@
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import type { UserProvider } from '../../providers/userProvider';
-import type { SystemProvider } from '../../providers/systemProvider';
-import type { AppProps } from '../App';
-import App from '../App';
-import { EventEmitter } from '../../lib/eventEmitter';
-import type { Theme } from '../../lib/theme';
 import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
-jest.mock('../icons/Checked.tsx', () => function Checked() {
-	return '{checked}';
-});
-
-jest.mock('../icons/Dark.tsx', () => function Dark() {
-	return '{dark}';
-});
+import { EventEmitter } from '../../lib/eventEmitter';
+import type { Theme } from '../../lib/theme';
+import { SystemProvider } from '../../providers/systemProvider';
+import { UserProvider } from '../../providers/userProvider';
+import type { AppProps } from '../App';
+import App from '../App';
+import Checked from '../icons/Checked';
+import Dark from '../icons/Dark';
+import Light from '../icons/Light';
+import System from '../icons/System';
 
-jest.mock('../icons/Light.tsx', () => function Light() {
-	return '{light}';
-});
+jest.mock('../icons/Checked');
+jest.mock('../icons/Dark');
+jest.mock('../icons/Light');
+jest.mock('../icons/System');
 
-jest.mock('../icons/System.tsx', () => function System() {
-	return '{system}';
-});
+jest.mock('../../providers/userProvider');
+jest.mock('../../providers/systemProvider');
 
 let userTheme: Theme | undefined;
 let systemTheme: Theme;
 
-const userEventEmitter   = new EventEmitter<{ change : [Theme | undefined] }>();
-const systemEventEmitter = new EventEmitter<{ change : [Theme | undefined] }>();
+function renderApp({ float }: AppProps) {
+	render(
+		<App float={ float } />,
+	);
+}
+
+const userEventEmitter   = new EventEmitter<{ change: [Theme | undefined] }>();
+const systemEventEmitter = new EventEmitter<{ change: [Theme | undefined] }>();
 
 const userProvider: Partial<InstanceType<typeof UserProvider>> = {
-	get : jest.fn().mockImplementation(() => userTheme),
+	get: jest.fn().mockImplementation(() => userTheme),
 
-	set : jest.fn().mockImplementation((theme: Theme | undefined) => {
+	set: jest.fn().mockImplementation((theme: Theme | undefined) => {
 		userEventEmitter['emit']('change', theme);
 	}),
 
-	on  : jest.fn().mockImplementation(userEventEmitter.on.bind(userEventEmitter)),
-	off : jest.fn().mockImplementation(userEventEmitter.off.bind(userEventEmitter)),
+	on : jest.fn().mockImplementation(userEventEmitter.on.bind(userEventEmitter)),
+	off: jest.fn().mockImplementation(userEventEmitter.off.bind(userEventEmitter)),
 };
 
 const systemProvider: Partial<InstanceType<typeof SystemProvider>> = {
-	get   : jest.fn().mockImplementation(() => systemTheme),
-	watch : jest.fn(),
-	on    : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
-	off   : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
+	get  : jest.fn().mockImplementation(() => systemTheme),
+	watch: jest.fn(),
+	on   : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
+	off  : jest.fn().mockImplementation(systemEventEmitter.on.bind(systemEventEmitter)),
 };
 
-jest.mock<{ UserProvider : typeof UserProvider }>('../../providers/userProvider', () => ({
-	UserProvider : jest.fn().mockImplementation(() => userProvider),
-}));
+jest.mocked(Checked).mockReturnValue(<div data-testid="mock-icon-checked" />);
+jest.mocked(Dark).mockReturnValue(<div data-testid="mock-icon-dark" />);
+jest.mocked(Light).mockReturnValue(<div data-testid="mock-icon-light" />);
+jest.mocked(System).mockReturnValue(<div data-testid="mock-icon-system" />);
 
-jest.mock<{ SystemProvider : typeof SystemProvider }>('../../providers/systemProvider', () => ({
-	SystemProvider : jest.fn().mockImplementation(() => systemProvider),
-}));
-
-function renderApp({ float }: AppProps) {
-	render(
-		<App float={ float } />,
-	);
-}
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+jest.mocked(UserProvider).mockImplementation(() => userProvider as UserProvider);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+jest.mocked(SystemProvider).mockImplementation(() => systemProvider as SystemProvider);
 
 afterEach(() => {
 	document.body.removeAttribute('data-theme');
@@ -198,7 +197,7 @@ describe('src/App', () => {
 			renderApp({});
 
 			const themeSwitcher = screen.getByTestId('theme-switcher');
-			expect(themeSwitcher.innerHTML).toEqual('{light}');
+			expect(themeSwitcher).toContainElement(screen.getByTestId('mock-icon-light'));
 		});
 
 		it('should match dark system theme if user theme is not defined', () => {
@@ -208,7 +207,7 @@ describe('src/App', () => {
 			renderApp({});
 
 			const themeSwitcher = screen.getByTestId('theme-switcher');
-			expect(themeSwitcher.innerHTML).toEqual('{dark}');
+			expect(themeSwitcher).toContainElement(screen.getByTestId('mock-icon-dark'));
 		});
 
 		it('should match light user theme despite of system theme', () => {
@@ -218,7 +217,7 @@ describe('src/App', () => {
 			renderApp({});
 
 			const themeSwitcher = screen.getByTestId('theme-switcher');
-			expect(themeSwitcher.innerHTML).toEqual('{light}');
+			expect(themeSwitcher).toContainElement(screen.getByTestId('mock-icon-light'));
 		});
 
 		it('should match dark user theme despite of system theme', () => {
@@ -228,7 +227,7 @@ describe('src/App', () => {
 			renderApp({});
 
 			const themeSwitcher = screen.getByTestId('theme-switcher');
-			expect(themeSwitcher.innerHTML).toEqual('{dark}');
+			expect(themeSwitcher).toContainElement(screen.getByTestId('mock-icon-dark'));
 		});
 	});
 
@@ -278,14 +277,14 @@ describe('src/App', () => {
 
 		describe('data-float', () => {
 			it('should be set left from float prop', () => {
-				renderApp({ float : 'left' });
+				renderApp({ float: 'left' });
 
 				const themeSwitcher = screen.getByTestId('theme-switcher');
 				expect(themeSwitcher.getAttribute('data-float')).toEqual('left');
 			});
 
 			it('should be set right from float prop', () => {
-				renderApp({ float : 'right' });
+				renderApp({ float: 'right' });
 
 				const themeSwitcher = screen.getByTestId('theme-switcher');
 				expect(themeSwitcher.getAttribute('data-float')).toEqual('right');

package/src/components/__tests__/__snapshots__/App.test.tsx.snap

@@ -5,14 +5,18 @@ exports[`src/App switcher html should match snapshot on dark system theme 1`] =
   class="themeSwitcher"
   data-testid="theme-switcher"
 >
-  {light}
+  <div
+    data-testid="mock-icon-light"
+  />
   <ul
     data-testid="theme-selector"
   >
     <li
       data-testid="theme-item-light"
     >
-      {light}
+      <div
+        data-testid="mock-icon-light"
+      />
       <span>
         Light
       </span>
@@ -20,7 +24,9 @@ exports[`src/App switcher html should match snapshot on dark system theme 1`] =
     <li
       data-testid="theme-item-dark"
     >
-      {dark}
+      <div
+        data-testid="mock-icon-dark"
+      />
       <span>
         Dark
       </span>
@@ -28,11 +34,15 @@ exports[`src/App switcher html should match snapshot on dark system theme 1`] =
     <li
       data-testid="theme-item-system"
     >
-      {system}
+      <div
+        data-testid="mock-icon-system"
+      />
       <span>
         System
       </span>
-      {checked}
+      <div
+        data-testid="mock-icon-checked"
+      />
     </li>
   </ul>
 </div>
@@ -43,14 +53,18 @@ exports[`src/App switcher html should match snapshot on dark user theme 1`] = `
   class="themeSwitcher"
   data-testid="theme-switcher"
 >
-  {dark}
+  <div
+    data-testid="mock-icon-dark"
+  />
   <ul
     data-testid="theme-selector"
   >
     <li
       data-testid="theme-item-light"
     >
-      {light}
+      <div
+        data-testid="mock-icon-light"
+      />
       <span>
         Light
       </span>
@@ -58,16 +72,22 @@ exports[`src/App switcher html should match snapshot on dark user theme 1`] = `
     <li
       data-testid="theme-item-dark"
     >
-      {dark}
+      <div
+        data-testid="mock-icon-dark"
+      />
       <span>
         Dark
       </span>
-      {checked}
+      <div
+        data-testid="mock-icon-checked"
+      />
     </li>
     <li
       data-testid="theme-item-system"
     >
-      {system}
+      <div
+        data-testid="mock-icon-system"
+      />
       <span>
         System
       </span>
@@ -81,14 +101,18 @@ exports[`src/App switcher html should match snapshot on light system theme 1`] =
   class="themeSwitcher"
   data-testid="theme-switcher"
 >
-  {light}
+  <div
+    data-testid="mock-icon-light"
+  />
   <ul
     data-testid="theme-selector"
   >
     <li
       data-testid="theme-item-light"
     >
-      {light}
+      <div
+        data-testid="mock-icon-light"
+      />
       <span>
         Light
       </span>
@@ -96,7 +120,9 @@ exports[`src/App switcher html should match snapshot on light system theme 1`] =
     <li
       data-testid="theme-item-dark"
     >
-      {dark}
+      <div
+        data-testid="mock-icon-dark"
+      />
       <span>
         Dark
       </span>
@@ -104,11 +130,15 @@ exports[`src/App switcher html should match snapshot on light system theme 1`] =
     <li
       data-testid="theme-item-system"
     >
-      {system}
+      <div
+        data-testid="mock-icon-system"
+      />
       <span>
         System
       </span>
-      {checked}
+      <div
+        data-testid="mock-icon-checked"
+      />
     </li>
   </ul>
 </div>
@@ -119,23 +149,31 @@ exports[`src/App switcher html should match snapshot on light user theme 1`] = `
   class="themeSwitcher"
   data-testid="theme-switcher"
 >
-  {light}
+  <div
+    data-testid="mock-icon-light"
+  />
   <ul
     data-testid="theme-selector"
   >
     <li
       data-testid="theme-item-light"
     >
-      {light}
+      <div
+        data-testid="mock-icon-light"
+      />
       <span>
         Light
       </span>
-      {checked}
+      <div
+        data-testid="mock-icon-checked"
+      />
     </li>
     <li
       data-testid="theme-item-dark"
     >
-      {dark}
+      <div
+        data-testid="mock-icon-dark"
+      />
       <span>
         Dark
       </span>
@@ -143,7 +181,9 @@ exports[`src/App switcher html should match snapshot on light user theme 1`] = `
     <li
       data-testid="theme-item-system"
     >
-      {system}
+      <div
+        data-testid="mock-icon-system"
+      />
       <span>
         System
       </span>

package/src/components/icons/Dark.tsx

@@ -8,6 +8,5 @@ export default function Dark() {
 			<circle cx="50" cy="50" r="46" strokeDasharray="180" transform="rotate(22.5 50 50)" />
 			<circle cx="75" cy="25" r="46" strokeDasharray="108 200" transform="rotate(67.5 75 25)" />
 		</svg>
-
 	);
 }

package/src/index.tsx

@@ -1,9 +1,10 @@
-import { StrictMode  } from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+
 import type { AppProps } from './components/App';
 import App from './components/App';
 
-class ThemeSwitcherElement {
+export class Element {
 	constructor(private readonly props: AppProps) {}
 
 	public render(parentNode: HTMLElement) {
@@ -17,4 +18,4 @@ class ThemeSwitcherElement {
 	}
 }
 
-export { ThemeSwitcherElement, App as ThemeSwitcher };
+export { App as ThemeSwitcher };