A tiny toolkit that aims to simplify the creation of extensible browser-based applications.

Usage no npm install needed!

<script type="module">
  import coupageCore from 'https://cdn.skypack.dev/@coupage/core';



The Coupage Core package provides a set of APIs that enable type-safe extension definition and flexible resource loading. The implementation handles both optimal development experience as well as optimized production performance.


The package offers APIs which are suitable for either application developers or integration packages like @coupage/react.

Developer APIs

Preload all extension definitions and related resources.

function preloadResources(resources: Resources, locale: string, nonce?: string): void;

Create a definition for a particular extension while using a predefined common template.

function createExtensionDefinition<T>(definitionTemplate: T, definition: T): T;

Create an empty extension point definition that contains nothing but type information.

function createExtensionPointDefinition<T>(): T;

Extract extension point names out of an extension definition template.

function extractExtensionPointNames<T>(definitionTemplate: T): Record<keyof T, string>;

Integration APIs

Extension module containing a default export.

interface ExtensionModule<T = unknown> {
    default: T;

Extension resources type structure.

interface ExtensionResources {
    messages?: Record<string, string>;
    scripts: Record<string, string>;
    styles?: Record<string, string>;

Provide a cached copy of a given extension internationalization messages if such are available.

function getExtensionMessages(extensionName: string, locale: string): Record<string, string> | void;

Provide a cached copy of a given extension definition if such is available.

function getExtensionDefinition<T = unknown>(extensionName: string): ExtensionModule<T> | void;

Load the main entry point of an extension and return a particular extension point content.

function loadExtensionPoint<T = unknown>(
    extensionName: string,
    extensionPointName: string,
    extensionResources: ExtensionResources,
    dependencies: Record<string, unknown>,
    nonce?: string
): Promise<ExtensionModule<T>>;

Load all extension definitions and related resources.

function loadResources(
    resources: Resources,
    dependencies: Record<string, unknown>,
    locale: string,
    nonce?: string
): Promise<void>;