perf: dynamic import dicebear avatar styles
This commit is contained in:
Kirill
@@ -1,88 +1,54 @@
|
||||
import { create as adventurerCreate, meta as adventurerMeta, schema as adventurerSchema } from '@dicebear/adventurer'
|
||||
import { create as avataaarsCreate, meta as avataaarsMeta, schema as avataaarsSchema } from '@dicebear/avataaars'
|
||||
import { create as bigEarsCreate, meta as bigEarsMeta, schema as bigEarsSchema } from '@dicebear/big-ears'
|
||||
import { create as bigSmileCreate, meta as bigSmileMeta, schema as bigSmileSchema } from '@dicebear/big-smile'
|
||||
import { create as botttsCreate, meta as botttsMeta, schema as botttsSchema } from '@dicebear/bottts'
|
||||
import { create as croodlesCreate, meta as croodlesMeta, schema as croodlesSchema } from '@dicebear/croodles'
|
||||
import { create as funEmojiCreate, meta as funEmojiMeta, schema as funEmojiSchema } from '@dicebear/fun-emoji'
|
||||
import { create as identiconCreate, meta as identiconMeta, schema as identiconSchema } from '@dicebear/identicon'
|
||||
import { create as initialsCreate, meta as initialsMeta, schema as initialsSchema } from '@dicebear/initials'
|
||||
import { create as loreleiCreate, meta as loreleiMeta, schema as loreleiSchema } from '@dicebear/lorelei'
|
||||
import { create as micahCreate, meta as micahMeta, schema as micahSchema } from '@dicebear/micah'
|
||||
import { create as notionistsCreate, meta as notionistsMeta, schema as notionistsSchema } from '@dicebear/notionists'
|
||||
import { create as pixelArtCreate, meta as pixelArtMeta, schema as pixelArtSchema } from '@dicebear/pixel-art'
|
||||
import { create as ringsCreate, meta as ringsMeta, schema as ringsSchema } from '@dicebear/rings'
|
||||
import { create as shapesCreate, meta as shapesMeta, schema as shapesSchema } from '@dicebear/shapes'
|
||||
import { create as thumbsCreate, meta as thumbsMeta, schema as thumbsSchema } from '@dicebear/thumbs'
|
||||
import type { Style } from '@dicebear/core'
|
||||
|
||||
type StyleDef = {
|
||||
id: string
|
||||
label: string
|
||||
style: Style<any>
|
||||
loader: () => Promise<{ create: any; meta: any; schema: any }>
|
||||
}
|
||||
|
||||
export const AVATAR_STYLES: StyleDef[] = [
|
||||
{ id: 'bottts', label: 'Роботы', style: { create: botttsCreate, meta: botttsMeta, schema: botttsSchema } },
|
||||
{
|
||||
id: 'identicon',
|
||||
label: 'Узоры',
|
||||
style: { create: identiconCreate, meta: identiconMeta, schema: identiconSchema },
|
||||
},
|
||||
{
|
||||
id: 'avataaars',
|
||||
label: 'Персонажи',
|
||||
style: { create: avataaarsCreate, meta: avataaarsMeta, schema: avataaarsSchema },
|
||||
},
|
||||
{
|
||||
id: 'notionists',
|
||||
label: 'Notion',
|
||||
style: { create: notionistsCreate, meta: notionistsMeta, schema: notionistsSchema },
|
||||
},
|
||||
{ id: 'thumbs', label: 'Thumbs', style: { create: thumbsCreate, meta: thumbsMeta, schema: thumbsSchema } },
|
||||
{ id: 'lorelei', label: 'Lorelei', style: { create: loreleiCreate, meta: loreleiMeta, schema: loreleiSchema } },
|
||||
{ id: 'micah', label: 'Micah', style: { create: micahCreate, meta: micahMeta, schema: micahSchema } },
|
||||
{
|
||||
id: 'pixel-art',
|
||||
label: 'Пиксели',
|
||||
style: { create: pixelArtCreate, meta: pixelArtMeta, schema: pixelArtSchema },
|
||||
},
|
||||
{ id: 'rings', label: 'Кольца', style: { create: ringsCreate, meta: ringsMeta, schema: ringsSchema } },
|
||||
{ id: 'shapes', label: 'Фигуры', style: { create: shapesCreate, meta: shapesMeta, schema: shapesSchema } },
|
||||
{
|
||||
id: 'initials',
|
||||
label: 'Инициалы',
|
||||
style: { create: initialsCreate, meta: initialsMeta, schema: initialsSchema },
|
||||
},
|
||||
{
|
||||
id: 'adventurer',
|
||||
label: 'Adventurer',
|
||||
style: { create: adventurerCreate, meta: adventurerMeta, schema: adventurerSchema },
|
||||
},
|
||||
{
|
||||
id: 'big-ears',
|
||||
label: 'Big Ears',
|
||||
style: { create: bigEarsCreate, meta: bigEarsMeta, schema: bigEarsSchema },
|
||||
},
|
||||
{
|
||||
id: 'big-smile',
|
||||
label: 'Big Smile',
|
||||
style: { create: bigSmileCreate, meta: bigSmileMeta, schema: bigSmileSchema },
|
||||
},
|
||||
{
|
||||
id: 'croodles',
|
||||
label: 'Croodles',
|
||||
style: { create: croodlesCreate, meta: croodlesMeta, schema: croodlesSchema },
|
||||
},
|
||||
{
|
||||
id: 'fun-emoji',
|
||||
label: 'Fun Emoji',
|
||||
style: { create: funEmojiCreate, meta: funEmojiMeta, schema: funEmojiSchema },
|
||||
},
|
||||
export const AVATAR_STYLE_LOADERS: StyleDef[] = [
|
||||
{ id: 'bottts', label: 'Роботы', loader: () => import('@dicebear/bottts') },
|
||||
{ id: 'identicon', label: 'Узоры', loader: () => import('@dicebear/identicon') },
|
||||
{ id: 'avataaars', label: 'Персонажи', loader: () => import('@dicebear/avataaars') },
|
||||
{ id: 'notionists', label: 'Notion', loader: () => import('@dicebear/notionists') },
|
||||
{ id: 'thumbs', label: 'Thumbs', loader: () => import('@dicebear/thumbs') },
|
||||
{ id: 'lorelei', label: 'Lorelei', loader: () => import('@dicebear/lorelei') },
|
||||
{ id: 'micah', label: 'Micah', loader: () => import('@dicebear/micah') },
|
||||
{ id: 'pixel-art', label: 'Пиксели', loader: () => import('@dicebear/pixel-art') },
|
||||
{ id: 'rings', label: 'Кольца', loader: () => import('@dicebear/rings') },
|
||||
{ id: 'shapes', label: 'Фигуры', loader: () => import('@dicebear/shapes') },
|
||||
{ id: 'initials', label: 'Инициалы', loader: () => import('@dicebear/initials') },
|
||||
{ id: 'adventurer', label: 'Adventurer', loader: () => import('@dicebear/adventurer') },
|
||||
{ id: 'big-ears', label: 'Big Ears', loader: () => import('@dicebear/big-ears') },
|
||||
{ id: 'big-smile', label: 'Big Smile', loader: () => import('@dicebear/big-smile') },
|
||||
{ id: 'croodles', label: 'Croodles', loader: () => import('@dicebear/croodles') },
|
||||
{ id: 'fun-emoji', label: 'Fun Emoji', loader: () => import('@dicebear/fun-emoji') },
|
||||
]
|
||||
|
||||
export const DEFAULT_STYLE_ID = 'avataaars'
|
||||
|
||||
export function getStyleById(id: string | null | undefined): StyleDef {
|
||||
return AVATAR_STYLES.find((s) => s.id === id) ?? AVATAR_STYLES[0]
|
||||
const styleCache = new Map<string, Style<any>>()
|
||||
|
||||
export async function loadAvatarStyle(id: string): Promise<Style<any>> {
|
||||
if (styleCache.has(id)) {
|
||||
return styleCache.get(id)!
|
||||
}
|
||||
|
||||
const loader = AVATAR_STYLE_LOADERS.find((s) => s.id === id)
|
||||
if (!loader) {
|
||||
const fallback = AVATAR_STYLE_LOADERS.find((s) => s.id === DEFAULT_STYLE_ID)!
|
||||
const mod = await fallback.loader()
|
||||
const style = { create: mod.create, meta: mod.meta, schema: mod.schema }
|
||||
styleCache.set(DEFAULT_STYLE_ID, style)
|
||||
return style
|
||||
}
|
||||
|
||||
const mod = await loader.loader()
|
||||
const style = { create: mod.create, meta: mod.meta, schema: mod.schema }
|
||||
styleCache.set(id, style)
|
||||
return style
|
||||
}
|
||||
|
||||
export function getStyleLabel(id: string): string {
|
||||
return AVATAR_STYLE_LOADERS.find((s) => s.id === id)?.label ?? id
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user