fix(docs): fix issues with local builds (#3098)

Signed-off-by: Oleksandr Fediashov <ofediashov@exadel.com>
Semantic-Org · Aug 25, 2018 · 1ae2781 · 1ae2781
1 parent 33dae84
commit 1ae2781
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -71,14 +71,18 @@ class ComponentExample extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
+    const { examplePath, exampleSources, location } = nextProps
+    const nextSourceCode = exampleSources[examplePath]
+
     // deactivate examples when switching from one to the next
-    if (
-      this.isActiveHash() &&
-      this.isActiveState() &&
-      this.props.location.hash !== nextProps.location.hash
-    ) {
+    if (this.isActiveHash() && this.isActiveState() && this.props.location.hash !== location.hash) {
       this.clearActiveState()
     }
+
+    // for local environment
+    if (process.env.NODE_ENV !== 'production' && this.getOriginalSourceCode() !== nextSourceCode) {
+      this.setState({ sourceCode: nextSourceCode })
+    }
   }
 
   clearActiveState = () => {

diff --git a/gulp/plugins/gulp-example-source.js b/gulp/plugins/gulp-example-source.js
@@ -1,14 +1,16 @@
-import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import _ from 'lodash'
 import path from 'path'
 import through from 'through2'
+import Vinyl from 'vinyl'
 
+// Heads up!
+// This plugin is not universal, so it's okay to keep all existing sources as the state.
+// https://github.com/Semantic-Org/Semantic-UI-React/issues/3095
+const exampleSources = {}
 const pluginName = 'gulp-example-source'
 
 export default () => {
-  const exampleSources = {}
-
   function bufferContents(file, enc, cb) {
     if (file.isNull()) {
       cb(null, file)
@@ -41,16 +43,9 @@ export default () => {
   function endStream(cb) {
     const file = new Vinyl({
       path: './exampleSources.json',
+      contents: Buffer.from(JSON.stringify(exampleSources, null, 2)),
     })
-    let existingSources = {}
-
-    // Heads up!
-    // In watch mode we should update only single entry that matches changed file.
-    if (file.contents) {
-      existingSources = JSON.parse(file.contents.toString())
-    }
 
-    file.contents = Buffer.from(JSON.stringify({ ...existingSources, ...exampleSources }, null, 2))
     this.push(file)
     cb()
   }

diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.js
@@ -18,6 +18,24 @@ const { log } = g.util
 const handleWatchChange = filename =>
   log(`File ${path.basename(filename)} was changed, running tasks...`)
 
+/**
+ * Converts paths with globs to supported by chokidar, is more specific for Windows where
+ * is different path sep.
+ * Example of the failure behaviour: "C:\projects\docs/examples/index.js"
+ *
+ * @param {String} directory
+ * @param {String} glob
+ * @returns {String}
+ */
+const toUniversalGlob = (directory, glob) => {
+  const relative = path
+    .relative(process.cwd(), directory)
+    .split(path.sep)
+    .join('/')
+
+  return `${relative}/${glob}`
+}
+
 // ----------------------------------------
 // Clean
 // ----------------------------------------
@@ -76,17 +94,17 @@ task('build:docs:static:start', (cb) => {
 // ----------------------------------------
 
 const componentsSrc = [
-  `${paths.src()}/addons/*/*.js`,
-  `${paths.src()}/behaviors/*/*.js`,
-  `${paths.src()}/elements/*/*.js`,
-  `${paths.src()}/collections/*/*.js`,
-  `${paths.src()}/modules/*/*.js`,
-  `${paths.src()}/views/*/*.js`,
+  toUniversalGlob(paths.src(), 'addons/*/*.js'),
+  toUniversalGlob(paths.src(), 'behaviors/*/*.js'),
+  toUniversalGlob(paths.src(), 'elements/*/*.js'),
+  toUniversalGlob(paths.src(), 'collections/*/*.js'),
+  toUniversalGlob(paths.src(), 'modules/*/*.js'),
+  toUniversalGlob(paths.src(), 'views/*/*.js'),
   '!**/index.js',
 ]
 
-const examplesSectionsSrc = `${paths.docsSrc()}/examples/*/*/*/index.js`
-const examplesSrc = `${paths.docsSrc()}/examples/*/*/*/!(*index).js`
+const examplesSectionsSrc = toUniversalGlob(paths.docsSrc(), 'examples/*/*/*/index.js')
+const examplesSrc = toUniversalGlob(paths.docsSrc(), 'examples/*/*/*/!(*index).js')
 
 task('build:docs:cname', (cb) => {
   sh(`echo react.semantic-ui.com > ${paths.docsDist('CNAME')}`, cb)
@@ -151,7 +169,7 @@ task('deploy:docs', (cb) => {
 // Watch
 // ----------------------------------------
 
-task('watch:docs', (cb) => {
+task('watch:docs', () => {
   // rebuild component info
   watch(componentsSrc, series('build:docs:docgen', 'build:docs:static:reload')).on(
     'change',
@@ -169,7 +187,6 @@ task('watch:docs', (cb) => {
     'change',
     handleWatchChange,
   )
-  cb()
 })
 
 // ----------------------------------------