{"id":13807661,"url":"https://github.com/NullVoxPopuli/ember-query-params-service","last_synced_at":"2025-05-14T00:31:54.933Z","repository":{"id":34923957,"uuid":"172356693","full_name":"NullVoxPopuli/ember-query-params-service","owner":"NullVoxPopuli","description":"Do you have controllers that _only_ parse query params? now you can get rid of them :)","archived":false,"fork":false,"pushed_at":"2025-05-11T22:08:03.000Z","size":3916,"stargazers_count":57,"open_issues_count":13,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-11T23:18:44.551Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-24T15:47:44.000Z","updated_at":"2025-05-04T22:07:01.000Z","dependencies_parsed_at":"2023-09-27T02:52:41.222Z","dependency_job_id":"22adb9c5-7d9f-4897-b13e-e44df15d9fec","html_url":"https://github.com/NullVoxPopuli/ember-query-params-service","commit_stats":{"total_commits":504,"total_committers":6,"mean_commits":84.0,"dds":"0.19444444444444442","last_synced_commit":"3724f26e3d4eab689a69d9d97ae9d00201e0075e"},"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-query-params-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-query-params-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-query-params-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullVoxPopuli%2Fember-query-params-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NullVoxPopuli","download_url":"https://codeload.github.com/NullVoxPopuli/ember-query-params-service/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253646546,"owners_count":21941479,"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":["hacktoberfest"],"created_at":"2024-08-04T01:01:28.379Z","updated_at":"2025-05-14T00:31:49.917Z","avatar_url":"https://github.com/NullVoxPopuli.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":["Query Params"],"readme":"ember-query-params-service\n==============================================================================\n\n[![Build Status](https://travis-ci.com/NullVoxPopuli/ember-query-params-service.svg?branch=master)](https://travis-ci.com/NullVoxPopuli/ember-query-params-service)\n[![Maintainability](https://api.codeclimate.com/v1/badges/365a007a466d799748bf/maintainability)](https://codeclimate.com/github/NullVoxPopuli/ember-query-params-service/maintainability)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-query-params-service.svg)](https://emberobserver.com/addons/ember-query-params-service) \n[![npm](https://img.shields.io/npm/v/ember-query-params-service.svg)](https://www.npmjs.com/package/ember-query-params-service)\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.13 or above\n* Ember CLI v3.13 or above\n\nEmbroider support is available at ember 4.4 and higher\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-query-params-service\n```\n\n\n### DISCLAIMER\n\nThis package is a work in progress and while it provides a more ergonomic way to access query params from anywhere in the app, there is still a dependency on controllers if you want to be able to link to routes with query params. This is due to an allow-list that's implemented in the route  resolver.  \n\nRFC here: https://github.com/emberjs/rfcs/pull/380\n\nAlso, this is an experiment, and SemVer guarantees cannot be assured (yet).\n\nUsage\n------------------------------------------------------------------------------\n\n### _The `@queryParam` Decorator_\n\nSignature:\n```ts\n@queryParam: void;\n@queryParam(param: string);\n@queryParam(param: string, options: TransformOptions);\n@queryParam(options: TransformOptions);\n\nTransformOptions\u003cT\u003e = {\n  defaultValue?: any;\n  deserialize?: (param: string) =\u003e T;\n  serialize?: (value: T) =\u003e string;\n}\n```\n\nexample:\n\n```ts\nimport Route from '@ember/routing/route';\nimport { queryParam } from 'ember-query-params-service';\n\nexport default class ApplicationRoute extends Route {\n  @queryParam isSpeakerNotes;\n  @queryParam slideNumber;\n\n  model() {\n    return {\n      isSpeakerNotes: this.isSpeakerNotes,\n      slideNumber: this.slideNumber\n    }\n  }\n}\n```\n\n```hbs\n{{this.model.isSpeakerNotes}} - {{this.model.slideNumber}}\n```\n\noptionally, an options hash may be passed to the decorator defining any of the three options, \ndefaultValue, serialize, deserialize. \n\nAn example of using the default value would be:\n\n```ts\nimport Component from \"@glimmer/component\";\nimport { queryParam } from \"ember-query-params-service\";\n\nexport default class SomeComponent extends Component {\n  @queryParam({\n    defaultValue: false,\n  })\n  active;\n\n}\n```\nWhen the value is undefined, the defaultValue will be used when accessing the value\n\nWhen the value is undefined or equal to the defaultValue, the param will not be present on the URL. \nIn this way the URL will only contain params that are different than the default value. \n\n\nAn example of using serialize / deserialize would be:\n\n```ts\nimport Component from \"@glimmer/component\";\nimport { queryParam } from \"ember-query-params-service\";\n\nexport default class SomeComponent extends Component {\n  @queryParam({\n    deserialize: (qp) =\u003e  parseInt(( qp || '' ).replace(/-/g, '')),\n    serialize: (value) =\u003e `-${value}-`,\n  })\n  foo;\n\n   addToFoo() {\n    this.foo = (this.foo || 0) + 1;\n  }\n}\n```\n\nthis would not only allow numeric operations on the query param (whereas, by default, query params are all strings), but it also allows any sort of transform to occur between the queryParam in the URL and the property that you want to interact with.\n\n### _Expanded usage with the service_\n\n```ts\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\nimport { alias } from '@ember/object/computed';\n\n\nexport default class ApplicationRoute extends Route {\n  @service queryParams;\n\n  @alias('queryParams.current.r') isSpeakerNotes;\n  @alias('queryParams.current.slide') slideNumber;\n\n  model() {\n    return {\n      isSpeakerNotes: this.isSpeakerNotes,\n      slideNumber: this.slideNumber\n    }\n  }\n}\n```\n\n\n### **Setting Query Params**\n\n - Directly on the service:\n\n    ```ts\n      @service queryParams;\n\n      // ...somewhere\n      this.queryParams.current.queryParamName = 'some value';\n    ```\n    and then the URL will show `queryParamName=some%20value`\n\n - or via the `@alias` decorator:\n\n    ```ts\n      @alias('queryParams.current.r') isSpeakerNotes;\n\n      // ...somewhere\n      this.isSpeakerNotes = false;\n    ```\n    and then the URL will show `r=false`\n\n\n - or via the `@queryParam` decorator:\n\n    ```ts\n      @queryParam isSpeakerNotes;\n\n      // ...somewhere\n      this.isSpeakerNotes = false;\n    ```\n    and then the URL will show `isSpeakerNotes=false`\n    \n - or via the `@queryParam` decorator with renaming the param in the URL\n \n    ```ts\n      @queryParam('r') isSpeakerNotes;\n\n      // ...somewhere\n      this.isSpeakerNotes = false;\n    ```\n    and then the URL will show `r=false`\n\n\n\n## API\n\n - `queryParams.current` - the current set of query params for the currentURL\n\n - `queryParams.byPath` - query params for every route that has been visited since the last refresh\n\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\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-query-params-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNullVoxPopuli%2Fember-query-params-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNullVoxPopuli%2Fember-query-params-service/lists"}