fix: module.exports error by converting languageDetection to ES modules (#575)

* Initial plan

* Fix module.exports error by converting languageDetection to ES modules

Co-authored-by: kobenguyent <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: kobenguyent <[email protected]>

Author: Copilot

src/components/ScenarioSource.vue

@@ -140,7 +140,7 @@
 <script>
 import axios from 'axios';
 import EditorNotFound from './EditorNotFound';
-const { detectLanguage, getLanguageDisplayName } = require('../utils/languageDetection');
+import { detectLanguage, getLanguageDisplayName } from '../utils/languageDetection';
 
 export default {
   name: 'ScenarioSource',

src/utils/languageDetection.js

@@ -152,9 +152,9 @@ function isMonacoLanguageSupported(language) {
   return supportedLanguages.includes(language);
 }
 
-// Export for CommonJS (Node.js tests) and ES modules (Vue.js components)
-module.exports = {
+// Export using ES modules syntax for modern bundlers
+export {
   detectLanguage,
-  getLanguageDisplayName,  
+  getLanguageDisplayName,
   isMonacoLanguageSupported
 };

test/language-detection.spec.js

@@ -1,5 +1,13 @@
 const test = require('ava');
-const { detectLanguage, getLanguageDisplayName } = require('../src/utils/languageDetection.js');
+
+// Use dynamic import for ES modules
+let detectLanguage, getLanguageDisplayName;
+
+test.before(async () => {
+  const module = await import('../src/utils/languageDetection.js');
+  detectLanguage = module.detectLanguage;
+  getLanguageDisplayName = module.getLanguageDisplayName;
+});
 
 test('detectLanguage › should detect JavaScript files correctly', t => {
   const result = detectLanguage('test.js');