From 1dbbc36d22abe14e1f02a0ecd49e97dc4becd51b Mon Sep 17 00:00:00 2001 From: timongh <46739861+timongh@users.noreply.github.com> Date: Sun, 2 Oct 2022 01:07:17 +0800 Subject: [PATCH] Perfect the type of styled-components --- .../utils/image-resolution/index.ts | 20 +++++++++++-------- .../utils/image-resolution/resolution.ts | 3 ++- src/components/styled-component.ts | 20 ++++++++----------- 3 files changed, 22 insertions(+), 21 deletions(-) diff --git a/registry/lib/components/utils/image-resolution/index.ts b/registry/lib/components/utils/image-resolution/index.ts index ffc4867d6..436fe23bd 100644 --- a/registry/lib/components/utils/image-resolution/index.ts +++ b/registry/lib/components/utils/image-resolution/index.ts @@ -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 + 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, }) diff --git a/registry/lib/components/utils/image-resolution/resolution.ts b/registry/lib/components/utils/image-resolution/resolution.ts index 3d8b5a7d4..2ab9e1317 100644 --- a/registry/lib/components/utils/image-resolution/resolution.ts +++ b/registry/lib/components/utils/image-resolution/resolution.ts @@ -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(() => import('./fix.scss'), async ({ settings }) => { const { allMutations } = await import('@/core/observer') const dpi = settings.options.scale === 'auto' diff --git a/src/components/styled-component.ts b/src/components/styled-component.ts index 36947ea8e..fec9c7b94 100644 --- a/src/components/styled-component.ts +++ b/src/components/styled-component.ts @@ -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 = ( styleImport: () => Promise<{ default: string }>, - entry: ComponentEntry, -): ComponentEntry => ( - async context => { + entry: ComponentEntry, +): ComponentEntry => 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 = ( name: string, styleImport: () => Promise<{ default: string }>, - entry: ComponentEntry = none, -): Pick => { + entry: ComponentEntry = none, +): Pick, '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()