feat(theming): redesign facade api

Author: Char2sGu

packages/theming/src/builder-composition.ts

@@ -1,16 +1,21 @@
 import { ProviderToken } from '@angular/core';
+import { map, Observable, of } from 'rxjs';
 
 import { ThemeBuilder, ThemeBuilderConfigOf } from './builder';
 
 export interface ThemeBuilderComposition {
+  name: string;
   builder: ProviderToken<ThemeBuilder<any>>;
   config: unknown;
 }
 
 export const withThemeBuilder = <Builder extends ThemeBuilder<any>>(
+  name: string,
   builder: ProviderToken<Builder>,
-  config: ThemeBuilderConfigOf<Builder>,
-): ThemeBuilderComposition => ({
-  builder,
-  config,
-});
+  config:
+    | ThemeBuilderConfigOf<Builder>
+    | Observable<ThemeBuilderConfigOf<Builder>>,
+): Observable<ThemeBuilderComposition> => {
+  const config$ = config instanceof Observable ? config : of(config);
+  return config$.pipe(map((config) => ({ name, builder, config })));
+};

packages/theming/src/manager.ts

@@ -8,11 +8,11 @@ export class ThemeManager {
   protected injector = inject(Injector);
   protected tokens = inject(ThemeTokenRegistry);
 
-  build(config: ThemeBuildConfig): ThemeTokens {
+  build(compositions: ThemeBuilderComposition[]): ThemeTokens {
     const tokens: ThemeTokens = {};
-    for (const [name, composition] of Object.entries(config)) {
-      const { builder: token, config } = composition;
-      const builder = this.injector.get(token);
+    for (const composition of compositions) {
+      const { name, builder: builderToken, config } = composition;
+      const builder = this.injector.get(builderToken);
       const result = builder.build({ name, config });
       Object.assign(tokens, result);
     }
@@ -22,13 +22,4 @@ export class ThemeManager {
   apply(tokens: ThemeTokens): void {
     for (const name in tokens) this.tokens.set(name, tokens[name]);
   }
-
-  buildAndApply(config: ThemeBuildConfig): void {
-    const tokens = this.build(config);
-    this.apply(tokens);
-  }
-}
-
-export interface ThemeBuildConfig {
-  [name: string]: ThemeBuilderComposition;
 }

packages/theming/src/provide.ts

@@ -6,33 +6,26 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { provideMulti } from '@angularity/core';
-import { from, ObservableInput, of } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 
-import { ThemeBuildConfig, ThemeManager } from './manager';
-
-/**
- * Invoked within an injection context.
- */
-export interface ThemeBuildConfigFactory {
-  (): ObservableInput<ThemeBuildConfig>;
-}
+import { ThemeBuilderComposition } from './builder-composition';
+import { ThemeManager } from './manager';
 
 export function provideTheme(
-  configInput: ThemeBuildConfig | ThemeBuildConfigFactory,
+  ...compositions: Observable<ThemeBuilderComposition>[]
 ): EnvironmentProviders {
   return makeEnvironmentProviders([
     provideMulti({
       token: ENVIRONMENT_INITIALIZER,
-      useFactory: (themeManager = inject(ThemeManager)) => {
-        const configSource =
-          typeof configInput === 'function' ? configInput() : of(configInput);
-        return () =>
-          from(configSource)
+      useFactory:
+        (manager = inject(ThemeManager)) =>
+        () =>
+          combineLatest(compositions)
             .pipe(takeUntilDestroyed())
-            .subscribe((config) => {
-              themeManager.buildAndApply(config);
-            });
-      },
+            .subscribe((compositions) => {
+              const tokens = manager.build(compositions);
+              manager.apply(tokens);
+            }),
     }),
   ]);
 }