build(types): Improve type generation build script (#11260)

* build(types): Add a parameter for types-only build
Using type-only script reduced the build time from ~20s to ~3s on my machine.

* docs: Add some contibution info about types

* build(types): Output the diff of types

CONTRIBUTING.md

@@ -69,6 +69,8 @@ $ yarn dev [theme] # or: npm run dev [theme]
 $ yarn build      # or: npm run build
 # build only js dist files
 $ yarn build js   # or: npm run build js
+# build only type related files
+$ yarn build js types  # or: npm run build js types
 # build only css dist files
 $ yarn build css  # or: npm run build css
 
@@ -100,6 +102,8 @@ $ yarn lint # or: npm run lint
 
 - **`dist`**: contains built files for distribution (only after a build). Note this directory is only updated when a release happens; they do not reflect the latest changes in development branches.
 
+- **`types`**: contains Typescript related files. Used by `build/script.types.js` along with JSON API files to produce final Typescript type declarations.
+
 - **`dev`**: app with Quasar sources linked directly used for testing purposes. Each feature/component has its own `*.vue` file. Adding a new file automatically creates a route for it and adds it to the "homepage" list (based on the file name).
 
 ## Dev Server for Quasar (/ui)

ui/build/script.build.javascript.js

@@ -298,7 +298,62 @@ function buildEntry (config) {
     })
 }
 
-module.exports = function () {
+const { createPatch } = require('diff')
+const { highlight } = require('cli-highlight')
+
+/**
+ * Call this with the path to file you want to track, before the file gets updated.
+ * It will save the current contents and will print the diff before exiting the process
+ *
+ * @param {string} filePath
+ */
+function withDiff (filePath) {
+  const absolutePath = resolve(filePath)
+
+  // If there is no "old" file, then there is no diff
+  if (!fs.existsSync(absolutePath)) {
+    return
+  }
+
+  // Read the current(old) contents
+  const oldContent = fs.readFileSync(absolutePath, { encoding: 'utf-8' })
+
+  // Before exiting the process, read the new contents and output the diff
+  process.on('exit', code => {
+    if (code !== 0) {
+      return
+    }
+
+    const newContent = fs.readFileSync(absolutePath, { encoding: 'utf-8' })
+
+    if (oldContent === newContent) {
+      console.log(`\n 📜 No changes for ${ filePath }\n`)
+      return
+    }
+
+    const diffPatch = createPatch(filePath, oldContent, newContent)
+
+    console.log(`\n 📜 Changes for ${ filePath }\n`)
+    console.log(highlight(diffPatch, { language: 'diff' }))
+  })
+}
+
+module.exports = async function (subtype) {
+  if (subtype === 'types') {
+    withDiff('dist/types/index.d.ts')
+
+    const data = await require('./build.api').generate()
+
+    require('./build.vetur').generate(data)
+    require('./build.web-types').generate(data)
+
+    // 'types' depends on 'lang-index'
+    await require('./build.lang-index').generate()
+    require('./build.types').generate(data)
+
+    return
+  }
+
   require('./build.lang-index').generate()
     .then(() => require('./build.svg-icon-sets').generate())
     .then(() => require('./build.api').generate())

ui/build/script.build.js

@@ -1,6 +1,7 @@
 process.env.NODE_ENV = 'production'
 
 const type = process.argv[ 2 ]
+const subtype = process.argv[ 3 ]
 const { createFolder } = require('./build.utils')
 const { green } = require('chalk')
 
@@ -30,7 +31,7 @@ if (!type || type === 'js') {
   createFolder('dist/types')
   createFolder('dist/ssr-directives')
 
-  require('./script.build.javascript')()
+  require('./script.build.javascript')(subtype)
 }
 
 if (!type || type === 'css') {

ui/package.json

@@ -67,6 +67,8 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "cli-highlight": "^2.1.11",
+    "diff": "^5.0.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",