♻️ refactor: Refactor fluent emoji

src/ConfigProvider/index.tsx

@@ -1,13 +1,21 @@
 import { ElementType, ReactNode, createContext, memo, useContext } from 'react';
 
-import { CDN, CdnApi, genCdnUrl } from '@/utils/genCdnUrl';
+import {
+  CDN,
+  CdnApi,
+  JsdelivrApi,
+  JsdelivrCDN,
+  genCdnUrl,
+  genJsdelivrUrl,
+} from '@/utils/genCdnUrl';
 
-type CdnFn = ({ pkg, version, path }: CdnApi) => string;
 export interface Config {
   aAs?: ElementType;
   customCdnFn?: CdnFn;
+  customJsdelivrFn?: JsdelivrFn;
   imgAs?: ElementType;
   imgUnoptimized?: boolean;
+  jsdelivrProxy?: JsdelivrCDN | 'custom';
   proxy?: CDN | 'custom';
 }
 
@@ -17,16 +25,33 @@ const ConfigProvider = memo<{ children: ReactNode; config: Config }>(({ children
   return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
 });
 
-const fallback: CdnFn = ({ pkg, version, path }) =>
+// useCdnFn
+export type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+
+const cdnFallback: CdnFn = ({ pkg, version, path }) =>
   genCdnUrl({ path, pkg, proxy: 'aliyun', version });
+
 export const useCdnFn = (): CdnFn => {
   const config = useContext(ConfigContext);
-
-  if (!config) return fallback;
+  if (!config) return cdnFallback;
   if (config?.proxy !== 'custom')
     return ({ pkg, version, path }) =>
       genCdnUrl({ path, pkg, proxy: config.proxy as any, version });
-  return config?.customCdnFn || fallback;
+  return config?.customCdnFn || cdnFallback;
+};
+
+// useJsdelivrFn
+export type JsdelivrFn = ({ repo, path }: JsdelivrApi) => string;
+
+const JsdelivrFallback: JsdelivrFn = ({ repo, path }) =>
+  genJsdelivrUrl({ path, proxy: 'lobehub', repo });
+
+export const useJsdelivrFn = (): JsdelivrFn => {
+  const config = useContext(ConfigContext);
+  if (!config) return JsdelivrFallback;
+  if (config?.proxy !== 'custom')
+    return ({ repo, path }) => genJsdelivrUrl({ path, proxy: config.proxy as any, repo });
+  return config?.customJsdelivrFn || JsdelivrFallback;
 };
 
 export default ConfigProvider;

src/FluentEmoji/index.tsx

@@ -3,6 +3,7 @@
 import { memo, useMemo, useState } from 'react';
 import { Center } from 'react-layout-kit';
 
+import { useCdnFn, useJsdelivrFn } from '@/ConfigProvider';
 import Img from '@/Img';
 import { DivProps } from '@/types';
 
@@ -30,10 +31,16 @@ export interface FluentEmojiProps extends DivProps {
 const FluentEmoji = memo<FluentEmojiProps>(
   ({ emoji, className, style, type = '3d', size = 40, unoptimized }) => {
     const [loadingFail, setLoadingFail] = useState(false);
-
+    const genJsdelivrUrl = useJsdelivrFn();
+    const genCdnUrl = useCdnFn();
     const { cx, styles } = useStyles();
 
-    const emojiUrl = useMemo(() => genEmojiUrl(emoji, type), [type, emoji]);
+    const emojiUrl = useMemo(
+      () => genEmojiUrl(emoji, type, { genCdnUrl, genJsdelivrUrl }),
+      [type, emoji, genJsdelivrUrl, genCdnUrl],
+    );
+
+    console.log(emojiUrl);
 
     if (type === 'pure' || !emojiUrl || loadingFail)
       return (

src/FluentEmoji/utils.ts

@@ -1,18 +1,60 @@
+import { CdnFn, JsdelivrFn } from '@/ConfigProvider';
+
 export type EmojiType = 'anim' | 'flat' | 'modern' | 'mono' | 'pure' | '3d';
 
-function isFlagEmoji(emoji: string) {
+export function isFlagEmoji(emoji: string) {
   const flagRegex = /(?:\uD83C[\uDDE6-\uDDFF]){2}/;
   return flagRegex.test(emoji);
 }
 
-function emojiToUnicode(emoji: string) {
+export function emojiToUnicode(emoji: string) {
   return [...emoji].map((char) => char?.codePointAt(0)?.toString(16)).join('-');
 }
 
-export const genEmojiUrl = (emoji: string, type: EmojiType) => {
-  if (isFlagEmoji(emoji))
-    return `https://jsdelivr.lobehub-inc.cn/gh/RealityRipple/emoji/noto/${emojiToUnicode(emoji)}.png`;
-  if (type === 'pure') return null;
+export const genEmojiUrl = (
+  emoji: string,
+  type: EmojiType,
+  { genCdnUrl, genJsdelivrUrl }: { genCdnUrl: CdnFn; genJsdelivrUrl: JsdelivrFn },
+) => {
   const ext = ['anim', '3d'].includes(type) ? 'webp' : 'svg';
-  return `https://jsdelivr.lobehub-inc.cn/gh/lobehub/fluent-emoji/packages/${type}/assets/${emojiToUnicode(emoji)}.${ext}`;
+
+  switch (type) {
+    case 'pure': {
+      return null;
+    }
+    case 'anim': {
+      return genJsdelivrUrl({
+        path: `packages/${type}/assets/${emojiToUnicode(emoji)}.${ext}`,
+        repo: 'lobehub/fluent-emoji',
+      });
+    }
+    case '3d': {
+      return genCdnUrl({
+        path: `assets/${emojiToUnicode(emoji)}.${ext}`,
+        pkg: '@lobehub/fluent-emoji-3d',
+        version: '1.1.0',
+      });
+    }
+    case 'flat': {
+      return genCdnUrl({
+        path: `assets/${emojiToUnicode(emoji)}.${ext}`,
+        pkg: '@lobehub/fluent-emoji-flat',
+        version: '1.1.0',
+      });
+    }
+    case 'modern': {
+      return genCdnUrl({
+        path: `assets/${emojiToUnicode(emoji)}.${ext}`,
+        pkg: '@lobehub/fluent-emoji-modern',
+        version: '1.0.0',
+      });
+    }
+    case 'mono': {
+      return genCdnUrl({
+        path: `assets/${emojiToUnicode(emoji)}.${ext}`,
+        pkg: '@lobehub/fluent-emoji-mono',
+        version: '1.1.0',
+      });
+    }
+  }
 };

src/utils/genCdnUrl.ts

@@ -21,3 +21,25 @@ export const genCdnUrl = ({ pkg, version = 'latest', path, proxy }: CdnApi): str
     }
   }
 };
+
+export type JsdelivrCDN = 'jsdelivr' | 'lobehub';
+
+const JSDELIVR_API = 'https://fastly.jsdelivr.net';
+const LOBEHUB_API = 'https://jsdelivr.lobeobjects.space';
+
+export interface JsdelivrApi {
+  path: string;
+  proxy?: JsdelivrCDN;
+  repo: string;
+}
+
+export const genJsdelivrUrl = ({ path, proxy, repo }: JsdelivrApi): string => {
+  switch (proxy) {
+    case 'jsdelivr': {
+      return urlJoin(JSDELIVR_API, 'gh', repo, path);
+    }
+    default: {
+      return urlJoin(LOBEHUB_API, 'gh', repo, path);
+    }
+  }
+};