@gluonjs/quarks / packages/quarks/src / ComponentLibraryEntry

Interface: ComponentLibraryEntry

Public, serializable contract for optional component-library records.

A manifest describes what a consumer may request. It deliberately does not import modules, register custom elements, or adopt styles: those observable effects belong to an explicit loader implementation owned by the consumer.

Properties

accessibility

readonly accessibility: string

Short consumer-visible accessibility contract.

dependencies

readonly dependencies: readonly string[]

Other manifest entries that must be loaded first.

exportName

readonly exportName: string

Named public export provided by module.

id

readonly id: string

Stable, library-local request key such as product-configurator.

layer

readonly layer: "atom" | "molecule" | "element" | "quark"

Functional components render through this public layer.

module

readonly module: string

Public ESM specifier that a loader is allowed to resolve.

storyId?

readonly optional storyId?: string

Stable Storybook story id, when a developer story is supplied.

styles

readonly styles: readonly string[]

Stable constructable-stylesheet ids needed by this record.

tag?

readonly optional tag?: `${string}-${string}`

Required only for an element that may register a custom-element name.

Example

Describe a requested public component module, its styles, dependencies, accessibility contract, and optional custom-element tag:

import { validateComponentLibraryManifest, type ComponentLibraryEntry, type ComponentLibraryManifest, type ComponentLibraryManifestValidation } from '@gluonjs/quarks';

const entry = {
  id: 'product-configurator',
  module: '@acme/shop-components/product-configurator',
  exportName: 'ProductConfigurator',
  layer: 'element',
  tag: 'acme-product-configurator',
  styles: ['acme-product-configurator'],
  dependencies: [],
  accessibility: 'Uses labelled native choices.',
} as const satisfies ComponentLibraryEntry;
const manifest = { schemaVersion: 1, name: '@acme/shop-components', entries: [entry] } as const satisfies ComponentLibraryManifest;
const result: ComponentLibraryManifestValidation = validateComponentLibraryManifest(manifest);
if (!result.valid) throw new Error(result.errors.join('\n'));
console.log(manifest.entries[0]?.module);