👩‍🔬 Please be aware that this package is still experimental — changes to the interface and underlying implementation are likely, and future development or maintenance is not guaranteed.

Usage no npm install needed!

<script type="module">
  import extensionKid from 'https://cdn.skypack.dev/extension-kid';


Extension Kid 👶 Build Status

👩‍🔬 Please be aware that this package is still experimental — changes to the interface and underlying implementation are likely, and future development or maintenance is not guaranteed.


The Framework is based and heavily inspired by the internal package system used in Theia IDE. Precisely @theia/core package version v0.3.7. The version was distributed under Apache 2.0 license.

Expected knowledge

Developer is expected to have prior knowledge of inversify.js and Dependency Injection pattern.

Key Concepts

The framework provides a way of modularizing applications. It brings two key concepts: Service and Extension.


Service represents a place of your app you'd like to have extendable. Service has a named ExtensionProvider and expects its extensions to implement a certain interface.

export const MyServiceExtension = Symbol("MyServiceExtension");

export interface IMyServiceExtension {
  // ...

export class MyService {
    extensionProvider: ExtensionProvider
  ) {
    this._extensionProvider = extensionProvider;

The Framework comes with one service Application.


Piece of code that implements interface of a specific Service

export class MyExtension implements IMyServiceExtension {
  // ...

Extensions are meant to be bound to an ExtensionProvider.


Extension provider holds references to a container and a service identifier. The purpose of the provider is to fetch extensions from the container named after the service identifier.

Unless you need a very specific behavior from an extension provider you are highly encouraged to use the provided implementation. Otherwise you're free to implement your own provider.

To bind an extension provider to a service identifier use bindExtensionProvider helper:

new ContainerModule(bind => {
  bindExtensionProvider(bind, MyServiceExtension);

then you can simply bind extensions to the provider:

new ContainerModule(bind => {


Extends inversify.js Container and wraps EventEmitter. The container emits events on every bind, unbind and rebind method calls.

ExtensionProvider uses this feature to expose observable interface, so that your service can be notified every time a new extension is being bound to the container.


Package resolver (TBD)

There's no package resolver mechanism in place yet.

Authoring a package

Typical package consists of one or several Extensions.

The default export of a package should be a factory function that accepts one argument context and returns a ContainerModule.

export default _context => {
  return new ContainerModule(bind => {
    // Do all the bindings you need here

context argument is optional and will be used by the resolver (TBD) to parameterize the package. There's no more information currently, we just would like to establish the interface so that nobody will have to adjust their packages in the future.

Loading packages into your application

As there's no resolver yet, you should figure out the way of loading all your packages either at compile time or runtime or both.

At compile time in your application's composition root you can import packages and load them into a container.

import extensionFramework, { Container } from "extension-kid";
import packageFactory from "your-package";

const container = new Container();


const package = packageFactory();

export default container;