Lit Renderer

Semantic templates compile to an AST that can be read by a rendering engine to generate the html for your UI component.

The renderer handles things like dynamic expression evaluation, reactive DOM updates, and all the gnitty gritty to render your component to a page.

Semantic ships with a single primary rendering engine written to wrap Lit’s powerful and efficient rendering called LitRenderer.

Additional rendering engines may be written in the future to render UI components to other targets than just web.

Advanced Use - It is not recommended to use the LitRenderer class directly unless you are wrapping SUI for a custom implementation. LitRenderer is used automatically from defineComponent to render your component.

Import

import { LitRenderer } from '@semantic-ui/component';

Constructor

new LitRenderer(options)

Parameters

Options Object

Example

const renderer = new LitRenderer({
  ast: templateAST,
  data: {
    user: { name: 'John' }
  },
  template: parentTemplate,
  subTemplates: {
    header: headerTemplate,
    footer: footerTemplate
  }
});

Methods

render

render({ ast, data } = {})

Renders the template with the current data context and returns a Lit template result.

Parameters

Options Object

Returns

A Lit template result.

Example

// Basic render
const html = renderer.render();

// Render with new data
const html = renderer.render({
  data: { count: 5 }
});

// Render with new AST and data
const html = renderer.render({
  ast: newTemplateAST,
  data: { items: ['one', 'two'] }
});

setData

setData(newData)

Updates the data context and triggers reactive updates.

Parameters

Example

renderer.setData({
  count: 10,
  user: { name: 'Jane' }
});

evaluateExpression

evaluateExpression(expression, data, options)

Evaluates a template expression in the given data context.

Parameters

Options Object

Returns

The evaluated expression result or a Lit directive if asDirective is true.

Example

// Simple property access
const value = renderer.evaluateExpression('user.name', {
  user: { name: 'John' }
});

// With directive options
const directive = renderer.evaluateExpression('content', data, {
  asDirective: true,
  unsafeHTML: true
});

evaluateTemplate

evaluateTemplate(node, data)

Evaluates a template node with given data.

Parameters

Node Object

Returns

A Lit template result.

Example

const result = renderer.evaluateTemplate({
  name: 'itemTemplate',
  data: {
    item: { id: 1, text: 'Test' }
  }
}, contextData);

evaluateConditional

evaluateConditional(node, data)

Evaluates a conditional template node.

Parameters

Node Object

Returns

A Lit directive for conditional rendering.

Example

const result = renderer.evaluateConditional({
  condition: 'isVisible',
  content: [/* template content */],
  branches: [
    {
      type: 'elseif',
      condition: 'isLoading',
      content: [/* loading content */]
    },
    {
      type: 'else',
      content: [/* else content */]
    }
  ]
}, data);

evaluateEach

evaluateEach(node, data)

Evaluates an iteration template node.

Parameters

Node Object

Returns

A Lit directive for iteration.

Example

const result = renderer.evaluateEach({
  over: 'items',
  content: [/* item template */],
  as: 'item'
}, {
  items: ['one', 'two', 'three']
});

Expression Types

The renderer supports various expression types in templates, for more information see the documentation on template expression.

Simple Properties

{ user.name }

Nested Expressions

{ helper (otherHelper value) }

Boolean Attributes

<div hidden={ isHidden }></div>

Template Helpers

{ formatDate date "MM/DD/YYYY" }