https://github.com/grossacasac/dom99
Extend html with directives
https://github.com/grossacasac/dom99
browser component custom-elements declarative dom hacktoberfest html javascript lightweight webcomponents
Last synced: about 1 year ago
JSON representation
Extend html with directives
- Host: GitHub
- URL: https://github.com/grossacasac/dom99
- Owner: GrosSacASac
- License: bsl-1.0
- Created: 2016-03-14T00:54:24.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T14:12:43.000Z (over 3 years ago)
- Last Synced: 2025-03-23T22:38:46.421Z (over 1 year ago)
- Topics: browser, component, custom-elements, declarative, dom, hacktoberfest, html, javascript, lightweight, webcomponents
- Language: JavaScript
- Homepage: https://dom99.vercel.app/
- Size: 8 MB
- Stars: 42
- Watchers: 7
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# dom99
[](https://bundlephobia.com/result?p=dom99)
[](https://www.npmjs.com/package/dom99)
[](https://miaou.dystroy.org/2813?dom99)
## What is dom99 ?
dom99 is a JavaScript framework focused to make web development faster. Select HTML elements, add event listeners, synchronize state with the view, clone HTML templates with your data and insert them directly in the document.
[Changelog](https://dom99.vercel.app/changelog.html#timeline)
## Installation
[npm install dom99](https://www.npmjs.com/package/dom99)
## Basic Use
### Data-binding
```html
d.feed({text : "Hello dom99"});
d.start();
console.log(d.variables.text);
```
## Design philosophy
### Optimized for page-load
By default dom99 is optimized for first page load, that means the size is small.
### HTML for mark-up, JS for logic
Get up an running fast. dom99 does not attempt to invent for the nth time how to write `if` statements and `for` loops inside HTML. Put logic in JS, and mark-up that you already know in HTML. HTML being used when sufficient we respect the minimal responsibility principle.
### Separation of concerns
Designers and Developers can work on the same files. Elements in the mark-up linked to the DOM use `data-*` instead of the overused `class` and `id`. The benefits to this approach is that the developers can safely add data-attributes to stylized components without breaking the styles, and the designers can safely add `classes` and `ids` without breaking anything.
### Easy to learn
Get up an running fast. [Documentation](https://dom99.vercel.app/documentation.html) Use a [premade starter pack create-dom99-app](https://github.com/GrosSacASac/create-dom99-app/).
### Work with the Web platform
dom99 is a web framework and is an extension to web standards HTML, CSS and JS, and does not intent to be a replacement.
### Zero-second compile time
dom99 can be used in a zero-second compile time development set-up with ES-modules.
### No Virtual DOM
No virtual dom is used for maximum **possible** performance.
[Read chrismorgan about DOM and VDOM on HN](https://news.ycombinator.com/item?id=15957517).
### Unopinionated
dom99 is unopinionated. Bigger frameworks can be built on top of it. That means you can chose your own architecture, state management system, CSS system etc
## [Complete Documentation](https://dom99.vercel.app/documentation.html)
Locally found in [documentation/documentation-original.html](https://github.com/GrosSacASac/DOM99/blob/master/documentation/documentation-original.html)
## Examples
### [Local examples documentation/examples](https://dom99.vercel.app/examples)
### [JSON, YAML, TOML, INI Converter](https://grossacasacs-left-phalange.vercel.app/)
### [Graphs](https://github.com/GrosSacASac/graphs)
### [HTML Composition](https://dom99.vercel.app/documentation.html#Composition)
```html
![]()
SHORT BIO
Contact
import * as d from "./node_modules/dom99/built/dom99.es.js";
d.feed({users :
[
{
picture: "usera.jpg",
bio: "Loves biking and skating"
},
{
picture: "userb.jpg",
bio: "Drinks tons of café."
}
]
});
d.start();
```
HTML Result
<div data-list="*users-user-element">
<img data-variable="*picture" alt="user-picture" src="usera.jpg">
<p data-variable="*bio">Loves biking and skating</p>
<button>Contact</button>
<img data-variable="*picture" alt="user-picture" src="userb.jpg">
<p data-variable="*bio">Drinks tons of café.</p>
<button>Contact</button>
</div>
## Discussion
[](https://miaou.dystroy.org/2813?dom99)
[Issues reports](https://github.com/GrosSacASac/DOM99/issues)
## Contributing
[Contributing and things to do](https://github.com/GrosSacASac/DOM99/blob/master/CONTRIBUTING.md)
## Dev
`npm run build-all` to run all scripts in package.json in one go
open tests/specification/SpecRunner.html to run unit tests
## License
[Boost License](https://github.com/GrosSacASac/DOM99/blob/master/LICENSE.txt)