{"id":26606995,"url":"https://github.com/grossacasac/dom99","last_synced_at":"2025-04-09T20:43:24.031Z","repository":{"id":52853358,"uuid":"53816295","full_name":"GrosSacASac/DOM99","owner":"GrosSacASac","description":"Extend html with directives","archived":false,"fork":false,"pushed_at":"2023-02-03T14:12:43.000Z","size":8388,"stargazers_count":42,"open_issues_count":7,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-23T22:38:46.421Z","etag":null,"topics":["browser","component","custom-elements","declarative","dom","hacktoberfest","html","javascript","lightweight","webcomponents"],"latest_commit_sha":null,"homepage":"https://dom99.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrosSacASac.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-14T00:54:24.000Z","updated_at":"2024-01-18T10:34:41.000Z","dependencies_parsed_at":"2023-02-18T07:45:50.947Z","dependency_job_id":null,"html_url":"https://github.com/GrosSacASac/DOM99","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2FDOM99","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2FDOM99/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2FDOM99/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2FDOM99/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrosSacASac","download_url":"https://codeload.github.com/GrosSacASac/DOM99/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248110460,"owners_count":21049492,"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":["browser","component","custom-elements","declarative","dom","hacktoberfest","html","javascript","lightweight","webcomponents"],"created_at":"2025-03-23T22:35:28.616Z","updated_at":"2025-04-09T20:43:24.003Z","avatar_url":"https://github.com/GrosSacASac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom99\n\n[![npm bundle size minified + gzip](https://img.shields.io/bundlephobia/minzip/dom99.svg)](https://bundlephobia.com/result?p=dom99)\n[![npm](https://img.shields.io/npm/v/dom99.svg)](https://www.npmjs.com/package/dom99)\n[![Chat on Miaou](https://miaou.dystroy.org/static/shields/room-en.svg?v=1)](https://miaou.dystroy.org/2813?dom99)\n\n\u003chr\u003e\n\n## What is dom99 ?\n\ndom99 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.\n\n[Changelog](https://dom99.vercel.app/changelog.html#timeline)\n\n## Installation\n\n[npm install dom99](https://www.npmjs.com/package/dom99)\n\n\n## Basic Use\n\n### Data-binding\n\n```html\n\u003c!-- The input and the paragraph as well as the js variable always have the same value --\u003e\n\n\u003cinput data-variable=\"text\"\u003e\n\u003cp data-variable=\"text\"\u003e\u003c/p\u003e\n\n\u003cscript\u003e\n    d.feed({text : \"Hello dom99\"});\n    d.start();\n    console.log(d.variables.text);\n\u003c/script\u003e\n```\n\n\n## Design philosophy\n\n\n\n### Optimized for page-load\n\nBy default dom99 is optimized for first page load, that means the size is small.\n\n\n### HTML for mark-up, JS for logic\n\nGet 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.\n\n\n### Separation of concerns\n\nDesigners 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.\n\n\n### Easy to learn\n\nGet 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/).\n\n\n### Work with the Web platform\n\ndom99 is a web framework and is an extension to web standards HTML, CSS and JS, and does not intent to be a replacement.\n\n\n### Zero-second compile time\n\ndom99 can be used in a zero-second compile time development set-up with ES-modules.\n\n\n### No Virtual DOM\n\nNo virtual dom is used for maximum **possible** performance.\n\n[Read chrismorgan about DOM and VDOM on HN](https://news.ycombinator.com/item?id=15957517).\n\n\n### Unopinionated\n\ndom99 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\n\n\n## [Complete Documentation](https://dom99.vercel.app/documentation.html)\n\n\nLocally found in [documentation/documentation-original.html](https://github.com/GrosSacASac/DOM99/blob/master/documentation/documentation-original.html)\n\n\n## Examples\n\n\n### [Local examples documentation/examples](https://dom99.vercel.app/examples)\n\n### [JSON, YAML, TOML, INI Converter](https://grossacasacs-left-phalange.vercel.app/)\n\n### [Graphs](https://github.com/GrosSacASac/graphs)\n\n### [HTML Composition](https://dom99.vercel.app/documentation.html#Composition)\n\n```html\n\u003c!--\nDefine the template for an user\nevery user has a picture, a short biography, and a contact button\n--\u003e\n\u003ctemplate data-template=\"user-element\"\u003e\n    \u003cimg data-variable=\"picture\"\u003e\n    \u003cp data-variable=\"bio\"\u003eSHORT BIO\u003c/p\u003e\n    \u003cbutton\u003eContact\u003c/button\u003e\n\u003c/template\u003e\n\n\u003c!--\nThe list variable name is \"users\" and the template used is \"user-element\"\nnative html elements can also be used to display a list\n--\u003e\n\u003cdiv data-list=\"users\" data-use=\"user-element\"\u003e\u003c/div\u003e\n\u003cscript type=\"module\"\u003e\n    import * as d from \"./node_modules/dom99/built/dom99.es.js\";\n\n    d.feed({users :\n        [\n            {\n                picture: \"usera.jpg\",\n                bio: \"Loves biking and skating\"\n            },\n            {\n                picture: \"userb.jpg\",\n                bio: \"Drinks tons of café.\"\n            }\n        ]\n    });\n    d.start();\n\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eHTML Result\u003c/summary\u003e\n\u003cpre\u003e\u003ccode\u003e\n\u0026lt;div data-list=\u0026quot;*users-user-element\u0026quot;\u0026gt;\u0026#10;    \u0026lt;img data-variable=\u0026quot;*picture\u0026quot; alt=\u0026quot;user-picture\u0026quot; src=\u0026quot;usera.jpg\u0026quot;\u0026gt;\u0026#10;    \u0026lt;p data-variable=\u0026quot;*bio\u0026quot;\u0026gt;Loves biking and skating\u0026lt;/p\u0026gt;\u0026#10;    \u0026lt;button\u0026gt;Contact\u0026lt;/button\u0026gt;\u0026#10;\u0026#10;    \u0026lt;img data-variable=\u0026quot;*picture\u0026quot; alt=\u0026quot;user-picture\u0026quot; src=\u0026quot;userb.jpg\u0026quot;\u0026gt;\u0026#10;    \u0026lt;p data-variable=\u0026quot;*bio\u0026quot;\u0026gt;Drinks tons of caf\u0026eacute;.\u0026lt;/p\u0026gt;\u0026#10;    \u0026lt;button\u0026gt;Contact\u0026lt;/button\u0026gt;\u0026#10;\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/details\u003e\n\n\n## Discussion\n\n\n[![Chat on Miaou](https://miaou.dystroy.org/static/shields/room-en.svg?v=1)](https://miaou.dystroy.org/2813?dom99)\n\n\n[Issues reports](https://github.com/GrosSacASac/DOM99/issues)\n\n\n## Contributing\n\n[Contributing and things to do](https://github.com/GrosSacASac/DOM99/blob/master/CONTRIBUTING.md)\n\n## Dev\n\n`npm run build-all` to run all scripts in package.json in one go\n\nopen tests/specification/SpecRunner.html to run unit tests\n\n## License\n\n[Boost License](https://github.com/GrosSacASac/DOM99/blob/master/LICENSE.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrossacasac%2Fdom99","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrossacasac%2Fdom99","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrossacasac%2Fdom99/lists"}