@gluonjs/core / src / KeepAlive

Function: KeepAlive()

KeepAlive(props): TemplateValue

Caches rendered view hosts by key and suspends inactive renderer resources.

Parameters

props

KeepAliveProps

Returns

TemplateValue

Example

Cache rendered view hosts by stable key, suspend inactive resources, enforce an LRU maximum, and report activation/eviction:

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);