{"id":13807543,"url":"https://github.com/ember-polyfills/ember-angle-bracket-invocation-polyfill","last_synced_at":"2025-08-21T04:31:30.263Z","repository":{"id":40236645,"uuid":"135763832","full_name":"ember-polyfills/ember-angle-bracket-invocation-polyfill","owner":"ember-polyfills","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-18T20:01:52.000Z","size":871,"stargazers_count":75,"open_issues_count":32,"forks_count":33,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T05:27:54.120Z","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/ember-polyfills.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-01T21:11:59.000Z","updated_at":"2025-03-03T16:57:57.000Z","dependencies_parsed_at":"2022-09-05T16:11:16.578Z","dependency_job_id":null,"html_url":"https://github.com/ember-polyfills/ember-angle-bracket-invocation-polyfill","commit_stats":null,"previous_names":["rwjblue/ember-angle-bracket-invocation-polyfill"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/ember-polyfills/ember-angle-bracket-invocation-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-polyfills%2Fember-angle-bracket-invocation-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-polyfills%2Fember-angle-bracket-invocation-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-polyfills%2Fember-angle-bracket-invocation-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-polyfills%2Fember-angle-bracket-invocation-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ember-polyfills","download_url":"https://codeload.github.com/ember-polyfills/ember-angle-bracket-invocation-polyfill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-polyfills%2Fember-angle-bracket-invocation-polyfill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270811805,"owners_count":24650053,"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-08-17T02:00:09.016Z","response_time":129,"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-08-04T01:01:26.637Z","updated_at":"2025-08-21T04:31:30.005Z","avatar_url":"https://github.com/ember-polyfills.png","language":"JavaScript","readme":"# ember-angle-bracket-invocation-polyfill\n\nThis addon provides a polyfill for angle bracket invocation syntax as described\nin [RFC 311](https://github.com/emberjs/rfcs/pull/311) and [RFC\n457](https://emberjs.github.io/rfcs/0457-nested-lookups.html). It's the same\ncomponents you know and love, no longer surrounded by mustaches. \\o/\n\n[![Build Status](https://travis-ci.org/rwjblue/ember-angle-bracket-invocation-polyfill.svg?branch=master)](https://travis-ci.org/rwjblue/ember-angle-bracket-invocation-polyfill)\n\n## Installation\n\n```\nember install ember-angle-bracket-invocation-polyfill\n```\n\nYou will additionally need to ensure ember-cli-htmlbars-inline-precompile is at least version 1.0.3.\n\n## Usage\n\nThe best usage guide are the RFCs themselves\n([emberjs/rfcs#311](https://emberjs.github.io/rfcs/0311-angle-bracket-invocation.html)\n[emberjs/rfcs#457](https://emberjs.github.io/rfcs/0457-nested-lookups.html)),\nbut here are a few examples of \"before\"/\"after\" to whet your appetite:\n\n**Before**:\n\n```hbs\n{{site-header user=this.user class=(if this.user.isAdmin \"admin\")}}\n\n{{#super-select selected=this.user.country as |s|}}\n  {{#each this.availableCountries as |country|}}\n    {{#s.option value=country}}{{country.name}}{{/s.option}}\n  {{/each}}\n{{/super-select}}\n```\n\n**After**:\n\n```hbs\n\u003cSiteHeader @user={{this.user}} class={{if this.user.isAdmin \"admin\"}} /\u003e\n\n\u003cSuperSelect @selected={{this.user.country}} as |s|\u003e\n  {{#each this.availableCountries as |country|}}\n    \u003cs.option @value={{country}}\u003e{{country.name}}\u003c/s.option\u003e\n  {{/each}}\n\u003c/SuperSelect\u003e\n```\n\n### Supported Features\n\n- Supports invoking components via angle brackets using TitleCase\n\n```hbs\n\u003cFooBar\u003e\u003c/FooBar\u003e\n```\n\n- Supports invoking components via angle brackets with self-closing syntax\n\n```hbs\n\u003cFooBar /\u003e\n```\n\n- Supports invoking components via angle brackets using paths\n\n```hbs\n\u003csome.thing\u003e\u003c/some.thing\u003e\n```\n\n- Supports invoking components via angle brackets using yielded block params\n\n```hbs\n{{#with (component 'foo-bar') as |Foo|}}\n  \u003cFoo\u003e\u003c/Foo\u003e\n{{/with}}\n```\n\n- Supports passing arguments into invoked components with `@` prefix\n\n```hbs\n\u003cFooBar @title={{whateverHere}}\u003e\u003c/FooBar\u003e\n```\n\n- Supports passing attributes to be added to the root element of the component without `@` prefix\n\n```hbs\n\u003cFooBar data-test-foo-bar\u003e\u003c/FooBar\u003e\n```\n\n- Supports using `has-block` _inside_ the invoked component to determine if a block was provided\n\n```hbs\n\u003cFooBar /\u003e {{! checking `has-block` inside would be `false`}}\n\n\u003cFooBar\u003e\u003c/FooBar\u003e {{! checking `has-block` inside would be `true`}}\n```\n\n- Supports yielding block params from inside the invoked component\n\n```hbs\n\u003cFooBar as |qux|\u003e{{qux}}\u003c/FooBar\u003e\n```\n\n- Supports passing `...attributes` into another angle bracket invocation\n\n```hbs\n\u003cFooBar ...attributes\u003e\n```\n\n- Supports passing `...attributes` into a non-component element\n\n```hbs\n\u003cdiv ...attributes\u003e\u003c/div\u003e\n```\n\n- Supports passing `...attributes` into tagless components\n- Supports invoking single word components:\n\n```hbs\n\u003cTitle /\u003e\n```\n\n- Supports invoking components nested in subfolders:\n\n```\n\u003cFoo::Bar /\u003e\n```\n\n- Completely inert when running Ember 3.10 or higher\n- Supports Ember 2.12, 2.16, 2.18, 3.1, 3.2, 3.3, 3.4, 3.8, 3.9\n- Test all the features listed above 😘\n\n### Addons\n\nAny addons wanting to use angle bracket components (in either addon/ or addon-test-support/) need to install `ember-angle-bracket-invocation-polyfill` as a dependency.\n\n## Limitations\n\nThere are no known limitations, all features described in the RFC are polyfilled.\n\n## Contributing\n\n### Installation\n\n- `git clone \u003crepository-url\u003e`\n- `cd ember-angle-bracket-invocation-polyfill`\n- `yarn install`\n\n### Linting\n\n- `yarn lint:js`\n- `yarn lint:js --fix`\n\n### Running tests\n\n- `ember test` – Runs the test suite on the current Ember version\n- `ember test --server` – Runs the test suite in \"watch mode\"\n- `ember try:each` – Runs the test suite against multiple Ember versions\n\n### Running the dummy application\n\n- `ember serve`\n- Visit the dummy application at [http://localhost:4200](http://localhost:4200).\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":["Packages"],"sub_categories":["Polyfills"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-polyfills%2Fember-angle-bracket-invocation-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fember-polyfills%2Fember-angle-bracket-invocation-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-polyfills%2Fember-angle-bracket-invocation-polyfill/lists"}