So over the years I have tried more than a few Javascript general use libraries: jQuery, AngularJS, React, Vue, but none had everything, and I looked into taking the best of each and putting into one library. I have done 3 iterations and I think I have the final form. ezWebJS!
My first idea came from Angular: Security first, nothing is global. Only the library start function is global, must be mounted to an element, no double mounts. Second: modular, and a totem pole loading system. You specify the head (the most that you need) and only that module and the whole ladder under it load. Made in ESM style, you only import the loader, it then loads only the modules you need. Third: I wanted to let you drop in only jQuery code and it just works.
So the first module is DOM, and it handles DOM manipulation. I basically rewrote 99% of jQuery in a modular ESM way. Also, we have validations forms as an object. You can make any container a form and add validation to the controls within, OR you can use an actual form tag and then set an option to have it intercept the natural submit behavior of the browser easily for single page apps: this is kinda like Angular's routing but not really, you can force the page not to reload and handle the action yourself.
Taking a hint from c++, you can do 'const $ = system.dom" and boom it works just like jQuery. So I have basic functions (dom.addChild(parent,child) but we also have the wrapper dom(selector/html spec obj/html STRINGS!).append(child) and this wrapper just uses the basic functions, and works with arrays of elements. Now security first, if you just try to inject a script with append you get a console log and a comment is injected instead. A dev must can set the option AllowScripts=true to bypass this.
Next is the NET module. This is a remake of jQuery's ajax but with modern internals. So you can use it as is, but just by loading the net module it is attached to the DOM bag so const $ = system.dom; $.ajax(); just works.
Now the last module I have made so far is BIND. This has Angular style binding, and it uses a hook in the dom module to AUTOMATICALLY (unlike Angular) compile any dynamic HTML into the binding system. We use a reactive proxy on the data object, and in stead of watching the DOM we just react. You can add multiple handler: ezClick="path.to.doThis; path[2].doThat;" that are not evaluated but parsed, and the handlers get sent the system bag and a rich context object that in cludes the element, event, and scope of the event (for example, are we in an ezFor, what is the index and the object bound at that index). I also have drop down object binding, you just make a selec tag and ezBind the view model, and it just builds, or rebuilds on any changes to the data.
Did I mention ! figured out nesting ezFor arrays!
I have planed a UI module with dragging, dropping, resizing, you name it. Then also a UIX module that will have built in surveys and slide shows (you just set up a model view in data, it does the rest). It will also have a full window pane system (like puter.com but that is in a custom compiler out side the browser loaded like php on the server and painted to an image shown in the browser. My variation will use native html elements.
I know it need a more thorough documentation on the functions, but you get the gist, and the Readme explains a lot. Feel free to download only the readme.html or demo.html and double click them, these both use and import the library from the jsDelvr cdn, no need to download the library itself!
TLDR: Please check out this library and give me your thoughts: