@udixio/theme 1.0.0-beta.25 → 1.0.0-beta.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "license": "MIT",
   "author": "vigreux-joël",
   "exports": {

package/src/config/config.interface.ts

@@ -1,6 +1,6 @@
 import { AddColorsOptions } from '../color';
 import { VariantEntity } from '../theme';
-import { PluginConstructor } from '../plugin';
+import { PluginAbstract } from '../plugin';
 
 export interface ConfigInterface {
   sourceColor: string;
@@ -10,5 +10,5 @@ export interface ConfigInterface {
   colors?: AddColorsOptions | AddColorsOptions[];
   useDefaultColors?: boolean;
   palettes?: Record<string, string>;
-  plugins?: (PluginConstructor | [PluginConstructor, object])[];
+  plugins?: PluginAbstract<any, any>[];
 }

package/src/config/config.service.ts

@@ -56,11 +56,7 @@ export class ConfigService {
     }
     if (plugins) {
       plugins.forEach((plugin) => {
-        if (Array.isArray(plugin)) {
-          pluginService.addPlugin(plugin[0], plugin[1]);
-        } else {
-          pluginService.addPlugin(plugin, {});
-        }
+        pluginService.addPlugin(plugin);
       });
       pluginService.loadPlugins(this.appService);
     }

package/src/plugin/index.ts

@@ -1,3 +1,3 @@
-export * from './plugin.abstract';
+export * from './pluginAbstract';
 export * from './plugin.module';
 export * from './plugin.service';

package/src/plugin/plugin.service.ts

@@ -1,47 +1,41 @@
-import { PluginAbstract } from './plugin.abstract';
+import { PluginAbstract } from './pluginAbstract';
 import { AppService } from '../app.service';
 
-export type PluginConstructor = (new (
-  appService: AppService,
-  options: any
-) => PluginAbstract) & { dependencies: PluginConstructor[] };
-
 export class PluginService {
-  private pluginInstances = new Map<string, PluginAbstract>();
-  private pluginConstructors = new Map<string, [PluginConstructor, object]>();
+  private plugins = new Map<string, PluginAbstract<any, any>>();
 
-  public addPlugin(plugin: PluginConstructor, config: object) {
-    this.pluginConstructors.set(plugin.name, [plugin, config]);
+  public addPlugin(plugin: PluginAbstract<any, any>) {
+    this.plugins.set(plugin.name, plugin);
   }
 
   public loadPlugins(appService: AppService) {
-    const plugins = new Map(this.pluginConstructors);
+    const plugins = new Map(this.plugins);
 
     let size = 0;
     do {
       size = plugins.size;
-      plugins.forEach(([plugin, option], key) => {
+      plugins.forEach((plugin, key) => {
         const deps = plugin.dependencies.filter(
-          (dep) => !this.pluginInstances.has(dep.name)
+          (dep) => !this.plugins.has(new dep().name)
         );
         if (deps.length === 0) {
-          this.pluginInstances.set(plugin.name, new plugin(appService, option));
+          this.plugins.set(plugin.name, plugin.init(appService));
           plugins.delete(key);
         }
       });
     } while (plugins.size != 0 && plugins.size < size);
 
     if (plugins.size > 0)
-      console.log(
-        "Some plugins couldn't be loaded due to missing dependencies: ",
-        Array.from(plugins.keys())
+      throw new Error(
+        "Some plugins couldn't be loaded due to missing dependencies: " +
+          Array.from(plugins.keys())
       );
   }
 
-  public getPlugin<T extends PluginAbstract>(
-    plugin: new (appService: AppService, options: any) => T
+  public getPlugin<T extends PluginAbstract<any, any>>(
+    plugin: new (...args: any) => T
   ): T {
-    const pluginInstance = this.pluginInstances.get(plugin.name);
+    const pluginInstance = this.plugins.get(new plugin().name);
     if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
     return pluginInstance as T;
   }

package/src/plugin/pluginAbstract.ts

@@ -0,0 +1,44 @@
+import { AppService } from '../app.service';
+
+export type PluginConstructor<Plugin extends PluginImplAbstract<any>> = new (
+  ...args: any
+) => Plugin;
+
+export abstract class PluginAbstract<
+  Plugin extends PluginImplAbstract<Options>,
+  Options extends object
+> {
+  public abstract readonly dependencies: (new (...args: any) => PluginAbstract<
+    any,
+    any
+  >)[];
+  public abstract readonly name: string;
+  public options: Options;
+  public abstract readonly pluginClass: PluginConstructor<Plugin>;
+  protected pluginInstance: Plugin | undefined;
+
+  constructor(options: Options) {
+    this.options = options;
+  }
+
+  public init(appService: AppService) {
+    this.pluginInstance = new this.pluginClass(appService, this.options);
+    this.pluginInstance.onInit();
+    return this;
+  }
+
+  public getInstance(): Plugin {
+    if (!this.pluginInstance) {
+      throw new Error(`Plugin ${this.name} is not initialized`);
+    }
+    return this.pluginInstance;
+  }
+}
+
+export abstract class PluginImplAbstract<Options extends object> {
+  constructor(protected appService: AppService, protected options: Options) {
+    this.onInit();
+  }
+
+  abstract onInit(): void;
+}

package/src/plugins/font/font.plugin.ts

@@ -1,5 +1,4 @@
-import { AppService } from '../../app.service';
-import { PluginAbstract } from '../../plugin';
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
 
 export enum FontFamily {
   Expressive = 'expressive',
@@ -22,18 +21,58 @@ interface FontPluginOptions {
   fontStyles?: Partial<Record<FontRole, Record<FontSize, Partial<FontStyle>>>>;
 }
 
-export class FontPlugin extends PluginAbstract {
-  private readonly fontFamily: { expressive: string[]; neutral: string[] };
-  private readonly fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+export class FontPlugin extends PluginAbstract<
+  FontPluginImpl,
+  FontPluginOptions
+> {
+  dependencies = [];
+  name = 'font';
+  pluginClass = FontPluginImpl;
+}
+
+class FontPluginImpl extends PluginImplAbstract<FontPluginOptions> {
+  private _fontFamily: { expressive: string[]; neutral: string[] } | undefined;
+
+  get fontFamily(): { expressive: string[]; neutral: string[] } {
+    if (!this._fontFamily) throw new Error('Font family not initialized');
+    return this._fontFamily;
+  }
+
+  set fontFamily(
+    value: { expressive: string[]; neutral: string[] } | undefined
+  ) {
+    this._fontFamily = value;
+  }
 
-  constructor(
-    protected appService: AppService,
-    protected options: FontPluginOptions
+  private _fontStyles:
+    | Record<FontRole, Record<FontSize, FontStyle>>
+    | undefined;
+
+  get fontStyles(): Record<FontRole, Record<FontSize, FontStyle>> {
+    if (!this._fontStyles) throw new Error('Font styles not initialized');
+    return this._fontStyles;
+  }
+
+  set fontStyles(
+    value: Record<FontRole, Record<FontSize, FontStyle>> | undefined
   ) {
-    super();
+    this._fontStyles = value;
+  }
+
+  getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily,
+    };
+  }
+
+  onInit(): void {
     this.fontFamily = {
-      expressive: options?.fontFamily?.expressive ?? ['Roboto', 'sans-serif'],
-      neutral: options?.fontFamily?.neutral ?? ['Roboto', 'sans-serif'],
+      expressive: this.options?.fontFamily?.expressive ?? [
+        'Roboto',
+        'sans-serif',
+      ],
+      neutral: this.options?.fontFamily?.neutral ?? ['Roboto', 'sans-serif'],
     };
     this.fontStyles = {
       display: {
@@ -146,8 +185,9 @@ export class FontPlugin extends PluginAbstract {
         },
       },
     };
-    if (options && options.fontStyles)
-      Object.entries(options.fontStyles).forEach(([key, fontParam]) => {
+
+    if (this.options && this.options.fontStyles)
+      Object.entries(this.options.fontStyles).forEach(([key, fontParam]) => {
         const fontRole: FontRole = key as FontRole;
         Object.entries(fontParam).forEach(([size, fontStyle]) => {
           const fontSize: FontSize = size as FontSize;
@@ -160,13 +200,4 @@ export class FontPlugin extends PluginAbstract {
         });
       });
   }
-  static config(options: FontPluginOptions): FontPluginOptions {
-    return options;
-  }
-  getFonts() {
-    return {
-      fontStyles: this.fontStyles,
-      fontFamily: this.fontFamily,
-    };
-  }
 }

package/src/plugins/tailwind/main.ts

@@ -1,7 +1,7 @@
 import { PluginsConfig } from 'tailwindcss/types/config';
 import { bootstrapFromConfig } from '../../main';
-import { TailwindPlugin } from './tailwind.plugin';
 import { AppService } from '../../app.service';
+import { TailwindPlugin } from './tailwind.plugin';
 
 export type Theme = {
   colors: Record<string, string>;
@@ -11,9 +11,6 @@ export type Theme = {
 
 export const createTheme = (): Theme & { appService: AppService } => {
   const app = bootstrapFromConfig();
-  const plugin = app.pluginService.getPlugin(TailwindPlugin);
-  if (!plugin) {
-    throw new Error('Tailwind plugin not found');
-  }
+  const plugin = app.pluginService.getPlugin(TailwindPlugin).getInstance();
   return { ...plugin.getTheme(), appService: app };
 };

package/src/plugins/tailwind/tailwind.plugin.ts

@@ -1,9 +1,9 @@
-import { PluginAbstract } from '../../plugin';
-import { AppService } from '../../app.service';
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
 import { Theme } from './main';
 import { state, themer } from './plugins-tailwind';
-import { FontPlugin } from '../font';
+
 import { font } from './plugins-tailwind/font';
+import { FontPlugin } from '../font';
 
 interface TailwindPluginOptions {
   darkMode?: 'class' | 'media';
@@ -11,21 +11,23 @@ interface TailwindPluginOptions {
   subThemes?: Record<string, string>;
 }
 
-export class TailwindPlugin extends PluginAbstract {
-  static dependencies = [FontPlugin];
-  constructor(
-    protected appService: AppService,
-    protected options: TailwindPluginOptions
-  ) {
-    options.darkMode ??= 'class';
-    options.responsiveBreakPoints ??= {
+export class TailwindPlugin extends PluginAbstract<
+  TailwindImplPlugin,
+  TailwindPluginOptions
+> {
+  public dependencies = [FontPlugin];
+  public name = 'tailwind';
+  pluginClass = TailwindImplPlugin;
+}
+
+class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+  onInit() {
+    this.options.darkMode ??= 'class';
+    this.options.responsiveBreakPoints ??= {
       lg: 1.125,
     };
-    super();
-  }
-  static config(options: TailwindPluginOptions): TailwindPluginOptions {
-    return options;
   }
+
   getTheme(): Theme {
     const colors: Record<
       string,
@@ -50,6 +52,7 @@ export class TailwindPlugin extends PluginAbstract {
 
     const { fontStyles, fontFamily } = this.appService.pluginService
       .getPlugin(FontPlugin)
+      .getInstance()
       .getFonts();
     return {
       colors: {},

package/dist/plugin/plugin.abstract.d.ts

@@ -1,7 +0,0 @@
-import { AppService } from '../app.service';
-import { PluginConstructor } from './plugin.service';
-export declare abstract class PluginAbstract {
-    static dependencies: PluginConstructor[];
-    protected abstract appService: AppService;
-    protected abstract options: object;
-}

package/src/plugin/plugin.abstract.ts

@@ -1,9 +0,0 @@
-import { AppService } from '../app.service';
-import { PluginConstructor } from './plugin.service';
-
-export abstract class PluginAbstract {
-  static dependencies: PluginConstructor[] = [];
-
-  protected abstract appService: AppService;
-  protected abstract options: object;
-}