@gluonjs/core


@gluonjs/core / src / PrimitiveValue

Type Alias: PrimitiveValue

PrimitiveValue = string | number | bigint | boolean | null | undefined

Example

Render strings, numbers, bigints, booleans, null, or undefined directly as primitive template content:

ts
import {
  directive,
  event,
  getTemplateValueServerContract,
  html,
  isTemplateResult,
  nothing,
  repeat,
  unsafeHTML,
  unsafeURL,
  type DirectiveDefinition,
  type DirectiveFactory,
  type DirectiveLifecycle,
  type DirectiveRunner,
  type Key,
  type KeyedItem,
  type PartController,
  type PrimitiveValue,
  type TemplateType,
  type TemplateValue,
  type TemplateValueServerContract,
} from '@gluonjs/core';

const primitive: PrimitiveValue = 'Ready';
const key: Key = 'orbit-lamp';
const products = repeat([{ id: key, name: 'Orbit Lamp' }], (product) => product.id, (product) => html`<li>${product.name}</li>`);
const keyed: KeyedItem | undefined = products.items[0];
const part: PartController = { setValue: (value) => console.log(value) };
const runner: DirectiveRunner = (target) => target.setValue(primitive);
const factory: DirectiveFactory<readonly [string]> = (value) => (target) => target.setValue(value);
const lifecycle: DirectiveLifecycle<readonly [string]> = {
  mount: (target, [value]) => target.setValue(value),
  update: (target, [value]) => target.setValue(value),
};
const definition: DirectiveDefinition<readonly [string]> = lifecycle;
const text = directive(definition);
const type: TemplateType = 'html';
const value: TemplateValue = html`<ul>${products}</ul>${text('Ready')}`;
const contracts: Array<TemplateValueServerContract | undefined> = [
  getTemplateValueServerContract(products),
  getTemplateValueServerContract(event(() => undefined)),
  getTemplateValueServerContract(unsafeHTML('<strong>Trusted</strong>')),
  getTemplateValueServerContract(unsafeURL('/manual.pdf')),
];
runner(part);
factory('Updated')(part);
console.log(type, isTemplateResult(value), keyed, contracts, nothing);