From f8f71e0a717337c8b87f78883aacd96719675ad4 Mon Sep 17 00:00:00 2001 From: sanyuan <494130947@qq.com> Date: Thu, 15 Sep 2022 14:52:25 +0800 Subject: [PATCH] fix: aside component build --- src/client/runtime/app.tsx | 4 +- .../theme-default/components/Aside/index.tsx | 87 +++++++++++-------- .../theme-default/layout/DocLayout/index.tsx | 4 +- src/node/build.ts | 2 +- src/node/plugin-island/config.ts | 1 + src/node/plugin.ts | 2 +- 6 files changed, 56 insertions(+), 44 deletions(-) diff --git a/src/client/runtime/app.tsx b/src/client/runtime/app.tsx index ae10b7fd..3fa68bd0 100644 --- a/src/client/runtime/app.tsx +++ b/src/client/runtime/app.tsx @@ -9,10 +9,8 @@ import { HelmetProvider } from 'react-helmet-async'; export async function waitForApp(path: string): Promise { const matched = matchRoutes(routes, path)!; - const pagePath = (matched[0].route as Route).filePath; if (matched) { const mod = await (matched[0].route as Route).preload(); - return { siteData, pagePath: (matched[0].route as Route).filePath, @@ -21,7 +19,7 @@ export async function waitForApp(path: string): Promise { } else { return { siteData, - pagePath, + pagePath: '', pageType: '404' }; } diff --git a/src/client/theme-default/components/Aside/index.tsx b/src/client/theme-default/components/Aside/index.tsx index 1040e6f8..1f266d79 100644 --- a/src/client/theme-default/components/Aside/index.tsx +++ b/src/client/theme-default/components/Aside/index.tsx @@ -2,7 +2,6 @@ import { useState, useEffect, useRef } from 'react'; import styles from './index.module.scss'; import { throttle } from 'lodash-es'; import { ComponentPropsWithIsland, Header } from 'shared/types/index'; -import { usePageData } from 'island/client'; function isBottom() { return ( @@ -11,28 +10,59 @@ function isBottom() { ); } -export function Aside(props: ComponentPropsWithIsland<{ headers: Header[] }>) { +export function Aside( + props: ComponentPropsWithIsland<{ headers: Header[]; pagePath: string }> +) { const [headers, setHeaders] = useState(props.headers || []); - const { pagePath } = usePageData(); // For outline text highlight const [activeIndex, setActiveIndex] = useState(0); const markerRef = useRef(null); const SCROLL_INTO_HEIGHT = 150; + const NAV_HEIGHT = 72; useEffect(() => { // handle hmr - if (import.meta.hot) { - import.meta.hot.on('md(x)-changed', () => { - import(/* @vite-ignore */ `${pagePath}?import&t=${Date.now()}`).then( - (mod) => { - setHeaders(mod.toc); - } - ); + if (import.meta.env.DEV) { + import.meta.hot?.on('md(x)-changed', () => { + import( + /* @vite-ignore */ `${props.pagePath}?import&t=${Date.now()}` + ).then((mod) => { + setHeaders(mod.toc); + }); }); } }, []); + function setActiveLink() { + const links = document.querySelectorAll( + '.island-doc .header-anchor' + ); + if (isBottom()) { + setActiveIndex(links.length - 1); + markerRef.current!.style.top = `${33 + (headers.length - 1) * 28}px`; + } else { + // Compute current index + for (let i = 0; i < links.length; i++) { + const topDistance = links[i].getBoundingClientRect().top; + if (topDistance > NAV_HEIGHT && topDistance < SCROLL_INTO_HEIGHT) { + const id = links[i].getAttribute('href'); + const index = headers.findIndex( + (item: any) => item.id === id?.slice(1) + ); + if (index > -1 && index !== activeIndex) { + setActiveIndex(index); + markerRef.current!.style.top = `${33 + index * 28}px`; + } else { + setActiveIndex(0); + markerRef.current!.style.top = '33px'; + } + break; + } + } + } + } + useEffect(() => { if (!headers.length && markerRef.current) { markerRef.current.style.display = 'none'; @@ -42,34 +72,9 @@ export function Aside(props: ComponentPropsWithIsland<{ headers: Header[] }>) { if (!headers.length) { return; } - const links = document.querySelectorAll( - '.island-doc .header-anchor' - ); - if (isBottom()) { - setActiveIndex(links.length - 1); - markerRef.current!.style.top = `${33 + (headers.length - 1) * 28}px`; - } else { - // Compute current index - for (let i = 0; i < links.length; i++) { - const topDistance = links[i].getBoundingClientRect().top; - if (topDistance > 0 && topDistance < SCROLL_INTO_HEIGHT) { - const id = links[i].getAttribute('href'); - const index = headers.findIndex( - (item: any) => item.id === id?.slice(1) - ); - if (index > -1 && index !== activeIndex) { - setActiveIndex(index); - markerRef.current!.style.top = `${33 + index * 28}px`; - } else { - setActiveIndex(0); - markerRef.current!.style.top = '33px'; - } - break; - } - } - } + setActiveLink(); }, - 200, + 100, { trailing: true } ); window.addEventListener('scroll', onScroll); @@ -85,6 +90,12 @@ export function Aside(props: ComponentPropsWithIsland<{ headers: Header[] }>) {
  • { + e.preventDefault(); + setTimeout(() => { + setActiveLink(); + }, 300); + }} className={`${styles.outlineLink} ${ index == activeIndex ? styles.active : '' } ${isNested ? styles.nested : ''}`} @@ -100,7 +111,7 @@ export function Aside(props: ComponentPropsWithIsland<{ headers: Header[] }>) {
    -
    目录
    +
    ON THIS PAGE
    diff --git a/src/client/theme-default/layout/DocLayout/index.tsx b/src/client/theme-default/layout/DocLayout/index.tsx index 310e4be4..b4fe73c2 100644 --- a/src/client/theme-default/layout/DocLayout/index.tsx +++ b/src/client/theme-default/layout/DocLayout/index.tsx @@ -36,7 +36,9 @@ export function DocLayout() {
    - {hasAside ?
    diff --git a/src/node/build.ts b/src/node/build.ts index 0ce6e940..114cdf0a 100644 --- a/src/node/build.ts +++ b/src/node/build.ts @@ -142,7 +142,7 @@ class SSGBuilder { outDir: TEMP_PATH, ssrManifest: false, rollupOptions: { - external: [], + external: DEFAULT_EXTERNALS, input: islandInjectId } }, diff --git a/src/node/plugin-island/config.ts b/src/node/plugin-island/config.ts index e72c3657..8dab3a9b 100644 --- a/src/node/plugin-island/config.ts +++ b/src/node/plugin-island/config.ts @@ -19,6 +19,7 @@ const { green } = pc; export function pluginConfig(config: SiteConfig): Plugin { return { name: 'island:vite-config', + enforce: 'pre', // Set external async resolveId(id) { if (isProduction() && DEFAULT_EXTERNALS.includes(id)) { diff --git a/src/node/plugin.ts b/src/node/plugin.ts index d6d4e079..2a7a4296 100644 --- a/src/node/plugin.ts +++ b/src/node/plugin.ts @@ -27,7 +27,7 @@ export async function createIslandPlugins( // Svg component support pluginSvgr(), // Md(x) compile - pluginMdx(config), + await pluginMdx(config), // Conventional Route pluginRoutes({ prefix: '', root: config.root }) ];