fix: aside component build

sanyuan0704 · Sep 15, 2022 · f8f71e0 · f8f71e0
1 parent 6152056
commit f8f71e0
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 44 deletions.
diff --git 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<PageData> {
   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<PageData> {
   } 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
@@ -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<HTMLDivElement>(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<HTMLAnchorElement>(
+      '.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<HTMLAnchorElement>(
-          '.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[] }>) {
       <li key={header.text}>
         <a
           href={`#${header.id}`}
+          onClick={(e) => {
+            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[] }>) {
       <div className={styles.docsAsideOutline}>
         <div className={styles.content}>
           <div className={styles.outlineMarker} ref={markerRef}></div>
-          <div className={styles.outlineTitle}>目录</div>
+          <div className={styles.outlineTitle}>ON THIS PAGE</div>
           <nav>
             <ul className={styles.root}>{headers.map(renderHeader)}</ul>
           </nav>

diff --git 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() {
           <div className={styles.asideCurtain} />
           <div className={styles.asideContainer}>
             <div className={styles.asideContent}>
-              {hasAside ? <Aside __island headers={headers} /> : null}
+              {hasAside ? (
+                <Aside __island headers={headers} pagePath={data.pagePath} />
+              ) : null}
             </div>
           </div>
         </div>

diff --git 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
@@ -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
@@ -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 })
   ];