Skip to content

Commit ff4b62d

Browse files
chmelevskijchmelevskij
authored
Feat/vite build (#3292)
feat: vite based web build * configure vitejs build * add web serial option
1 parent 172cb0b commit ff4b62d

File tree

15 files changed

+723
-54
lines changed

15 files changed

+723
-54
lines changed

‎gulpfile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,11 @@ function processPackage(done, gitRevision, isReleaseBuild) {
280280

281281
// remove gulp-appdmg from the package.json we're going to write
282282
delete pkg.optionalDependencies['gulp-appdmg'];
283+
// keeping this package in `package.json` for some reason
284+
// breaks the nwjs builds. This is not really needed for
285+
// nwjs nor it's imported anywhere at runtime ¯\_(ツ)_/¯
286+
// this probably can go away if we fully move to pwa.
287+
delete pkg.dependencies['@vitejs/plugin-vue2'];
283288

284289
pkg.gitRevision = gitRevision;
285290
if (!isReleaseBuild) {

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"main": "main.html",
77
"chromium-args": "--disable-features=nw2",
88
"scripts": {
9+
"dev": "vite",
910
"start": "run-script-os",
1011
"start:default": "NODE_ENV=development NW_PRE_ARGS=--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' gulp debug",
1112
"start:windows": "set NODE_ENV=development && set NW_PRE_ARGS=--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' && gulp debug",
@@ -54,6 +55,7 @@
5455
"dependencies": {
5556
"@fortawesome/fontawesome-free": "^5.13.0",
5657
"@panter/vue-i18next": "^0.15.2",
58+
"@vitejs/plugin-vue2": "^2.2.0",
5759
"bonjour": "^3.5.0",
5860
"crypto-es": "^1.2.7",
5961
"d3": "^7.8.2",
@@ -136,7 +138,8 @@
136138
"appdmg": "^0.6.4"
137139
},
138140
"resolutions": {
139-
"jquery": "3.6.3"
141+
"jquery": "3.6.3",
142+
"libxmljs2": "0.32.0"
140143
},
141144
"husky": {
142145
"hooks": {

‎src/index.html‎

Lines changed: 342 additions & 0 deletions
Large diffs are not rendered by default.

‎src/js/browserMain.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import '../js/jqueryPlugins';
2+
import "jbox/dist/jBox.min.css";
3+
import "../../libraries/jquery.nouislider.min.css";
4+
import "../../libraries/jquery.nouislider.pips.min.css";
5+
import "../../libraries/flightindicators.css";
6+
7+
import "../css/theme.css";
8+
import "../css/main.less";
9+
import "../css/tabs/static_tab.less";
10+
import "../css/tabs/landing.less";
11+
import "../css/tabs/setup.less";
12+
import "../css/tabs/help.less";
13+
import "../css/tabs/ports.less";
14+
import "../css/tabs/configuration.less";
15+
import "../css/tabs/pid_tuning.less";
16+
import "../css/tabs/receiver.less";
17+
import "../css/tabs/servos.less";
18+
import "../css/tabs/gps.less";
19+
import "../css/tabs/motors.less";
20+
import "../css/tabs/led_strip.less";
21+
import "../css/tabs/sensors.less";
22+
import "../css/tabs/cli.less";
23+
import "../tabs/presets/presets.less";
24+
// TODO: for some reason can't resolve these less files
25+
// import "../tabs/presets/TitlePanel/PresetTitlePanel.less";
26+
import "../tabs/presets/DetailedDialog/PresetsDetailedDialog.less";
27+
// TODO: for some reason can't resolve these less files
28+
// import "../tabs/presets/SourcesDialog/SourcesDialog.less";
29+
// import "../tabs/presets/SourcesDialog/SourcePanel.less";
30+
import "../css/tabs/logging.less";
31+
import "../css/tabs/onboard_logging.less";
32+
import "../css/tabs/firmware_flasher.less";
33+
import "../css/tabs/adjustments.less";
34+
import "../css/tabs/auxiliary.less";
35+
import "../css/tabs/failsafe.less";
36+
import "../css/tabs/osd.less";
37+
import "../css/tabs/vtx.less";
38+
import "../css/tabs/power.less";
39+
import "../css/tabs/transponder.less";
40+
import "../css/tabs/privacy_policy.less";
41+
import "../css/tabs/options.less";
42+
import "../css/opensans_webfontkit/fonts.css";
43+
import "../css/dropdown-lists/css/style_lists.css";
44+
import "switchery-latest/dist/switchery.min.css";
45+
import "../css/switchery_custom.less";
46+
import "@fortawesome/fontawesome-free/css/all.css";
47+
import "../components/MotorOutputReordering/Styles.css";
48+
import "../css/select2_custom.less";
49+
import "select2/dist/css/select2.min.css";
50+
import "multiple-select/dist/multiple-select.min.css";
51+
import "../components/EscDshotDirection/Styles.css";
52+
import "../css/dark-theme.less";
53+
54+
import "./main";

‎src/js/main.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,12 @@ function useGlobalNodeFunctions() {
5050
}
5151

5252
function readConfiguratorVersionMetadata() {
53-
const manifest = chrome.runtime.getManifest();
54-
CONFIGURATOR.productName = manifest.productName;
55-
CONFIGURATOR.version = manifest.version;
56-
CONFIGURATOR.gitRevision = manifest.gitRevision;
53+
if (GUI.isNWJS()) {
54+
const manifest = chrome.runtime.getManifest();
55+
CONFIGURATOR.productName = manifest.productName;
56+
CONFIGURATOR.version = manifest.version;
57+
CONFIGURATOR.gitRevision = manifest.gitRevision;
58+
}
5759
}
5860

5961
function cleanupLocalStorage() {

‎src/js/mdns_discovery.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ MdnsDiscovery.initialize = function() {
4949

5050
reinit();
5151
} else {
52+
if(typeof require === 'undefined') {
53+
return 'not implemented';
54+
}
5255
const bonjour = require('bonjour')();
5356

5457
self.mdnsBrowser.browser = bonjour.find({ type: 'http' }, service => {

‎src/js/msp.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import GUI from "./gui.js";
22
import CONFIGURATOR from "./data_storage.js";
3-
import serial from "./serial.js";
3+
import serialNWJS from "./serial.js";
4+
import serialWeb from "./webSerial.js";
5+
6+
const serial = import.meta.env ? serialWeb : serialNWJS;
47

58
const MSP = {
69
symbols: {
@@ -66,7 +69,7 @@ const MSP = {
6669
return;
6770
}
6871

69-
const data = new Uint8Array(readInfo.data);
72+
const data = new Uint8Array(readInfo.data ?? readInfo);
7073

7174
for (const chunk of data) {
7275
switch (this.state) {
@@ -304,14 +307,14 @@ const MSP = {
304307
return bufferOut;
305308
},
306309
send_message(code, data, callback_sent, callback_msp, doCallbackOnError) {
307-
if (code === undefined || !serial.connectionId || CONFIGURATOR.virtualMode) {
310+
const connected = import.meta.env ? serial.connected : serial.connectionId;
311+
if (code === undefined || !connected || CONFIGURATOR.virtualMode) {
308312
if (callback_msp) {
309313
callback_msp();
310314
}
311315
return false;
312316
}
313317

314-
// Check if request already exists in the queue
315318
let requestExists = false;
316319
for (const instance of this.callbacks) {
317320
if (instance.code === code) {
@@ -321,6 +324,12 @@ const MSP = {
321324
}
322325
}
323326

327+
if (import.meta.env && (code === undefined || !serial.connectionInfo)) {
328+
console.log('ERROR: code undefined or no connectionId');
329+
return false;
330+
}
331+
332+
324333
const bufferOut = code <= 254 ? this.encode_message_v1(code, data) : this.encode_message_v2(code, data);
325334

326335
const obj = {
@@ -374,7 +383,7 @@ const MSP = {
374383
},
375384
callbacks_cleanup() {
376385
for (const callback of this.callbacks) {
377-
clearInterval(callback.timer);
386+
clearTimeout(callback.timer);
378387
}
379388

380389
this.callbacks = [];

‎src/js/port_handler.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ const PortHandler = new function () {
2929
PortHandler.initialize = function () {
3030
const self = this;
3131

32+
// currently web build doesn't need port handler,
33+
// so just bail out.
34+
if (import.meta.env) {
35+
return 'not implemented';
36+
}
37+
3238
const portPickerElementSelector = "div#port-picker #port";
3339
self.portPickerElement = $(portPickerElementSelector);
3440
self.selectList = document.querySelector(portPickerElementSelector);

‎src/js/serial.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { gui_log } from "./gui_log";
66
import inflection from "inflection";
77
import PortHandler from "./port_handler";
88
import { checkChromeRuntimeError } from "./utils/common";
9+
import { serialDevices } from './serial_devices';
910
import $ from 'jquery';
1011

1112
const serial = {
@@ -23,14 +24,7 @@ const serial = {
2324
transmitting: false,
2425
outputBuffer: [],
2526

26-
serialDevices: [
27-
{'vendorId': 1027, 'productId': 24577}, // FT232R USB UART
28-
{'vendorId': 1155, 'productId': 22336}, // STM Electronics Virtual COM Port
29-
{'vendorId': 4292, 'productId': 60000}, // CP210x
30-
{'vendorId': 4292, 'productId': 60001}, // CP210x
31-
{'vendorId': 4292, 'productId': 60002}, // CP210x
32-
{'vendorId': 0x2e3c, 'productId': 0x5740}, // AT32 VCP
33-
],
27+
serialDevices,
3428

3529
connect: function (path, options, callback) {
3630
const self = this;

‎src/js/serial_backend.js‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import MSPCodes from "./msp/MSPCodes";
1111
import PortUsage from "./port_usage";
1212
import PortHandler from "./port_handler";
1313
import CONFIGURATOR, { API_VERSION_1_45, API_VERSION_1_46 } from "./data_storage";
14-
import serial from "./serial";
1514
import UI_PHONES from "./phones_ui";
1615
import { bit_check } from './bit.js';
1716
import { sensor_status, have_sensor } from "./sensor_helpers";
@@ -25,6 +24,11 @@ import CryptoES from "crypto-es";
2524
import $ from 'jquery';
2625
import BuildApi from "./BuildApi";
2726

27+
import serialNWJS from "./serial.js";
28+
import serialWeb from "./webSerial.js";
29+
30+
const serial = import.meta.env ? serialWeb : serialNWJS;
31+
2832
let mspHelper;
2933
let connectionTimestamp;
3034
let clicks = false;
@@ -64,10 +68,21 @@ export function initializeSerialBackend() {
6468
GUI.updateManualPortVisibility();
6569
});
6670

67-
$('div.connect_controls a.connect').click(function () {
68-
if (!GUI.connect_lock) { // GUI control overrides the user control
6971

70-
const toggleStatus = function() {
72+
$("div.connect_controls a.connect").on('click', function () {
73+
74+
const selectedPort = $('div#port-picker #port option:selected');
75+
let portName;
76+
if (selectedPort.data().isManual) {
77+
portName = $('#port-override').val();
78+
} else {
79+
portName = String($('div#port-picker #port').val());
80+
}
81+
82+
if (!GUI.connect_lock) {
83+
// GUI control overrides the user control
84+
85+
const toggleStatus = function () {
7186
clicks = !clicks;
7287
};
7388

@@ -76,13 +91,6 @@ export function initializeSerialBackend() {
7691
const selected_baud = parseInt($('div#port-picker #baud').val());
7792
const selectedPort = $('div#port-picker #port option:selected');
7893

79-
let portName;
80-
if (selectedPort.data().isManual) {
81-
portName = $('#port-override').val();
82-
} else {
83-
portName = String($('div#port-picker #port').val());
84-
}
85-
8694
if (selectedPort.data().isDFU) {
8795
$('select#baud').hide();
8896
} else if (portName !== '0') {
@@ -94,16 +102,27 @@ export function initializeSerialBackend() {
94102
$('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true);
95103
$('div.connect_controls div.connect_state').text(i18n.getMessage('connecting'));
96104

105+
const baudRate = parseInt($('div#port-picker #baud').val());
97106
if (selectedPort.data().isVirtual) {
98107
CONFIGURATOR.virtualMode = true;
99108
CONFIGURATOR.virtualApiVersion = $('#firmware-version-dropdown :selected').val();
100109

101110
serial.connect('virtual', {}, onOpenVirtual);
111+
} else if (import.meta.env) {
112+
serial.addEventListener('connect', (event) => {
113+
onOpen(event.detail);
114+
toggleStatus();
115+
});
116+
serial.connect({ baudRate });
102117
} else {
103-
serial.connect(portName, {bitrate: selected_baud}, onOpen);
118+
serial.connect(
119+
portName,
120+
{ bitrate: selected_baud },
121+
onOpen,
122+
);
123+
toggleStatus();
104124
}
105125

106-
toggleStatus();
107126
} else {
108127
if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
109128
$('div#flashbutton a.flash_state').removeClass('active');
@@ -287,7 +306,11 @@ function onOpen(openInfo) {
287306
result = getConfig('expertMode')?.expertMode ?? false;
288307
$('input[name="expertModeCheckbox"]').prop('checked', result).trigger('change');
289308

290-
serial.onReceive.addListener(read_serial);
309+
if(import.meta.env) {
310+
serial.addEventListener('receive', (e) => read_serial(e.detail.buffer));
311+
} else {
312+
serial.onReceive.addListener(read_serial);
313+
}
291314
setConnectionTimeout();
292315
FC.resetState();
293316
mspHelper = new MspHelper();

0 commit comments

Comments
 (0)