refactor: заменить shiki на самописный highlighter и обновить архитектуру
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml - CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts - Превью переработано: React-приложение вместо инлайн HTML - Добавлен футер с названием пакета и ссылкой на репозиторий - Исправлена загрузка dev-data.js для Vite 8 - Футер прижат к низу, содержимое центрировано
This commit is contained in:
40
preview/src/infrastructure/theme/hooks/use-theme.hook.ts
Normal file
40
preview/src/infrastructure/theme/hooks/use-theme.hook.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import type { Theme } from '../types/theme.type'
|
||||
|
||||
const getSystemTheme = (): Theme => {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
/**
|
||||
* Управляет темой приложения: авто-определение по системе + ручное переключение.
|
||||
*/
|
||||
export const useTheme = () => {
|
||||
const [theme, setTheme] = useState<Theme>(getSystemTheme)
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
setTheme((prev) => {
|
||||
const next: Theme = prev === 'dark' ? 'light' : 'dark'
|
||||
document.documentElement.dataset.theme = next
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// Устанавливаем data-theme при инициализации, чтобы CSS-селекторы
|
||||
// (включая подсветку кода) работали сразу, а не только после ручного переключения.
|
||||
document.documentElement.dataset.theme = getSystemTheme()
|
||||
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
const handleChange = (): void => {
|
||||
const next = getSystemTheme()
|
||||
document.documentElement.dataset.theme = next
|
||||
setTheme(next)
|
||||
}
|
||||
|
||||
mediaQuery.addEventListener('change', handleChange)
|
||||
return () => mediaQuery.removeEventListener('change', handleChange)
|
||||
}, [])
|
||||
|
||||
return { theme, toggle }
|
||||
}
|
||||
2
preview/src/infrastructure/theme/index.ts
Normal file
2
preview/src/infrastructure/theme/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { useTheme } from './hooks/use-theme.hook'
|
||||
export type { Theme } from './types/theme.type'
|
||||
2
preview/src/infrastructure/theme/styles/theme.module.css
Normal file
2
preview/src/infrastructure/theme/styles/theme.module.css
Normal file
@@ -0,0 +1,2 @@
|
||||
.root {
|
||||
}
|
||||
4
preview/src/infrastructure/theme/theme.infra.tsx
Normal file
4
preview/src/infrastructure/theme/theme.infra.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
/**
|
||||
* Theme infrastructure module — реэкспортирует хук.
|
||||
* Компонент не требуется, тема управляется через data-theme на documentElement.
|
||||
*/
|
||||
11
preview/src/infrastructure/theme/types/theme.type.ts
Normal file
11
preview/src/infrastructure/theme/types/theme.type.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Тема приложения.
|
||||
*/
|
||||
export type Theme = 'light' | 'dark'
|
||||
|
||||
/**
|
||||
* Параметры Theme.
|
||||
*/
|
||||
export type ThemeParams = {}
|
||||
|
||||
export type ThemeProps = ThemeParams
|
||||
Reference in New Issue
Block a user