{"id":19190417,"url":"https://github.com/mdxprograms/ezoljs","last_synced_at":"2025-05-08T04:48:54.027Z","repository":{"id":95270522,"uuid":"111233305","full_name":"mdxprograms/ezoljs","owner":"mdxprograms","description":"A functional javascript templating system inspired by elm","archived":false,"fork":false,"pushed_at":"2017-12-03T07:21:58.000Z","size":460,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-08T04:48:45.851Z","etag":null,"topics":["es6","functional","html-templates","javascript","template-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdxprograms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-11-18T19:34:11.000Z","updated_at":"2020-01-28T22:41:27.000Z","dependencies_parsed_at":"2023-05-05T00:34:25.949Z","dependency_job_id":null,"html_url":"https://github.com/mdxprograms/ezoljs","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"3ed912f7ddbc610be274360ea7df0181e79a2903"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdxprograms%2Fezoljs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdxprograms%2Fezoljs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdxprograms%2Fezoljs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdxprograms%2Fezoljs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdxprograms","download_url":"https://codeload.github.com/mdxprograms/ezoljs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253002842,"owners_count":21838637,"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":["es6","functional","html-templates","javascript","template-library"],"created_at":"2024-11-09T11:34:11.103Z","updated_at":"2025-05-08T04:48:54.018Z","avatar_url":"https://github.com/mdxprograms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ezol.js\n\n[![NPM](https://nodei.co/npm/ezoljs.png)](https://npmjs.org/package/ezoljs)\n\n### Installation\n\n```bash\nnpm i --save ezoljs\n```\n\n### Description\n\nThis library is highly inspired by elm's html + view implementation.\nSimilarly in Ezol, each element is dynamically created to be used as a first class function.\n\nEach element takes 3 arguments:\n\n```javascript\nelement({ ...attrs }, \"text\", [childElements])\n```\n\n### Example\n\n```javascript\nconst Ezol = require(\"ezoljs\");\n\n// example\nconst ezol = new Ezol();\nconst { div, nav, ul, li, a } = Ezol;\n\n// inline styles accepted\nconst navStyle = `\n  background: orange;\n  padding: .5rem;\n`;\n\nconst menuStyle = `\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  list-style: none;\n`;\n\nconst linkStyle = `\n  color: #fff;\n  margin-right: 1.5rem;\n  text-decoration: none;\n`;\n\nconst brandStyle = linkStyle.concat(`\n  color: darkslateblue;\n  font-size: 2rem;\n`);\n\n// link data\nconst links = [\n  {\n    text: \"Ezol\",\n    attrs: {\n      className: \"navbar__menu-item-link active\",\n      href: \"/\",\n      style: brandStyle\n    }\n  },\n  {\n    text: \"Fork Me\",\n    attrs: {\n      className: \"navbar__menu-item-link\",\n      href: \"https://github.com/mdxprograms/ezoljs\",\n      target: \"_blank\",\n      style: linkStyle\n    }\n  }\n];\n\n// example event\nconst doSomething = e =\u003e {\n  e.target.style.textDecoration = \"none\";\n};\n\n// basic view example\nconst appView = () =\u003e\n  div({ id: \"app\" }, \"\", [\n    nav(\n      {\n        id: \"navbar\",\n        style: navStyle,\n        onclick: doSomething,\n        className: \"navbar\"\n      },\n      \"\",\n      [\n        ul(\n          { style: menuStyle, className: \"navbar__menu\" },\n          \"\",\n          links.map(link =\u003e\n            li({ className: \"navbar__menu-item\" }, \"\", [\n              a(link.attrs, link.text, [])\n            ])\n          )\n        )\n      ]\n    )\n  ]);\n\nezol.attach(appView(), \"body\");\n```\n\n#### Todos\n\n- [ ] migrate code to es6 format\n- [ ] formalize tests\n- [x] update examples in readme\n- [x] add elements dictionary to dynamically create all html elements\n- [x] add exports\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdxprograms%2Fezoljs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdxprograms%2Fezoljs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdxprograms%2Fezoljs/lists"}