|
| 1 | +import { langType } from '@/utils/useLanguage'; |
| 2 | +import React from 'react'; |
| 3 | +import { DocNotFound } from '../../DocNotFound'; |
| 4 | + |
| 5 | +const modules = import.meta.glob('@/pages/Docs/md/*.mdx') as Record< |
| 6 | + string, |
| 7 | + () => Promise<any> |
| 8 | +>; |
| 9 | + |
| 10 | +export const LOAD_DOC_EVENT = 'load-doc'; |
| 11 | + |
| 12 | +const lazyDocWithNotification = |
| 13 | + (doc: string, value: () => Promise<any>) => async () => { |
| 14 | + window.dispatchEvent( |
| 15 | + new CustomEvent(LOAD_DOC_EVENT, { |
| 16 | + detail: { |
| 17 | + doc, |
| 18 | + loading: true, |
| 19 | + }, |
| 20 | + }), |
| 21 | + ); |
| 22 | + const result = await value(); |
| 23 | + setTimeout(() => { |
| 24 | + window.dispatchEvent( |
| 25 | + new CustomEvent(LOAD_DOC_EVENT, { |
| 26 | + detail: { |
| 27 | + doc, |
| 28 | + loading: false, |
| 29 | + }, |
| 30 | + }), |
| 31 | + ); |
| 32 | + }, 100); |
| 33 | + return result; |
| 34 | + }; |
| 35 | + |
| 36 | +const mdComponents = Object.entries(modules).reduce((acc, cur) => { |
| 37 | + const [key, value] = cur; |
| 38 | + const result = key.match(/md\/(.+)\.(zh|en|ja|ko)\.mdx$/); |
| 39 | + if (!result) return acc; |
| 40 | + const [, doc, lang] = result; |
| 41 | + const lazyDoc = lazyDocWithNotification(doc, value); |
| 42 | + if (!acc[doc]) { |
| 43 | + acc[doc] = { [lang]: React.lazy(lazyDoc) }; |
| 44 | + } else { |
| 45 | + acc[doc][lang] = React.lazy(lazyDoc); |
| 46 | + } |
| 47 | + return acc; |
| 48 | +}, {} as Record<string, Record<string, React.LazyExoticComponent<any>>>); |
| 49 | + |
| 50 | +export const getDocContent = (doc: string, lang: langType) => { |
| 51 | + const docData = mdComponents[doc][lang]; |
| 52 | + if (!docData) { |
| 53 | + return DocNotFound; |
| 54 | + } |
| 55 | + return docData; |
| 56 | +}; |
0 commit comments