@gluonjs/core / src / Component

Interface: Component()<Props>

Type Parameters

Props

Props = Record<string, never>

Component(props): TemplateResult

Parameters

props

Props

Returns

TemplateResult

Properties

displayName

readonly displayName: string

layer

readonly layer: ComponentLayer

styles

readonly styles: readonly ComponentStyleDependency[]

Exact immutable styles retained when this component result is rendered.

Example

Call a typed functional component while retaining its architectural layer and stable display name for tooling:

import {
  defineAtom,
  defineMolecule,
  defineOrganism,
  html,
  type Component,
} from '@gluonjs/core';

const Price: Component<{ amount: number }> = defineAtom(
  ({ amount }) => html`<data value=${amount}>€${amount}</data>`,
  'Price',
);
const ProductCard = defineMolecule(
  ({ name, price }: { name: string; price: number }) =>
    html`<article><h2>${name}</h2>${Price({ amount: price })}</article>`,
  'ProductCard',
);
const Catalog = defineOrganism(
  ({ products }: { products: readonly { name: string; price: number }[] }) =>
    html`<main>${products.map(ProductCard)}</main>`,
  'Catalog',
);
console.log(Price.layer, ProductCard.layer, Catalog({ products: [] }));