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.

Summary

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.

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://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 the renderer function and the html tagged template literal
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 the renderer function and the html tagged template literal
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 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://unpkg.com/ficusjs-renderers@latest/dist/create-element.js'

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