{"id":24499618,"url":"https://github.com/codewithkyle/supercomponent","last_synced_at":"2026-01-02T06:40:48.462Z","repository":{"id":111440885,"uuid":"344290545","full_name":"codewithkyle/supercomponent","owner":"codewithkyle","description":"Give your Web Components modern-day superpowers.","archived":false,"fork":false,"pushed_at":"2023-11-13T17:24:32.000Z","size":85,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T14:52:23.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/codewithkyle.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-03-03T23:18:04.000Z","updated_at":"2023-12-26T22:56:47.000Z","dependencies_parsed_at":"2023-11-13T18:43:40.767Z","dependency_job_id":null,"html_url":"https://github.com/codewithkyle/supercomponent","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fsupercomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fsupercomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fsupercomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fsupercomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/supercomponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243695597,"owners_count":20332629,"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":[],"created_at":"2025-01-21T22:15:07.593Z","updated_at":"2026-01-02T06:40:48.435Z","avatar_url":"https://github.com/codewithkyle.png","language":"HTML","readme":"# Super Components\n\nGive your Web Components modern-day superpowers:\n\n- create stateful web components similar to [React](https://github.com/facebook/react/)\n- manage your components state with an [xstate](https://github.com/davidkpiano/xstate) inspired state machine\n- bring your own client-side rendering framework/library such as [lit-html](https://lit-html.polymer-project.org/guide)\n- works in every major browser\n- lightweight (483 bytes)\n\n## Installation\n\nInstall via NPM\n\n```bash\nnpm i -S @codewithkyle/supercomponent\n```\n\nImport via CDN\n\n```javascript\nimport SuperComponent from \"https://unpkg.com/@codewithkyle/supercomponent@2/supercomponent.min.mjs\";\n```\n\n## Usage\n\n```typescript\nimport SuperComponent from \"@codewithkyle/supercomponent\";\n\ntype ExampleModel = {\n    products: Array\u003cany\u003e;\n}\nclass Example extends SuperComponent\u003cExampleModel\u003e{\n    constructor(){\n        super();\n        this.state = \"LOADING\";\n        this.stateMachine = {\n            LOADING: {\n                SUCCESS: \"IDLING\",\n                ERROR: \"ERROR\",\n            },\n            IDLING: {\n                TOGGLE: \"LOADING\",\n            }\n        }\n\n        // Set the model \u0026 trigger the first render\n        this.set({\n            products: [],\n        });\n    }\n\n    override async connected(){\n        const request = await fetch(\"/products.json\");\n        if (request.ok){\n            const response = await request.json();\n\n            // Updates the model\n            this.set({ products: response });\n\n            // Trigger a state transition\n            this.trigger(\"SUCCESS\");\n        } else {\n            this.trigger(\"ERROR\");\n        }\n    }\n\n    override disconnected() {\n        // Do something when the component disconnects from the DOM\n    }\n\n    override render(returnMarkup = false) {\n        // Render this component model using any UI framework\n        switch (this.state){\n            case \"ERROR\":\n                // Render error message\n                break;\n            case \"IDLING\":\n                // Render this.model.products\n                break;\n            default:\n                // Render loading animation\n                break;\n        }\n    }\n}\ncustomElements.define(\"example-component\", Example);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fsupercomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Fsupercomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fsupercomponent/lists"}