build(docs): use caching for build:docs:docgen (#485)

* build(docs): use caching for `build:docs:docgen`

* make name more strict

Author: layershifter

build/gulp/plugins/gulp-react-docgen.ts

@@ -3,7 +3,7 @@ import * as path from 'path'
 import * as through2 from 'through2'
 import * as Vinyl from 'vinyl'
 
-import { getComponentInfo } from './util'
+import { getComponentInfo, getBufferChecksum, getInfoChecksum } from './util'
 
 const pluginName = 'gulp-react-docgen'
 
@@ -19,11 +19,18 @@ export default () =>
       return
     }
 
-    try {
-      const contents = getComponentInfo(file.path)
+    const infoFilename = file.basename.replace(/\.tsx$/, '.info.json')
+    const nextChecksum = getBufferChecksum(file.contents)
 
+    if (getInfoChecksum(infoFilename) === nextChecksum) {
+      cb(null)
+      return
+    }
+
+    try {
+      const contents = getComponentInfo(file.path, nextChecksum)
       const infoFile = new Vinyl({
-        path: `./${file.basename.replace(/tsx$/, 'info.json')}`,
+        path: `./${infoFilename}`,
         contents: Buffer.from(JSON.stringify(contents, null, 2)),
       })
 

build/gulp/plugins/util/checksumUtils.ts

@@ -0,0 +1,21 @@
+import * as fs from 'fs'
+import * as crypto from 'crypto'
+
+import config from '../../../../config'
+
+export const getInfoChecksum = (filename: string): string | null => {
+  try {
+    const buffer = fs.readFileSync(config.paths.docsSrc('componentInfo', filename))
+    const componentInfo = JSON.parse(buffer.toString())
+
+    return componentInfo.checksum
+  } catch (e) {}
+
+  return null
+}
+
+export const getBufferChecksum = (buffer: Buffer): string =>
+  crypto
+    .createHash('md5')
+    .update(buffer)
+    .digest('hex')

build/gulp/plugins/util/getComponentInfo.ts

@@ -6,7 +6,7 @@ import parseDocblock from './parseDocblock'
 import parseType from './parseType'
 import * as reactDocgenTypescript from 'react-docgen-typescript'
 
-const getComponentInfo = filepath => {
+const getComponentInfo = (filepath: string, checksum?: string) => {
   const absPath = path.resolve(process.cwd(), filepath)
 
   const dir = path.dirname(absPath)
@@ -37,6 +37,9 @@ const getComponentInfo = filepath => {
   // remove keys we don't use
   delete info.methods
 
+  // add checksum
+  info.checksum = checksum
+
   // add exported Component info
   const Component = require(absPath).default
   info.constructorName = _.get(Component, 'prototype.constructor.name', null)

build/gulp/plugins/util/index.ts

@@ -1,3 +1,4 @@
+export * from './checksumUtils'
 export { default as getComponentInfo } from './getComponentInfo'
 export { default as parseDefaultValue } from './parseDefaultValue'
 export { default as parseDocblock } from './parseDocblock'

build/gulp/tasks/docs.ts

@@ -30,10 +30,6 @@ const handleWatchUnlink = (group, path) => {
 // Clean
 // ----------------------------------------
 
-task('clean:docs:component-info', cb => {
-  rimraf(paths.docsSrc('componentInfo'), cb)
-})
-
 task('clean:docs:component-menu', cb => {
   rimraf(paths.docsSrc('componentMenu.json'), cb)
 })
@@ -53,7 +49,6 @@ task('clean:docs:example-menus', cb => {
 task(
   'clean:docs',
   parallel(
-    'clean:docs:component-info',
     'clean:docs:component-menu',
     'clean:docs:component-menu-behaviors',
     'clean:docs:dist',