{"id":20477919,"url":"https://github.com/hung-phan/composer","last_synced_at":"2026-04-21T04:31:07.218Z","repository":{"id":217050250,"uuid":"525620553","full_name":"hung-phan/composer","owner":"hung-phan","description":"Composing component","archived":false,"fork":false,"pushed_at":"2024-01-26T22:19:24.000Z","size":1791,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-05T15:10:06.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/hung-phan.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}},"created_at":"2022-08-17T03:07:47.000Z","updated_at":"2024-01-14T00:29:11.000Z","dependencies_parsed_at":"2024-01-26T23:27:57.550Z","dependency_job_id":"c79544b0-3ef3-4303-a8eb-fe3e20c05ad2","html_url":"https://github.com/hung-phan/composer","commit_stats":null,"previous_names":["hung-phan/composer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hung-phan/composer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fcomposer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fcomposer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fcomposer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fcomposer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hung-phan","download_url":"https://codeload.github.com/hung-phan/composer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hung-phan%2Fcomposer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32076836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"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":[],"created_at":"2024-11-15T15:34:23.608Z","updated_at":"2026-04-21T04:31:07.195Z","avatar_url":"https://github.com/hung-phan.png","language":"TypeScript","readme":"# Composer\n\n## Architecture\n\n![server_architect](documents/server_architect.png)\n\n![interface_architect](documents/interfaces_architect.png)\n\nElement and Method will be the main interface to structure the application. Element is the component\nthat you will see in the app when it is rendered, and method is the interaction when you do anything with\nthe component\n\n### ROOT_ID\n\nThis is used to refer to the whole template. When we specify this ID, it means we want to replace the whole\npage with a new component\n\n### Methods\n\n* `InvokeExternalMethod` will take in the type and payload. We can use this to dispatch any action to the state\n  store. For example, we can use it to invoke `action.updateStateElement` with the data that we want to update\n* `RenderElementMethod` is used as the core rendering method. We use this to render an element from the server api\n  by instructing to render it at the ROOT_ID or any place that you know the id (placeholder_id)\n* `UpdateElementMethod` is similar to RenderElementMethod, but instead of giving the element you can specify\n  that you want to replace old element at `id` with a new element\n* `UpdateInListElementMethod` is similar to UpdateElementMethod, but instead of updating 1 element you will\n  replace that element with a list of elements instead. For example, if you have\n\n```\nroot_element: [element_1, element_2, element_4]\n``` \n\nyou can replace the above element by instructing\n\n```\nUpdateInListElementMethod(element_2.id, [new_element_2, new_element_3])\n\nroot_element: [element_1, new_element_2, new_element_3, element_4]\n```\n* `HttpMethod` is used to invoke a server side skill. By default, you can instruct the skill to send anything\n  via `requestData` from the server. For example,\n\n```\nHttpMethod {\n  requestData: {\n    data1: \"some value\"\n  }\n}\n```\n\nWhen invoking this in the client side, it will send back the server side that data in `HttpMethodRequestBody`.\nYou will be able to access it in requestData\n\n```\nexport interface HttpMethodRequestBody\u003cRequestDataType, ClientInfoType\u003e {\n  elementState?: DataContainer;\n  requestData?: RequestData\u003cRequestDataType\u003e;\n  clientInfo?: ClientInfo\u003cClientInfoType\u003e;\n}\n```\n\n`stateIds` in HttpMethod will need to be associated with a list of `DataContainer`. Its responsibility is when\nspecified in the `HttpMethod` object, it will extract that `elementState` in the client and send it along\nwith the request to the server side\n\n`clientInfo` is additional data that you want to send to server (for example, user preference, cookie, authtoken)\nthat we won't be able to get it or manipulate it in the server side\n\n### Elements\n\n* `DataContainer` is used to hold state and let other components update this state\n* `PlaceholderElement` is used to represent a temporary component that can be later replaced when we have the\n  correct component for that position. Placeholder usually has an `id` that is known to other elements\n\n## Development\n\n```bash\nnpm run dev\n```\n\n## Test\n\n```bash\nnpm test\n```\n\n## Production\n\n### Start production server\n\n```bash\nnpm run build\nnpm start\n```\n\nAccess `http://localhost:3000` to see the application\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhung-phan%2Fcomposer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhung-phan%2Fcomposer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhung-phan%2Fcomposer/lists"}