feat: code review & changelog

Author: MuYunyun

docs/更新日志.md

@@ -6,6 +6,15 @@ abbrlink: 179nqpxt
 
 `create-react-doc` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
 
+### 1.8.0
+
+`2022-01-15`
+
+- **Feature**
+
+  - 🚀 支持 SSR 首屏直出方案(基于 gp-pages 服务)以避免预渲染带来的二次刷新产生页面抖动的问题。[issue](https://github.com/MuYunyun/create-react-doc/issues/103)
+  - 🚀 新增 crd-client-utils 包以收录公用方法。
+
 ### 1.7.0
 
 `2022-01-02`

packages/crd-client-utils/index.js

@@ -1,9 +1,16 @@
+import { useLayoutEffect, useEffect } from 'react'
+
 const ifDev = env === 'dev'
 const ifProd = env === 'prod'
 const ifPrerender = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender
 
+const useEnhancedEffect = typeof window !== 'undefined'
+  ? useLayoutEffect
+  : useEffect
+
 export {
   ifDev,
   ifProd,
-  ifPrerender
+  ifPrerender,
+  useEnhancedEffect
 }

packages/crd-scripts/src/web/Router.js

@@ -65,12 +65,10 @@ const RoutersContainer = withRouter(({ ...props }) => {
   )
 })
 
