{"id":16406926,"url":"https://github.com/scarletflash/declarative-element","last_synced_at":"2025-06-25T14:34:55.503Z","repository":{"id":65052206,"uuid":"581283429","full_name":"ScarletFlash/declarative-element","owner":"ScarletFlash","description":"Lightweight, simple and reliable boilerplate wrapper for DOM-elements creation","archived":false,"fork":false,"pushed_at":"2024-09-03T22:19:37.000Z","size":405,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T22:41:13.469Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/declarative-element","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ScarletFlash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-22T18:59:41.000Z","updated_at":"2023-03-02T12:58:18.000Z","dependencies_parsed_at":"2024-10-11T06:11:43.244Z","dependency_job_id":"e8f13607-0af2-4904-8de0-beebdad120d0","html_url":"https://github.com/ScarletFlash/declarative-element","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"4d0d060a4a9941c02cc8e961af3f9beaaafd5986"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletFlash%2Fdeclarative-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletFlash%2Fdeclarative-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletFlash%2Fdeclarative-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletFlash%2Fdeclarative-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScarletFlash","download_url":"https://codeload.github.com/ScarletFlash/declarative-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244277174,"owners_count":20427312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T06:11:24.688Z","updated_at":"2025-03-23T05:31:22.812Z","avatar_url":"https://github.com/ScarletFlash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Declarative Element\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://github.com/ScarletFlash/declarative-element/actions/workflows/on-push.yaml\"\u003e![CI](https://github.com/ScarletFlash/declarative-element/actions/workflows/on-push.yaml/badge.svg)\u003c/a\u003e\n\u003ca href=\"https://github.com/ScarletFlash/declarative-element/blob/main/projects/library/jest.config.ts#L22\"\u003e![Code Coverage](https://img.shields.io/badge/code--coverage-100%25-green)\u003c/a\u003e\n\u003ca href=\"https://github.com/ScarletFlash/declarative-element/search?l=typescript\"\u003e![Type Definitions](https://img.shields.io/npm/types/declarative-element)\u003c/a\u003e\n\u003ca href=\"https://github.com/ScarletFlash/declarative-element/blob/main/LICENSE.md\"\u003e![NPM License](https://img.shields.io/npm/l/declarative-element)\u003c/a\u003e\n\n\u003c/div\u003e\n\nLightweight, simple and reliable boilerplate wrapper for DOM-elements creation\n\n- TypeScript API — nothing is written in pure JS\n- Optimized for smaller bundle size — manually + minified by ESBuild\n- Covered by tests\n- SemVer versioning\n- ~~Online demo and query constructor~~ TBA\n\n## Installation\n\n```bash\nnpm install declarative-element@latest\n```\n\n## Usage\n\n```javascript\nimport { getElement } from 'declarative-element';\n\n/** @type {import('declarative-element').Node.WithChildren} */\nconst input = {\n  tagName: 'main',\n  children: [\n    {\n      tagName: 'header',\n      children: [{ tagName: 'h1', innerText: 'HTML Sample' }],\n    },\n    {\n      tagName: 'section',\n      children: [{ tagName: 'p', innerText: 'Hello, World!' }],\n    },\n  ],\n};\n\nconst output = getElement(input);\ndocument.body.appendChild(output);\n```\n\n## Samples\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003ctd\u003eJSON\u003c/td\u003e\n  \u003ctd\u003eHTML\u003c/td\u003e\n  \u003ctd\u003eJS\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n```json\n    { \"tagName\": \"div\", \"attributes\": { \"class\": \"square\" } }\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"square\"\u003e\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst element = document.createElement('div');\nelement.classList.add('square');\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n```json\n    { \"tagName\": \"p\", \"innerText\": \"Hello, World!\" }\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003cp\u003eHello, World!\u003c/p\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst element = document.createElement('p');\nelement.innerHTML = 'Hello, World!';\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n```json\n    {\n      \"tagName\": \"a\",\n      \"children\": [{ \"tagName\": \"button\", \"innerText\": \"Subscribe\" }]\n    }\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003ca\u003e\n  \u003cbutton\u003eSubscribe\u003c/button\u003e\n\u003c/a\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst buttonElement = document.createElement('button');\nelement.innerHTML = 'Subscribe';\n\nconst anchorElement = document.createElement('a');\nanchorElement.appendChild(buttonElement);\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n```json\n    {\n      \"tagName\": \"html\",\n      \"children\": [\n        {\n          \"tagName\": \"head\",\n          \"children\": [{ \"tagName\": \"title\", \"innerText\": \"Sample\" }]\n        },\n        {\n          \"tagName\": \"body\",\n          \"children\": [\n            { \"tagName\": \"header\" },\n            { \"tagName\": \"main\" },\n            { \"tagName\": \"footer\" }\n          ]\n        }\n      ]\n    }\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eSample\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cheader\u003e\u003c/header\u003e\n\n    \u003cmain\u003e\u003c/main\u003e\n\n    \u003cfooter\u003e\u003c/footer\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```javascript\nconst titleElement = document.createElement('title');\ntitleElement.innerHTML = 'Sample';\n\nconst headElement = document.createElement('head');\nheadElement.appendChild(titleElement);\n\nconst headerElement = document.createElement('header');\n\nconst mainElement = document.createElement('main');\n\nconst footerElement = document.createElement('footer');\n\nconst bodyElement = document.createElement('body');\nbodyElement.appendChild(headerElement);\nbodyElement.appendChild(mainElement);\nbodyElement.appendChild(footerElement);\n\nconst htmlElement = document.createElement('html');\nhtmlElement.appendChild(headElement);\nhtmlElement.appendChild(bodyElement);\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletflash%2Fdeclarative-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscarletflash%2Fdeclarative-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletflash%2Fdeclarative-element/lists"}