@gluonjs/core / src / ClassValue

Type Alias: ClassValue

ClassValue = string | readonly ClassValue[] | Readonly<Record<string, unknown>> | null | undefined | false

Example

Compose class names from strings, nested arrays, truthy object keys, or empty values before rendering and merging:

import {
  compose,
  defineAtom,
  html,
  mergeProps,
  renderScopedSlot,
  type ClassValue,
  type ComponentTemplateTag,
  type ComponentLayer,
  type CompositionProps,
  type FunctionalComponent,
  type MergeableProps,
  type ScopedSlot,
  type StyleValue,
} from '@gluonjs/core';

const classes: ClassValue = ['product-card', { 'is-selected': true }];
const styles: StyleValue = { display: 'grid', gap: 16 };
const defaults = { class: classes, style: styles, role: 'article' } satisfies MergeableProps;
const props = mergeProps(defaults, { class: 'featured', style: { gap: 24 }, id: 'orbit-lamp' });
const actions: ScopedSlot<{ productId: string }> = ({ productId }) => html`<button data-id=${productId}>Add</button>`;
const layer: ComponentLayer = 'atom';
const ProductActions: FunctionalComponent<{ productId: string }> = ({ productId }) =>
  html`<div ...=${props}>${renderScopedSlot(actions, { productId })}</div>`;
interface PanelProps { title: string; children: import('@gluonjs/core').TemplateValue }
const Panel: FunctionalComponent<PanelProps> = ({ title, children }) => html`<section><h2>${title}</h2>${children}</section>`;
const panelProps: CompositionProps<PanelProps> = { title: 'Checkout' };
const panel: ComponentTemplateTag = compose(Panel, panelProps);
const checkout = panel`<p>Delivery</p>`;
const Actions = defineAtom((props: { productId: string }) => html`${ProductActions(props)}`, 'ProductActions');
console.log(layer, checkout, Actions.layer, Actions({ productId: 'orbit-lamp' }));