Clean comments (#6420)

* Add script to trigger test on utils

* Add new function to remove the comments from the settings file.
It reduces the size of the payload when we save on the admin page `.../admin/settings`

* Add     font-family: monospace; to the settings

admin/src/index.css

@@ -263,6 +263,7 @@ td, th {
     outline: none;
     width: 100%;
     resize: none;
+    font-family: monospace;
 }
 
 #response {

admin/src/pages/SettingsPage.tsx

@@ -1,12 +1,12 @@
 import {useStore} from "../store/store.ts";
-import {isJSONClean} from "../utils/utils.ts";
+import {isJSONClean, cleanComments} from "../utils/utils.ts";
 import {Trans} from "react-i18next";
 import {IconButton} from "../components/IconButton.tsx";
 import {RotateCw, Save} from "lucide-react";
 
 export const SettingsPage = ()=>{
     const settingsSocket = useStore(state=>state.settingsSocket)
-    const settings = useStore(state=>state.settings)
+    const settings = cleanComments(useStore(state=>state.settings))
 
     return <div className="settings-page">
         <h1><Trans i18nKey="admin_settings.current"/></h1>

admin/src/utils/utils.ts

@@ -1,5 +1,14 @@
-const minify = (json: string)=>{
+export const cleanComments = (json: string|undefined)=>{
+    if (json !== undefined){
+        json = json.replace(/\/\*.*?\*\//g, "");          // remove single line comments
+        json = json.replace(/ *\/\*.*(.|\n)*?\*\//g, ""); // remove multi line comments
+        json = json.replace(/[ \t]+$/gm, "");             // trim trailing spaces
+        json = json.replace(/^(\n)/gm, "");               // remove empty lines
+    }
+    return json;
+}
 
+export const minify = (json: string)=>{
     let tokenizer = /"|(\/\*)|(\*\/)|(\/\/)|\n|\r/g,
         in_string = false,
         in_multiline_comment = false,
@@ -49,9 +58,6 @@ const minify = (json: string)=>{
     return new_str.join("");
 }
 
-
-
-
 export const isJSONClean = (data: string) => {
     let cleanSettings = minify(data);
     // this is a bit naive. In theory some key/value might contain the sequences ',]' or ',}'

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "lint": "pnpm --filter ep_etherpad-lite run lint",
     "test": "pnpm --filter ep_etherpad-lite run test",
+    "test-utils": "pnpm --filter ep_etherpad-lite run test-utils",
     "test-container": "pnpm --filter ep_etherpad-lite run test-container",
     "dev": "pnpm --filter ep_etherpad-lite run dev",
     "prod": "pnpm --filter ep_etherpad-lite run prod",

src/package.json

@@ -122,6 +122,7 @@
   "scripts": {
     "lint": "eslint .",
     "test": "mocha --import=tsx --timeout 120000 --recursive tests/backend/specs/**.ts ../node_modules/ep_*/static/tests/backend/specs/**",
+    "test-utils": "mocha --import=tsx --timeout 5000 --recursive tests/backend/specs/*utils.ts",
     "test-container": "mocha --import=tsx --timeout 5000 tests/container/specs/api",
     "dev": "node --require tsx/cjs node/server.ts",
     "prod": "node --require tsx/cjs node/server.ts",

src/tests/backend/specs/admin_utils.ts

@@ -0,0 +1,38 @@
+'use strict';
+
+
+import {strict as assert} from "assert";
+import {cleanComments, minify} from "../../../../admin/src/utils/utils.js";
+
+const fs = require('fs');
+const fsp = fs.promises;
+let template:string;
+
+describe(__filename, function () {
+  before(async function () {
+    template = await fsp.readFile('../settings.json.template', 'utf8')
+  });
+  describe('adminUtils', function () {
+    it('cleanComments function empty', async function () {
+      assert.equal(cleanComments(""), "");
+    });
+    it('cleanComments function HelloWorld no comment', async function () {
+      assert.equal(cleanComments("HelloWorld"), "HelloWorld");
+    });
+    it('cleanComments function HelloWorld with comment', async function () {
+      assert.equal(cleanComments("Hello/*abc*/World/*def*/"), "HelloWorld");
+    });
+    it('cleanComments function HelloWorld with comment and multiline', async function () {
+      assert.equal(cleanComments("Hello \n/*abc\nxyz*/World/*def*/"), "Hello\nWorld");
+    });
+    it('cleanComments function HelloWorld with multiple line breaks', async function () {
+      assert.equal(cleanComments("  \nHello \n  \n  \nWorld/*def*/"), "Hello\nWorld");
+    });
+    it('cleanComments function same after minified', async function () {
+      assert.equal(minify(template), minify(cleanComments(template)!));
+    });
+    it('minified results are smaller', async function () {
+      assert.equal(minify(template).length < template.length, true);
+    });
+  });
+});