Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knownasilya/ember-inline-component
Blueprint Addon for Ember Components that have inline templates
https://github.com/knownasilya/ember-inline-component
blueprint-addon ember ember-addon inline-templates template
Last synced: 20 days ago
JSON representation
Blueprint Addon for Ember Components that have inline templates
- Host: GitHub
- URL: https://github.com/knownasilya/ember-inline-component
- Owner: knownasilya
- License: mit
- Created: 2016-02-27T20:21:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-13T14:56:56.000Z (about 6 years ago)
- Last Synced: 2024-10-05T11:11:44.011Z (about 1 month ago)
- Topics: blueprint-addon, ember, ember-addon, inline-templates, template
- Language: JavaScript
- Size: 185 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-inline-component
Blueprint Addon for Ember Components that have inline templates.
[![NPM][npm-badge-img]][npm-badge-link]
[![Build Status][travis-badge]][travis-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-url]
![Ember Version][ember-version]
Uses the wonderful [ember-cli-htmlbars-inline-precompile] addon behind the scenes.
## Install
```shell
ember install ember-inline-component
```
## Usage
```shell
ember g inline-component my-component
ember g inline-component --pod another-one
```
This creates a component file that looks like:
```js
import Component from '@ember/component';
import hbs from 'htmlbars-inline-precompile';
export default Component.extend({
layout: hbs`{{yield}}`
});
```
So you can build components with the template inside the source itself, skipping the `template.hbs` file.
Great for prototyping, and fast development. Can always be moved to a separate template file if your template gets big.
*Also works when generating inside an addon.*
## Linting
Note that the excellent [ember-template-lint](https://github.com/rwjblue/ember-template-lint)
project is extremely helpful for finding lint errors in handlebars files, but will
not examine template literals natively in `.js` files. However, it is possible to use
`eslint` along with [this eslint plugin](https://github.com/psbanka/eslint-plugin-hbs)
to provide linting for your handlebars template literals within your `.js` files.
## Contributing
If you see any issues, please submit an Issue, or a Pull Request if you can.
See [CONTRIBUTING.md].
## License
This project is licensed under the [MIT License](LICENSE.md).
[ember-cli-htmlbars-inline-precompile]: https://github.com/pangratz/ember-cli-htmlbars-inline-precompile
[CONTRIBUTING.md]: CONTRIBUTING.md
[npm-badge-img]: https://badge.fury.io/js/ember-inline-component.svg
[npm-badge-link]: http://badge.fury.io/js/ember-inline-component
[travis-badge]: https://travis-ci.org/knownasilya/ember-inline-component.svg
[travis-badge-url]: https://travis-ci.org/knownasilya/ember-inline-component
[ember-observer-badge]: http://emberobserver.com/badges/ember-inline-component.svg
[ember-observer-url]: http://emberobserver.com/addons/ember-inline-component
[ember-version]: https://embadge.io/v1/badge.svg?start=1.13.0