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

    8

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    235 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar