@gluonjs/atoms / packages/atoms/src / defineUiAtom

Function: defineUiAtom()

defineUiAtom<Props, TagName>(options): Component<UiAtomProps<Props, TagName>>

Defines a concise presentational Atom over a native element.

The returned component accepts one props object, selects a fixed or props-driven native tag, and optionally owns one constructable stylesheet. Stateful behavior and advanced composition remain explicit defineAtom() and q.*() concerns.

Type Parameters

Props

Props extends object

TagName

TagName extends keyof HTMLElementTagNameMap

Parameters

options

DefineUiAtomOptions<Props, TagName>

Returns

Component<UiAtomProps<Props, TagName>>

Example

Create a stateless presentational Atom with one public props object, a fixed or conditional native tag, and optional owned stylesheet metadata:

import { css } from '@gluonjs/core';
import {
  defineUiAtom,
  type DefineUiAtomOptions,
  type LooseUiAtomProps,
  type UiAtomBaseProps,
  type UiAtomProps,
  type UiAtomStyleOptions,
} from '@gluonjs/atoms';

interface TextLinkProps extends UiAtomBaseProps {
  readonly href?: string;
}

const style = {
  id: 'goods-text-link',
  sheet: css`:where(.goods-text-link) { text-underline-offset: 0.2em; }`,
} satisfies UiAtomStyleOptions;
const options = {
  displayName: 'TextLink',
  tag: ({ href }) => href ? 'a' : 'span',
  style,
  nativeProps: ({ href, children }, tag) => ({
    class: 'goods-text-link',
    children,
    ...(tag === 'a' ? { href } : {}),
  }),
} satisfies DefineUiAtomOptions<TextLinkProps, 'a' | 'span'>;
const TextLink = defineUiAtom(options);
const props = { href: '/shop', children: 'Shop' } satisfies UiAtomProps<TextLinkProps, 'a' | 'span'>;
const legacy = { slot: { content: 'Legacy label' } } satisfies LooseUiAtomProps;
console.log(TextLink(props), legacy.slot?.content);