{"id":23773584,"url":"https://github.com/beenotung/spa-state-demo","last_synced_at":"2026-04-13T17:03:15.043Z","repository":{"id":90774599,"uuid":"309079173","full_name":"beenotung/spa-state-demo","owner":"beenotung","description":"Demo how to do simple state update (and trigger re-render) with varies of SPA framework","archived":false,"fork":false,"pushed_at":"2022-05-14T07:36:45.000Z","size":53,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-01T05:42:06.104Z","etag":null,"topics":["angular","react","stenciljs","svelte","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/beenotung.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":"2020-11-01T11:18:21.000Z","updated_at":"2022-06-14T10:33:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"7de8ab20-e490-44c3-a251-7f6f3fed886d","html_url":"https://github.com/beenotung/spa-state-demo","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/beenotung%2Fspa-state-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fspa-state-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fspa-state-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fspa-state-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beenotung","download_url":"https://codeload.github.com/beenotung/spa-state-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239961217,"owners_count":19725488,"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":["angular","react","stenciljs","svelte","vanilla-javascript"],"created_at":"2025-01-01T05:41:18.887Z","updated_at":"2026-04-03T04:30:19.537Z","avatar_url":"https://github.com/beenotung.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SPA State Management Demo\n\nThis repo demo how to do simple state update (and trigger re-render) with varies of SPA framework.\n\nThe example used is simply getting two numbers from input, then display the sum.\n\n## Comparison\n\n| Framework / Tool | # Significant Expression* | Required LoC* | Size** of node_modules | Size** of Built File*** |\n|---|--:|--:|--:|--:|\n| [Svelte](#svelte)   | 7  | 19 |  22M |  17.4K |\n| [Angular](#angular) | 7  | 38 | 242M | 155.8K |\n| [Vue](#vue)         | 10 | 43 | 101M |  49.3K |\n| [Stencil](#stencil) | 11 | 48 |  16M |  13.7K |\n| [React](#react)     | 14 | 32 | 205M | 144.6K |\n| [Vanilla](#vanilla) | 10 | 16 |   0B |   0.3K |\n\n*: the lower, the better\n\n**: file size are in unit of MB or KB (powers of 1024), measured with `du -sh --apparent-size node_modules`\n\n***: excluded *.map files\n\nLoC: line of code\n\nRemark: the vanilla html file is minified with [minify](https://www.npmjs.com/package/minify)\n\n### Svelte\n- [App.svelte](./svelte-calc/src/App.svelte)\n\n### Angular\n- [app.component.ts](ng-calc/src/app/app.component.ts)\n- [app.component.html](ng-calc/src/app/app.component.html)\n- [app.component.css](ng-calc/src/app/app.component.css)\n- [app.module.ts](ng-calc/src/app/app.module.ts)\n\n### Vue\n- [App.vue](./vue-calc/src/App.vue)\n\n### Stencil\n- [my-component.tsx](./stencil-calc/src/components/my-component/my-component.tsx)\n- [my-component.css](./stencil-calc/src/components/my-component/my-component.css)\n\n### React\n- [App.tsx](./react-calc/src/App.tsx)\n- [App.css](./react-calc/src/App.css)\n\n### Vanilla\n- [index.html](./vanilla-calc/index.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeenotung%2Fspa-state-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeenotung%2Fspa-state-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeenotung%2Fspa-state-demo/lists"}