docs/examples/lit.md

In devOpifex/leprechaun: Create Simple 'Shiny' Applications as Packages

Lit

An example of using Google's Lit library of Web Components.

Initialise

Create an R package and scaffold a leprechaun application.

usethis::create_package('litter')
leprechaun::scaffold()

Packer

JavaScript is better handled with packer, we therefore create a packer scaffold.

packer::scaffold_leprechaun()

Then we add the packer plugin.

leprechaun::use_packer()

This creates boiler plate code to use JavaScript with webpack, which we will change to use Lit.

Install

Install the Lit npm package.

packer::npm_install("lit", scope = "prod")

Use Lit

Replace the content of srcjs/index.js with:

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static get styles() {
    return css`p { color: blue }`;
  }

  static get properties() {
    return {
      name: {type: String}
    }
  }

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting);

UI

Then use the above registered simple-greeting component in the UI of the application.

# somewhere in shiny UI
tag("simple-greeting", list(name = "John"))

That is it.

devOpifex/leprechaun documentation built on April 17, 2025, 4:31 a.m.