{"id":15537313,"url":"https://github.com/nullvoxpopuli/ember-contextual-services","last_synced_at":"2025-04-23T14:02:34.685Z","repository":{"id":36436908,"uuid":"223779170","full_name":"NullVoxPopuli/ember-contextual-services","owner":"NullVoxPopuli","description":"Services in Ember are scoped to the app as a whole and are singletons. Sometimes you don't want that. :)  This addon provides ephemeral route-based services.","archived":false,"fork":false,"pushed_at":"2022-12-15T16:04:55.000Z","size":2042,"stargazers_count":21,"open_issues_count":13,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-26T03:11:42.788Z","etag":null,"topics":["addon","consumer","contexts","contextual","data","ember","loading","provider","react","route","service"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/NullVoxPopuli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-24T17:02:33.000Z","updated_at":"2024-05-30T02:52:41.000Z","dependencies_parsed_at":"2023-01-17T01:32:22.933Z","dependency_job_id":null,"html_url":"https://github.com/NullVoxPopuli/ember-contextual-services","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/NullVoxPopuli%2Fember-contextual-services","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-contextual-services/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-contextual-services/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-contextual-services/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NullVoxPopuli","download_url":"https://codeload.github.com/NullVoxPopuli/ember-contextual-services/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232292255,"owners_count":18500594,"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":["addon","consumer","contexts","contextual","data","ember","loading","provider","react","route","service"],"created_at":"2024-10-02T11:56:02.300Z","updated_at":"2025-01-03T05:11:42.949Z","avatar_url":"https://github.com/NullVoxPopuli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-contextual-services\n\n[![npm version](https://badge.fury.io/js/@nullvoxpopuli/ember-contextual-services.svg)](https://badge.fury.io/js/@nullvoxpopuli/ember-contextual-services)\n[![CI](https://github.com/NullVoxPopuli/ember-contextual-services/actions/workflows/tests.yml/badge.svg?branch=master\u0026event=push)](https://github.com/NullVoxPopuli/ember-contextual-services/actions/workflows/tests.yml)\n\nEliminate Prop-Drilling by Providing Ephemeral Services based on the route!\n\n---\n\n**Q: How is this different from Ember's Services?**\n\nA: Three differences:\n\n- it's private to the route\n- it's destroyed when you navigate away to a different route\n- primarily intended for passing the route's model data down to components without using component invocation args, which has the benefit of improving maintainability of templates, should the model's contents are structure change, because only the components in the subtree of the route that access the model data are affected. The components in between would not need to be updated as well, as they do with the default / built in patterns.\n\n**Q: Do the contextual services need to live in a specific location?**\n\nA: No, but co-location is highly encouraged. One of the main benefits to using contextual services over app-wide services is that usage can be reflected _by_ the location of the file.\n\n## Compatibility\n\n- Ember.js v3.24 or above\n- Ember CLI v3.24 or above\n- Node.js v16 or above\n- ember-auto-import v2.0 or above\n\n## Installation\n\n```\nember install @nullvoxpopuli/ember-contextual-services\n```\n\n## Usage\n\nAll ContextualServices are classes that can hold any state or perform any action. They could represent specific interfaces to APIs, or a way of accessing data loaded from ember-data from deep within the route's component tree.\n\nNOTE: all of these examples are available for viewing in the `tests/dummy` folder.\n\nin routes/wherever/-contexts/local-service.js;\n\n```ts\nimport { ContextualService } from '@nullvoxpopuli/ember-contextual-services';\nimport { inject as service } from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport class LocalService extends ContextualService {\n  @service router;\n\n  @tracked foo = 0;\n\n  @action incrementFoo() {\n    this.foo++;\n  }\n}\n```\n\nin routes/wherever/some-route.js\n\n```ts\nimport Route from '@ember/routing/route';\nimport { withContextualServices } from '@nullvoxpopuli/ember-contextual-services';\n\nimport { LocalService } from './-contexts/local-service';\n\n@withContextualServices(LocalService)\nexport default class SomeRoute extends Route {\n\n}\n```\n\nor if you want to utilize the route's model hook for data-loading, you could do:\n\n```ts\n@withContextualServices(PersonService)\nexport default class SomeRoute extends Route {\n  @context(PersonService) personService;\n\n  async model() {\n    let response = await fetch('https://swapi.co/api/people/1/');\n    let json = await response.json();\n\n    this.personService.data = json;\n  }\n}\n```\n\nand finally, in a component that is rendered by your route's template or a tree of components fromy our route's template,\n\n```ts\nimport Component from '@glimmer/component';\n\nimport { context } from '@nullvoxpopuli/ember-contextual-services';\n\nimport { LocalService } from 'my-app/routes/whatever/-contexts/local-service';\n\nexport default class ServiceConsumer extends Component {\n  @context(LocalService) localService;\n}\n```\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fember-contextual-services","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullvoxpopuli%2Fember-contextual-services","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullvoxpopuli%2Fember-contextual-services/lists"}