Numerous Pulls Merged

    docrel

    1.7.0 • Public • Published

    docrel Build Status npm version Size

    Slightly better document.createElement

    Docrel is a thin wrapper for document.createElement that makes creating elements a bit easier. It also helps clean up your code and avoid repetition. No dependencies, no black magic (see source).

    Using document.createElement:

    let el = document.createElement("div")
    el.className = "wrapper"
     
    let input = document.createElement("input")
    input.setAttribute("type", "text")
     
    let button = document.createElement("button")
    button.textContent = "Submit"
     
    if (loading) {
      button.setAttribute("disabled", "disabled")
    }
     
    el.appendChild(input)
    el.appendChild(button)

    Using docrel:

    import {div, input, button} from "docrel"
     
    let el = div({class: "wrapper"}, [
      input({attrs: {type: "text"}}),
      button({textContent: "Submit", attrs: {
        disabled: loading ? "disabled" : null
      }})
    ])

    If loading returns null the attribute won't be set at all.

    Install

    npm install docrel --save

    Usage

    Using createElement, similarly to document.createElement:

    import {createElement} from "docrel"
     
    let el = createElement("div", {
      id: "el-id",
      class: "class-a class-b",
      textContent: "I'm an HTMLElement!",
      attrs: {
        align: "center",
        "data-attr": 1
      },
      events: {
        click: () => {console.log("click!")}
      }
    })
    <!-- Resulting HTML when el is appended to the DOM -->
    <div id="el-id" class="class-a class-b" align="center" data-attr=1>
      I'm an HTMLElement!
    </div>

    Using the create function builder (uses createElement underneat):

    import {create} from "docrel"
    const [div] = create("div")
     
    let divOne = div({class: "div-a"})
    let divTwo = div({class: "div-b"})

    Or just importing the html elements directly:

    import {div} from "docrel"
     
    let divOne = div({class: "div-a"})
    let divTwo = div({class: "div-b"})
    • The class option is a shorthand to node.className;
    • Keys inside attrs are passed to node.setAttribute, unless key value is null or undefined;
    • Keys inside events are passed to node.addEventListener;
    • Returns an HTML Element object.

    Nesting / appending children

    The create/createElement function supports a third parameter for appending child elements:

    let el = div({class: "wrapper"}, [
      div({class: "another-div"})
    ])
    <!-- Resulting HTML when el is appended to the DOM -->
    <div class="wrapper">
      <div class="another-div"></div>
    </div>

    About

    This project is sponsored by Heresy. We're always looking for great engineers to join our team, so if you love Elixir, open source and enjoy some challenge, drop us a line and say hello!

    Contributing

    Contributions are more than welcome. Please fork the repo and send a PR with a clean, rebased branch containing your changes. Also please make sure tests are passing and update tests if necessary.

    To run the project locally, you will need to npm install dev dependencies and then use npm run dev and npm test to transpile ES2015 code and run tests, respectively (Node.js >= 6.0 or latest). See package.json for more info.

    Contributors

    License

    • docrel: LICENSE
    • "Heresy" name and logo: Copyright © 2016 Heresy Software Ltd

    Install

    npm i docrel

    DownloadsWeekly Downloads

    10

    Version

    1.7.0

    License

    MIT

    Unpacked Size

    16.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • svileng