{"id":15539077,"url":"https://github.com/patricklx/ember-routable-component","last_synced_at":"2025-04-23T16:09:48.782Z","repository":{"id":228371945,"uuid":"773782878","full_name":"patricklx/ember-routable-component","owner":"patricklx","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-07T09:35:16.000Z","size":1190,"stargazers_count":9,"open_issues_count":6,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T16:09:42.179Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patricklx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-03-18T11:47:35.000Z","updated_at":"2025-01-07T14:59:09.000Z","dependencies_parsed_at":"2024-03-18T13:39:06.921Z","dependency_job_id":"cc1f4fb7-1bea-453b-a644-c6f4173f4284","html_url":"https://github.com/patricklx/ember-routable-component","commit_stats":{"total_commits":124,"total_committers":5,"mean_commits":24.8,"dds":0.3951612903225806,"last_synced_commit":"3f13ffd4c398d057bcb6f76ff53d0da18231e7db"},"previous_names":["patricklx/ember-routable-component"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-routable-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-routable-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-routable-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-routable-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patricklx","download_url":"https://codeload.github.com/patricklx/ember-routable-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250468270,"owners_count":21435452,"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":[],"created_at":"2024-10-02T12:09:03.892Z","updated_at":"2025-04-23T16:09:48.763Z","avatar_url":"https://github.com/patricklx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-routable-component\n\nthis is based on https://github.com/discourse/ember-route-template\nbut instead of creating template gts files we use route.gts files directly.\n\n[polaris]: https://blog.emberjs.com/ember-5-0-released/#toc_the-journey-towards-ember-polaris\n[resources]: https://github.com/NullVoxPopuli/ember-resources/blob/main/docs/docs/README.md\n[rfc]: https://rfcs.emberjs.com/id/0779-first-class-component-templates/#typescript\n\nProvides an adapter for using [`\u003ctemplate\u003e` tags] and components in route files\n\n## Usage\n\n```gjs\n// app/routes/my-route.gjs\nimport RoutableComponentRoute from 'ember-routable-component';\n\n// this will generate a Route class and use the provided template\nexport default RoutableComponentRoute(\u003ctemplate\u003eHello world!\u003c/template\u003e);\n```\n\nYour `\u003ctemplate\u003e` will have access to the `{{@model}}` and `{{@controller}}`\narguments, if you need them. Other features like plain function helpers and\nthe ability to import components (etc) into the `\u003ctemplate\u003e` scope works as\nusual:\n\n```gjs\n// app/routes/my-route.gjs\nimport RoutableComponentRoute from \"ember-routable-component\";\n\n// components can be imported as usual\nimport Hello from \"my-app/components/hello\";\n\n// plain functions work, as usual\nfunction stringify(value) {\n  if (typeof value?.name === 'string') {\n    return value.name;\n  } else {\n    return String(value);\n  }\n}\n\n// This adapter converts the `\u003ctemplate\u003e` into a route template\nexport default RoutableComponentRoute(\n  \u003ctemplate\u003e\n    The model is: {{stringify @model}}\n    The controller is: {{stringify @controller}}\n    \u003cHello @message=\"this is great!\" /\u003e\n  \u003c/template\u003e\n);\n```\n\nYou can even convert components into route templates with this adapter (a.k.a.\n\"routable components\"):\n\n```gjs\n// app/routes/my-route.gjs\nimport RoutableComponentRoute from 'ember-routable-component';\nimport Component from \"@glimmer/component\";\n\nclass MyRouteComponent extends Component {\n  \u003ctemplate\u003eHello, {{this.message}}. Why was I screaming?\u003c/template\u003e\n\n  get message() {\n    return String(this.args.model).toUpperCase();\n  }\n}\n\nexport default RoutableComponentRoute(MyRouteComponent);\n```\n\nYou can also use outlets like this:\n\n```gjs\n// app/routes/my-route.gjs\nimport RoutableComponentRoute from 'ember-routable-component';\nimport Component from \"@glimmer/component\";\n\nclass MyRouteComponent extends Component {\n  \u003ctemplate\u003eHello, {{this.message}}. Why was I screaming? {{yield to='outlet'}}\u003c/template\u003e\n\n  get message() {\n    return String(this.args.model).toUpperCase();\n  }\n}\n\nexport default RoutableComponentRoute(MyRouteComponent);\n```\n\n## How it works\n\n[Under the hood](./ember-routable-component/src/index.ts), the adapter generates\na route that simply invokes the `\u003ctemplate\u003e` or component you passed\nin with the `@model` and `@controller` arguments appropriately set.\n\nThe hello world example from above is similar to first creating the component\nin the usual global location in `app/components`:\n\n```glimmer-js\n// app/components/hello-world.gjs\n\u003ctemplate\u003eHello world!\u003c/template\u003e\n```\n\nThen create a route template whose only job is to invoke that component:\n\n```hbs\n{{! app/templates/my-route.hbs }}\n\u003cHelloWorld @model={{@model}} @controller={{this}} /\u003e\n```\n\nWith the adapter from this addon, the main advantage is that it allows you to\nkeep your route `\u003ctemplate\u003e` or component anonymous, without making it globally\navailable in `app/components` since it likely would not make sense to reuse a\nroute specific `\u003ctemplate\u003e` or component elsewhere in the app.\n\nOf course, nothing is stopping you from exporting those values as additional\nnamed exports, if you need to access them from elsewhere.\n\n## TypeScript and Glint\n\nTypeScript and Glint is fully supported, just use the `.gts` extension instead.\n\n```glimmer-ts\n// app/templates/my-route.gts\nimport RoutableComponentRoute from \"ember-routable-component\";\n\nclass MyController extends Controller\u003cstring\u003e {\n  declare x: number;\n}\n\nexport default class ModelWorksRoute extends Route\u003cMyController\u003e(\n  \u003ctemplate\u003emodel is {{@model}} {{@controller.x}}\u003c/template\u003e,\n) {\n  model({ id }: { id: string }): string {\n    return id;\n  }\n}\n```\n\nFor Class-based components you can use the RoutableComponent:\n\n```glimmer-ts\n// app/templates/my-route.gts\nimport RoutableComponentRoute, { RoutableComponent } from \"ember-routable-component\";\nimport Component from \"@glimmer/component\";\n\nclass MyController extends Controller\u003cstring\u003e {\n}\n\n\nclass MyRouteComponent extends RoutableComponent\u003cMyController\u003e {\n  \u003ctemplate\u003e\n    Glint knows this is a string: {{@model}}\n  \u003c/template\u003e\n}\n\nexport default RoutableComponentRoute(MyRouteComponent);\n```\n\nIt can also be used without any type\n```glimmer-ts\n// app/templates/my-route.gts\nimport RoutableComponentRoute, { RoutableComponent } from \"ember-routable-component\";\nimport Component from \"@glimmer/component\";\n\n\nclass MyRouteComponent extends RoutableComponent {\n  \u003ctemplate\u003e\n    Glint knows this is a string: {{@model}} \u003c-- is of type any\n  \u003c/template\u003e\n}\n\nexport default RoutableComponentRoute(MyRouteComponent);\n```\n\nIf you need custom functionality in routes:\n\n```glimmer-ts\n// app/templates/my-route.gts\nimport RoutableComponentRoute from \"ember-routable-component\";\nimport Component from \"@glimmer/component\";\n\nclass MyController extends Controller\u003cstring\u003e {\n}\n\nclass MyRouteComponent extends Component\u003cMyController\u003e {\n  \u003ctemplate\u003e\n    Glint knows this is a string: {{@model}}\n  \u003c/template\u003e\n}\n\nexport default class extends RoutableComponentRoute(MyRouteComponent) {\n  myfunc() {\n  }\n}\n```\n\n\n## Compatibility\n\n- Ember.js v3.28 or above\n- Embroider or ember-auto-import v2\n\n## Installation\n\n```\nember install ember-routable-component\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%2Fpatricklx%2Fember-routable-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatricklx%2Fember-routable-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatricklx%2Fember-routable-component/lists"}