@gluonjs/core / src / KeepAliveProps

Interface: KeepAliveProps

Properties

cacheKey

readonly cacheKey: PropertyKey

---

children

readonly children: TemplateValue

---

max?

readonly optional max?: number

---

onActivated?

readonly optional onActivated?: (key, host) => void

Parameters

key

PropertyKey

host

HTMLElement

Returns

void

---

onDeactivated?

readonly optional onDeactivated?: (key, host) => void

Parameters

key

PropertyKey

host

HTMLElement

Returns

void

---

onEvicted?

readonly optional onEvicted?: (key) => void

Parameters

key

PropertyKey

Returns

void

Example

Choose a cache key, rendered content, LRU limit, and activation/deactivation/eviction observers for a retained view:

import {
  KeepAlive,
  LayoutTransition,
  Suspense,
  Teleport,
  Transition,
  getBuiltinServerContract,
  html,
  type BuiltinServerContract,
  type KeepAliveProps,
  type LayoutTransitionProps,
  type SuspenseProps,
  type TeleportProps,
  type TransitionOptions,
  type TransitionProps,
} from '@gluonjs/core';

const suspenseProps = { source: Promise.resolve('Ready'), fallback: 'Loading…', children: (value: string) => value } satisfies SuspenseProps<string>;
const suspense = Suspense(suspenseProps);
const teleportProps = { to: '#bag-layer', children: html`<aside>Bag</aside>` } satisfies TeleportProps;
const teleport = Teleport(teleportProps);
const keepAliveProps = { cacheKey: '/shop', children: html`<main>Shop</main>`, max: 4 } satisfies KeepAliveProps;
const cached = KeepAlive(keepAliveProps);
const layoutProps = { layoutId: 'catalog-grid', transitionKey: 'Lighting', children: html`<section>Lighting</section>` } satisfies LayoutTransitionProps;
const layout = LayoutTransition(layoutProps);
const transitionOptions = { duration: 180, easing: 'ease-out', reducedMotion: 'system' } satisfies TransitionOptions;
const transitionProps = { ...transitionOptions, transitionKey: 'product', children: html`<article>Orbit Lamp</article>` } satisfies TransitionProps;
const transitioned = Transition(transitionProps);
const contracts: Array<BuiltinServerContract | undefined> = [suspense, teleport, cached, transitioned, layout].map(getBuiltinServerContract);
console.log(contracts);