From 2be4db1466318c16c8d06631e22856dc1ec8ccba Mon Sep 17 00:00:00 2001 From: Cong Yu Date: Wed, 14 Nov 2018 09:08:52 +0800 Subject: [PATCH] feat(docz-core): add detect-one-changed in development (#433) --- packages/docz-core/package.json | 1 + packages/docz-core/src/config/mdx.ts | 3 +- packages/docz-core/src/types.d.ts | 1 + packages/docz-core/templates/index.tpl.html | 2 +- packages/docz-core/templates/root.tpl.js | 52 +++++++++++++++++---- 5 files changed, 48 insertions(+), 11 deletions(-) diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json index 3eaa12de5..61071dd4a 100644 --- 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 index 2d7959295..cce392e13 100644 --- 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 index efc884e92..ce998c0a7 100644 --- a/packages/docz-core/src/types.d.ts +++ b/packages/docz-core/src/types.d.ts @@ -37,3 +37,4 @@ declare module 'detect-port' declare module 'react-dev-utils/FileSizeReporter' declare module 'react-dev-utils/formatWebpackMessages' declare module 'react-dev-utils/printBuildError' +declare module 'detect-one-changed/remark-plugin' \ No newline at end of file diff --git a/packages/docz-core/templates/index.tpl.html b/packages/docz-core/templates/index.tpl.html index 4d8d765ec..fdb737c9a 100644 --- a/packages/docz-core/templates/index.tpl.html +++ b/packages/docz-core/templates/index.tpl.html @@ -9,7 +9,7 @@ {{ head }} -
+
{{ footer }} diff --git a/packages/docz-core/templates/root.tpl.js b/packages/docz-core/templates/root.tpl.js index 77e7696f4..2a54c6f7f 100644 --- 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 = () => ( - } - <% 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 ( + } + <% if (!isProd) {%>websocketUrl="<%- websocketUrl %>"<%}%> + <% if (wrapper) {%>wrapper={Wrapper}<%}%> + /> + ) + } +} // TODO: this is temporary until react-hot-loader fix hooks issues setConfig({