https://github.com/scarletflash/declarative-element
Lightweight, simple and reliable boilerplate wrapper for DOM-elements creation
https://github.com/scarletflash/declarative-element
Last synced: 12 months ago
JSON representation
Lightweight, simple and reliable boilerplate wrapper for DOM-elements creation
- Host: GitHub
- URL: https://github.com/scarletflash/declarative-element
- Owner: ScarletFlash
- License: mit
- Created: 2022-12-22T18:59:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-03T22:19:37.000Z (almost 2 years ago)
- Last Synced: 2025-03-01T22:41:13.469Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://npmjs.com/package/declarative-element
- Size: 396 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Declarative Element
Lightweight, simple and reliable boilerplate wrapper for DOM-elements creation
- TypeScript API — nothing is written in pure JS
- Optimized for smaller bundle size — manually + minified by ESBuild
- Covered by tests
- SemVer versioning
- ~~Online demo and query constructor~~ TBA
## Installation
```bash
npm install declarative-element@latest
```
## Usage
```javascript
import { getElement } from 'declarative-element';
/** @type {import('declarative-element').Node.WithChildren} */
const input = {
tagName: 'main',
children: [
{
tagName: 'header',
children: [{ tagName: 'h1', innerText: 'HTML Sample' }],
},
{
tagName: 'section',
children: [{ tagName: 'p', innerText: 'Hello, World!' }],
},
],
};
const output = getElement(input);
document.body.appendChild(output);
```
## Samples
JSON
HTML
JS
```json
{ "tagName": "div", "attributes": { "class": "square" } }
```
```html
```
```javascript
const element = document.createElement('div');
element.classList.add('square');
```
```json
{ "tagName": "p", "innerText": "Hello, World!" }
```
```html
Hello, World!
```
```javascript
const element = document.createElement('p');
element.innerHTML = 'Hello, World!';
```
```json
{
"tagName": "a",
"children": [{ "tagName": "button", "innerText": "Subscribe" }]
}
```
```html
Subscribe
```
```javascript
const buttonElement = document.createElement('button');
element.innerHTML = 'Subscribe';
const anchorElement = document.createElement('a');
anchorElement.appendChild(buttonElement);
```
```json
{
"tagName": "html",
"children": [
{
"tagName": "head",
"children": [{ "tagName": "title", "innerText": "Sample" }]
},
{
"tagName": "body",
"children": [
{ "tagName": "header" },
{ "tagName": "main" },
{ "tagName": "footer" }
]
}
]
}
```
```html
Sample
```
```javascript
const titleElement = document.createElement('title');
titleElement.innerHTML = 'Sample';
const headElement = document.createElement('head');
headElement.appendChild(titleElement);
const headerElement = document.createElement('header');
const mainElement = document.createElement('main');
const footerElement = document.createElement('footer');
const bodyElement = document.createElement('body');
bodyElement.appendChild(headerElement);
bodyElement.appendChild(mainElement);
bodyElement.appendChild(footerElement);
const htmlElement = document.createElement('html');
htmlElement.appendChild(headElement);
htmlElement.appendChild(bodyElement);
```