Next Perpendicular Moonlanding
    Have ideas to improve npm?Join in the discussion! »

    @ficusjs/renderers
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    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.

    • 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 { 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 { 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 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>
        `
      }
    })

    Install

    npm i @ficusjs/renderers

    DownloadsWeekly Downloads

    9

    Version

    3.1.0

    License

    ISC

    Unpacked Size

    42.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar