Nashville Plays Music

    good-jsx

    1.4.2 • Public • Published

    Good-jsx

    A DOM manipulation tool for jsx

    What should I use this for?

    Writing significantly more readable, maintainable, and condensed code. For example:
    Without good-dom:

    <!-- HTML and vanilla javascript -->
    <body style="width: 100vw; display:flex; flex-direction: column; align-items: center">
        Hello There
        <div id="blahDiv"></div>
        <input id="blahInput" placeholder="type something"/>
    </body>
    <script type="text/javascript">
        // get the input box
        var blahInput = document.getElementById("blahInput")
        blahInput.oninput = function(eventObject) {
            // get the value
            var inputBoxContent = eventObject.target.value
            // put the value in a div
            var blahDiv = document.getElementById("blahDiv")
            blahDiv.innerText = inputBoxContent
        }
    </script>


    Equivlent output with good-dom:

    <body>
    <script type="text/javascript">
        document.body = <body style={{ width: "100vw", display: "flex", flexDirection: "column", alignItems: "center"}}>
            Hello There
            {blahDiv= <div>Im an inner box</div>}
            {blahInput= <input placeholder="type something" oninput={eventObject=>blahDiv=eventObject.target.value} />}
        </body>
    </script>
    </body>

    Does it support custom elements?

    Yes! In fact theres a middleware system for adding any custom element handlers you want, including something like react's version of jsx. An explaintion of how to add middleware will be added here in the future.

    Keywords

    none

    Install

    npm i good-jsx

    DownloadsWeekly Downloads

    0

    Version

    1.4.2

    License

    ISC

    Unpacked Size

    5.97 kB

    Total Files

    5

    Last publish

    Collaborators

    • jeff.hykin