I started this thread on discord but it will be easier to discuss here. The settings pages get the settings data injected in the GetV() javascript function. The GetV() javascript function is built up and injected into the page using ESP code. This is done in xml.cpp using the getSettingsJS and sappends functions. This tightly couples the form fields to server side rendered logic. As WLED evolves, this complicates future changes. I propose eliminating the injection of content from the ESP side into pages. A better approach may be to expose the cfg.json data or similar to the browser for data binding. I have been prototyping a number of these changes.
- Allows the gz compression of all pages, javascript, stylesheets to reduce flash size. For example āsettings_leds.htmā is about 23KB, gzipped it goes to 6.8 KB. This is the biggest setting file.
- Allows extracting javascript and style sheets into separate files for source control. Allows for linting of these sources and cdata.js can still inline/combine them if required to reduce web requests on esp8266.
- Allows generating all the C code to serve up each of the files, checking etags, etc - WLED/cdata.js at 28daefc856a293682f10c4c210da92b813e60982 Ā· pbolduc/WLED Ā· GitHub
- Can simply the cdata.js script to remove the writeChunks parts and replace with writeHtmlGzipped
- cdata.js can dynamically scan the user interface directory to call writeHtmlGzipped for each web site file
- Enhance or change cdata.js script to use a task runner like Grunt. I know grunt is not the cool way things are done. However, will be less complex than using webpack. For example, projects like node-red (GitHub - node-red/node-red: Low-code programming for event-driven applications) use Grunt. The developer experience would be the same ānpm run buildā or ānpm run devā
- Allows creation of better etags based on the content and file modification time instead of WLED version - WLED/cdata.js at 28daefc856a293682f10c4c210da92b813e60982 Ā· pbolduc/WLED Ā· GitHub
- Enables better development experience by using a local web server that can proxy data and web socket requests to a another WLED instance - WLED/wled.js at change-settings-pages Ā· pbolduc/WLED Ā· GitHub