Web Improvements

[pbolduc]

This issue is to coordinate the planning of possible enhancements to WLED HTML, js and CSS environment. These issues are not bugs, but rather changes that can improve the development workflow going forward in my opinion.

We have to take into consideration the differences between an ESP8266 or ESP32 web server vs regular internet facing web sites. Final solutions have to take into consideration the limits of running a web server on ESP8266 or ESP32.

Current Concerns

Javascript inlined in web pages

• would be nice to be able to run jslint
• ...

CSS is inline in web pages

• would be nice to be able to run csslint
• ...

Some pages inject generated javascript via web server

• easy to implement, but tightly couples to the web server implementation
• makes it harder to decouple the UI from the WLED instance - ie, you dont need have UI served off the microcontroller, only expose the API from to get or update state

[w00000dy]

Hello, I did my tests. With the current script (inliner) it is possible to turn the wled web page to a single HTML file with everything inlined. You can test it out here. As you can see in the screenshot these changes don't make more requests: The script automatically injects the code from the extracted files here: and here: These changes makes it much easier to edit and work with the code. Also we don't have to do any extra steps while developing. We still only have to use the npm run build build command.

[andyshinn]

I wonder if that could be extended to vendoring iro.js and rangetouch.js as files as well? Not a huge concern but maybe an even more readability win.

[w00000dy]

Should be possible. I will have a look on it

[w00000dy]

I did it: https://github.com/WoodyLetsCode/WLED/tree/web-final