-export default function RouterRoot({
-  pointRender
-}) {
+export default function RouterRoot() {
   return (
     <BrowserRouter>
-      <RoutersContainer pointRender={pointRender} />
+      <RoutersContainer />
     </BrowserRouter>
   )
 }

packages/crd-seed/component/Affix/affix.js

@@ -1,4 +1,3 @@
-// import { useState, useLayoutEffect, useRef } from 'react'
 import { useState, useEffect, useRef } from 'react'
 import { throttle } from './utils'
 
@@ -23,15 +22,29 @@ const Affix = ({
   // 是否是绝对布局模式
   const fixedRef = useRef(false)
   const [fixed, setFixed] = useState(fixedRef.current)
-  // useLayoutEffect(() => {
+
   useEffect(() => {
     widthRef.current = width
   }, [width])
+
+  useEffect(() => {
+    // 在子节点移开父节点后保持原来占位
+    setWrapperDimension()
+  }, [fixed, width])
+
+  useEffect(() => {
+    if (target) scrollElm = target()
+    scrollElm.addEventListener('scroll', scroll)
+    return () => {
+      if (target) scrollElm = target()
+      scrollElm.removeEventListener('scroll', scroll)
+    }
+  }, [offsetTop, offsetBottom])
+
   const validValue = (value) => {
     return typeof value === 'number'
   }
   const setWrapperDimension = () => {
-    // eslint-disable-next-line no-shadow
     const { width: wrapperRefWidth, height: wrapperRefHeight } = wrapperRef.current
       ? wrapperRef.current.getBoundingClientRect()
       : {}
@@ -100,22 +113,6 @@ const Affix = ({
 
   const scroll = throttle(handleScroll, 20)
 
-  // useLayoutEffect(() => {
-  useEffect(() => {
-    // 在子节点移开父节点后保持原来占位
-    setWrapperDimension()
-  }, [fixed, width])
-
-  // useLayoutEffect(() => {
-  useEffect(() => {
-    if (target) scrollElm = target()
-    scrollElm.addEventListener('scroll', scroll)
-    return () => {
-      if (target) scrollElm = target()
-      scrollElm.removeEventListener('scroll', scroll)
-    }
-  }, [offsetTop, offsetBottom])
-
   return (
     <div ref={placeholderRef} style={style} className={className}>
       <div

packages/crd-seed/component/Menu/SubMenu.js

@@ -1,6 +1,6 @@
-// import { useState, useRef, useLayoutEffect, Fragment, Children, cloneElement } from 'react'
-import { useState, useRef, useEffect, Fragment, Children, cloneElement } from 'react'
+import { useState, useRef, Fragment, Children, cloneElement } from 'react'
 import cx from 'classnames'
+import { useEnhancedEffect } from 'crd-client-utils'
 import Transition from './transition'
 import { getMenuStyle } from './util'
 import { useMenuContext } from './context'
@@ -42,9 +42,8 @@ function SubMenu({
   const [getParentMenuHover, setParentMenuHover] = useCurrent(false)
 
   const gapDistance = 4
-  /** 使用 useLayoutEffect 可以避免 useEffect 产生可见的位移痕迹 */
-  // useLayoutEffect(() => {
-  useEffect(() => {
+
+  useEnhancedEffect(() => {
     if (popupSubMenu.current && curSubmenu.current) {
       popupSubMenu.current.style.left = `${curSubmenu.current.getBoundingClientRect().right +
         gapDistance}px`

packages/crd-seed/component/Menu/transition.js

@@ -1,4 +1,3 @@
-// import { useLayoutEffect, useRef, useCallback } from 'react'
 import { useEffect, useRef, useCallback } from 'react'
 import styles from './style/index.less'
 
@@ -60,7 +59,6 @@ export default function Transition({
   }, [afterLeave])
 
   const triggerChange = useCallback(
-    // eslint-disable-next-line no-shadow
     (isShow) => {
       clearTimeout(timer.current.enterTimer)
       clearTimeout(timer.current.leaveTimer)
@@ -75,7 +73,6 @@ export default function Transition({
     [beforeLeave, enter, leave]
   )
 
-  // useLayoutEffect(() => {
   useEffect(() => {
     if (!mounted.current) {
       mounted.current = true

packages/crd-seed/layout/index.js

@@ -22,15 +22,11 @@ function BasicLayout({
   routeData,
   menuSource,
   indexProps,
-  // render area
-  pointRender
 }) {
   const { pathname } = location
   const { user, repo, branch = 'main', language = 'en', menuOpenKeys } = DOCSCONFIG || {}
   const [inlineCollapsed, setInlineCollapsed] = useState(true)
   const [selectedKey, setSelectedKey] = useState('')
-  const [monted, setMounted] = useState(false)
-  const [routeChanged, setRoutedChanged] = useState(false)
   const curOpenKeys = getOpenSubMenuKeys({
     pathname,
     menuSource,
@@ -64,17 +60,6 @@ function BasicLayout({
     setSelectedKey(newPathName || defaultPath)
   }, location.pathname)
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    const { pathname } = location
-    if (monted) {
-      setRoutedChanged(true)
-    }
-  }, location.pathname)
-
   const scrollToTop = () => {
     document.body.scrollTop = 0
     document.documentElement.scrollTop = 0
@@ -245,7 +230,6 @@ function BasicLayout({
     )
   }
 
-  // Target: The first screen not to do renderContent logic. The second screen do.
   const renderContent = () => {
     return (
       <div
@@ -279,38 +263,26 @@ function BasicLayout({
     )
   }
 
-  console.log('routeChanged', routeChanged)
   return (
-    <>
-      {
-        // pointRender === 'menu' && !routeChanged
-          // prod render
-          // ? renderMenuContainer()
-          // pre & dev render
-          // : <div className={styles.wrapper}>
-        <div className={styles.wrapper}>
-          <Header
-            logo={logo}
-            href={ifAddPrefix ? `/${repo}` : `/`}
-            location={location}
-            indexProps={indexProps}
-            menuSource={menuSource}
-          />
-          <div
-            className={cx(styles.wrapperContent, {
-              [styles.wrapperMobile]: isMobile,
-            })}
-          >
-            {renderPageHeader()}
-            {/* <div id="menuPosition"> */}
-              {renderMenuContainer()}
-            {/* </div> */}
-            {renderContent()}
-            <Footer inlineCollapsed={inlineCollapsed} />
-          </div>
-        </div>
-      }
-    </>
+    <div className={styles.wrapper}>
+      <Header
+        logo={logo}
+        href={ifAddPrefix ? `/${repo}` : `/`}
+        location={location}
+        indexProps={indexProps}
+        menuSource={menuSource}
+      />
+      <div
+        className={cx(styles.wrapperContent, {
+          [styles.wrapperMobile]: isMobile,
+        })}
+      >
+        {renderPageHeader()}
+        {renderMenuContainer()}
+        {renderContent()}
+        <Footer inlineCollapsed={inlineCollapsed} />
+      </div>
+    </div>
   )
 }
 

packages/crd-theme/index.js

@@ -2,15 +2,9 @@ import Markdown from './markdown'
 import './index.less'
 
 export default function (Lazyload, props) {
-  // const LoadableComponent = Lazyload({
-  //   component: () => import('./routes/Pages'),
-  //   LoadingComponent: Loading,
-  // })
-
   // routing load component
   if (props.routeData && props.routeData.length > 0) {
     props.routeData.map((item) => {
-      // item.component = LoadableComponent
       item.component = Markdown
       return item
     })

packages/crd-theme/markdown/index.js

@@ -4,10 +4,8 @@ import { MDXProvider } from '@mdx-js/react'
 import { Helmet } from 'react-helmet'
 import CodeBlock from './codeBlock'
 import Link from './Link'
-import Loading from '../component/Loading'
 import styles from './style/index.less'
 
-// const { useState, useLayoutEffect, useRef } = React
 const { useState, useEffect, useRef } = React
 
 const components = {
@@ -19,31 +17,31 @@ function Markdown(markdownProps) {
   const { props } = markdownProps
   const { relative, name } = props
 
-  const getInitMarkdownCP = () => {
+  const getRmFirstSlashMarkdownName = () => {
     const relativeMd = relative
     if (!relativeMd) return null
+    return relative.slice(1, relative.length - 3)
+  }
 
-    const rmFirstSlash = relative.slice(1, relative.length - 3)
-    return () => require(`__project_root__/${rmFirstSlash}.md`).default
+  const getInitMarkdownCP = () => {
+    const markdownName = getRmFirstSlashMarkdownName()
+    if (!markdownName) return
+    return () => require(`__project_root__/${markdownName}.md`).default
   }
-  getInitMarkdownCP()
 
   const [MarkdownCP, setMarkdownCP] = useState(getInitMarkdownCP())
   const markdownWrapperRef = useRef(null)
 
   const renderMarkdown = () => {
-    const relativeMd = relative
-    if (!relativeMd) return null
-
-    const rmFirstSlash = relative.slice(1, relative.length - 3)
+    const markdownName = getRmFirstSlashMarkdownName()
+    if (!markdownName) return
     // it must be writen with / & .md in dynamic import
-    import(`__project_root__/${rmFirstSlash}.md`).then((data) => {
+    import(`__project_root__/${markdownName}.md`).then((data) => {
       // data.default is a function, so we should write () => data.default in setState here.
       setMarkdownCP(() => (data.default || data))
     })
   }
 
-  // useLayoutEffect(() => {
   useEffect(() => {
     renderMarkdown()
   }, [])
@@ -60,17 +58,15 @@ function Markdown(markdownProps) {
       </Helmet>
       {
         MarkdownCP
-          ? <div className={cx('markdown', styles.markdown, styles.markdownwrapper)} ref={markdownWrapperRef}>
-            {
-              // MarkdownCP
-              //   ?
-                <MDXProvider
-                  components={components}
-                >
-                  <MarkdownCP />
-                </MDXProvider>
-                // : <Loading />
-            }
+          ? <div
+            className={cx('markdown', styles.markdown, styles.markdownwrapper)}
+            ref={markdownWrapperRef}
+          >
+            <MDXProvider
+              components={components}
+            >
+              <MarkdownCP />
+            </MDXProvider>
           </div>
           : null
       }