{"id":16949660,"url":"https://github.com/tailhook/khufu","last_synced_at":"2025-03-23T17:30:58.086Z","repository":{"id":66116384,"uuid":"49027169","full_name":"tailhook/khufu","owner":"tailhook","description":"A template language for incremental-dom or DSL for javascript views","archived":false,"fork":false,"pushed_at":"2018-02-06T01:09:03.000Z","size":1935,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T22:21:57.517Z","etag":null,"topics":["dsl","incremental-dom","javascript","language","redux","template-language","virtual-machine"],"latest_commit_sha":null,"homepage":"http://tailhook.github.io/khufu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tailhook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-04T22:29:18.000Z","updated_at":"2024-02-06T00:54:28.000Z","dependencies_parsed_at":"2024-01-07T07:44:24.161Z","dependency_job_id":null,"html_url":"https://github.com/tailhook/khufu","commit_stats":{"total_commits":235,"total_committers":1,"mean_commits":235.0,"dds":0.0,"last_synced_commit":"50e24f864c22d6d6635a06ae40deb7e6d49bf5f7"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailhook%2Fkhufu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailhook%2Fkhufu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailhook%2Fkhufu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailhook%2Fkhufu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailhook","download_url":"https://codeload.github.com/tailhook/khufu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245140810,"owners_count":20567451,"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":["dsl","incremental-dom","javascript","language","redux","template-language","virtual-machine"],"created_at":"2024-10-13T21:55:44.232Z","updated_at":"2025-03-23T17:30:57.716Z","avatar_url":"https://github.com/tailhook.png","language":"JavaScript","readme":"Khufu\n=====\n\n\n|              |                                           |\n|--------------|-------------------------------------------|\n|Documentation | http://tailhook.github.io/khufu/          |\n|Demo          | http://tailhook.github.io/khufu/demo.html |\n|Status        | beta [¹](#1)                              |\n\n\nAt a glance, Khufu is a template-engine for [incremental-dom].\n\nBut more characteristically I call it is a domain-specific language (DSL) for\nview-driven single-page applications.\n\nThe boring list of features:\n\n* Nice, compact, indentation-based syntax, designed for readability\n* Rich-enough subset of javascript is allowed right in the template\n* Styles in the same file as view (HTML), properly namespaced\n* Avoids separate code to compose [redux] stores (kinda auto-generates it)\n* Supports webpack hot module replacement (aka hot reload)\n\n\u003ca name=1\u003e[1] **More verbose status:** I feel that the language itself (the syntax) is\n   90% complete (thanks to it's [predecessor]). There are ugly edge cases of the\n   compiler here and there. And the server-side render is not implemented yet.\n   Otherwise, the project is small enough to just work.\n\n\nInstallation\n------------\n\n```sh\nnpm install khufu@0.5.2 --save-dev\nnpm install khufu-runtime@0.5.2 --save\n```\n\n\nWhy?\n----\n\n1. JSX is ugly. Mixing javascript and HTML is ugly\n2. Conversely, I want to mix CSS with HTML and enough dynamic features [²](#2)\n3. I'm tired of composing views and stores independently [³](#3)\n\n\u003ca name=2\u003e[2] Indentation-based syntax is a bonus.\u003cbr\u003e\n\u003ca name=3\u003e[3] Sure, the model proposed here doesn't work for everyone.\n\nSo What Is It?\n--------------\n\nIt's mostly a DSL around HTML, that looks a lot like just a template language\nsimilar to [Jade], that compiles into Incremental DOM.\nAdditionally Khufu:\n\n1. Reuses incremental dom diffing algorithm to diff [redux] or [flux]-like stores\n2. Allows to write styles in the same file which are **properly namespaced**\n   without long ugly prefixed like in [BEM]\n\n\nSo What is \"View-Driven\"?\n-------------------------\n\nIt means when you design an application you build a single powerful view. And\nall server-side data are fetched when a user enters some subview and is disposed\nwhen user leaves the view (of course, data can be prefetched and cached, but\nthat's optimization orthogonal to what we're discussing here).\n\nFor example:\n```javascript\n\n    import {search, set_query} from 'myapp/search'\n    import {image, load} from 'myapp/util/image_loading'\n    import {select} from 'myapp/action_creators'\n\n    view main():\n      \u003cdiv\u003e\n        store @results = search\n        \u003cform\u003e\n          \u003cinput type=\"text\" placeholder=\"search\"\u003e\n            link {change, keyup} set_query(this.value) -\u003e @results\n\n        if @results.current_text:\n          if @results.loading:\n            \u003cdiv.loading\u003e\n              \"Loading...\"\n          else:\n            \u003cdiv.results\u003e\n            for item of @results.items:\n              \u003cdiv.result\u003e\n                store @icon_loaded = image | load(item.img)\n                if @icon_loaded.done:\n                    \u003cimg src=item.img\u003e\n                else:\n                    \u003cdiv.icon-loading\u003e\n                \u003cdiv.title\u003e\n                    item.title\n```\nThis example displays a search box. When some search query is typed into the\ninput box, search request is sent to the server immediately[⁴](#4). This displays\n\"Loading...\" stub and replaces the stub with the results when they are loaded\nfrom a server. There is also the code to download images asynchronously.\n\nSome explanations:\n\n1. Nesting of elements is denoted by indentation, hence no closing tags\n2. ``div.cls`` is shortcut for ``\u003cdiv class=\"cls\"\u003e``\n3. ``store`` denotes a [redux] store\n4. ``link`` allows to bind events to an action (or an action creator)\n\nThe store thing might need a more comprehensive explanation:\n\n1. Stores are lexically scoped\n2. More so, on each loop iteration we get new scope\n3. Diffing algorithm of incremental-dom drops unused stores automatically\n4. They provide lifecycle hooks, so can dispose resources properly[⁵](#5)\n5. Store is prefixed by ``@`` to get nice property access syntax[⁶](#6)\n\n\u003ca name=4\u003e[4] Sure, you can delay requests by adding [RxJS] or [redux-saga]\nor any other middleware to the store\u003cbr\u003e\n\u003ca name=5\u003e[5] Yes, we attach resources (such as network requests) to stores,\nusing middleware\u003cbr\u003e\n\u003ca name=6\u003e[6] Otherwise would need to call ``getState()`` each time. We also\ncache the result of the method for subsequent attribute access\n\nIsn't it Like Good Old HTML?\n----------------------------\n\nRight. You do a Khufu view, add events and everything works. Just like you\nhave been doing HTML page and add [jQuery] plugins to make that work.\n\nThere are few crucial improvements, however:\n\n1. All your variables are properly namespaced (and styles too). So there is no\n   global identifiers which prevent composing and reusing things\n2. This plays well with javascript module system (every template is a module,\n   imports work, and so on)\n3. The updates of fragments are much better using virtual DOM\n\nYou can also think of each view function being a component\nsimilar to what you find in [react] or [angular]. Have I said that syntax is\nmuch more readable?\n\n\n[flux]: https://facebook.github.io/react/blog/2014/05/06/flux.html\n[redux]: http://redux.js.org/\n[jade]: http://jade-lang.com/\n[incremental-dom]: https://github.com/google/incremental-dom\n[bem]: http://getbem.com/\n[jquery]: https://jquery.com/\n[react]: https://facebook.github.io/react/\n[angular]: https://angularjs.org/\n[RxJS]: https://github.com/acdlite/redux-rx\n[redux-saga]: https://github.com/yelouafi/redux-saga\n[predecessor]: http://github.com/tailhook/marafet\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailhook%2Fkhufu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailhook%2Fkhufu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailhook%2Fkhufu/lists"}