{"id":24865111,"url":"https://github.com/codegram01/gramjs","last_synced_at":"2025-06-19T04:41:27.379Z","repository":{"id":257420361,"uuid":"858193295","full_name":"codegram01/gramjs","owner":"codegram01","description":"Smallest Javascript framework. The only Javascript Framework you can understand.","archived":false,"fork":false,"pushed_at":"2025-01-05T15:46:28.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T23:57:34.615Z","etag":null,"topics":["frontend","javascript","javascript-framework"],"latest_commit_sha":null,"homepage":"https://youtube.com/playlist?list=PLTKnPLJn0ggemDA4Lf2uqJe-K37_1BKpo\u0026si=SniNJ8ucRopUqU8c","language":"JavaScript","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/codegram01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-09-16T13:26:42.000Z","updated_at":"2025-01-05T15:46:31.000Z","dependencies_parsed_at":"2024-09-16T16:53:15.378Z","dependency_job_id":"3077ca46-c546-4a7a-abc2-6c0bcab4c624","html_url":"https://github.com/codegram01/gramjs","commit_stats":null,"previous_names":["codegram01/gramjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegram01%2Fgramjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegram01%2Fgramjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegram01%2Fgramjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegram01%2Fgramjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegram01","download_url":"https://codeload.github.com/codegram01/gramjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245717624,"owners_count":20661143,"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":["frontend","javascript","javascript-framework"],"created_at":"2025-01-31T23:57:41.341Z","updated_at":"2025-03-26T18:43:58.537Z","avatar_url":"https://github.com/codegram01.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GramJs\n\nSmallest Javascript framework. The only Javascript Framework you can understand.\nGramJs only have 100 line code and 4 function.\n\nCheck example at folder demo or [watch demo video](https://youtu.be/ZJCYPME4gAE)\n\n[Example code | Gram-Bookmark](https://github.com/codegram01/gram-bookmark)\n\n[Video when i create GramJs](https://youtu.be/ZJCYPME4gAE)\n\n[Video i live code GramMark with GramJs](https://www.youtube.com/live/W9ISlNhorr8?si=5TlUGfptC_WFhq0u)\n\n## Usage\n- Just copy file gram.js and add to your project \n- import { e, range, ref, g_if } from \"gram.js\"\n\n## Docs\nGramjs have 4 function\n\n### function e(tag, ops, ...childs) {}\nfunction e create and return new html element.\ne just like wrap of document.createElement and add more feature\n```javascript\ne(\"div\", {},\n  e(\"h1\", {text: \"Hello World\"}),\n  e(\"input\", {value: \"Alex\", placeholder: \"Enter name\"} ),\n)\n```\n\nyou can add element property in ops\n\nops:\n- text : it will do elm.innerText = value\n- html : it will do elm.innerHTML = value\n- value : it will do elm.value = value\n- show : element will display none or show when value true or false\n- default html attribute : like src, href, width, ...\n\nevent handle:\nadd on[event] to ops\n```javascript\ne(\"button\", {onclick: function(){\n  alert(\"button click\")\n}})\n```\n\nspecial event: onmounted\nonmounted call when element create and return element itself\n```javascript\ne(\"div\", {onmounted: function(element){\n  \n}})\n```\n\n### function ref(value) {}\nref create reactive value. \n\nCreate value: const myVal = ref(\"Hello World\")\n\nGet value: myVal.value\n\nChange value: myVal.value = \"Something\"\n\nyou bind ref value to html element like this\n```javascript\ne(\"h1\", {text: title})\ne(\"input\", {value: title})\n```\nwhen value change html element will update\nor when html update value will update\n\n### function range(parentElm, arrItem, render) {}\nrange to help you map array value to html\n\nrange recevive\n- parentElm: range need placeholder element for render\n- arrItem : array item\n- render : logic for render 1 element of array. render can return 1 element or array element\n\nrange return parentElm with childs add\n\nlike when you have \n```javascript\nconst fruits = ref([\"apple\", \"banana\", \"orange\"])\n```\ndisplay array to html like this\n```javascript\n// render 1 element\nrange(e(\"ul\") ,fruits, (fruit, index) =\u003e {\n      return e(\"li\", {text: `${index}: ${fruit}`})\n    })\n\n// render 1 element with childs\nrange(e(\"div\") ,fruits, (fruit, index) =\u003e {\n      return e(\"div\", {},\n        e(\"span\", {text: index}),\n        e(\"span\", {text: fruit})\n      )\n    })\n  \n// render multiple childs\nrange(e(\"div\") ,fruits, (fruit, index) =\u003e {\n      return [\n        e(\"span\", {text: index}),\n        e(\"span\", {text: fruit})\n      ]\n    })\n```\nWhen you change array, you need call myArr.markChange() to update html\n\n### function g_if(ctnElm, op, render) {}\ng_if is condition render\n\ng_if recevive\n- ctn: g_if need placeholder element \n- op : is condition reactive value create with ref\n- render : logic render element, return element or list element\n\ng_if return ctnElm.\n\nwhen condition false g_if remove all render, and when true it run render again \n\nExample:\n```javascript\nconst showMess = ref(true)\n\n// render return 1 element\ng_if(e(\"div\"), showMess,\n    () =\u003e e(\"span\", {text: \"message 1\"})\n),\n\n// render return multiple element\ng_if(e(\"div\"), showMess,\n    () =\u003e [\n      e(\"span\", {text: \"message 1\"}), \n      e(\"span\", {text: \"message 2\"})\n    ]\n),\n```\nWhen showMess = false -\u003e message 1 and 2 will be delete\n\n## Note\nrange and g_if is on dev mode, it not work perfect. It need placeholder Element parent \n\n## TODO \nI keep Gramjs to a minimum so you can easy to understand.\nBut if you want use it in real life, some feature need \n\nWhat you can add to GramJs:\n- The syntax create element\nin gramjs we create element use e(), but it look different write in html syntax\nsome people in react framework create jsx, and then jsx under the hood convert to e function, you can add jsx in your gramjs\n\n- Reactive value \nGramJs can work good at basic data type like string, number, boolean\nBut in Array and object reactive is hard to detect when value change and update html. I still haven't figured out how to do it effectively.\n\n## Contribute\n- fork, update, merge, open issue is happy\n- [Subscribe my Youtube](https://www.youtube.com/@WingramOrg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegram01%2Fgramjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegram01%2Fgramjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegram01%2Fgramjs/lists"}