How to use the @aurelia/kernel.DI.createInterface function in @aurelia/kernel

// --------------------------------------------------------------------------
// ------------------- Aurelia-specific stuff starts here -------------------
// --------------------------------------------------------------------------

export interface IManagedEvent extends IEvent {
  propagationStopped?: boolean;
  // legacy
  path?: IEventTarget[];
  standardStopPropagation?(): void;
  // old composedPath
  deepPath?(): IEventTarget[];
}

export const INode = DI.createInterface().noDefault();

export const IRenderLocation = DI.createInterface().noDefault();
export interface IRenderLocation extends INode {
  $start?: IRenderLocation;
  $nodes?: INodeSequence | Readonly<{}>;
}

/**
 * Represents a DocumentFragment
 */
export interface INodeSequence extends INodeLike {
  /**
   * The nodes of this sequence.
   */
  childNodes: ReadonlyArray;

  /**
   * Find all instruction targets in this sequence.

}

  function $trace(obj: TaskQueue | Task, method: string) {
    if (enabled) {
      log(`${'  '.repeat(depth)}- `, obj, method);
    }
  }

  return {
    enter: $enter,
    leave: $leave,
    trace: $trace,
  };
})();

export const IClock = DI.createInterface('IClock').withDefault(x => x.instance(globalClock));
export interface IClock {
  now(highRes?: boolean): number;
}

export class Clock implements IClock {
  public readonly now: () => number;

  public constructor(opts?: IClockSettings) {
    const { now, forceUpdateInterval } = { ...defaultClockSettings, ...opts };

    this.now = function (highRes: boolean = false): number {
      // if (++requests === forceUpdateInterval || highRes) {
      //   requests = 0;
      //   timestamp = now();
      // }
      // return timestamp;

readonly level: LogLevel;
}

export interface IHttpServer {
  start(): Promise;
  stop(): Promise;
}

export interface IRequestHandler {
  handleRequest(context: IHttpContext): Promise;
}

export const IFileSystem = DI.createInterface('IFileSystem').noDefault();
export const IProcessEnv = DI.createInterface('IProcessEnv').withDefault(x => x.instance(process.env));
export const IProcess = DI.createInterface('IProcess').withDefault(x => x.instance(process));
export const ISystem = DI.createInterface('ISystem').noDefault();
export const IHttpServerOptions = DI.createInterface('IHttpServerOptions').noDefault();
export const IHttpServer = DI.createInterface('IHttpServer').noDefault();
export const IRequestHandler = DI.createInterface('IRequestHandler').noDefault();

renderState: any;

  animate(direction: MotionDirection): void | Promise;
  tryReturnToCache(): boolean;
}

export type VisualWithCentralComponent = IVisual & { component: ICustomElement };

export interface IVisualFactory {
  readonly name: string;
  readonly isCaching: boolean;
  setCacheSize(size: number | '*', doNotOverrideIfAlreadySet: boolean): void;
  create(): IVisual;
}

export const IVisualFactory = DI.createInterface();

import { DI } from '@aurelia/kernel';
import i18next from 'i18next';

export type I18nModule =
  | i18next.BackendModule
  | i18next.LanguageDetectorModule
  | i18next.LanguageDetectorAsyncModule
  | i18next.PostProcessorModule
  | i18next.I18nFormatModule
  | i18next.ThirdPartyModule;

export const I18nInitOptions = DI.createInterface('I18nInitOptions');
export interface I18nInitOptions extends i18next.InitOptions {
  /**
   * Collection of i18next plugins to use.
   */
  plugins?: I18nModule[];
  attributes?: string[];
  skipTranslationOnMissingKey?: boolean;
}

export interface I18nConfigurationOptions {
  initOptions?: I18nInitOptions;
  translationAttributeAliases?: string[];
}

readonly root: string;
  readonly port: number;
  readonly hostName: string;
  readonly level: LogLevel;
}

export interface IHttpServer {
  start(): Promise;
  stop(): Promise;
}

export interface IRequestHandler {
  handleRequest(context: IHttpContext): Promise;
}

export const IFileSystem = DI.createInterface('IFileSystem').noDefault();
export const IProcessEnv = DI.createInterface('IProcessEnv').withDefault(x => x.instance(process.env));
export const IProcess = DI.createInterface('IProcess').withDefault(x => x.instance(process));
export const ISystem = DI.createInterface('ISystem').noDefault();
export const IHttpServerOptions = DI.createInterface('IHttpServerOptions').noDefault();
export const IHttpServer = DI.createInterface('IHttpServer').noDefault();
export const IRequestHandler = DI.createInterface('IRequestHandler').noDefault();

