good-dom

4.2.1 • Public • Published

good-dom

A lightweight DOM manipulation tool

What do I use this for?

Writing significantly more maintainable, condensed, and readable 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>

Equivalent output using good-dom:

<!-- good-dom without JSX -->
<!-- (copy and paste this into a .html file an open it and it will work) -->
<body>
<script src="https://unpkg.com/good-dom"></script>
<script type="text/javascript">
    document.body = new BODY({style: { width: "100vw", display: "flex", flexDirection: "column", alignItems: "center"} },
        "Hello there",
        blahDiv = new DIV({}, "Im an inner box"),
        blahInput = new INPUT({
            placeholder:"type something", 
            oninput: (eventObject) => blahDiv.innerText = eventObject.target.value
        })
    )
</script>
</body>

I'm getting an error, how do I fix it?

If you're creating a custom html element and you're getting errors about "Type error ... must use |new|", this is a problem with babel/transpiling/polyfilling classes to ES5 classes. As Mozilla MDN points out, there is no way to perfectly transpile custom component classes back to ES5. To fix this, add a setting to your transpiler to avoid converting ES6 classes to ES5 classes. If you don't know how to do that, a quick fix is to add "browserslist": "last 2 Chrome versions", to your package.json, however this means your transpiled code will now only officially support modern browsers.

Package Sidebar

Install

npm i good-dom

Weekly Downloads

2

Version

4.2.1

License

ISC

Unpacked Size

18.8 kB

Total Files

7

Last publish

Collaborators

  • jeff.hykin