Improved on the docs (buefy#2722)

* cleaning of warning issue on CLI when run dev and test

* Fixes auto open browser when run dev

* refactor: Use const/let instead of var with strict mode

* Fix vetur script when API don't have props and update script build:lib

* Add banner on cli when run dev and build docs

* Improved on building the docs

* update Use const/let instead of var

build/banner.js

@@ -1,6 +1,7 @@
+'use strict'
 const pack = require('../package.json')
 
 const bannerTxt = `/*! Buefy v${pack.version} | MIT License | github.com/buefy/buefy */\n`
 
 process.stdout.write(bannerTxt)
-process.stdin.pipe(process.stdout)
+process.stdin.pipe(process.stdout)

build/build.js

@@ -1,22 +1,20 @@
+'use strict'
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
 
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
+const rm = require('rimraf')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const utils = require('./utils')
+const webpackConfig = require('./webpack.prod.conf')
 
-var spinner = ora('building for production...')
-spinner.start()
+console.log(`    ${utils.bannerCLI()}`)
 
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+rm(config.build.assetsRoot, err => {
   if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
+  webpack(webpackConfig, (err, stats) => {
     if (err) throw err
     process.stdout.write(stats.toString({
       colors: true,

build/check-versions.js

@@ -1,12 +1,13 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
 
-var versionRequirements = [
+const versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
@@ -23,9 +24,9 @@ if (shell.which('npm')) {
 }
 
 module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -38,8 +39,8 @@ module.exports = function () {
     console.log('')
     console.log(chalk.yellow('To use this template, you must update following to modules:'))
     console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
       console.log('  ' + warning)
     }
     console.log()

build/dev-client.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
+'use strict'
 require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 
 hotClient.subscribe(function (event) {
   if (event.action === 'reload') {

build/dev-server.js

@@ -1,38 +1,36 @@
+'use strict'
 require('./check-versions')()
 
-var config = require('../config')
+const config = require('../config')
 if (!process.env.NODE_ENV) {
   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 }
 
-var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
+const open = require('open')
+const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const proxyMiddleware = require('http-proxy-middleware')
+const webpackConfig = process.env.NODE_ENV === 'testing'
   ? require('./webpack.prod.conf')
   : require('./webpack.dev.conf')
 
 // default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
+const port = process.env.PORT || config.dev.port
 // automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
+const autoOpenBrowser = !!config.dev.autoOpenBrowser
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
+const proxyTable = config.dev.proxyTable
 
-var app = express()
-var compiler = webpack(webpackConfig)
+const app = express()
+const compiler = webpack(webpackConfig)
 
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
+const devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
   quiet: true
 })
 
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: false
-})
 // force page reload when html-webpack-plugin template changes
 compiler.plugin('compilation', function (compilation) {
   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
@@ -43,7 +41,7 @@ compiler.plugin('compilation', function (compilation) {
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
+  const options = proxyTable[context]
   if (typeof options === 'string') {
     options = { target: options }
   }
@@ -58,30 +56,28 @@ app.use(devMiddleware)
 
 // enable hot-reload and state-preserving
 // compilation error display
-app.use(hotMiddleware)
+app.use(require('webpack-hot-middleware')(compiler, {
+  log: false
+}))
 
 // serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./static'))
 
-var uri = 'http://localhost:' + port
+const uri = 'http://localhost:' + port
 
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
+const readyPromise = new Promise(resolve => {
+  console.log('> Starting dev server...')
+  devMiddleware.waitUntilValid(() => {
+    // when env is testing, don't need open it
+    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+      open(uri)
+    }
+    resolve()
+  })
 })
 
-var server = app.listen(port)
+const server = app.listen(port)
 
 module.exports = {
   ready: readyPromise,

build/utils.js

@@ -1,9 +1,12 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+'use strict'
+const path = require('path')
+const chalk = require('chalk')
+const config = require('../config')
+const pkg = require('../package.json')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
@@ -16,7 +19,7 @@ exports.assetsLibPath = function (_path) {
 exports.cssLoaders = function (options) {
   options = options || {}
 
-  var cssLoader = {
+  const cssLoader = {
     loader: 'css-loader',
     options: {
       minimize: options.minimize,
@@ -26,7 +29,7 @@ exports.cssLoaders = function (options) {
 
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
+    const loaders = [cssLoader]
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -62,14 +65,35 @@ exports.cssLoaders = function (options) {
 
 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
+  const output = []
+  const loaders = exports.cssLoaders(options)
+  for (const extension in loaders) {
+    const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
       use: loader
     })
   }
   return output
 }
+
+// Banner CLI
+exports.bannerCLI = () => {
+  let isProd = process.env.NODE_ENV === 'production'
+  let _port = process.env.PORT || config.dev.port
+
+  const names = `${chalk.hex('#7957d5').bold('Buefy')} v${pkg.version}`
+  const url = `http://localhost:${_port}/`
+  let _env = isProd ? 'production' : 'development'
+  let rendering = isProd ? 'client-side' : 'server-side'
+  let listening = isProd
+    ? `${chalk.bold('Status: ')} ${chalk.bold.cyan('on building...')}`
+    : `${chalk.bold('Listening: ')} ${chalk.underline.blue(url)}`
+
+  const label = name => chalk.bold.cyan(`▸ ${name}: `)
+
+  return `${names}\n
+    ${label('Environment')} ${_env}
+    ${label('Rendering')}   ${rendering}\n
+    ${listening}`
+}

build/vetur.js

@@ -1,10 +1,11 @@
-var fs = require('fs');
-var path = require('path');
+'use strict'
+const fs = require('fs');
+const path = require('path');
 
 const buefyDir = path.resolve(__dirname, '../docs/pages/components')
 
-var tags = {}
-var attributes = {}
+let tags = {}
+let attributes = {}
 
 fs.readdirSync(buefyDir, { withFileTypes: true })
     .filter(item => item.isDirectory()
@@ -39,6 +40,7 @@ fs.readdirSync(buefyDir, { withFileTypes: true })
                 mainTag.subtags.push(htmlName)
             }
 
+            if (tag.props === undefined) return
             tag.props.forEach(prop => {
                 const name = prop.name.replace('<code>', '').replace('</code>', '').replace('v-model', 'value')
                 if (!name.includes('Any'))
@@ -62,4 +64,3 @@ fs.writeFile(path.resolve(__dirname, '../helper-json/attributes.json'), JSON.str
         return console.log(err);
     }
 })
-

build/vue-loader.conf.js

@@ -1,6 +1,7 @@
-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
 
 module.exports = {
   loaders: utils.cssLoaders({

build/webpack.base.conf.js

@@ -1,8 +1,9 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var vueLoaderConfig = require('./vue-loader.conf')
-var vueLoaderPlugin = require('vue-loader/lib/plugin')
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+const { VueLoaderPlugin } = require('vue-loader')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -68,6 +69,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new vueLoaderPlugin()
+    new VueLoaderPlugin()
   ]
 }

build/webpack.dev.conf.js

@@ -1,12 +1,11 @@
-var fs = require('fs')
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
 // add hot-reload related code to entry chunks
 Object.keys(baseWebpackConfig.entry).forEach(function (name) {
@@ -32,6 +31,10 @@ module.exports = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true
     }),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin({
+      compilationSuccessInfo: {
+        messages: [ utils.bannerCLI() ]
+      }
+    })
   ]
 })