@lxpack/components

Reusable UI widgets for LXPack type: component lessons — built-ins, registry API, and a browser bundle for SCORM and preview.

Part of LXPack. Docs: Components reference · Lesson types.

| Related | Package | |---------|---------| | CLI / build | @lxpack/cli | | Component ID validation | @lxpack/validators (BUILTIN_COMPONENT_IDS) | | Runtime mounting | @lxpack/runtime (renderComponentLesson) | | Packaging | @lxpack/scorm (lxpack-components.js) |

Install

npm install @lxpack/components

Requires Node.js 18 or 20 (18+) for the build toolchain. The published browser bundle runs in modern browsers.

Package exports

| Import | Description | |--------|-------------| | @lxpack/components | Registry API (registerComponent, getComponentMount, registerBuiltinComponents) | | @lxpack/components/bundle | Prebuilt dist/bundle.js — sets window.__LXPACK_COMPONENTS__ |

Built-in components

| ID | Description | |----|-------------| | callout | Info/warning callout (variant, body) | | image-card | Image with caption | | checklist | Interactive checklist |

Built-in IDs are validated at course build time via BUILTIN_COMPONENT_IDS in @lxpack/validators.

Authoring

Writing lessons · Course structure.

Add a component lesson in course.yaml:

lessons:
  - id: tip
    title: Pro tip
    type: component
    component: callout
    props:
      variant: info
      body: Remember to validate your course before export.

The CLI and SCORM packager copy the bundle to lxpack-components.js and load it before the runtime client. Preview serves it at /runtime/components.js.

Course overrides

Optional custom widgets live under course/components/<id>/ (validated at build time). Override IDs can replace or extend built-ins when the course manifest references them.

Registry API

import {
  registerComponent,
  getComponentMount,
  listBuiltinComponentIds,
  registerBuiltinComponents,
  type ComponentMount,
} from "@lxpack/components";

registerBuiltinComponents();

registerComponent("my-widget", (container, props) => {
  container.textContent = String(props?.label ?? "");
});

const mount = getComponentMount("callout");

ComponentMount receives the DOM container and lesson props from the manifest.

Browser bundle

The Vite build produces dist/bundle.js, which registers built-ins and exposes mounts on:

window.__LXPACK_COMPONENTS__

@lxpack/runtime renderComponentLesson() looks up mounts from this global when rendering component lessons.

Build output

| Artifact | Role | |----------|------| | dist/index.js | Node/library entry | | dist/bundle.js | Browser bundle for export and preview | | dist/styles.css | Component styles (copied at build) | | dist/*.d.ts | Type declarations |

Development

From the monorepo root:

pnpm --filter @lxpack/components build
pnpm --filter @lxpack/components test
pnpm --filter @lxpack/components typecheck

Links

• LXPack repository
• Documentation
• Components reference
• Branching demo example · Branching guide
• Changelog

License

Apache-2.0