Improve injection of build info into the UI (#2828)

Fixes #2814.
Follow-up for #2796.

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/build/build.js

@@ -5,33 +5,17 @@ const webpack = require('webpack');
 const ora = require('ora');
 const rm = require('rimraf').rimraf;
 const chalk = require('chalk');
-const replaceInFile = require('replace-in-file')
 
 const config = require('./webpack.config.js');
 
 const env = process.env.NODE_ENV || 'development';
 const target = process.env.TARGET || 'web';
-const timestamp = new Date().toISOString().slice(0, 16).replaceAll(/[T:-]/g, "");
-let version = process.argv[2] || timestamp;
-if (version.endsWith('SNAPSHOT')) version += '-' + timestamp;
 
 const spinner = ora(env === 'production' ? chalk.cyan('Building for production...') : chalk.cyan('Building development version...'));
 spinner.start();
 
-exec('git rev-parse --short HEAD').then((result) => {
-  return Promise.resolve(result.stdout.trim());
-}).then((commit) => {
-  const versionReplace = {
-    files: './src/components/app.vue',
-    from: /%VERSION%/g,
-    to: version
-  }
-  const commitReplace = {
-    files: './src/js/store/index.js',
-    from: /%GIT_COMMIT_HASH%/g,
-    to: commit || ''
-  }
-  return Promise.all([rm('./www/'), replaceInFile(versionReplace), replaceInFile(commitReplace)]);
+exec(`npm run generate-build-info ${process.argv[2]}`).then(() => {
+  return rm('./www/')
 }).then(() => {
   webpack(config, (err, stats) => {
     if (err) throw err;

bundles/org.openhab.ui/web/build/generate-build-info.mjs

@@ -0,0 +1,27 @@
+import util from 'node:util'
+import { exec } from 'node:child_process'
+import fs from 'node:fs'
+
+const promisifiedExec = util.promisify(exec);
+
+const env = process.env.NODE_ENV || 'development';
+
+const timestamp = new Date().toISOString().slice(0, 16).replaceAll(/[T:-]/g, "");
+let version = process.argv[2] || (env === 'production' ? timestamp : 'development');
+if (version.endsWith('SNAPSHOT')) version += '-' + timestamp;
+
+promisifiedExec('git rev-parse --short HEAD').then((result) => {
+  return Promise.resolve(result.stdout.trim());
+}).then((commit) => {
+  if (env === 'development') commit = 'development'
+  const content = `export default {
+  version: '${version} ', // App version
+  commit: '${commit || ''}' // UI commit hash
+}
+`
+
+  fs.writeFileSync('./src/assets/build-info.js', content, {
+    encoding: 'utf-8',
+    flag: 'w'
+  })
+})

bundles/org.openhab.ui/web/package.json

@@ -23,11 +23,14 @@
     "bundler": "webpack"
   },
   "scripts": {
+    "generate-build-info": "node build/generate-build-info.mjs",
     "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
     "webpack-analyzer": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 node ./build/build.js",
     "webpack-analyzer-report": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 node ./build/build.js",
     "webpack-analyzer-report-stats": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 WEBPACK_ANALYZER_REPORT_STATS=1 node ./build/build.js",
+    "predev:blockly": "cross-env NODE_ENV=development npm run generate-build-info",
     "dev:blockly": "cross-env SOURCE_MAPS=1 NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
+    "predev": "cross-env NODE_ENV=development npm run generate-build-info",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
     "start": "npm run dev",
     "lint": "npx eslint --ext js --ext vue src",
@@ -149,7 +152,6 @@
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.0.0",
     "process": "^0.11.10",
-    "replace-in-file": "^7.2.0",
     "rimraf": "^6.0.1",
     "standard": "^17.1.0",
     "style-loader": "^4.0.0",

bundles/org.openhab.ui/web/src/assets/.gitignore

@@ -0,0 +1 @@
+build-info.js

bundles/org.openhab.ui/web/src/components/app.vue

@@ -254,6 +254,8 @@
 <script>
 import Framework7 from 'framework7/framework7-lite.esm.bundle.js'
 
+import buildInfo from '@/assets/build-info'
+
 import routes from '@/js/routes.js'
 import PanelRight from '@/pages/panel-right.vue'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
@@ -297,7 +299,7 @@ export default {
       f7params: {
         id: 'org.openhab.ui', // App bundle ID
         name: 'openHAB', // App name
-        version: '%VERSION%', // App version, replaced during production build
+        version: buildInfo.version, // App version
         theme: theme || 'auto',
         // theme: (document.documentURI && document.documentURI.indexOf('?theme=ios') > 0) ? 'ios'
         //   : (document.documentURI && document.documentURI.indexOf('?theme=md') > 0) ? 'md'

bundles/org.openhab.ui/web/src/js/store/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import buildInfo from '@/assets/build-info'
+
 import components from './modules/components'
 import model from './modules/model'
 import states from './modules/states'
@@ -27,7 +29,7 @@ const store = new Vuex.Store({
     locale: null,
     runtimeInfo: null,
     uiInfo: {
-      commit: '%GIT_COMMIT_HASH%' // replaced during production build
+      commit: buildInfo.commit
     },
     websiteUrl: null,
     developerDock: false,