Kompakkt.Extender

Extension system for modularizing instances of Kompakkt.

Archival notice

The Extender was moved to the official Kompakkt plugin repository

How to use Extender in Kompakkt Viewer or Repo

Use the provideExtender-method in the providers array of your ApplicationConfig (app.config.ts):

import { ApplicationConfig } from '@angular/core';
import { HelloWorldPlugin, provideExtender } from '@kompakkt/extender';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExtender({
      // Array of Extender Plugins
      plugins: [new HelloWorldPlugin()],
      // Name of the ComponentSet, either 'viewerComponents' or 'repoComponents'
      componentSet: 'repoComponents',
    }),
  ],
};

Creating a basic plugin and how to consume it

Plugin creating using factory pattern

The Extender library provides a factory for creating plugin classes. The plugin requires some basic metadata, and can optionally receive components for the Repo and the Viewer, as well as a token which can be consumed as a ProviderToken, allowing to inject the plugin instance anywhere in the application.

import { createExtenderPlugin } from '../plugin-factory';
import { HelloWorldComponent } from './hello-world.component';

// Create a plugin class extending the factory class
export class HelloWorldPlugin extends createExtenderPlugin({
  // Required
  name: 'Hello World',
  description: 'Hello World plugin',
  version: '1.0.0',
  // Optional
  tokenName: 'HelloWorldPlugin',
  viewerComponents: {
    'hello-world': [HelloWorldComponent],
  },
  repoComponents: {
    'hello-world': [HelloWorldComponent],
  },
}) {
  // Custom logic
}

Consume plugin components using slots and ExtenderSlotDirective

Notice the slot names like hello-world in the plugin definition?

Using these slots, we can inject the components of the plugin anywhere in Kompakkt, by using the ExtenderSlotDirective. Simply import the ExtenderSlotDirective, add it to a components' imports and use it on any HTML-tag in the template with the slot name you wish to use.

import { ExtenderSlotDirective } from '@kompakkt/extender';

@Component({
    /* ... */
    imports: [ExtenderSlotDirective]
})

<div extendSlot="hello-world"></div>

Passing data to components

Each element with the ExtenderSlotDirective also has an input called slotData. Using this input, we can pass any data to our components.

<div extendSlot="hello-world" [slotData]="{ name: 'World' }" ]></div>

When creating a component, you can access the slotData and use type guards to validate it.

@Component({
  selector: 'lib-hello-world',
  standalone: true,
  template: '<p>Hello {{ name() }}</p>',
  styles: '',
})
export class HelloWorldComponent extends createExtenderComponent() {
  name = computed(() => {
    const slotData = this.slotData();

    const isHelloWorldData = (obj: unknown): obj is { name: string } => {
      return typeof obj === 'object' && obj !== null && 'name' in obj;
    };

    return isHelloWorldData(slotData) ? slotData.name : 'World';
  });
}

Injecting plugin using the plugin token

If a token was given to the factory, the plugin can be injected anywhere in the application.

import { Component, inject } from '@angular/core';
import { HelloWorldPlugin } from '@kompakkt/extender';

@Component({
  /*...*/
})
class ExampleComponent {
  pluginReference = inject<HelloWorldPlugin>(HelloWorldPlugin.providerToken);
}