Perfect the type of styled-components

This commit is contained in:
timongh 2022-10-02 01:07:17 +08:00
parent 691ed33188
commit 1dbbc36d22
3 changed files with 22 additions and 21 deletions

View File

@ -1,6 +1,16 @@
import { defineComponentMetadata } from '@/components/define'
import { defineComponentMetadata, defineOptionsMetadata, OptionsOfMetadata } from '@/components/define'
import { startResolution } from './resolution'
const options = defineOptionsMetadata({
scale: {
displayName: '缩放级别',
defaultValue: 'auto',
hidden: true,
},
})
export type Options = OptionsOfMetadata<typeof options>
export const component = defineComponentMetadata({
name: 'imageResolution',
displayName: '高分辨率图片',
@ -12,11 +22,5 @@ export const component = defineComponentMetadata({
description: {
'zh-CN': '根据屏幕 DPI 请求更高分辨率的图片, 例如 DPI 缩放 200% 则请求 2 倍的分辨率, 加载时间也会相应变长一些. (也会导致某些浏览器里出现图片闪动, 因为本质上是更换了图片源)',
},
options: {
scale: {
displayName: '缩放级别',
defaultValue: 'auto',
hidden: true,
},
},
options,
})

View File

@ -1,4 +1,5 @@
import { styledComponentEntry } from '@/components/styled-component'
import { Options } from '.'
const resizeRegex = /@(\d+)[Ww]_(\d+)[Hh]/
const excludeSelectors = [
@ -59,7 +60,7 @@ export const imageResolution = async (dpi: number, element: HTMLElement) => {
replaceSource(e => e.style.backgroundImage, (e, v) => (e.style.backgroundImage = v))
})
}
export const startResolution = styledComponentEntry(() => import('./fix.scss'),
export const startResolution = styledComponentEntry<Options>(() => import('./fix.scss'),
async ({ settings }) => {
const { allMutations } = await import('@/core/observer')
const dpi = settings.options.scale === 'auto'

View File

@ -1,33 +1,31 @@
import { none } from '@/core/utils'
import { ComponentEntry, ComponentMetadata } from './component'
import { ComponentEntry, ComponentMetadata, UnknownOptions } from './component'
/**
*
* @param styleImport
* @param entry
*/
export const styledComponentEntry = (
export const styledComponentEntry = <O extends UnknownOptions>(
styleImport: () => Promise<{ default: string }>,
entry: ComponentEntry,
): ComponentEntry => (
async context => {
entry: ComponentEntry<O>,
): ComponentEntry<O> => async context => {
const { default: style } = await styleImport()
const { addStyle } = await import('@/core/style')
addStyle(style, context.metadata.name)
return entry(context)
}
)
/**
* `entry`, `reload``unload`, ,
* @param styleImport
* @param entry
*/
export const toggleStyle = (
export const toggleStyle = <O extends UnknownOptions>(
name: string,
styleImport: () => Promise<{ default: string }>,
entry: ComponentEntry = none,
): Pick<ComponentMetadata, 'name' | 'entry' | 'reload' | 'unload'> => {
entry: ComponentEntry<O> = none,
): Pick<ComponentMetadata<O>, 'name' | 'entry' | 'reload' | 'unload'> => {
let styleElement: HTMLStyleElement = null
const styleEntry = async () => {
if (styleElement) {
@ -39,9 +37,7 @@ export const toggleStyle = (
}
return {
name,
entry: context => (
styleEntry().then(() => entry(context))
),
entry: context => styleEntry().then(() => entry(context)),
reload: styleEntry,
unload: () => {
styleElement?.remove()