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) => {
+exec(`npm run generate-build-info ${process.argv[2]}`).then(() => {
-  return Promise.resolve(result.stdout.trim());
+  return rm('./www/')
-}).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)]);
 }).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-lock.json

@@ -111,7 +111,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",
@@ -18741,68 +18740,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/replace-in-file": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-7.2.0.tgz",
-      "integrity": "sha512-CiLXVop3o8/h2Kd1PwKPPimmS9wUV0Ki6Fl8+1ITD35nB3Gl/PrW5IONpTE0AXk0z4v8WYcpEpdeZqMXvSnWpg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.1.2",
-        "glob": "^8.1.0",
-        "yargs": "^17.7.2"
-      },
-      "bin": {
-        "replace-in-file": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/replace-in-file/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/replace-in-file/node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/replace-in-file/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/request": {
       "version": "2.88.0",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
@@ -35969,50 +35906,6 @@
         "is-finite": "^1.0.0"
       }
     },
-    "replace-in-file": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-7.2.0.tgz",
-      "integrity": "sha512-CiLXVop3o8/h2Kd1PwKPPimmS9wUV0Ki6Fl8+1ITD35nB3Gl/PrW5IONpTE0AXk0z4v8WYcpEpdeZqMXvSnWpg==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.1.2",
-        "glob": "^8.1.0",
-        "yargs": "^17.7.2"
-      },
-      "dependencies": {
-        "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-          "dev": true,
-          "requires": {
-            "balanced-match": "^1.0.0"
-          }
-        },
-        "glob": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^5.0.1",
-            "once": "^1.3.0"
-          }
-        },
-        "minimatch": {
-          "version": "5.1.6",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        }
-      }
-    },
     "request": {
       "version": "2.88.0",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",

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,