@arcmantle/lit-jsx / runtime/type-helpers

runtime/type-helpers

Type Aliases

ToComponent()

ToComponent<T> = (props) => string

Defined in: runtime/type-helpers.ts:38

Type Parameters

T

T extends object = object

Parameters

props

JSXElementProps<T> & object

Returns

string

---

ToTag()

ToTag<T> = (props) => string

Defined in: runtime/type-helpers.ts:86

Type Parameters

T

T extends keyof IntrinsicElements

Parameters

props

IntrinsicElements[T] & object

Returns

string

Functions

toComponent()

toComponent<T>(element): ToComponent<InstanceType<T>>

Defined in: runtime/type-helpers.ts:24

Creates a component that can be used directly in JSX syntax. Also registers the custom element if it hasn't been registered yet.

Type Parameters

T

T extends {(...args): any; tagName: string; }

Parameters

element

T

Returns

ToComponent<InstanceType<T>>

Example

import { toComponent } from 'jsx-lit';

export class MyButton extends LitElement {
  static tagName = 'my-button';
}

const MyButtonComponent = toComponent(MyButton);

// Usage in JSX - compiler automatically detects this as a custom element
const jsx = (
  <MyButtonComponent
    class="my-button"
    on-click={() => { console.log('Clicked!'); }}
  />
);

---

toTag()

toTag<T>(tag): ToTag<T>

Defined in: runtime/type-helpers.ts:81

Creates a dynamic tag that can be used directly in JSX syntax. The compiler automatically detects when this helper is used and compiles it to efficient static lit-html templates.

Type Parameters

T

T extends keyof IntrinsicElements

Parameters

tag

T

The HTML tag name (standard HTML elements or custom element names)

Returns

ToTag<T>

A tag identifier that the compiler recognizes for optimization

Examples

import { toTag } from 'jsx-lit';

// Creates a dynamic tag that the compiler will recognize
const DynamicDiv = toTag('div');
const DynamicCustomElement = toTag('my-custom-element');

// Usage in JSX - compiler automatically handles the transformation
function renderConditional({ useDiv }) {
  const Tag = toTag(useDiv ? 'div' : 'span');
  return <Tag class="dynamic">Content</Tag>;
}

// Compiles to efficient static templates automatically:
// const Tag = toTag(useDiv ? 'div' : 'span');
// const __$Tag = __$literalMap.get(Tag);
// htmlStatic`<${__$Tag} class="dynamic">Content</${__$Tag}>`

// ❌ Without toTag helper - won't compile to static templates
const BadTag = 'div';
return <BadTag>Content</BadTag>; // This won't work with jsx-lit

// ✅ With toTag helper - compiler automatically optimizes
const GoodTag = toTag('div');
return <GoodTag>Content</GoodTag>; // Compiles to static templates