{"id":13793372,"url":"https://github.com/johnkazer/hyperapp-pug","last_synced_at":"2025-05-12T20:30:58.535Z","repository":{"id":44114720,"uuid":"194250390","full_name":"johnkazer/hyperapp-pug","owner":"johnkazer","description":"A wrapper for Hyperapp which enables you to use Pug templates rather than JSX or hyperscript.","archived":false,"fork":false,"pushed_at":"2023-01-07T07:19:56.000Z","size":1171,"stargazers_count":5,"open_issues_count":9,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-18T08:51:56.781Z","etag":null,"topics":["hyperapp","javascript","pug"],"latest_commit_sha":null,"homepage":"https://hyperapp.js.org/","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/johnkazer.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}},"created_at":"2019-06-28T09:53:52.000Z","updated_at":"2021-11-30T09:17:23.000Z","dependencies_parsed_at":"2023-02-06T14:31:01.824Z","dependency_job_id":null,"html_url":"https://github.com/johnkazer/hyperapp-pug","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkazer%2Fhyperapp-pug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkazer%2Fhyperapp-pug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkazer%2Fhyperapp-pug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkazer%2Fhyperapp-pug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnkazer","download_url":"https://codeload.github.com/johnkazer/hyperapp-pug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253816680,"owners_count":21968866,"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":["hyperapp","javascript","pug"],"created_at":"2024-08-03T23:00:19.933Z","updated_at":"2025-05-12T20:30:58.143Z","avatar_url":"https://github.com/johnkazer.png","language":"JavaScript","readme":"# hyperapp-pug\nSee this [blog post](https://dev.to/johnkazer/hyperapp-with-pug-templates-517e) for an explanation of the approach (Pug code and simple app example reproduced below too).\nRead about [Pug](https://pugjs.org/api/getting-started.html) and [Hyperapp](https://github.com/jorgebucaran/hyperapp) to find out how to extend the functionality of this starter app (currently supports Pug v2.0.4 and Hyperapp v2.0.12).\n\nThe Hyperapp framework is wonderfully simple and has a number of features I like:\n\n* Clear functional approach to business logic\n* State-driven UI\n* Centralised state and no stateful components (easy 'undo' option and perfect for quick and reliable development of small to medium scale apps)\n* Events dispatched to update the state which updates the UI using virtualDOM diff\n* Fast, small and simple but sufficient\n\nHowever, previously I've used Pug to define my UI templates. I like the ability to see the page structure and the clearer separation of logic and UI. Combining HTML with the business logic using hyperscript h functions or JSX doesn't sit right with me (yet?) and I find it hard to reason about a page when the layout is so abstract.\n\nMaybe I'll come round eventually, but maybe I don't need to...\n\nFortunately for me, the project [pug-vdom](https://github.com/batiste/pug-vdom) brings a virtualDOM (obviously) to Pug. So this repository is a demo for how Hyperapp can use Pug templates. Note that I had to tweak pug-vdom slightly to handle textNodes equivalently to Hyperapp, so there is a local copy of pug-vdom.js (version 1.1.2).\n\nThere are also branches which provide variations and extensions:\n* An 'express-server' branch which provides boiler-plate for adding an Express API\n* An 'xstate' branch which shows how to use a state machine to manage actions\n\nAs a simple example, the wrapper processes the following standard Pug code into a very simple app with a couple (change and click) event handlers:\n\n```pug\nmixin makeHeading (content)\n    h1= content\n    block\n// Need a root div to grab as the start of the view\ndiv\n    // receives the \u003cgreet\u003e variable from the supplied state object\n    - var greeting = \"Hello \" + greet\n    +makeHeading(\"Demo using Pug templates with Hyperapp v2\")\n        p More stuff if needed but here just to demo adding a block to a mixin\n    p(style={color: \"red\"}) #{greeting}\n    input(size=\"60\" placeholder=placeholder onchange=handler.updateMe)\n    button(id='clickMe' onclick=handler.clickMe) Click Me\n    p #{userText}\n```\n![image](https://user-images.githubusercontent.com/30650393/117368158-0d49f480-aebb-11eb-827f-cafe9b36d8ce.png)\n","funding_links":[],"categories":["Utilities"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnkazer%2Fhyperapp-pug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnkazer%2Fhyperapp-pug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnkazer%2Fhyperapp-pug/lists"}