overridesAccessor(flags: LifecycleFlags, obj: unknown, propertyName: string): boolean;
  handles(flags: LifecycleFlags, obj: unknown): boolean;
}
export const ITargetObserverLocator = DI.createInterface('ITargetObserverLocator').noDefault();

export interface ITargetAccessorLocator {
  getAccessor(
    flags: LifecycleFlags,
    scheduler: IScheduler,
    lifecycle: ILifecycle,
    obj: unknown,
    propertyName: string,
  ): IBindingTargetAccessor;
  handles(flags: LifecycleFlags, obj: unknown): boolean;
}
export const ITargetAccessorLocator = DI.createInterface('ITargetAccessorLocator').noDefault();

function getPropertyDescriptor(subject: object, name: string): PropertyDescriptor {
  let pd = Object.getOwnPropertyDescriptor(subject, name);
  let proto = Object.getPrototypeOf(subject);

  while (pd == null && proto != null) {
    pd = Object.getOwnPropertyDescriptor(proto, name);
    proto = Object.getPrototypeOf(proto);
  }

  return pd!;
}

/** @internal */
export class ObserverLocator implements IObserverLocator {
  private readonly adapters: IObjectObservationAdapter[] = [];

lockScope(scope: IScope): void;
}

export interface IViewCache {
  readonly isCaching: boolean;
  setCacheSize(size: number | '*', doNotOverrideIfAlreadySet: boolean): void;
  canReturnToCache(view: IView): boolean;
  tryReturnToCache(view: IView): boolean;
}

export interface IViewFactory extends IViewCache {
  readonly name: string;
  create(flags?: LifecycleFlags): IView;
}

export const IViewFactory = DI.createInterface('IViewFactory').noDefault();

/**
 * Defines optional lifecycle hooks that will be called only when they are implemented.
 */
export interface ILifecycleHooks extends IState {
  $hooks?: Hooks;
  /** @internal */$nextBound?: ILifecycleHooks;
  /** @internal */$nextUnbound?: ILifecycleHooks;
  /** @internal */$nextAttached?: ILifecycleHooks;
  /** @internal */$nextDetached?: ILifecycleHooks;

  /**
   * Called at the end of `$hydrate`.
   *
   * @description
   * This is the second and last "hydrate" lifecycle hook (after `render`). It happens only once per instance (contrary to bind/attach

for (let i = 0, ii = events.length; ii > i; ++i) {
            add(events[i], callbackOrListener, node);
        }
    }
    dispose() {
        const node = this.target;
        const callbackOrListener = this.handler;
        const events = this.events;
        const remove = this.dom.removeEventListener;
        for (let i = 0, ii = events.length; ii > i; ++i) {
            remove(events[i], callbackOrListener, node);
        }
        this.target = this.handler = null;
    }
}
const IEventManager = DI.createInterface('IEventManager').withDefault(x => x.singleton(EventManager));
/** @internal */
class EventManager {
    constructor() {
        this.delegatedHandlers = {};
        this.capturedHandlers = {};
        this.delegatedHandlers = {};
        this.capturedHandlers = {};
    }
    addEventListener(dom, target, targetEvent, callbackOrListener, strategy) {
        let delegatedHandlers;
        let capturedHandlers;
        let handlerEntry;
        if (strategy === DelegationStrategy.bubbling) {
            delegatedHandlers = this.delegatedHandlers;
            handlerEntry = delegatedHandlers[targetEvent] || (delegatedHandlers[targetEvent] = new ListenerTracker(dom, targetEvent, handleDelegatedEvent, false));
            handlerEntry.increment();

import { LinkHandler } from './link-handler';
import { Nav } from './nav';
import { Navigator } from './navigator';
import { NavigationInstructionResolver } from './type-resolvers';
import { arrayRemove } from './utils';
import { Viewport } from './viewport';
import { FoundRoute } from './found-route';
import { HookManager } from './hook-manager';
import { Scope } from './scope';
import { ViewportScope } from './viewport-scope';
import { BrowserViewerStore } from './browser-viewer-store';
class ClosestViewportCustomElement {
}
class ClosestScope {
}
export const IRouter = DI.createInterface('IRouter').withDefault(x => x.singleton(Router));
export class Router {
    constructor(container, navigator, navigation, linkHandler, instructionResolver) {
        this.container = container;
        this.navigator = navigator;
        this.navigation = navigation;
        this.linkHandler = linkHandler;
        this.instructionResolver = instructionResolver;
        this.rootScope = null;
        this.navs = {};
        this.activeComponents = [];
        this.appendedInstructions = [];
        this.options = {
            useHref: true,
            statefulHistoryLength: 0,
            useDirectRoutes: true,
            useConfiguredRoutes: true,