inav-configurator icon indicating copy to clipboard operation
inav-configurator copied to clipboard

JavaScript Programming Framework

Open svosam15-hub opened this issue 5 months ago • 6 comments

Приветствую, при открытии вкладки JavaScript Programming отображается белый фон, подскажите пожалуйста как исправить. Image

svosam15-hub avatar Dec 02 '25 18:12 svosam15-hub

@sensei-hacker

https://github.com/iNavFlight/inav-configurator/blob/461824501f2d4445a2eeefa3ec229009b0baebca/tabs/javascript_programming.js#L42

Should be:

import('./javascript_programming.html?raw').then(({default: html}) => {
    GUI.load(html, () => {

https://github.com/iNavFlight/inav-configurator/blob/461824501f2d4445a2eeefa3ec229009b0baebca/js/transpiler/editor/monaco_loader.js#L28-L38

Vite doesn't work that way. In packed/deployed applications, there is no things like a /node_modules/ folder. Vite packs everything together into various .js files with cryptic names. Therefore, you cannot use path specifications in the renderer/browser, especially to load code. Monaco editor must be loaded via import in one way or another. Edit: This may help: https://www.npmjs.com/package/@bithero/monaco-editor-vite-plugin Edit 2: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite Edit 3: #2445 Easier than first thought...

Scavanger avatar Dec 02 '25 20:12 Scavanger

Спасибо за ответ но я не понял что конкретно нужно сделать для решения проблемы с загрузкой javascript. Нужно исходники исправить в node.js и заново собрать проект?

svosam15-hub avatar Dec 03 '25 08:12 svosam15-hub

@svosam15-hub #2445 is merged. JS Programing in the latest nightly should now work.

Scavanger avatar Dec 03 '25 11:12 Scavanger

Я использую последнюю версию 9 RC2. Если это не последняя версия отправьте пожалуйста ссылку с исправленной версией для скачивания

svosam15-hub avatar Dec 03 '25 12:12 svosam15-hub

@sensei-hacker

inav-configurator/tabs/javascript_programming.js

Line 42 in 4618245

$('#content').load("./tabs/javascript_programming.html", function () { Should be:

import('./javascript_programming.html?raw').then(({default: html}) => { GUI.load(html, () => { inav-configurator/js/transpiler/editor/monaco_loader.js

Lines 28 to 38 in 4618245

// In Vite/browser environment, use relative path to node_modules // Vite will handle module resolution const monacoBasePath = '/node_modules/monaco-editor';

// Use the min build which includes everything const vsPath = monacoBasePath + '/min/vs';

console.log('Loading Monaco from:', vsPath);

// Monaco requires AMD loader, so use that directly loadMonacoViaAMD(vsPath, resolve, reject); Vite doesn't work that way. In packed/deployed applications, there is no things like a /node_modules/ folder. Vite packs everything together into various .js files with cryptic names. Therefore, you cannot use path specifications in the renderer/browser, especially to load code. Monaco editor must be loaded via import in one way or another. Edit: This may help: https://www.npmjs.com/package/@bithero/monaco-editor-vite-plugin Edit 2: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite Edit 3: #2445 Easier than first thought...

Yeah thanks. I had actually made a commit fixing that too. :) But good to get your input since you actually know what you're talking about. :) I was fixing things just by aping what I saw.

sensei-hacker avatar Dec 03 '25 15:12 sensei-hacker

Probably Friday or Saturday I will make a new RC, which will fix a couple issues related to JavaScript Programming.

sensei-hacker avatar Dec 03 '25 15:12 sensei-hacker