# nss-domcomponent

> HTML component creation library

Latest version **0.1.3** (published 2018-11-07) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install nss-domcomponent
pnpm add nss-domcomponent
yarn add nss-domcomponent
bun add nss-domcomponent
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-11-07 |
| First published | 2018-11-04 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nashville Software School |
| Maintainers | nashvillesoftwareschool |
| Keywords | dom, component |

## Links

- npm: https://www.npmjs.com/package/nss-domcomponent
- Repository: https://github.com/nashville-software-school/domcomponent
- Homepage: https://github.com/nashville-software-school/domcomponent#readme
- Issues: https://github.com/nashville-software-school/domcomponent/issues
- npm.io page: https://npm.io/package/nss-domcomponent

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2018-11-07
- 0.1.2 — 2018-11-07
- 0.1.1 — 2018-11-05
- 0.1.0 — 2018-11-04

## README

# 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.

```sh
cd src/lib
```

Then install this package.

```sh
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.

```html
<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.

```js
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`.

```js
/* 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.

```js
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.

```html
<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.

```js
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.

```js
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.

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

---
_Source: https://npm.io/package/nss-domcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._