FicusJS renderers #

Minified ES module renderers for FicusJS components.

The FicusJS renderers package provides a tested set of renderers as ES modules to make working with them much easier.

A renderer function must be provided when creating a new FicusJS component.
This allows any tagged template literal renderer to be plugged into a component.

The following renderers are available as minified bundles.

  • uhtml (default) - 3.02 KB gzipped
  • lit-html - 3.61 KB gzipped
  • htm (JSX-like syntax - no transpiler necessary) - 923 B gzipped
  • htm with Preact (JSX-like syntax - no transpiler necessary) - 4.3 KB gzipped
  • document.createElement - 141 B gzipped

uhtml #

The uhtml renderer is available in this package and is the default renderer.

// import the renderer function and the html tagged template literal
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'

createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with
${someVariable}</div>
`

}
})

lit-html #

The lit-html renderer is available in this package.

// import the renderer function and the html tagged template literal
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/lit-html'

createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with
${someVariable}</div>
`

}
})

htm #

The htm renderer is a JSX-like renderer (no transpiler necessary) available in this package.

import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/htm'

createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with
${someVariable}</div>
`

}
})

htm with Preact #

The htm with Preact renderer is available in this package.

import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/htm-preact'

createComponent('test-comp', {
renderer,
render () {
return html`
<div>Some HTML content with
${someVariable}</div>
`

}
})

document.createElement #

The document.createElement renderer is available in this package.
In your component, return a template literal string containing HTML.

This is only the renderer function and does not use a tagged template literal for rendering.

import { renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/create-element'

createComponent('test-comp', {
renderer,
render () {
return `
<div>Some HTML content with
${someVariable}</div>
`

}
})