FicusJS renderers
Minified ES module renderers for FicusJS.
This package provides a tested set of renderers as ES modules to make working with them much easier.
Summary
A renderer
function must be provided when creating a new FicusJS component.
This allows any renderer to be plugged into a component.
The following renderers have been tested with FicusJS and are available as minified bundles in this package to make working with them much easier.
- lit-html
- uhtml
- htm and Preact
document.createElement
lit-html
The lit-html renderer is available in this package.
import { html, renderer } from 'https://unpkg.com/ficusjs-renderers@latest/dist/lit-html.js'
createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with ${someVariable}</div>
`
}
}
uhtml
The uhtml renderer is available in this package.
import { html, renderer } from 'https://unpkg.com/ficusjs-renderers@latest/dist/uhtml.js'
createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with ${someVariable}</div>
`
}
}
htm
and Preact
The htm and Preact renderer is available in this package.
import { html, renderer } from 'https://unpkg.com/ficusjs-renderers@latest/dist/htm.js'
createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with ${someVariable}</div>
`
}
}
document.createElement
The simple document.createElement
renderer is available in this package.
In your component, return a template literal string containing HTML.
import { renderer } from 'https://unpkg.com/ficusjs-renderers@latest/dist/create-element.js'
createComponent('test-comp', {
renderer,
render () {
return `
<div>Some HTML content with ${someVariable}</div>
`
}
}