@gluonjs/quarks / packages/quarks/src / ComponentLibraryLoader

Class: ComponentLibraryLoader

Explicit, consumer-owned component loader. It never scans a package or imports unrequested entries; a bundler-aware resolver supplies the actual public module import for each manifest record.

Constructors

Constructor

new ComponentLibraryLoader(manifest, resolver, options?): ComponentLibraryLoader

Parameters

Returns

ComponentLibraryLoader

Methods

dispose()

dispose(): void

Returns

void

load()

load(id): Promise<ComponentLoadResult>

Parameters

id

string

Returns

Promise<ComponentLoadResult>

release()

release(id): void

Parameters

id

string

Returns

void

status()

status(id): ComponentLoadStatus

Parameters

id

string

Returns

ComponentLoadStatus

styleSnapshot()

styleSnapshot(): Readonly<{ library: string; schemaVersion: 1; styles: readonly string[]; }>

Serializable request-local style ids retained by successfully loaded entries.

Returns

Readonly<{ library: string; schemaVersion: 1; styles: readonly string[]; }>

validateStyleSnapshot()

validateStyleSnapshot(snapshot): void

Rejects a hydration handoff unless the library and ordered style ids match exactly.

Parameters

snapshot

unknown

Returns

void

Example

Load exactly one requested manifest entry and observe its explicit cache state:

import { createComponentLibraryLoader, type ComponentLibraryLoader, type ComponentLibraryLoaderOptions, type ComponentLibraryManifest, type ComponentLibraryModuleResolver, type ComponentLibraryStyleResolver, type ComponentLoadResult, type ComponentLoadStatus } from '@gluonjs/quarks';

const manifest = { schemaVersion: 1, name: '@acme/shop-components', entries: [{ id: 'purchase-action', module: '@acme/shop-components/purchase-action', exportName: 'PurchaseAction', layer: 'atom', styles: [], dependencies: [], accessibility: 'Renders a labelled native button.' }] } as const satisfies ComponentLibraryManifest;
const resolver: ComponentLibraryModuleResolver = { load: async (entry) => ({ entry: entry.id }) };
const styles: ComponentLibraryStyleResolver = { resolve: () => [] };
const options: ComponentLibraryLoaderOptions = { styleTarget: document, styles };
const loader: ComponentLibraryLoader = createComponentLibraryLoader(manifest, resolver, options);
const component: ComponentLoadResult = await loader.load('purchase-action');
const status: ComponentLoadStatus = loader.status('purchase-action');
console.log(status, component.entry.exportName);