Miss any of our Open RFC calls?Watch the recordings here! »

ember-render-to-string

0.1.3 • Public • Published

ember-render-to-string

Build Status Ember Observer Score

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 version
  • ember test --server – Runs the test suite in "watch mode"
  • yarn test – Runs ember try:each to test your addon against multiple Ember versions

License

This project is licensed under the MIT License.

Install

npm i ember-render-to-string

DownloadsWeekly Downloads

100

Version

0.1.3

License

MIT

Unpacked Size

235 kB

Total Files

9

Last publish

Collaborators

  • avatar