{"id":19097211,"url":"https://github.com/atmajs/compo-views","last_synced_at":"2025-10-14T12:07:17.095Z","repository":{"id":43901890,"uuid":"50466505","full_name":"atmajs/compo-views","owner":"atmajs","description":"Nested ViewManager for Browsers and NodeJS","archived":false,"fork":false,"pushed_at":"2023-01-11T04:29:04.000Z","size":448,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-19T09:19:45.314Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/atmajs.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":"2016-01-26T23:21:03.000Z","updated_at":"2021-03-14T23:47:23.000Z","dependencies_parsed_at":"2023-02-09T01:30:32.775Z","dependency_job_id":null,"html_url":"https://github.com/atmajs/compo-views","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/atmajs/compo-views","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atmajs","download_url":"https://codeload.github.com/atmajs/compo-views/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmajs%2Fcompo-views/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019412,"owners_count":26086575,"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-10-14T02:00:06.444Z","response_time":60,"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":[],"created_at":"2024-11-09T03:39:25.332Z","updated_at":"2025-10-14T12:07:17.060Z","avatar_url":"https://github.com/atmajs.png","language":"JavaScript","readme":"## Views Component\n[![Build Status](https://travis-ci.org/atmajs/compo-views.png?branch=master)](https://travis-ci.org/atmajs/compo-views)\n[![npm version](https://badge.fury.io/js/compo-views.svg)](https://badge.fury.io/js/compo-views)\n[![Bower version](https://badge.fury.io/bo/compo-views.svg)](http://badge.fury.io/bo/compo-views)\n\n\n\n```mask\nViewManager {\n\tView route='a' default { /* template */ }\n\tView route='b' path='./foo.mask';\n}\n```\n\n### Routing\n\nUsing [Ruta](https://github.com/atmajs/ruta).\n\n#### Resolve routes. The `ViewMap`.\n\nFirst of all, `ViewManager` gets the list of all available routes from different sources:\n\n- Route attributes of children `View`s.\n- By an expression from current `model`, `scope`, `ctx` or ancestors.\n\n#### Parameters\n\nCurrent route parameter values are passed to the rendered view.\n\n```mask\nViewManager {\n\tView route='/users' { /* list template */ }\n\tView route='/user/:id/edit' { /* edit template */ }\n\tView route='/user/create' { /* create template */ }\n}\n```\n\n### `ViewManager`\n\n- [Attributes](#viewmanager-attributes)\n- [Signals](#viewmanager-signals)\n- [Slots](#viewmanager-slots)\n- [Components](#viewmanager-components)\n\n\t#### Input Elements\n\t- [View](#view)\n\t- [Progress](#progress)\n\t- [Notification](#notification)\n\n#### `ViewManager` Attributes\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n|`base`   |`string`  |`current location`| Base location, from which remote templates are loaded |\n|`viewmap`|`string`  |`empty`           | Expression to get the viewmap |\n|`routing`|`boolean` |`true`            | Should update the window location with HistoryAPI when navigating to the view |\n|`nested` |`boolean` |`true`            | Depends on parent `ViewManager` |\n\n#### Api\n\n- `navigate(path: string):Promise\u003cRoute\u003e` Open `View` for the path, and hides current if any.\n\n## Signals\n\n`ViewManager` Component emits signals to current `View` on various states.\n\n- `viewActivity(type)`\n\n\tTypes:\n\n\t- `start`\n\t- `end`\n\n- `viewActivation`\n- `viewDeactivation`\n\n## Slots\n\n- `viewNavigate(path:string)` Signal alias for `navigate` method.\n\n\n## Components\n\n`ViewManager` defines some nested components. So you can override or extend each.\n\n### `View`\n\nView template is placed inside the `View` component\n\n#### Attributes\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n|`default` |`boolean`  |`false` | If no route is matched, this view will be shown to user |\n|`detach`  |`boolean`  |`true`  | After the view was hidden, detach the view from DOM.  |\n|`recycle` |`boolean`  |`false` | Completely destroy the view on hide and re-render the next time it gets visible .  |\n\n##### Methods\n\n- `hide:Promise`\n\n\t_Hides the view with `display:none` style._\n\t\u003e Note that it will be also detached from DOM\n\n- `show:Promise`\n\n\t_Attaches, if detached, and shows the view_.\n\n\u003e Both methods can be overridden to perform some animations or other behavior.\n\n***\n\n#### Progress\n\n`Progress` component is always rendered. Current implementation shows the `progress` element when current `View` is loading.\n\n#### Notification\n\n`Notification` component is always rendered. Current implementation shows the notification messages, on errors etc.\n\n\n\n## Examples\n\n- [/examples](/examples)\n\n```bash\n# install atma toolkit\nnpm install atma -g\n# run examples static server\nnpm run examples\n\n# navigate `http://localhost:5777/examples/tabs/sync.html`\n# and many more...\n```\n\n### Test\n```bash\nnpm test\n```\n\n:copyright: MIT - Atma.js Project","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmajs%2Fcompo-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatmajs%2Fcompo-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmajs%2Fcompo-views/lists"}