{"id":19520338,"url":"https://github.com/henryhale/render-functions","last_synced_at":"2025-08-30T10:39:07.381Z","repository":{"id":63769338,"uuid":"541191849","full_name":"henryhale/render-functions","owner":"henryhale","description":"♦ A basic implementation of render functions as used in modern JavaScript Frameworks.","archived":false,"fork":false,"pushed_at":"2024-06-06T06:24:45.000Z","size":15,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T00:26:44.849Z","etag":null,"topics":["functional-components","functional-js","functional-programming","functional-reactive-programming","h-function","henryhale","html","html-css","html-css-javascript","javascript","js","render-functions","rendering","rendering-engine"],"latest_commit_sha":null,"homepage":"","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/henryhale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-09-25T14:07:06.000Z","updated_at":"2024-06-06T06:24:48.000Z","dependencies_parsed_at":"2024-11-14T06:46:10.778Z","dependency_job_id":null,"html_url":"https://github.com/henryhale/render-functions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/henryhale/render-functions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henryhale%2Frender-functions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henryhale%2Frender-functions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henryhale%2Frender-functions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henryhale%2Frender-functions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henryhale","download_url":"https://codeload.github.com/henryhale/render-functions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henryhale%2Frender-functions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272839634,"owners_count":25001860,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["functional-components","functional-js","functional-programming","functional-reactive-programming","h-function","henryhale","html","html-css","html-css-javascript","javascript","js","render-functions","rendering","rendering-engine"],"created_at":"2024-11-11T00:25:00.986Z","updated_at":"2025-08-30T10:39:07.346Z","avatar_url":"https://github.com/henryhale.png","language":"JavaScript","readme":"![3d-select](https://user-images.githubusercontent.com/92443116/192309362-96ce8587-58e1-449a-b52a-81233976e647.png)\n\n# BASIC RENDERER\n\nMy own implementation of how **render functions** work in _JavaScript Frameworks_ using _Vanilla JavaScript's Modern Features_ like ES6 modules, classes, shortcircuiting, and more.\n\n````javascript\nimport { h, mount } from \"../lib/index.js\";\n\nfunction HelloWorld() {\n    return h(\"h1\", `Hello, World!`);\n}\n\nmount(HelloWorld, document.body);\n````\n\n\u003e NB: This is mainly for learning purposes on how _frameworks_ do their work under the hood. I don't recommed you to create a project using this as it is plain, unsafe, and vulnerable in production.\n\n## Target Audience\n\nThis repository is not for beginners; it's targeted at intermediate or professional developers and programers who want to take their JavaScript skills to the next level.\n\nSome of the basics (like loops, conditionals, and closures) are not discussed at all.\nIf you find you need to brush up on some of those topics, refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)\n\n\u003e **NB:** Intermediate understanding of JavaScript and some of the latest EcmaScript Standards like classes, modules, shortcircuiting, and more.\n\n## Before You Start\n\nModern Frameworks like VueJS, ReactJS have an optional way of building components using render functions `h`.  Check out how they are implemented in [VueJS -\u003e Render Functions](https://vuejs.org/guide/extras/render-function.html).\n\n## The Architecture Behind\n\nTo understand how the work is done, I built this rendering system from scratch following the order of concerns.\n\n1. **Helper Functions**\n\n    There's need for some common functions to help us simplify tasks and operations.\n\n2. **Virtual Node**\n\n    At the core of render functions, there is a **Virtual Node** Model or Class that builds up our specifications into an object that represents an element.\n\n    The popular `h` function (_render function_) implementation which is simply a factory of _Virtual Nodes_.\n\n3. **Build**\n\n    Using `h` output - _virtual node_, this function creates an **HTMLElement** or **TextNode** from it, bundles and attaches all its children and properties to the element.\n\n4. **Mount**\n\n    A function to attach the created element into the DOM tree through the `root` element.\n\n## Repository Structure\n\nThere basically two folders and two files;\n\n- `package.json` - configurations for NodeJS environment\n\n- `README.md` - about this repository\n  \n- `example` - includes some examples\n\n- `lib` - source code that implements _render functions_\n\n## Building Blocks\n\nTo build it from scratch as you test each of the building blocks,\n[**Read More**](./lib/).\n\n## Examples\n\nJust like modern frameworks, here is a sample of what this can also do\n\n````javascript\n\nh(\"b\")\n// \u003cb\u003e\u003c/b\u003e\n\nh(\"span\", \"Hey!\")\n// \u003cspan\u003eHey!\u003c/span\u003e\n    \nh(\"span\", null, \"Hello, \", \"World!\")\n// \u003cspan\u003eHello, World!\u003c/span\u003e\n    \nh(\"h1\", { id: \"heading\" }, \"Hello, Wolrd!\")\n// \u003ch1 id=\"heading\"\u003eHello World!\u003c/h1\u003e\n\nh(\"div\", {\n        id: \"welcome\",\n        style: { textAlign: \"center\" }\n    }, [\n        h(\"h2\", { class: \"text-2xl\" }, \"You're Welcome Back!\"),\n        h(\"p\", \"Check out what's trending in the news ever since you were away.\")\n    ]\n)\n/*  \u003cdiv id=\"welcome\" style=\"text-align: center\"\u003e\n        \u003ch1\u003eYou're Welcome Back!\u003c/h1\u003e\n        \u003cp\u003eCheck out what's trending in the news ever since you were away.\u003c/p\u003e\n    \u003c/div\u003e\n*/\n````\n\nI have made a few [examples](./example/) using this rendering system;\n\n- [**Hello World**](./example/1-hello-world/)\n- [**Dark Mode Switch**](./example/2-dark-mode-switch/)\n- [**Todo List**](./example/3-todo-list/)\n\n## Thoughts\n\nIn case of any issues or inquiries about this, a pull request is welcome.\n\nThanks.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenryhale%2Frender-functions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenryhale%2Frender-functions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenryhale%2Frender-functions/lists"}