hof 24.0.0-vite-beta.10 → 24.0.0-vite-beta.12

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2025-11-18, Version 24.0.0 (Stable), @PaolaDMadd-Pro @Rhodine-orleans-lindsay
+### Changed
+- Replaced Browserify with Vite
+  - removed browserify dependencies including in tests
+  - added vite configuration and related tests
+- Updated readme.md
+- Potential **breaking changes**:
+  - Node version required for Vite is `20.19.0 || >=22.12.0`
+  - Vite uses Rollup in production and requires optional rollup dependencies to be loaded. Setting `--ignore-optional flag`  in Dockerfiles will result in "Module not found" errors in CI/CD or Docker.
+
 ## 2025-10-10, Version 22.10.4 (Stable), @dk4g
 ### Security
 - Upgraded axios version to address a security vulnerability

package/README.md

@@ -60,7 +60,7 @@ It is recommended to alias `hof-build` to an npm script in your package.json.
 
 ## Tasks
 
-- `browserify` - compiles client-side js with browserify
+- `vite` - compiles client-side js with vite in development and rollup in production. Requires node version `^20.19.0 || >=22.12.0`.
 - `sass` - compiles sass
 - `images` - copies images from ./assets/images directory to ./public/images
 - `translate` - compiles translation files
@@ -70,20 +70,6 @@ Note: For SASS compilation it's possible to additionally configure the following
 - `quietDeps` - This controls whether you get deprecation warning shown in the console output, if set to false (default) SASS deprecation warnings will be shown in the console, if set to true then deprecation warnings will not be shown in the console output.
 - `sourceMaps` - This controls whether the build will output css sourcemaps to help with debugging. These will be output to the same directory as the css output as a .map file. This option is not currently available in production.
 
-For JavaScript compilation, browserify can be set to debug mode by setting the `debug` option to true. This will cause browserify to output JavaScript sourcemaps as a .js.map file to the same directory as the js bundle.
-
-Debugging example (in hof.settings or your build config)
-```
-  "build": {
-    "sass": {
-      "sourceMaps": true
-    },
-    "browserify": {
-      "debug": true
-    }
-  }
-```
-
 ## Watch
 
 You can additionally run a `watch` task to start a server instance, which will automatically restart based on changes to files. This will also re-perform the tasks above when relevant files change.
@@ -109,7 +95,7 @@ hof-build watch --env .envdev
 
 ## Configuration
 
