Merge pull request #229 from mi-examples/develop

fix: Variables Editor client script fails to parse, blanking the whole UI

Author: sergak01

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.2.0-beta.3](https://github.com/mi-examples/pp-dev/compare/v1.2.0-beta.2...v1.2.0-beta.3) (2026-08-07)
+
+
+### Bug Fixes
+
+* Variables Editor client script fails to parse, blanking the whole UI ([2e48b2e](https://github.com/mi-examples/pp-dev/commit/2e48b2e69c12124a6d300503a80b40f649de1316))
+
 # [1.2.0-beta.2](https://github.com/mi-examples/pp-dev/compare/v1.2.0-beta.1...v1.2.0-beta.2) (2026-08-07)
 
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@metricinsights/pp-dev",
   "type": "module",
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.3",
   "description": "Portal Page dev build tool",
   "bin": {
     "pp-dev": "bin/pp-dev.js"

package.json

@@ -526,7 +526,7 @@ function escapeHtml(s) {
 // (see DistService.saveTemplateVariablesFile). Backslash/quote-escape for the JS-string
 // context first, then HTML-escape the result so it can't break out of the attribute either.
 function escapeJsAttr(s) {
-  return escapeHtml(String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'"));
+  return escapeHtml(String(s).replace(/\\\\/g, '\\\\\\\\').replace(/'/g, "\\\\'"));
 }
 
 function showBanner(type, html) {

src/lib/variables-editor.ts

@@ -341,5 +341,26 @@ describe('registerVariablesEditorRoutes', () => {
       expect(res.body).not.toContain('id="tab-schema"');
       expect(res.body).not.toContain('id="save-btn"');
     });
+
+    // Every `<script>` block is built via string concatenation inside one giant template
+    // literal — a backslash-escaping mistake there (e.g. a regex like /\\/) is invisible to
+    // `tsc`/eslint (it's just characters inside a string) and only breaks at runtime when the
+    // browser parses it, which none of the tests above would ever catch. `new Function` parses
+    // without executing, so this fails fast on any embedded-script SyntaxError.
+    it('embeds syntactically valid client-side JavaScript in every <script> block', async () => {
+      const app = register({ miAPI: { isTemplateLess: false } as unknown as MiAPI });
+      const res = makeRes();
+
+      app.handlers.get(`GET ${VARIABLES_EDITOR_PATH}`)!({}, res);
+
+      const html = res.body as string;
+      const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)].map((m) => m[1]);
+
+      expect(scripts.length).toBeGreaterThan(0);
+
+      for (const script of scripts) {
+        expect(() => new Function(script)).not.toThrow();
+      }
+    });
   });
 });