Feature Request: Would it be possible to add built in support for JQuery or possibly a way of accessing DOM elements?

I'm not sure how feasible this could be, but it would be a great addition to be able to access jquery methods directly on any BlockElement and PageElement.

I make a lot of web extensions and userscripts, and whenever it comes to UI styling and layouts, I always include JQuery. It provides a lot of SwiftUI like simplicity and straight forwardness to quickly applying changes and styling to any element.

Some problem common in Ignite and especially in traditional html/css/javascript flow:

Implementing a ZStack layout is always a challenge, being able to dive into jquery directly on a BlockElement/PageElement could make this easier.
dynamically style an element relative to another (e.g. sibling, parent, or child elements).
Animations
SwiftUI-like onAppear, onDisappear, onChange methods (jquery event listeners with ease access to itself)

To my surprise, it wasn't too difficult to get jquery loaded externally and available for use to dynamically style the page using the Script Element. As quick example, I got the code below working in Ignite. It checks for jQuery, and creates a new element, styles it, clicking on it appends to itself, animates in, and fades out.

Script(file: "https://code.jquery.com/jquery-3.7.1.min.js")

<script type="text/javascript">
if(!jQuery){
        alert("❌DEBUG: JQuery not loaded")
    }else{
        alert("✅DEBUG: JQuery successfully loaded");
        let userAnswers = $(".questions-answered").has(".correctly-answered");
        let correctAnswers = userAnswers.length;
        let presentSuccessMsg = correctAnswers >= 10;
        if(presentSuccessMsg){
            $(document.createElement("div"))
                .addClass("successMsg")
                .css("opacity", 0.9)
                .css("border-radius", "10px")
                .css({
                      fontSize:"larger", fontWeight:"bolder",
                      zIndex: 9999, position: "fixed",
                      left:"calc(50% - 200px)", top: "calc(50% - 150px)",
                      filter: "blur(0.5px)",  display: "inline-block",
                      height: "300px",  width: "400px",
                      backgroundColor: "green", whiteSpace: "pre-line",
                      padding: 10,  overflow: "scroll"
                 })
                .text(`🎉Congrats! You've successfully answered ${ userAnswers.length } questions! 🎉`)
                .click(function(e){
                       $(this).append(`\nYou've Clicked Me ${$(this).text().split("\n").length} Times!`);
                 })
                .slideDown(1000 * 2)
                .delay(1000 * 5)
                .fadeOut(1000 * 2)
                .appendTo(document.body)
        }
    }
</script>

Other than jquery, a much larger target would be, being able to reference/access the DOM element on a BlockElement. This will enable writing logic javascript logic that cannot be done using swift. I've managed to get some decent results by using an Id tag to each BlockElement, and accessing them inside in a Script element on the page Head, but it's very un-SwiftUI.

Otherwise, Ignite has been pretty incredible and has high potential.

twostraws / Ignite

Feature Request: Would it be possible to add built in support for JQuery or possibly a way of accessing DOM elements? #22