diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js index 64b753785c..641f2679e6 100644 --- 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 index 131b19ada2..f524423cfb 100644 --- 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 index 36f8362e5b..3a464a6d1b 100644 --- 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() }) // ----------------------------------------