The arrow-render-to-string from dumbjs

arrow-render-to-string's Introduction

Render ArrowJS templates and partials to string.

Works wherever JS does.

Installation

npm install arrow-render-to-string

Usage/Examples

Basic

import { html } from '@arrow-js/core'
import { renderToString } from 'arrow-render-to-string'

const message = 'Hello World'
const view = html`<p>${message}</p>`

renderToString(view) //=> <p>Hello World</p>

Reactive Variables

import { html, reactive } from '@arrow-js/core'
import { renderToString } from 'arrow-render-to-string'

const state = reactive({
  count: 0,
})
const view = html`<p>${() => state.count}</p>`

renderToString(view) //=> <p>0</p>

Events

Events are stripped out, for you to re-hydrate on the client

import { html, reactive } from '@arrow-js/core'
import { renderToString } from 'arrow-render-to-string'

const state = reactive({
  count: 0,
})
const view = html`<button @click="${() => (state.count += 1)}">
  ${() => state.count}
</button>`

renderToString(view) //=> <button @click="<!--➳❍-->">0</button>

License

MIT

arrow-render-to-string's People

Contributors

Stargazers

Watchers

arrow-render-to-string's Issues

Stringification of dynamically generated array of partials

Doesn't stringify the output of the following

const tables = [1,2,3]

html`
    <div class="container">
      <div class="row">
        <div class="col">${() =>tables.map(x => html`<p>${x}</p>`)}</div>
      </div>
    </div>
  `

Workaround:

const tables = [1,2,3]
const tablesViews = state.tables.map(x => html`<p>${x}</p>`)

html`
    <div class="container">
      <div class="row">
        <div class="col">${tablesViews}</div>
      </div>
    </div>
  `

Dynamic Tag name and attributes aren't renderer or rendered incorrectly

Quick Example

const checked = true;
const comp = html`
   <input type="checkbox" ${()=>checked?"checked":""} />
` //=> should render <input type="checkbox" checked>