@gluonjs/core / src / defineMolecule

Function: defineMolecule()

defineMolecule<Props>(render, displayName?, styles?): Component<Props>

Adds immutable layer: 'molecule' and displayName metadata to a stateless render function. It does not add lifecycle, registration, styling, prop validation, accessibility semantics, state ownership, or cleanup.

Type Parameters

Props

Props

Parameters

render

(props) => TemplateResult

displayName?

string

styles?

readonly ComponentStyleDependency[]

Returns

Component<Props>

Example

Compose Atoms into a typed Molecule with a stable display name and layer metadata:

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: [] }));