JS Programming: Fix tab loading + Monaco editor import

[Scavanger]

User description

Should now work in packed app

---

PR Type

Bug fix, Enhancement

---

Description

• Replace jQuery load with ES6 import for HTML template

• Wrap initialization logic inside import callback

• Ensure proper async loading of Monaco Editor

• Fix compatibility with packed application builds

---

Diagram Walkthrough

flowchart LR
  A["jQuery load"] -->|"replaced with"| B["ES6 import"]
  B -->|"loads HTML"| C["GUI.load"]
  C -->|"initializes"| D["Monaco Editor"]
  D -->|"completes"| E["GUI.content_ready"]

Loading

File Walkthrough

Relevant files

Bug fix

javascript_programming.js Refactor HTML import to use ES6 modules                                    tabs/javascript_programming.js Changed HTML loading from jQuery $('#content').load() to ES6 import() with ?raw query parameter Wrapped all initialization logic inside the import callback to ensure proper async execution Maintained existing Monaco Editor initialization, event handlers, and example loading Improved compatibility with packed application builds by using native ES6 modules +33/-32

---

[github-actions]

Branch Targeting Suggestion

You've targeted the master branch with this PR. Please consider if a version branch might be more appropriate:

• maintenance-9.x - If your change is backward-compatible and won't create compatibility issues between INAV firmware and Configurator 9.x versions. This will allow your PR to be included in the next 9.x release.

• maintenance-10.x - If your change introduces compatibility requirements between firmware and configurator that would break 9.x compatibility. This is for PRs which will be included in INAV 10.x

If master is the correct target for this change, no action is needed.

---

This is an automated suggestion to help route contributions to the appropriate branch.

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Missing audit logs: The initialization workflow (HTML import, editor load, handlers setup) performs notable actions without any explicit audit logging of actions, user, or outcomes beyond a console error path. Referred Code import('./javascript_programming.html?raw').then(({default: html}) => { GUI.load(html, () => { self.initTranspiler(); MonacoLoader.loadMonacoEditor() .then(function(monaco) { // Initialize editor with INAV configuration self.editor = MonacoLoader.initializeMonacoEditor(monaco, 'monaco-editor'); // Add INAV type definitions MonacoLoader.addINAVTypeDefinitions(monaco); // Set up linting MonacoLoader.setupLinting(self.editor, function() { if (self.lintCode) { self.lintCode(); } }); // Continue with initialization ... (clipped 14 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Limited error context: The catch block only logs a generic console error without actionable context (e.g., which resource failed, parameters, or fallback behavior), and other async steps (HTML import, GUI.load, loadFromFC) lack explicit error handling. Referred Code .catch(function(error) { console.error('Failed to load Monaco Editor:', error); GUI.content_ready(callback); }); Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Input handling unclear: The new HTML import and subsequent initialization process do not show validation or sanitization of externally loaded content or editor inputs within the added code paths, leaving security posture uncertain. Referred Code import('./javascript_programming.html?raw').then(({default: html}) => { GUI.load(html, () => { self.initTranspiler(); MonacoLoader.loadMonacoEditor() .then(function(monaco) { // Initialize editor with INAV configuration self.editor = MonacoLoader.initializeMonacoEditor(monaco, 'monaco-editor'); // Add INAV type definitions MonacoLoader.addINAVTypeDefinitions(monaco); // Set up linting MonacoLoader.setupLinting(self.editor, function() { if (self.lintCode) { self.lintCode(); } }); // Continue with initialization ... (clipped 14 lines) Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add error handling for import Add a .catch block to the dynamic import() of javascript_programming.html?raw to handle potential loading errors and prevent the UI from hanging. tabs/javascript_programming.js [42-77] import('./javascript_programming.html?raw').then(({default: html}) => { GUI.load(html, () => { self.initTranspiler(); MonacoLoader.loadMonacoEditor() .then(function(monaco) { // Initialize editor with INAV configuration self.editor = MonacoLoader.initializeMonacoEditor(monaco, 'monaco-editor'); // Add INAV type definitions MonacoLoader.addINAVTypeDefinitions(monaco); // Set up linting MonacoLoader.setupLinting(self.editor, function() { if (self.lintCode) { self.lintCode(); } }); // Continue with initialization self.setupEventHandlers(); self.loadExamples(); self.loadFromFC(function() { self.isDirty = false; GUI.content_ready(callback); }); }) .catch(function(error) { console.error('Failed to load Monaco Editor:', error); GUI.content_ready(callback); }); }); +}).catch(function (error) { + console.error('Failed to load JavaScript Programming tab HTML:', error); + GUI.content_ready(callback); }); Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a missing error handler for the dynamic import() promise, which could cause the application to hang if the HTML file fails to load.	Medium
Update