{"id":15170836,"url":"https://github.com/worksofliam/puggy","last_synced_at":"2026-01-23T05:37:10.444Z","repository":{"id":170369108,"uuid":"646317477","full_name":"worksofliam/puggy","owner":"worksofliam","description":"Image having pugjs but for frontend","archived":false,"fork":false,"pushed_at":"2023-05-28T16:08:01.000Z","size":411,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-14T21:11:30.158Z","etag":null,"topics":["pugjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/worksofliam.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":"2023-05-28T01:58:28.000Z","updated_at":"2023-05-28T16:07:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"f65f3798-c479-452b-8153-9d2f90861afc","html_url":"https://github.com/worksofliam/puggy","commit_stats":null,"previous_names":["worksofliam/puggy"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/worksofliam/puggy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worksofliam%2Fpuggy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worksofliam%2Fpuggy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worksofliam%2Fpuggy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worksofliam%2Fpuggy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/worksofliam","download_url":"https://codeload.github.com/worksofliam/puggy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worksofliam%2Fpuggy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28681014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T04:33:33.518Z","status":"ssl_error","status_checked_at":"2026-01-23T04:33:30.433Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["pugjs"],"created_at":"2024-09-27T08:23:35.271Z","updated_at":"2026-01-23T05:37:10.423Z","avatar_url":"https://github.com/worksofliam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Puggy\n\n\u003cimg src=\"./example/meme.png\" align=\"right\" width=\"300px\"\u003e\n\nPuggy takes the standard pug runtime but allows the frontend to react to changes to variables defined in your script. Don't take this seriously. The code is bad but the result is fun. \n\nSee `example/index.pug` for an example using Tailwind\n\n## General guide\n\n### Variables\n\nAny variable defined in pug will be stateful. If I declare a variable, it will have a matching `set_` function.\n\n```pug\n- let count = 0\n\nscript.\n  const increment = () =\u003e { set_count(count + 1) };\n```\n\n### Referencing variables\n\nBound variables will be updated when the state of a value has changed.\n\n```pug\nspan Current count is\n  b=count\n\nbutton(onclick='increment()') Click me\n```\n\n### Referencing variables in attributes\n\nBound attributes will also update as the state of a value changes.\n\n```pug\nspan This is getting\n  font(size=count)\n    b bigger\n\nbutton(onclick='increment()') Click me\n```\n\n### Mixins\n\nMixins in puggy are crap:\n\n* No support for `block` (children)\n* Can only access the values passed in via parameter\n\n```pug\nmixin pet(name, type)\n  li=name + ' (' + type + ')'\n\nul#animals\n  +pet('Susan', 'cat')\n  +pet('Dave', 'cat')\n  +pet('Alyx', 'dog')\n  +pet('biscuits', 'dog')\n```\n\n### If\n\nIt is possible to use `if`/`else` which will react to changes to the state of variables\n\n```pug\n- let loading = true\n\nscript.\n  setTimeout(() =\u003e {set_loading(false)}, 1000);\n\nmixin pet(name, type)\n  li=name + ' (' + type + ')'\n\nif loading \n  b Loading\nelse\n  ul#animals\n    +pet('Susan', 'cat')\n    +pet('Dave', 'cat')\n    +pet('Alyx', 'dog')\n    +pet('biscuits', 'dog')\n```\n\n### Each\n\nThis example shows how an each will re-run if the state of a referenced variable is changed\n\n```pug\n- let names = ['Susan', 'Dave', 'Alyx',' biscuits']\n\nscript.\n  setTimeout(() =\u003e {\n    set_names([...names, `Person`]);\n  }, 1500);\n\nul#people\n  each name in names\n    li=name + ' is cool'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworksofliam%2Fpuggy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworksofliam%2Fpuggy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworksofliam%2Fpuggy/lists"}