[NO-JIRA] Add live-reload of design system

5 files changed, 16 insertions, 6 deletions

diff --git a/server/sonar-web/design-system/build.gradle b/server/sonar-web/design-system/build.gradle
index 24e1bbdc446..05e41b92dfa 100644
--- a/server/sonar-web/design-system/build.gradle
+++ b/server/sonar-web/design-system/build.gradle
@@ -10,7 +10,7 @@ sonar {
 }
 
 task "yarn_validate-ci"(type: Exec) {
-  dependsOn ":server:sonar-web:yarn_design-system"
+  dependsOn ":server:sonar-web:yarn_run"
 
   inputs.dir('src')
 
@@ -25,7 +25,7 @@ task "yarn_validate-ci"(type: Exec) {
 }
 
 task "yarn_lint-report-ci"(type: Exec) {
-  dependsOn ":server:sonar-web:yarn_design-system"
+  dependsOn ":server:sonar-web:yarn_run"
 
   ['src'].each {
     inputs.dir(it)
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 21675f8eea1..ee69f7c958d 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -71,6 +71,7 @@
     "@typescript-eslint/parser": "5.49.0",
     "autoprefixer": "10.4.13",
     "chalk": "4.1.2",
+    "chokidar": "3.5.3",
     "design-system": "1.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
diff --git a/server/sonar-web/scripts/build-design-system.js b/server/sonar-web/scripts/build-design-system.js
index 3ac42dd6a3f..737357a2c37 100644
--- a/server/sonar-web/scripts/build-design-system.js
+++ b/server/sonar-web/scripts/build-design-system.js
@@ -28,15 +28,15 @@ function buildDesignSystem(callback) {
 
   const build = spawn('npx', ['turbo', 'run', 'design-system#build']);
 
-  build.stdout.on('data', function (data) {
+  build.stdout.on('data', (data) => {
     console.log(chalk.green.bold(data.toString()));
   });
 
-  build.stderr.on('data', function (data) {
+  build.stderr.on('data', (data) => {
     console.log(chalk.red.bold(data.toString()));
   });
 
-  build.on('exit', function (code) {
+  build.on('exit', (code) => {
     if (code === 0) {
       callback();
     }
diff --git a/server/sonar-web/scripts/start.js b/server/sonar-web/scripts/start.js
index 32cefea7c8c..f9847436e11 100644
--- a/server/sonar-web/scripts/start.js
+++ b/server/sonar-web/scripts/start.js
@@ -22,6 +22,7 @@ process.env.NODE_ENV = 'development';
 
 const fs = require('fs');
 const chalk = require('chalk');
+const chokidar = require('chokidar');
 const esbuild = require('esbuild');
 const http = require('http');
 const httpProxy = require('http-proxy');
@@ -122,3 +123,10 @@ async function run() {
 }
 
 buildDesignSystem(run);
+
+chokidar
+  .watch('./design-system/src', {
+    ignored: /(^|[/\\])\../, // ignore dotfiles
+    persistent: true,
+  })
+  .on('change', () => buildDesignSystem());
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 7491275997d..5a1d45ae8fe 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -4479,6 +4479,7 @@ __metadata:
     "@typescript-eslint/parser": 5.49.0
     autoprefixer: 10.4.13
     chalk: 4.1.2
+    chokidar: 3.5.3
     classnames: 2.3.2
     clipboard: 2.0.11
     core-js: 3.27.2
@@ -5407,7 +5408,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.2":
+"chokidar@npm:3.5.3, chokidar@npm:^3.5.2":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies: