@arcmantle/lit-jsx / shared/jsx-core / LitJSX

LitJSX

Interfaces

DataProps

Defined in: shared/jsx-core.ts:51

Indexable

[key: `data-${string}`]: string | undefined

---

ExplicitBrand

Defined in: shared/jsx-core.ts:10

Properties

[explicitSymbol]?

optional [explicitSymbol]: undefined

Defined in: shared/jsx-core.ts:10

---

IntrinsicElements

Defined in: shared/jsx-core.ts:137

Interface for native HTML elements

Extends

• NativeHTMLElements.NativeSVGElements.NativeMathMLElements.SemanticTags

Extended by

• IntrinsicElements

Indexable

[key: `s-${string}`]: JSXElementProps<HTMLElement>

Semantic tags that start with "s-".

---

SemanticTags

Defined in: shared/jsx-dom.ts:27

Interface for semantic tags that start with "s-".

Extended by

• IntrinsicElements

Indexable

[key: `s-${string}`]: JSXElementProps<HTMLElement>

Semantic tags that start with "s-".

Type Aliases

AnyTagName

AnyTagName = string & Record<never, never>

Defined in: shared/jsx-core.ts:135

---

Child

Child = unknown

Defined in: shared/jsx-core.ts:132

---

ClassComponent()

ClassComponent<Instance> = (...args) => Instance

Defined in: shared/jsx-core.ts:154

Type Parameters

Instance

Instance extends object = any

Parameters

args

...any[]

Returns

Instance

---

Component()

Component<P> = (props) => Element

Defined in: shared/jsx-core.ts:153

Type Parameters

P

P extends object = { }

Parameters

props

P

Returns

Element

---

ComponentLike

ComponentLike<P> = Component<P> | ClassComponent<any>

Defined in: shared/jsx-core.ts:155

Type Parameters

P

P extends object = object

---

ComponentProps

ComponentProps<T> = T extends Component<infer P> ? P : T extends ClassComponent<infer I> ? JSXElementProps<Extract<I, object>> : T extends (...args) => infer I ? JSXElementProps<Extract<I, object>> : object

Defined in: shared/jsx-core.ts:159

Type Parameters

T

T

---

CSSProperties

CSSProperties = csstype.Properties & Record<string, string | number>

Defined in: shared/jsx-dom.ts:7

---

DynamicTag()

DynamicTag<Tag> = (props) => Element

Defined in: shared/jsx-core.ts:151

Type Parameters

Tag

Tag extends TagName

Parameters

props

DynamicTagProps<Tag>

Returns

Element

---

DynamicTagProps

DynamicTagProps<Tag> = Tag extends keyof IntrinsicElements ? IntrinsicElements[Tag] : Tag extends keyof HTMLElementTagNameMap ? JSXElementProps<HTMLElementTagNameMap[Tag]> : JSXElementProps<HTMLElement>

Defined in: shared/jsx-core.ts:145

Type Parameters

Tag

Tag extends string

---

Element

Element = unknown

Defined in: shared/jsx-core.ts:133

---

ElementMapToJSXElements

ElementMapToJSXElements<T> = { [K in keyof T]: JSXElementProps<T[K]> }

Defined in: shared/jsx-core.ts:128

Type Parameters

T

T extends Record<string, any>

---

Explicit

Explicit<T> = T & ExplicitBrand

Defined in: shared/jsx-core.ts:25

Marks a type as explicitly required when used in JSX props.
This allows making certain props required, while keeping the rest optional.

Example:

class MyElement extends LitElement {
   name: LitJSX.Explicit<string>;
   size: number;
}
	```
In this example, `name` is required while `size` is optional.

#### Type Parameters

##### T

`T`

***

### IfEquals

> **IfEquals**\<`X`, `Y`, `A`\> = \<`T`\>() => `T` *extends* `X` ? `1` : `2` *extends* \<`T`\>() => `T` *extends* `Y` ? `1` : `2` ? `A` : `never`

Defined in: [shared/jsx-core.ts:37](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L37)

#### Type Parameters

##### X

`X`

##### Y

`Y`

##### A

`A` = `X`

***

### IsMandatory

> **IsMandatory**\<`T`\> = `T` *extends* `object` ? *typeof* `explicitSymbol` *extends* keyof `T` ? `true` : `false` : `false`

Defined in: [shared/jsx-core.ts:27](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L27)

#### Type Parameters

##### T

`T`

***

### JSXElementProps

> **JSXElementProps**\<`T`\> = [`SpecialProps`](#specialprops)\<[`PartialExceptRequired`](#partialexceptrequired)\<[`TrimReadonly`](#trimreadonly)\<`T`\>\>\>

Defined in: [shared/jsx-core.ts:126](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L126)

#### Type Parameters

##### T

`T` *extends* `object`

***

### NativeHTMLElements

> **NativeHTMLElements** = [`ElementMapToJSXElements`](#elementmaptojsxelements)\<`HTMLElementTagNameMap`\>

Defined in: [shared/jsx-dom.ts:12](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-dom.ts#L12)

Interface for native HTML elements

***

### NativeMathMLElements

> **NativeMathMLElements** = [`ElementMapToJSXElements`](#elementmaptojsxelements)\<`Omit`\<`MathMLElementTagNameMap`, keyof `HTMLElementTagNameMap`\>\>

Defined in: [shared/jsx-dom.ts:22](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-dom.ts#L22)

Interface for native MathML elements

***

### NativeSVGElements

> **NativeSVGElements** = [`ElementMapToJSXElements`](#elementmaptojsxelements)\<`Omit`\<`SVGElementTagNameMap`, keyof `HTMLElementTagNameMap`\>\>

Defined in: [shared/jsx-dom.ts:17](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-dom.ts#L17)

Interface for native SVG elements

***

### PartialExceptRequired

> **PartialExceptRequired**\<`T`\> = `{ [P in keyof T as IsMandatory<T[P]> extends true ? P : never]: UnwrapMandatory<T[P]> }` & `{ [P in keyof T as IsMandatory<T[P]> extends true ? never : P]?: T[P] }`

Defined in: [shared/jsx-core.ts:31](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L31)

#### Type Parameters

##### T

`T` *extends* `object`

***

### SpecialProps

> **SpecialProps**\<`T`\> = `Omit`\<`T`, `"style"` \| `"styleList"` \| `"class"` \| `"classList"`\> & `object` & [`DataProps`](#dataprops)

Defined in: [shared/jsx-core.ts:55](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L55)

#### Type Declaration

##### children?

> `optional` **children**: [`Child`](#child)

The children of this JSX element.

Example: `<div>Children here</div>` \
Example with expression: `<div>{someValue}</div>`

This property should generally not be set directly, but rather via
the content between the opening and closing tags of the JSX element.

##### class?

> `optional` **class**: \{\[`k`: `string`\]: `boolean` \| `undefined`; \} \| `string`

A string or object defining CSS classes or styles. \
When a string is provided, it is set directly on the `class` or `style` attribute. \
When an object is provided, its keys and values are set as CSS properties.

Example 1: `<div class={{ myClass: true, anotherClass: false }}></div>` \
Example 2: `<div class="my-class another-class"></div>`

##### classList?

> `optional` **classList**: `object`

An object defining CSS classes.

Example: `<div classList={{ myClass: true, anotherClass: false }}></div>`

###### Index Signature

\[`k`: `string`\]: `boolean` \| `undefined`

##### directive?

> `optional` **directive**: `DirectiveResult`\<`any`\> \| `DirectiveResult`\<`any`\>[]

This property takes in one or more element directives.
This is akin to applying a directive through `<div ${myDirective()}></div>`.

##### ref?

> `optional` **ref**: `RefOrCallback`\<[`PartialExceptRequired`](#partialexceptrequired)\<[`TrimReadonly`](#trimreadonly)\<`T`\>\>\>

A reference to the underlying element.

Example: `<div ref={myRef}></div>` \
Example with callback: `<div ref={(el) => { ... }}></div>`

##### static?

> `optional` **static**: `true`

Opt into the lit-jsx custom-element transform.

Example: `<MyElement static />`

This is only required when not using type-inference option.
or using javascript without type checking.

##### style?

> `optional` **style**: [`CSSProperties`](#cssproperties) \| `string`

A string or object defining CSS styles. \
When a string is provided, it is set directly on the `style` attribute. \
When an object is provided, its keys and values are set as CSS properties.

Example 1: `<div style={{ color: 'red', fontSize: '16px' }}></div>` \
Example 2: `<div style="color: red; font-size: 16px;"></div>`

##### styleList?

> `optional` **styleList**: [`CSSProperties`](#cssproperties)

An object defining CSS properties.

Example: `<div styleList={{ color: 'red', fontSize: '16px' }}></div>`

#### Type Parameters

##### T

`T` *extends* `object` = `object`

***

### TagName

> **TagName** = keyof [`IntrinsicElements`](#intrinsicelements) \| [`AnyTagName`](#anytagname)

Defined in: [shared/jsx-core.ts:143](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L143)

***

### TrimReadonly

> **TrimReadonly**\<`T`\> = `Pick`\<`T`, [`WritableKeys`](#writablekeys)\<`T`\>\>

Defined in: [shared/jsx-core.ts:49](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L49)

#### Type Parameters

##### T

`T`

***

### UnwrapMandatory

> **UnwrapMandatory**\<`T`\> = `T` *extends* [`Explicit`](#explicit)\<infer U\> ? `U` : `T`

Defined in: [shared/jsx-core.ts:30](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L30)

#### Type Parameters

##### T

`T`

***

### WritableKeys

> **WritableKeys**\<`T`\> = `{ [P in keyof T]-?: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P> }`\[keyof `T`\]

Defined in: [shared/jsx-core.ts:41](https://github.com/arcmantle/lit-jsx/blob/2673c6ae661211a5c62665d845d3268851d60fee/src/shared/jsx-core.ts#L41)

#### Type Parameters

##### T

`T`