Fix JS Programming decompiler: prevent space replacement with variable names

[sensei-hacker]

User description

Summary

Fixes a bug in the JavaScript Programming decompiler where spaces between words were being replaced with custom variable names, resulting in corrupted output like "constmin" instead of "const min" and "INAVminJavaScript" instead of "INAV JavaScript".

This PR depends on #2539 and should be merged after 2539

Root Cause

In decompiler.js at line 293, the applyCustomVariableNames() function was storing entire objects from hoistedActivatorVars instead of extracting the varName string property:

// Before (buggy):
for (const [lcIndex, generatedName] of this.hoistingManager.hoistedActivatorVars.entries()) {
  lcIndexToGeneratedName.set(lcIndex, generatedName); // Stores whole object!
}

When the object was used in a template literal to build a regex pattern, it converted to the string "[object Object]", which created a regex character class [object Object] matching any character from the set {o,b,j,e,c,t,space,O}. This caused the pattern \b[object Object]\b to match spaces between word boundaries.

Changes

Modified inav-configurator/js/transpiler/transpiler/decompiler.js lines 293-294:

// After (fixed):
for (const [lcIndex, entry] of this.hoistingManager.hoistedActivatorVars.entries()) {
  lcIndexToGeneratedName.set(lcIndex, entry.varName); // Extract string property
}

This ensures the regex replacement uses the actual variable name string instead of the [object Object] character class.

Testing

✅ Tested with problematic logic conditions via browser console
✅ Verified no "constmin" corruption
✅ Verified no "AccessminAPI" corruption
✅ Verified proper spacing in comments: "// INAV JavaScript Programming"
✅ Verified proper spacing in code: "const min = ..."
✅ All test cases passed

Tested using the running configurator instance by:

1. Importing the Decompiler module
2. Decompiling the exact logic conditions that triggered the bug
3. Verifying output has proper spacing throughout

Code Review

Reviewed with inav-code-review agent - APPROVED with no critical or important issues found.

The fix:

• Correctly extracts the varName string property from entry objects
• Makes variable naming self-documenting (entry instead of generatedName)
• Follows single responsibility principle
• No edge case concerns (null-safe due to Map iteration)

Related

Addresses user-reported issue where decompiled code showed corrupted spacing.

---

PR Type

Enhancement, Bug fix

---

Description

• Implement real-time active Logic Condition highlighting in Monaco editor

  • Status polling every 500ms with gutter decorations (green checkmarks for TRUE, gray circles for FALSE)
  • LC-to-line mapping tracks which conditions appear on which code lines
  • Handles compound conditions, hoisted variables, and sticky/timer patterns

• Fix bug in decompiler where spaces were replaced with variable names

  • Extract varName string property instead of storing entire object
  • Prevents regex pattern corruption from [object Object] character class

• Add line offset tracking for accurate source-to-editor line number mapping

  • Codegen tracks current source line during statement processing
  • Decompiler finalizes mapping after boilerplate code generation

---

Diagram Walkthrough

flowchart LR
  A["Logic Conditions<br/>Status"] -->|"500ms polling"| B["updateActiveHighlighting()"]
  B -->|"categorize by status"| C["categorizeLCsByStatus()"]
  C -->|"map to lines"| D["mapLCsToLines()"]
  D -->|"create decorations"| E["createMonacoDecorations()"]
  E -->|"apply to editor"| F["Monaco Gutter<br/>Decorations"]
  G["Transpiler/Decompiler"] -->|"track LC indices"| H["lcToLineMapping"]
  H -->|"enable highlighting"| F
  I["Decompiler Bug Fix"] -->|"extract varName"| J["Correct Regex<br/>Pattern"]

Loading

File Walkthrough

	Relevant files
Configuration changes	monaco_loader.js Enable Monaco gutter margin for decorations                            js/transpiler/editor/monaco_loader.js Enable gutter margin in Monaco editor configuration with glyphMargin: true Allows gutter decorations for active LC highlighting to be displayed +1/-0
New feature	lc_highlighting.js New module for Logic Condition highlighting utilities        js/transpiler/lc_highlighting.js New module providing LC highlighting utilities categorizeLCsByStatus() separates enabled LCs into TRUE/FALSE arrays mapLCsToLines() maps LC indices to editor lines with combined status (true/false/mixed) createMonacoDecorations() generates gutter marker decorations with hover messages applyDecorations() and clearDecorations() manage decoration lifecycle +138/-0  javascript_programming.js Implement active LC highlighting with status polling          tabs/javascript_programming.js Add lcToLineMapping, activeDecorations, and statusChainer properties for highlighting state Import interval and LCHighlighting modules Store Monaco reference for use in highlighting functions Add setupActiveHighlighting() to create 500ms polling interval for LC status updates Add updateActiveHighlighting() to categorize LCs, map to lines, and apply decorations Add clearActiveHighlighting() to remove all gutter decorations Fix isDirty race condition by using setTimeout() after setValue() calls Clear stale mapping and decorations when loading logic conditions Stop polling and cleanup decorations in cleanup() method +147/-4
Enhancement	codegen.js Add LC-to-line mapping tracking in code generation              js/transpiler/transpiler/codegen.js Add lcToLineMapping object to track LC index to source line mapping Add currentSourceLine and lineOffset properties for line tracking Track source line in generateStatement() using AST location info Record LC-to-line mapping in pushLogicCommand() when LC is created Subtract lineOffset from Acorn line numbers to match Monaco editor line numbers +45/-22  index.js Pass line offset and mapping to transpiler result                js/transpiler/transpiler/index.js Pass lineOffset from transpiler to codegen for accurate line number tracking Return lcToLineMapping from transpile result for highlighting support +3/-1      javascript_programming.html Add CSS styling for active LC gutter markers                          tabs/javascript_programming.html Add .lc-active-true CSS class with green checkmark SVG icon for TRUE conditions Add .lc-active-false CSS class with gray hollow circle SVG icon for FALSE conditions Add Monaco gutter margin background styling and cursor styling Gutter markers are 16x16px with proper opacity and colors +28/-0
Bug fix	decompiler.js Fix space replacement bug and add LC-to-line mapping          js/transpiler/transpiler/decompiler.js Fix bug: extract entry.varName instead of storing entire object in lcIndexToGeneratedName map Add lcToLineMapping and _tempLcLines properties for tracking LC line positions Track if-statement lines during decompilation in decompileTree() Add finalizeLcLineMapping() method with 5-pass algorithm to map LCs to final code lines Handle hoisted variables, sticky/timer patterns, activator relationships, and compound conditions Return lcToLineMapping in decompile result +132/-3

---

[qodo-code-review]

ⓘ Your approaching your monthly quota for Qodo. Upgrade your plan

PR Compliance Guide 🔍

All compliance sections have been disabled in the configurations.