@lsw-abpvue/core

@lsw-abpvue/core

The kernel of Lsw.Abp.VueUI, an unofficial Vue UI for the ABP Framework. Everything else in the project — themes, the extension system, the module pages — is built on the dependency injection this package provides.

pnpm add @lsw-abpvue/core

Milestones M1 and M2 are complete: dependency injection, application state, HTTP, localization, permissions, the session, multi-tenancy, the route tree, the /router entry point, and the authentication contract that @lsw-abpvue/oauth fills in.

Dependency injection

A service is a factory and a name. It is built on first injection, once per root injector, and it can inject other services while it is being built.

import { defineService, inject, type ServiceOf } from '@lsw-abpvue/core';

export const GreeterService = defineService('GreeterService', () => {
  const template = inject(GREETING_TEMPLATE);
  return { greet: (name: string) => interpolate(template, [name]) };
});
export type GreeterService = ServiceOf<typeof GreeterService>;

export const useGreeter = () => inject(GreeterService);

Applications bootstrap through createAbpApp, which owns the root injector and waits for the registered initializers before mounting:

const { mount } = await createAbpApp(App, {
  providers: [
    { provide: GREETING_TEMPLATE, useValue: 'Hei {0}.' },
    provideAppInitializer(() => inject(ConfigStateService).refreshAppState()),
  ],
});

mount('#app');

A page overrides a service for itself and its children with one call. The injector it returns is the escape hatch for callbacks, which have no injection context of their own:

<script setup lang="ts">
const injector = provideAbp([{ provide: GreeterService, useFactory: createMyGreeter }]);

const onClick = () => injector.get(GreeterService).greet('a click handler');
</script>

inject() is synchronous, exactly as in Angular: the context ends at the first await. Capture the injector before awaiting, or resolve everything up front.

What else is in it

Object extension mapping

@lsw-abpvue/core/object-extensions is a pure secondary entry point for mapExtensionProperty and OBJECT_EXTENSION_TYPES. It imports no Vue, router or DI code, so Node tools and runtime controls can use the same type, lookup, enum and visibility rules. The CLI's doctor and the extensible components consume this entry point.

How it lines up with the Angular UI

Decorators, reflect-metadata and deps arrays are gone: a factory calls inject() instead. Nothing is registered by importing it, so a service nobody injects is dropped by the bundler.

License

MIT. Not affiliated with or endorsed by Volosoft or the ABP Framework team.