ficusjs-renderers

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>
    `
  }
}