DOMComponent Library

This libray is for use by Nashville Software School students to learn the basics of extending a 3rd party npm package for use in their Browserify projects. Its sole purpose is to create HTML elements to build your DOM structure for your views.

Installation

Make sure you are in the lib directory of your project.

cd src/lib

Then install this package.

npm i nss-domcomponents -D

Usage

Let's look at a quick, basic example. Assume you want to create a component for displaying recent news articles.

<article class="newsarticle">
    <header class="newsarticle__title">
        <h1>Giant Meteor on Track to Demolish Earth</h1>
    </header>

    <section class="newsarticle__section">
        <p>NASA scientists have discovered meteor
        HSA-01992x-9981 just beyond the orbit of Jupiter
        whose calculated trajectory has it plummeting into
        the eastern Pacific ocean next January.</p>

        <p>We urge everyone to start digging underground
        shelters and stockpile food, water, and energy
        sources to survive the impending apocolypse.</p>
    </section>

    <footer class="newsarticle__footer">
        Source - Science Methodology Today - 10/04/2004
    </footer>
</article>

First, you will extend the component creator class in the nss-domcomponent library to create a definition for an <article> element.

import DOMComponent from "nss-domcomponent"

/* Blueprint for an <article> element */
class article extends DOMComponent {
    constructor(attributes, ...children) {
        super("article", attributes, ...children)
    }
}

You also need the following elements: header, h1, section, footer, and p.

/* Blueprint for an <p> element */
class p extends DOMComponent {
    constructor(attributes, ...children) {
        super("p", attributes, ...children)
    }
}

/* Blueprint for an <header> element */
class header extends DOMComponent {
    constructor(attributes, ...children) {
        super("header", attributes, ...children)
    }
}

/* Blueprint for an <h1> element */
class h1 extends DOMComponent {
    constructor(attributes, ...children) {
        super("h1", attributes, ...children)
    }
}

/* Blueprint for an <section> element */
class section extends DOMComponent {
    constructor(attributes, ...children) {
        super("section", attributes, ...children)
    }
}

/* Blueprint for an <footer> element */
class footer extends DOMComponent {
    constructor(attributes, ...children) {
        super("footer", attributes, ...children)
    }
}

Now that you've defined the class for all of the different element types you need to create the HTML structure above, you can start creating instances to build it.

const firstParagraph = new p("NASA scientists have discovered meteor HSA-01992x-9981 just beyond the orbit of Jupiter whose calculated trajectory has it plummeting into the eastern Pacific ocean next January.")

const secondParagraph = new p("We urge everyone to start digging underground shelters and stockpile food, water, and energy sources to survive the impending apocolypse.")

/* You can add components as children of other components  */
const articleSection = new section(
    {
        className: "newsarticle__section"
    },
    firstParagraph,
    secondParagraph
)

From the code you've built so far, it would generate the following HTML structure.

<section class="newsarticle__section">
    <p></p>
    <p></p>
</section>

Now you can create the rest of the elements that will go inside the top-level article.

const title = new h1("Giant Meteor on Track to Demolish Earth")

const articleHeader = new header(
    {
        className: "newsarticle__title"
    },
    title  // Child element
)

const articleFooter = new footer({
    className: "newsarticle__footer",
    textContent: "Source - Science Methodology Today - 10/04/2004"
})

Now that the header, the section, and the footer are all constructed, it's time to place them all inside the article.

const mainArticle = new article({
        className: "newsarticle"
    },
    // You can add as many children as you want
    articleHeader,
    articleSection,
    articleFooter
)

The DOMComponent class also has a render() method on it where you specify where you want your new HTML structure added to the DOM. Assume that you have a <div class="output"> element in your index.html file.

const mainArticle = new article({
        className: "newsarticle"
    },
    articleHeader,
    articleSection,
    articleFooter
).render(".output") // Using dot notation, invoke render()