{"id":15877916,"url":"https://github.com/k1r0s/superpie","last_synced_at":"2026-02-12T00:34:30.502Z","repository":{"id":42999828,"uuid":"193645411","full_name":"k1r0s/superpie","owner":"k1r0s","description":"minimal dom lib based on superfine","archived":false,"fork":false,"pushed_at":"2023-01-06T02:00:19.000Z","size":1708,"stargazers_count":3,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-05T02:23:42.329Z","etag":null,"topics":["frontend","hyperapp","state-management","superfine","virtual-dom","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/superpie","language":"JavaScript","has_issues":true,"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/k1r0s.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}},"created_at":"2019-06-25T06:10:36.000Z","updated_at":"2023-06-12T08:00:09.000Z","dependencies_parsed_at":"2023-02-05T02:16:22.921Z","dependency_job_id":null,"html_url":"https://github.com/k1r0s/superpie","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/k1r0s/superpie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1r0s%2Fsuperpie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1r0s%2Fsuperpie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1r0s%2Fsuperpie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1r0s%2Fsuperpie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k1r0s","download_url":"https://codeload.github.com/k1r0s/superpie/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k1r0s%2Fsuperpie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273534108,"owners_count":25122635,"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-09-03T02:00:09.631Z","response_time":76,"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":["frontend","hyperapp","state-management","superfine","virtual-dom","web-components"],"created_at":"2024-10-06T02:04:50.577Z","updated_at":"2026-02-12T00:34:30.495Z","avatar_url":"https://github.com/k1r0s.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### SUPERPIE for superfine v6\n\n[As superfine updates to v7 several unreconcilable changes push superpie to 6.*](https://github.com/jorgebucaran/superfine/issues/167)\n\n\u003e this readme is not completed yet\n\nLightweight library based on [superfine](https://github.com/jorgebucaran/superfine).\n\n##### Why?\n\nSuperfine is tiny vdom library used to build web interfaces. It comes with the minimum features to provide flexibility and simplicity. But when facing any serious development you need at least to add several features such as state management and styling.\n\nThis library size is only 717 Bytes and is the perfect complement to superfine if you want to quickly develop simple and blazing fast web apps.\n\n##### Samples\n\n- [Form](/demo/form) - Form management and state binding as a component.\n- [Router](/demo/router) - HTML5 history API management as a component.\n- [Select](/demo/select) - Native `\u003cselect/\u003e` tag with filter and scoped styles.\n\n##### What does it include?\n\n- scoped state\n\n```jsx\nimport { h } from 'superfine';\nimport { statefine } from \"superpie\";\n\nconst Counter = statefine(({ state, setState }) =\u003e (\n  \u003cdiv oncreate={() =\u003e setState({ amount: 0 })}\u003e\n    \u003cp\u003e\n      \u003cspan\u003e{state.amount}\u003c/span\u003e\n      \u003ca onclick={() =\u003e setState(prev =\u003e ({ amount: prev.amount + 1 }))}\u003e+\u003c/a\u003e\n    \u003c/p\u003e\n  \u003cdiv\u003e\n))\n\n```\n\n- scoped css\n\n```jsx\nimport { h } from 'superfine';\nimport { stylefine } from \"superpie\";\n\nconst FancyButton = stylefine(\n  `\n    button {\n      cursor: pointer;\n      border-style: none;\n      padding: .5rem;\n      margin: 0 .5rem .5rem 0;\n    }\n\n  `,\n  ({ children, ...props }) =\u003e (\n    \u003cbutton {...props}\u003e{children}\u003c/button\u003e\n  )\n)\n```\n\n- cheap classy syntax\n\n```jsx\nimport { h } from 'superfine';\nimport { cyclefine } from \"superpie\";\n\nconst DisplayMessage = cyclefine({\n  // this is a superfine component hook\n  oncreate() {\n    SomeService.fetch().then(res =\u003e\n      this.setState({ message: res.message }));\n  },\n  onrender() {\n    const message = this.state \u0026\u0026 this.state.message\n    return (\n      \u003cdiv\u003e\n        {message}\n      \u003c/div\u003e\n    )\n  }\n})\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk1r0s%2Fsuperpie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk1r0s%2Fsuperpie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk1r0s%2Fsuperpie/lists"}