-The default settings will match those for an app generated using [`hof-generator`](https://npmjs.com/hof-generator).
+The default settings will match those for an app generated using [`hof-generator`](https://npmjs.com/hof-generator) (⚠️ This package has been deprecated).
 
 If a `hof.settings.json` file is found in the application root, then the `build` section of the settings file will be used to override [the default configuration](./defaults.js).
 
@@ -119,17 +105,9 @@ Alternatively you can define a path to a local config file by passing a `--confi
 hof-build --config /path/to/my/config.js
 ```
 
-Any task can be disabled by setting its configuration to `false` (or any falsy value).
-
-```js
-module.exports = {
-  browserify: false,
-};
-```
-
 ### Configuration options
 
-Each task has a common configuration format with the following options:
+Each task (except Vite) has a common configuration format with the following options:
 
 - `src` - defines the input file or files for the build task
 - `out` - defines the output location of the built code where relevant

package/build/tasks/vite/index.js

@@ -1,37 +1,19 @@
-/* eslint-disable no-console */
 'use strict';
 
 const vite = require('vite');
 const path = require('path');
 const viteConfig = path.resolve(__dirname, './vite.config.js');
 const hofDefaults = require('../../../config/hof-defaults');
-module.exports = config => {
-// The config.production’s value is set up with a command flag
-//  in the package.json’s script. process.env.NODE_ENV);
-  console.log('Vite build - production:', config.production, 'env: ', config.env);
-  console.log('hofDefaults:', hofDefaults);
 
-  // if (config.production === true) {
-  //   return vite.build({
-  //     configFile: viteConfig
-  //   });
-  // }
-  // process.env.NODE_ENV = 'development'; // TO DO make this dynamic to Ensure
-  // // the environment is set to development for non-production build
-  // return vite.build({
-  //   configFile: viteConfig,
-  //   mode: 'development'
-  // });
+module.exports = config => {
   process.env.NODE_ENV = hofDefaults.env;
 
   if(!config.production) {
-    console.log('Vite build - expecting development/local:', process.env.NODE_ENV);
     return vite.build({
       configFile: viteConfig,
       mode: 'development'
     });
   }
-  console.log('Vite build - expecting production:', process.env.NODE_ENV);
   return vite.build({
     configFile: viteConfig
   });

package/frontend/template-partials/views/partials/confirmation-alert.html

@@ -1,4 +1,6 @@
 <div class="govuk-panel govuk-panel--confirmation" role="alert">
   <h1 govuk-panel__title>{{#t}}journey.confirmation.message{{/t}}</h1>
-  <div class="govuk-panel__body">{{#t}}journey.confirmation.details{{/t}}</div>
+  <div class="govuk-panel__body">
+    {{#t}}journey.confirmation.details{{/t}}
+  </div>
 </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "24.0.0-vite-beta.10",
+  "version": "24.0.0-vite-beta.12",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
@@ -21,21 +21,18 @@
     "url": "https://github.com/UKHomeOfficeForms/hof/issues"
   },
   "scripts": {
-    "test": "yarn run unit && yarn run test:jest && yarn run test:functional && yarn run test:client && yarn run test:lint",
+    "test": "yarn run unit && yarn run test:jest && yarn run test:functional && yarn run test:vite && yarn run test:lint",
     "unit": "LOG_LEVEL=error nyc _mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
     "unit:nocov": "LOG_LEVEL=error mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
     "test:lint": "eslint . --config ./node_modules/eslint-config-hof/default.js",
     "test:functional": "funkie mocha ./test/functional-tests --timeout 20000 --exit",
-    "test:client": "karma start test/frontend/toolkit/karma.conf.js",
+    "test:vite": "vitest run --config test/frontend/toolkit/vitest.config.js",
     "test:jest": "jest test/frontend/jest test/integration/index test/utilities/helpers/jest",
     "test:acceptance": "TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
     "test:acceptance_browser": "ACCEPTANCE_WITH_BROWSER=true TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
     "test:cucumber": "cucumber-js -f @cucumber/pretty-formatter \"sandbox/test/_features/**/*.feature\" --require sandbox/test/_features/test.setup.js --require \"sandbox/test/_features/step_definitions/**/*.js\" --tags $TAGS",
     "ci": "travis-conditions",
-    "postversion": "git push && git push --tags",
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "postversion": "git push && git push --tags"
   },
   "dependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -103,6 +100,7 @@
     "@cucumber/cucumber": "^7.3.2",
     "@cucumber/pretty-formatter": "^1.0.1",
     "@types/jest": "^26.0.24",
+    "@vitest/coverage-v8": "^4.0.8",
     "@xmldom/xmldom": "~0.8.11",
     "chai": "^3.5.0",
     "chai-as-promised": "^7.1.2",
@@ -116,12 +114,6 @@
     "istanbul": "^0.4.5",
     "jest": "^26.6.3",
     "jquery": "^3.7.1",
-    "karma": "^6.4.4",
-    "karma-browserify": "^8.1.0",
-    "karma-chai": "^0.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-mocha": "^2.0.1",
-    "karma-phantomjs-launcher": "^1.0.4",
     "mocha": "^8.4.0",
     "mocha-sandbox": "^1.0.0",
     "node-mocks-http": "^1.17.2",
@@ -135,6 +127,7 @@
     "sinon-chai": "^3.7.0",
     "supertest": "^3.4.2",
     "travis-conditions": "0.0.0",
+    "vitest": "^4.0.8",
     "watchify": "^4.0.0",
     "webdriverio": "^4.14.4"
   },