sc-lib-context

Shared library for Angular microfrontend ecosystems. Raw TypeScript source distribution - no pre-compilation, consumers compile it themselves.

Installation

npm install sc-lib-context

Structure

sc-lib-context/
├── common/          # Types & utilities
├── core/            # Infrastructure (tokens, services)
├── shared/          # State stores & UI components
└── index.ts         # Main entry point

Usage

Import Styles

// Full import
import { CounterStore, MfContextService, safeJsonParse } from 'sc-lib-context';

// Selective imports (tree-shakeable)
import { CounterStore } from 'sc-lib-context/shared';
import { MfContextService, MF_CONTEXT_CONFIG } from 'sc-lib-context/core';
import { safeJsonParse, AppScope } from 'sc-lib-context/common';

Counter Store (Shared State)

The CounterStore is a signal-based reactive store:

import { Component, inject } from '@angular/core';
import { CounterStore } from 'sc-lib-context/shared';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <p>Value: {{ store.counter() }}</p>
    <button (click)="store.increment()">+</button>
    <button (click)="store.decrement()">-</button>
  `
})
export class MyComponent {
  readonly store = inject(CounterStore);
}

Agnostic UI Components

Components are minimal and unstyled - you provide the styling:

// MFE-A: Display counter value
import { CounterDisplayComponent } from 'sc-lib-context/shared';

@Component({
  imports: [CounterDisplayComponent],
  template: `<p class="my-styles">Counter: <sc-counter-display /></p>`
})

// MFE-B: Increment button
import { CounterIncrementComponent } from 'sc-lib-context/shared';

@Component({
  imports: [CounterIncrementComponent],
  template: `<sc-counter-increment class="btn-primary">Add +1</sc-counter-increment>`
})

// MFE-C: Decrement button
import { CounterDecrementComponent } from 'sc-lib-context/shared';

@Component({
  imports: [CounterDecrementComponent],
  template: `<sc-counter-decrement class="btn-danger">Remove -1</sc-counter-decrement>`
})

// MFE-D: Result button (emits value via output)
import { CounterResultComponent } from 'sc-lib-context/shared';

@Component({
  imports: [CounterResultComponent],
  template: `
    <sc-counter-result (resultRequested)="handleResult($event)">
      Show Result
    </sc-counter-result>
  `
})
export class ResultComponent {
  handleResult(value: number) {
    alert(`Current value: ${value}`);
  }
}

MFE Context Service

Configure and access microfrontend metadata:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { MF_CONTEXT_CONFIG } from 'sc-lib-context/core';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: MF_CONTEXT_CONFIG,
      useValue: {
        mfeName: 'my-mfe',
        scope: 'mfe',
        version: '1.0.0',
        basePath: '/my-mfe'
      }
    }
  ]
};

// component.ts
import { MfContextService } from 'sc-lib-context/core';

@Component({ ... })
export class MyComponent {
  private ctx = inject(MfContextService);

  ngOnInit() {
    console.log(this.ctx.mfeName());   // 'my-mfe'
    console.log(this.ctx.isShell());   // false
    console.log(this.ctx.isMfe());     // true
  }
}

API Reference

shared/state/CounterStore

| Property/Method | Type | Description | |-----------------|------|-------------| | counter | Signal<number> | Current counter value | | isPositive | Signal<boolean> | Whether counter > 0 | | isNegative | Signal<boolean> | Whether counter < 0 | | increment() | void | Add 1 to counter | | decrement() | void | Subtract 1 from counter | | getValue() | number | Get current value | | setValue(n) | void | Set to specific value | | reset() | void | Reset to 0 |

core/MfContextService

| Property | Type | Description | |----------|------|-------------| | context | Signal<MfRuntimeContext> | Full context object | | mfeName | Signal<string> | MFE name | | scope | Signal<AppScope> | 'shell' | 'mfe' | 'unknown' | | isShell | Signal<boolean> | Is shell app | | isMfe | Signal<boolean> | Is microfrontend |

Requirements

• Angular >= 18.0.0
• TypeScript >= 5.4

License

MIT