Upgrade from webpack v4 to v5 (#2267)

Upgrade webpack and related build dependencies from v4 to v5.
Also upgrade the NodeJS and npm versions used by the Main UI build as well as babel.

The changes follow the recommendations of the webpack migration guide at https://webpack.js.org/migrate/5/ or are required changes for updated webpack plugins.
New default values causing problems have been overwritten, e.g. devServer.compress: false because compression broke the SSE event streams.
The ModuleConcatenationPlugin is not created manually in production mode anymore, as this setting broke the production build, and it is not neccassary to create that, as this plugin is automatically enabled in production mode.
See https://webpack.js.org/plugins/module-concatenation-plugin/.

---------

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Miguel Álvarez <miguelwork92@gmail.com>

.github/workflows/mainui.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: Cache node modules
         id: cache
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: Cache node modules
         id: cache

README.md

@@ -56,11 +56,12 @@ You find the following repository structure:
 
 In most cases, you **don't** need a Java development environment for UI development.
 
-Instead, make sure you have NodeJS 16.14 (HABot: 12.16) or later and npm 8.6 (HABot: 6.14) or later installed.
+Instead, you need NodeJS and npm installed, you'll learn about the required versions later.
 
-
-Then identify in the `bundles` directories where the frontend code is - for instance, for the main UI it is `bundles/org.openhab.ui/web/`.
-Then follow the instructions in the specific add-on's `CONTRIBUTING.md` file to get started. In the main UI's case, it is located in [bundles/org.openhab.ui/CONTRIBUTING.md](https://github.com/openhab/openhab-webui/blob/master/bundles/org.openhab.ui/CONTRIBUTING.md). In many cases it will involve executing some `npm` commands to install dependencies and start a development server.
+Then identify in the `bundles` directories where the frontend code is - for instance, for the Main UI it is `bundles/org.openhab.ui/web/`.
+Then follow the instructions in the specific add-on's `CONTRIBUTING.md` file to get started, e.g. install the correct versions of NodeJS and npm.
+For Main UI, it is located in [bundles/org.openhab.ui/CONTRIBUTING.md](https://github.com/openhab/openhab-webui/blob/master/bundles/org.openhab.ui/CONTRIBUTING.md).
+In many cases it will involve executing some `npm` commands to install dependencies and start a development server.
 
 However, if you want to compile the final `.jar` add-ons, we have assembled some step-by-step guides for different IDEs on our developer documentation website:
 

bundles/org.openhab.ui.basic/CONTRIBUTING.md

@@ -1,6 +1,10 @@
 ## Contributing
 
-Javascript linting, compressing and LESS compilation is handled through Gulp. Therefore, please run `gulp` instead of changing compressed CSS/JS manually. Default Gulp task will also check the code using ESLint.
+You need NodeJS 18.17.0 or later and npm 9.8.1 or later installed.
+
+Javascript linting, compressing and LESS compilation is handled through Gulp.
+Therefore, please run `gulp` instead of changing compressed CSS/JS manually.
+Default Gulp task will also check the code using ESLint.
 
 Installing build dependencies:
 

bundles/org.openhab.ui.habot/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing to HABot
+
+You need NodeJS 12.16 or later and npm 6.14 or later installed.

bundles/org.openhab.ui.habpanel/CONTRIBUTING.md

@@ -14,8 +14,10 @@ redirect you, if necessary.
 
 ## Build Environment
 
-It is assumed you have ```npm```, ```bower``` and ```gulp``` available; if not,
-check their respective docs.
+You need NodeJS 16.14 or later and npm 8.6 or later installed.
+
+It is assumed you have `npm`, `bower` and `gulp` available;
+if not, check their respective docs.
 
 To build the Javascript part of HABPanel, navigate to the ```web/``` subfolder, then:
 1. Run ```npm install```

bundles/org.openhab.ui/CONTRIBUTING.md

@@ -8,7 +8,9 @@ The repository for web user interfaces, including this project, is located at <h
 
 This project is built using [Vue.js](https://vuejs.org/), [webpack](https://webpack.js.org/) and [Framework7](https://framework7.io).
 
-You need Node 16.14.0 or later and npm 8.6.0. Change to the `web` directory, gather the necessary dependencies with `npm install` then the scripts below will be available.
+You need Node 18.18.0 or later and npm 9.8.1 or later installed.
+
+Change to the `web` directory, gather the necessary dependencies with `npm install` then the scripts below will be available.
 
 ## NPM Scripts
 

bundles/org.openhab.ui/pom.xml

@@ -37,8 +37,8 @@
         <artifactId>frontend-maven-plugin</artifactId>
 
         <configuration>
-          <nodeVersion>v16.14.2</nodeVersion>
-          <npmVersion>8.6.0</npmVersion>
+          <nodeVersion>v18.18.0</nodeVersion>
+          <npmVersion>9.8.1</npmVersion>
           <workingDirectory>web</workingDirectory>
         </configuration>
 

bundles/org.openhab.ui/web/babel.config.js

@@ -24,7 +24,7 @@ module.exports = {
     test: {
       plugins: [
         '@babel/plugin-transform-modules-commonjs',
-        'babel-plugin-dynamic-import-node-babel-7'
+        'babel-plugin-dynamic-import-node'
       ],
       presets: [
         [

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

@@ -1,9 +1,9 @@
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin')
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const WebpackAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
@@ -12,7 +12,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 
 const path = require('path')
 
-function resolvePath (dir) {
+function resolvePath(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -23,6 +23,9 @@ const isCordova = target === 'cordova'
 
 const apiBaseUrl = process.env.OH_APIBASE || 'http://localhost:8080'
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = {
   mode: env,
   entry: [
@@ -30,29 +33,32 @@ module.exports = {
   ],
   output: {
     path: resolvePath(isCordova ? 'cordova/www' : 'www'),
-    filename: 'js/app.[hash].js',
+    filename: 'js/app.[contenthash].js',
     publicPath: '/',
-    hotUpdateChunkFilename: 'hot/hot-update.js',
-    hotUpdateMainFilename: 'hot/hot-update.json'
+    hotUpdateChunkFilename: 'hot/[id].[fullhash].hot-update.js',
+    hotUpdateMainFilename: 'hot/[runtime].hot-update.json'
   },
   resolve: {
+    fallback: {
+      "crypto": require.resolve("crypto-browserify"),
+      "stream": require.resolve("stream-browserify"),
+      "path": require.resolve("path-browserify"),
+    },
     extensions: ['.mjs', '.js', '.vue', '.json'],
     alias: {
       vue$: 'vue/dist/vue.esm.js',
       '@': resolvePath('src')
     }
   },
-  devtool: env === 'production' ? (buildSourceMaps) ? 'source-map' : 'none' : 'eval-source-map',
+  devtool: env === 'production' ? (buildSourceMaps ? 'source-map' : false) : 'eval-source-map',
   devServer: {
     hot: true,
-    // open: true,
-    // compress: true,
-    contentBase: '/www/',
-    disableHostCheck: true,
+    compress: false, // disable compression as this seems to break the SSE event stream
+    static: [
+      path.resolve(__dirname, 'www'),
+    ],
+    allowedHosts: "all",
     historyApiFallback: true,
-    // watchOptions: {
-    //   poll: 1000,
-    // },
     proxy: [{
       context: ['/auth', '/rest', '/chart', '/proxy', '/icon', '/static', '/changePassword', '/createApiToken', '/audio'],
       target: apiBaseUrl
@@ -63,9 +69,22 @@ module.exports = {
     maxEntrypointSize: 2500000
   },
   optimization: {
-    minimizer: [new TerserPlugin({
-      sourceMap: true
-    })]
+    moduleIds: env === 'production' ? undefined : 'named',
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          sourceMap: true
+        }
+      }),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          processorOptions: {
+            safe: true,
+            map: { inline: false, annotation: env !== 'production' }
+          },
+        },
+      }),
+    ]
   },
   module: {
     rules: [
@@ -87,11 +106,6 @@ module.exports = {
           resolvePath('node_modules/ssr-window')
         ]
       },
-      {
-        test: /(blockly\/.*\.js)$/,
-        enforce: "pre",
-        use: (buildSourceMaps) ? ["source-map-loader"] : [],
-      },
       {
         test: /\.vue$/,
         use: 'vue-loader'
@@ -153,26 +167,38 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'images/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'images/[name].[ext]'
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'media/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'media/[name].[ext]'
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'fonts/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'fonts/[name].[ext]'
         }
       },
       {
@@ -185,6 +211,9 @@ module.exports = {
     ]
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+  }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(env),
       'process.env.TARGET': JSON.stringify(target)
@@ -193,18 +222,9 @@ module.exports = {
     ...(env === 'production' ? [
       new ESLintPlugin({
         extensions: ['js', 'vue']
-      }),
-      new OptimizeCSSPlugin({
-        cssProcessorOptions: {
-          safe: true,
-          map: { inline: false }
-        }
-      }),
-      new webpack.optimize.ModuleConcatenationPlugin()
+      })
     ] : [
       // Development only plugins
-      new webpack.HotModuleReplacementPlugin(),
-      new webpack.NamedModulesPlugin()
     ]),
     new HtmlWebpackPlugin({
       filename: './index.html',
@@ -220,25 +240,28 @@ module.exports = {
       } : false
     }),
     new MiniCssExtractPlugin({
-      filename: 'css/app.[hash].css'
+      filename: 'css/app.[contenthash].css'
     }),
-    new CopyWebpackPlugin([
-      {
-        from: resolvePath('src/res'),
-        to: resolvePath(isCordova ? 'cordova/www/res' : 'www/res')
-      },
-      {
-        from: resolvePath('src/manifest.json'),
-        to: resolvePath('www/manifest.json')
-      },
-      {
-        from: resolvePath('src/robots.txt'),
-        to: resolvePath('www/robots.txt')
-      }
-    ]),
-    ...(!isCordova ? [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: resolvePath('src/res'),
+          to: resolvePath(isCordova ? 'cordova/www/res' : 'www/res')
+        },
+        {
+          from: resolvePath('src/manifest.json'),
+          to: resolvePath('www/manifest.json')
+        },
+        {
+          from: resolvePath('src/robots.txt'),
+          to: resolvePath('www/robots.txt')
+        }
+      ]
+    }),
+    ...(!isCordova && env === 'production' ? [
       new WorkboxPlugin.InjectManifest({
-        swSrc: resolvePath('src/service-worker.js')
+        swSrc: resolvePath('src/service-worker.js'),
+        maximumFileSizeToCacheInBytes: 100000000,
       })
     ] : []),
     ...(env === 'production' ? [

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

@@ -1,6 +1,6 @@
 {
   "name": "openhab",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "openHAB",
   "repository": "https://github.com/openhab/openhab-webui",
   "license": "EPL-2.0",
@@ -74,6 +74,7 @@
     "@jsep-plugin/template": "^1.0.2",
     "blockly": "^9.2.0",
     "cronstrue": "^1.100.0",
+    "crypto-browserify": "^3.12.0",
     "dayjs": "^1.9.6",
     "dom7": "^2.1.5",
     "echarts": "^5.1.2",
@@ -89,10 +90,12 @@
     "lodash": "^4.17.20",
     "moo": "^0.5.1",
     "nearley": "^2.19.6",
+    "path-browserify": "^1.0.1",
     "pkce-challenge": "^2.1.0",
     "qrcode": "^1.0.0",
     "scope-css": "^1.2.1",
     "sprintf-js": "^1.1.2",
+    "stream-browserify": "^3.0.0",
     "template7": "^1.4.2",
     "tern": "^0.23.0",
     "v-clipboard": "^2.2.3",
@@ -112,35 +115,35 @@
     "vue2-leaflet": "^2.5.2",
     "vuetrend": "^0.3.4",
     "vuex": "^3.5.1",
-    "yaml": "^1.10.0"
+    "yaml": "^2.3.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/eslint-parser": "^7.12.13",
-    "@babel/eslint-plugin": "^7.12.13",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/eslint-plugin": "^7.23.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-jsx": "^7.10.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/runtime": "^7.11.2",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/runtime": "^7.23.8",
     "@iconify/vue2": "^1.0.0",
     "@types/jest": "^24.9.1",
     "@types/marked": "^4.0.8",
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/test-utils": "^1.0.5",
-    "babel-core": "7.0.0-bridge.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "chalk": "^2.4.2",
     "chokidar": "^3.5.3",
-    "compression-webpack-plugin": "^6.0.3",
-    "copy-webpack-plugin": "^4.6.0",
+    "compression-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^5.2.1",
-    "css-loader": "^2.1.1",
+    "css-loader": "^6.9.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "cypress": "^3.8.3",
     "diacritic": "0.0.2",
     "eslint": "^7.19.0",
@@ -150,41 +153,38 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-vue": "^7.5.0",
     "eslint-webpack-plugin": "^2.5.0",
-    "file-loader": "^3.0.1",
     "global-prefix": "^3.0.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^24.9.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-nearley": "^2.0.0",
     "jest-transform-stub": "^2.0.0",
     "jest-vue-preprocessor": "^1.7.1",
     "marked": "^4.2.12",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^2.7.7",
     "nearley-loader": "^2.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "ora": "^3.4.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^7.3.4",
     "postcss-preset-env": "^6.7.0",
+    "process": "^0.11.10",
     "resolve-dir": "^1.0.1",
     "rimraf": "^2.7.1",
-    "source-map-loader": "^1.1.3",
     "standard": "^12.0.1",
     "strip-ansi": "=3.0.1",
-    "style-loader": "^0.23.1",
-    "stylus": "^0.54.8",
-    "stylus-loader": "^3.0.2",
+    "style-loader": "^3.3.4",
+    "stylus": "^0.62.0",
+    "stylus-loader": "^7.1.3",
     "swagger-ui-dist": "^4.1.3",
-    "url-loader": "^1.1.2",
     "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.3",
+    "vue-loader": "^15.10.0",
     "vue-masonry-css": "^1.0.3",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.46.0",
-    "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-stats-plugin": "^0.2.1",
-    "workbox-webpack-plugin": "^3.6.3"
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-stats-plugin": "^1.1.3",
+    "workbox-webpack-plugin": "^7.0.0"
   }
 }

bundles/org.openhab.ui/web/src/assets/definitions/blockly/_tmp/blocks-exec.js

@@ -1,5 +1,5 @@
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 import { FieldItemModelPicker } from './ohitemfield'
 
 export default function defineOHBlocks_Exec (f7) {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/_tmp/blocks-http.js

@@ -1,5 +1,5 @@
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 import { FieldItemModelPicker } from './ohitemfield'
 
 export default function defineOHBlocks_HTTP (f7, scripts) {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-audio.js

@@ -11,7 +11,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 import { FieldSlider } from '@blockly/field-slider'
 
 export default function (f7, isGraalJs, sinks, voices) {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-color.js

@@ -4,7 +4,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 import { blockGetCheckedInputType } from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7, isGraalJs) {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-dateoffsets.js

@@ -2,9 +2,9 @@
  * supports jsscripting
  */
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { FieldDatePicker } from './fields/date-field'
-import { addDateSupport, addDateComparisonSupportNashorn, addDateComparisonSupportGraalVM, addGetZdtComponent, addChrono } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { FieldDatePicker } from './fields/date-field.js'
+import { addDateSupport, addDateComparisonSupportNashorn, addDateComparisonSupportGraalVM, addGetZdtComponent, addChrono } from './utils.js'
 
 export default function (f7, isGraalJs) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-dicts.js

@@ -3,7 +3,7 @@
  */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function (f7, isGraalJs) {
   Blockly.Blocks['dicts_create_with'] = {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-ephemeris.js

@@ -7,7 +7,7 @@
 * supports jsscripting
 */
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function (f7, isGraalJs) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-eventbus.js

@@ -4,8 +4,8 @@
  */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { blockGetCheckedInputType } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { blockGetCheckedInputType } from './utils.js'
 
 export default function (f7, isGraalJs) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-items.js

@@ -4,11 +4,11 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { FieldItemModelPicker } from './fields/item-field'
-import { FieldThingPicker } from './fields/thing-field'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { FieldItemModelPicker } from './fields/item-field.js'
+import { blockGetCheckedInputType } from './utils.js'
+
 import api from '@/js/openhab/api'
-import { blockGetCheckedInputType } from './utils'
 
 export default function (f7, isGraalJs) {
   /* Helper block to allow selecting an item */

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-list.js

@@ -3,7 +3,8 @@
 * supports jsscripting
 */
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
+
 export default function (f7, isGraalJs) {
   /*
   * allows to concatenate a list into a new list

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-logging.js

@@ -4,7 +4,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function (f7, isGraalJs) {
   Blockly.Blocks['oh_print'] = {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-math.js

@@ -3,8 +3,8 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { blockGetCheckedInputType } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { blockGetCheckedInputType } from './utils.js'
 
 export default function (f7, isGraalJs) {
   Blockly.Blocks['oh_toNumber'] = {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-metadata.js

@@ -4,8 +4,8 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { addGetItemMetaConfigValue } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { addGetItemMetaConfigValue } from './utils.js'
 
 const unavailMsg = 'Metadata blocks aren\'t supported in "application/javascript;version=ECMAScript-5.1"'
 

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-notifications.js

@@ -4,7 +4,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 // TODO: Add options to set icon and level (argument order should be the same as for broadcast notification etc.)
 export default function defineOHBlocks_Notifications (f7, isGraalJs) {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-persistence.js

@@ -3,8 +3,8 @@
 * supports jsscripting
 */
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { addDateSupport, blockGetCheckedInputType } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { addDateSupport, blockGetCheckedInputType } from './utils.js'
 
 export default function defineOHBlocks_Persistence (f7, isGraalJs, persistenceServices) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-scripts.js

@@ -6,8 +6,8 @@
 * supports jsscripting
 */
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { addOSGiService } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { addOSGiService } from './utils.js'
 
 export default function defineOHBlocks_Scripts (f7, isGraalJs, scripts) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-text.js

@@ -4,7 +4,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function (f7, isGraalJs) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-things.js

@@ -4,9 +4,8 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { FieldItemModelPicker } from './fields/item-field'
-import { FieldThingPicker } from './fields/thing-field'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { FieldThingPicker } from './fields/thing-field.js'
 
 export default function defineOHBlocks (f7, isGraalJs) {
   Blockly.Blocks['oh_thing'] = {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-timers.js

@@ -4,7 +4,7 @@
  */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function defineOHBlocks_Timers (f7, isGraalJs) {
   /*

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-uom.js

@@ -4,8 +4,8 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { blockGetCheckedInputType } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { blockGetCheckedInputType } from './utils.js'
 
 const unavailMsg = 'Units of Measurements blocks aren\'t supported in "application/javascript;version=ECMAScript-5.1"'
 

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-valuestorage.js

@@ -5,7 +5,7 @@
 */
 
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 export default function defineOHBlocks_Variables (f7, isGraalJs) {
   Blockly.Blocks['oh_store_value'] = {

bundles/org.openhab.ui/web/src/assets/definitions/blockly/index.js

@@ -1,24 +1,24 @@
-import defineDictionaryBlocks from './blocks-dicts'
-import defineDateOffsetsBlocks from './blocks-dateoffsets'
-import defineItemBlocks from './blocks-items'
-import defineThingsBlocks from './blocks-things'
-import defineAudioBlocks from './blocks-audio'
-import defineEventBusBlocks from './blocks-eventbus'
-import defineLoggingBlocks from './blocks-logging'
-import defineNotificationBlocks from './blocks-notifications'
-import defineTimerBlocks from './blocks-timers'
-import defineValueStorageBlocks from './blocks-valuestorage'
-import defineEphemerisBlocks from './blocks-ephemeris'
-import defineScriptsBlocks from './blocks-scripts'
-import definePersistenceBlocks from './blocks-persistence'
-import defineColorBlocks from './blocks-color'
-import defineTextBlocks from './blocks-text'
-import defineListBlocks from './blocks-list'
-import defineUomBlocks from './blocks-uom'
-import defineMetaBlocks from './blocks-metadata'
-import defineMathBlocks from './blocks-math'
+import defineDictionaryBlocks from './blocks-dicts.js'
+import defineDateOffsetsBlocks from './blocks-dateoffsets.js'
+import defineItemBlocks from './blocks-items.js'
+import defineThingsBlocks from './blocks-things.js'
+import defineAudioBlocks from './blocks-audio.js'
+import defineEventBusBlocks from './blocks-eventbus.js'
+import defineLoggingBlocks from './blocks-logging.js'
+import defineNotificationBlocks from './blocks-notifications.js'
+import defineTimerBlocks from './blocks-timers.js'
+import defineValueStorageBlocks from './blocks-valuestorage.js'
+import defineEphemerisBlocks from './blocks-ephemeris.js'
+import defineScriptsBlocks from './blocks-scripts.js'
+import definePersistenceBlocks from './blocks-persistence.js'
+import defineColorBlocks from './blocks-color.js'
+import defineTextBlocks from './blocks-text.js'
+import defineListBlocks from './blocks-list.js'
+import defineUomBlocks from './blocks-uom.js'
+import defineMetaBlocks from './blocks-metadata.js'
+import defineMathBlocks from './blocks-math.js'
 
-import { defineLibraries } from './libraries'
+import { defineLibraries } from './libraries.js'
 
 import Blockly from 'blockly'
 

bundles/org.openhab.ui/web/src/assets/definitions/blockly/libraries.js

@@ -1,6 +1,6 @@
 import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript'
-import { addOSGiService } from './utils'
+import { javascriptGenerator } from 'blockly/javascript.js'
+import { addOSGiService } from './utils.js'
 
 const generateCodeForBlock = (block) => {
   const blockTypeId = block.openhab.blockTypeId

bundles/org.openhab.ui/web/src/assets/definitions/blockly/utils.js

@@ -1,4 +1,4 @@
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 
 /*
 * Function allowing to call classes within the OSGi container

bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue

@@ -1086,7 +1086,7 @@
 <script>
 import Blockly from 'blockly'
 import { WorkspaceSearch } from '@blockly/plugin-workspace-search'
-import { javascriptGenerator } from 'blockly/javascript'
+import { javascriptGenerator } from 'blockly/javascript.js'
 import DarkTheme from '@blockly/theme-dark'
 import { CrossTabCopyPaste } from '@blockly/plugin-cross-tab-copy-paste'
 import { ZoomToFitControl } from '@blockly/zoom-to-fit'

bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue

@@ -101,15 +101,13 @@
 </style>
 
 <script>
-import YAML from 'yaml'
-import { strOptions } from 'yaml/types'
+import YAML, { Schema } from 'yaml'
 
 import BlocklyEditor from '@/components/config/controls/blockly-editor.vue'
 import BlockPreview from './block-preview.vue'
-import ConfigSheet from '@/components/config/config-sheet.vue'
 import DirtyMixin from '@/pages/settings/dirty-mixin'
 
-strOptions.fold.lineWidth = 0
+Schema.toStringDefaults.lineWidth = 0
 
 export default {
   mixins: [DirtyMixin],

bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue

@@ -100,15 +100,14 @@
 </style>
 
 <script>
-import YAML from 'yaml'
-import { strOptions } from 'yaml/types'
+import YAML, { Schema } from 'yaml'
 
 import ConfigSheet from '@/components/config/config-sheet.vue'
 import DirtyMixin from '@/pages/settings/dirty-mixin'
 
 import * as StandardListWidgets from '@/components/widgets/standard/list'
 
-strOptions.fold.lineWidth = 0
+Schema.toStringDefaults.lineWidth = 0
 
 export default {
   mixins: [DirtyMixin],

bundles/org.openhab.ui/web/src/service-worker.js

@@ -1,3 +1,3 @@
 // manifest import and workbox imports will be autogenerated by webpack
 // eslint-disable-next-line no-undef
-workbox.precaching.precacheAndRoute(self.__precacheManifest || [])
+workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)