GLUON / DOCS Playground

@gluonjs/quarks

@gluonjs/quarks / packages/quarks/src / ComponentLibraryLoaderOptions

Interface: ComponentLibraryLoaderOptions

Properties

styles?

readonly optional styles?: ComponentLibraryStyleResolver

Optional public stylesheet resolver; no styles are adopted without it.

styleTarget?

readonly optional styleTarget?: Document | ShadowRoot

Explicit target that owns sheets resolved by styles.

Example

Provide an explicit stylesheet target and resolver when loaded entries own constructable sheets:

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