Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dna-engine/dna-engine
🧬 An uncomplicated user interface library for cloning semantic templates (with TypeScript declarations)
https://github.com/dna-engine/dna-engine
clone dom html jamstack javascript json-data template-engine typescript ui
Last synced: 1 day ago
JSON representation
🧬 An uncomplicated user interface library for cloning semantic templates (with TypeScript declarations)
- Host: GitHub
- URL: https://github.com/dna-engine/dna-engine
- Owner: dna-engine
- License: mit
- Created: 2013-03-28T05:03:59.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2024-09-28T08:29:16.000Z (3 months ago)
- Last Synced: 2024-12-15T05:02:10.539Z (8 days ago)
- Topics: clone, dom, html, jamstack, javascript, json-data, template-engine, typescript, ui
- Language: TypeScript
- Homepage: https://dna-engine.org
- Size: 4.74 MB
- Stars: 125
- Watchers: 13
- Forks: 44
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# dna-engine
_An uncomplicated user interface library for cloning semantic templates_
[![License:MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://dna-engine.org/license)
[![npm](https://img.shields.io/npm/v/dna-engine.svg)](https://www.npmjs.com/package/dna-engine)
[![Hits](https://data.jsdelivr.com/v1/package/npm/dna-engine/badge?style=rounded)](https://www.jsdelivr.com/package/npm/dna-engine)
[![Build](https://github.com/dna-engine/dna-engine/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/dna-engine/dna-engine/actions/workflows/run-spec-on-push.yaml)dna-engine is a lightweight easy-to-use UI library enabling developers to rapidly build maintainable
JavaScript applications.## A) Bookstore Example
Designate templates with the `dna-template` class, and put the templates directly into the HTML
of your web page.
Use the element's `id` to indicate the name of the template.
Enclose data fields in double tildes `~~`.### 1. HTML for book template
```htmlFeatured Books
~~title~~
Author: ~~author~~
```
Then call the `dna.clone()` function to insert a copy of the template into the DOM.
The supplied JSON data object populates the fields of the template.### 2. JavaScript call to add book node
```js
dna.clone('book', { title: 'The DOM', author: 'Jan' });
```The new clone element replaces the template.
The original template is detached from the DOM and kept for additional cloning.### 3. Resulting HTML with clone
```htmlFeatured Books
The DOM
Author: Jan
```
Need to clone the template multiple times?
Simply pass an array of data objects into the `dna.clone()` function.## B) Additional Information
* [https://dna-engine.org](https://dna-engine.org/) (see the *"Try it out"* section for an interactive example)
* [Sample To-Do Application](https://jsfiddle.net/4jkua81f) (jsfiddle)
* [Introduction to dna-engine](https://youtu.be/1CrYAFZPdAg) (YouTube)
* [Documentation](https://dna-engine.org/docs)
* [Release Notes](https://github.com/dna-engine/dna-engine/wiki/Release-Notes)## C) Contributor Notes
To be a contributor, **fork** the project and run the commands `npm install` and `npm test` on your
local clone.
Make your edits and rerun the tests.Pull requests welcome.
Since the pacakge version number is updated during the release process, you can leave the version number unchanged.## D) Build Environment
Check out the `runScriptsConfig` section in [package.json](package.json) for an
interesting approach to organizing build tasks.**CLI Build Tools for package.json**
- 🎋 [add-dist-header](https://github.com/center-key/add-dist-header): _Prepend a one-line banner comment (with license notice) to distribution files_
- 📄 [copy-file-util](https://github.com/center-key/copy-file-util): _Copy or rename a file with optional package version number_
- 📂 [copy-folder-util](https://github.com/center-key/copy-folder-util): _Recursively copy files from one folder to another folder_
- 🪺 [recursive-exec](https://github.com/center-key/recursive-exec): _Run a command on each file in a folder and its subfolders_
- 🔍 [replacer-util](https://github.com/center-key/replacer-util): _Find and replace strings or template outputs in text files_
- 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets): _Revision web asset filenames with cache busting content hash fingerprints_
- 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util): _Organize npm package.json scripts into groups of easy to manage commands_
- 🚦 [w3c-html-validator](https://github.com/center-key/w3c-html-validator): _Check the markup validity of HTML files using the W3C validator_
---
Feel free to submit questions at:
[github.com/dna-engine/dna-engine/issues](https://github.com/dna-engine/dna-engine/issues)dna-engine is open source under the [MIT License](https://dna-engine.org/license).
The website and documentation are published under the
[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0) license.