feat(docz-core): add detect-one-changed in development (#433)

doczjs · Nov 14, 2018 · 0585b97 · 0585b97
1 parent f4a122f
commit 0585b97
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 11 deletions.
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
@@ -41,6 +41,7 @@
     "connect-history-api-fallback": "^1.5.0",
     "cpy": "^7.0.1",
     "deepmerge": "^2.2.1",
+    "detect-one-changed": "^1.2.0",
     "detect-port": "^1.2.3",
     "docz-utils": "^0.12.9",
     "dotenv": "^6.1.0",

diff --git a/packages/docz-core/src/config/mdx.ts b/packages/docz-core/src/config/mdx.ts
@@ -1,5 +1,6 @@
 import matter from 'remark-frontmatter'
 import slug from 'rehype-slug'
+import detectChanged from 'detect-one-changed/remark-plugin'
 import remarkDocz from 'remark-docz'
 import rehypeDocz from 'rehype-docz'
 
@@ -11,7 +12,7 @@ export const config = {
   marker: '-',
 }
 
-export const remarkPlugins = () => [matter, remarkDocz]
+export const remarkPlugins = () => [detectChanged, matter, remarkDocz]
 export const rehypePlugins = (config: Config) => [
   rehypeDocz(paths.root, config.codeSandbox),
   slug,

diff --git a/packages/docz-core/src/types.d.ts b/packages/docz-core/src/types.d.ts
@@ -38,3 +38,4 @@ declare module 'react-dev-utils/FileSizeReporter'
 declare module 'react-dev-utils/formatWebpackMessages'
 declare module 'react-dev-utils/printBuildError'
 declare module 'p-reduce'
+declare module 'detect-one-changed/remark-plugin'
diff --git a/packages/docz-core/templates/index.tpl.html b/packages/docz-core/templates/index.tpl.html
@@ -9,7 +9,7 @@
     {{ head }}
   </head>
   <body>
-    <div id="root" />
+    <div id="root"></div>
     {{ footer }}
   </body>
 </html>
diff --git a/packages/docz-core/templates/root.tpl.js b/packages/docz-core/templates/root.tpl.js
@@ -7,15 +7,49 @@ import db from './db.json'
 
 <% if (wrapper) {%>import Wrapper from '<%- wrapper %>'<%}%>
 
-const Root = () => (
-  <Theme
-    db={db}
-    imports={imports}
-    hashRouter={<%- hashRouter %>}
-    <% if (!isProd) {%>websocketUrl="<%- websocketUrl %>"<%}%>
-    <% if (wrapper) {%>wrapper={Wrapper}<%}%>
-  />
-)
+const isDev = module.hot && process.env.NODE_ENV !== 'production'
+let isHotUpdate = false
+let root
+if (typeof document !== 'undefined') {
+  root = document.querySelector('#root')
+  isHotUpdate = isDev && !!root.innerHTML
+}
+
+function injectUpdateStyleOnce() {
+  const cssText = '@-webkit-keyframes bling{0%{background-color:#d9edf7}to{background-color:#d9edf7}}@-moz-keyframes bling{0%{background-color:#d9edf7}to{background-color:#d9edf7}}@-o-keyframes bling{0%{background-color:#d9edf7}to{background-color:#d9edf7}}@keyframes bling{0%{background-color:#d9edf7}to{background-color:#d9edf7}}.detected-updated,.detected-updated pre{-webkit-animation:bling 2.5s 1;-moz-animation:bling 2.5s 1;-o-animation:bling 2.5s 1;animation:bling 2.5s 1}'
+  if (typeof document !== 'undefined' && !global.__INJECTED_UPDATED_CSS_TEXT__) {
+    const style = document.createElement('style')
+    style.textContent = cssText
+    style.type = 'text/css'
+    document.head.appendChild(style)
+    global.__INJECTED_UPDATED_CSS_TEXT__ = true
+  }
+}
+
+class Root extends React.Component {
+  componentDidUpdate() {
+    if (isHotUpdate && root) {
+      setTimeout(() => {
+        const updateNode = root.querySelector('.detected-updated')
+        if (updateNode) {
+          updateNode.scrollIntoView({ behavior: 'smooth' })
+          injectUpdateStyleOnce()
+        }
+      })
+    }
+  }
+  render() {
+    return (
+      <Theme
+        db={db}
+        imports={imports}
+        hashRouter={<%- hashRouter %>}
+        <% if (!isProd) {%>websocketUrl="<%- websocketUrl %>"<%}%>
+        <% if (wrapper) {%>wrapper={Wrapper}<%}%>
+      />
+    )
+  }
+}
 
 // TODO: this is temporary until react-hot-loader fix hooks issues
 setConfig({