0.1.3 • Published 6 years ago
ember-render-to-string v0.1.3
ember-render-to-string
A component to render any Ember template to string. Works with Ember 2.10+(Glimmer 2) and FastBoot!
Motivation
There is a need sometimes to render Ember Template to string without poluting the rest of the page with unwanted content. It is especially useful for making wrappers for third-party libraries where you can pass innerHTML of element. For example ember-medium-editor uses it to pass innerHTML for buttons.
Implementation is borrowed from awesome ember-composability-tools but
ember-wormhole
addon was replaced by native in-element
helper which still
private API but there is RFC to
promote it to public.
Installation
- With ember:
ember install ember-render-to-string
- With yarn:
yarn add --dev ember-render-to-string
- With npm:
npm install --save-dev ember-render-to-string
Usage
import Component from '@ember/component';
export default Component.extend({
items: ['Ember', 'Vue', 'React'],
actions: {
returnInnerHTML(html) {
console.log(html); // '<h2>Can you see me?</h2>'
},
returnJustText(text) {
console.log(text); // 'Can you see me?'
},
returnDOMNode(node) {
console.log(node.tagName); // 'DIV'
},
returnCustomDOMNode(node) {
console.log(node.tagName); // 'BUTTON'
},
anyEmberHelper(html) {
console.log(html); // '<ul><li>Ember</li><li>Vue</li><li>React</li></ul>'
}
}
});
{{#render-to-string afterRender=(action "returnInnerHTML")}}
<h2>Can you see me?</h2>
{{/render-to-string}}
{{#render-to-string
content="text"
afterRender=(action "returnJustText")}}
<h2>Can you see me?</h2>
{{/render-to-string}}
{{#render-to-string
content="dom"
afterRender=(action "returnDOMNode")}}
<h2>Can you see me?</h2>
{{/render-to-string}}
{{#render-to-string
content="dom"
destElTag="button"
afterRender=(action "returnCustomDOMNode")}}
<h2>Can you see me?</h2>
{{/render-to-string}}
{{#render-to-string afterRender=(action "anyEmberHelper")}}
<ul>
{{#each items as |lib|}}
<li>{{lib}}</li>
{{/each}}
</ul>
{{/render-to-string}}
Options
Contributing
Installation
git clone git@github.com:kolybasov/ember-render-to-string.git
cd ember-render-to-string
yarn install
Linting
yarn lint:js
yarn lint:js --fix
Running tests
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"yarn test
– Runsember try:each
to test your addon against multiple Ember versions
License
This project is licensed under the MIT License.