@udixio/theme 1.0.0-beta.24 → 1.0.0-beta.26

package/dist/config/config.interface.d.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;
     contrastLevel?: number;
@@ -9,5 +9,5 @@ export interface ConfigInterface {
     colors?: AddColorsOptions | AddColorsOptions[];
     useDefaultColors?: boolean;
     palettes?: Record<string, string>;
-    plugins?: (PluginConstructor | [PluginConstructor, object])[];
+    plugins?: PluginAbstract<any, any>[];
 }

package/dist/plugin/index.d.ts

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

package/dist/plugin/plugin.service.d.ts

@@ -1,12 +1,8 @@
-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 declare class PluginService {
-    private pluginInstances;
-    private pluginConstructors;
-    addPlugin(plugin: PluginConstructor, config: object): void;
+    private plugins;
+    addPlugin(plugin: PluginAbstract<any, any>): void;
     loadPlugins(appService: AppService): void;
-    getPlugin<T extends PluginAbstract>(plugin: new (appService: AppService, options: any) => T): T;
+    getPlugin<T extends PluginAbstract<any, any>>(plugin: new (...args: any) => T): T;
 }

package/dist/plugin/pluginAbstract.d.ts

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

package/dist/plugins/font/font.plugin.d.ts

@@ -1,5 +1,4 @@
-import { AppService } from '../../app.service';
-import { PluginAbstract } from '../../plugin';
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
 export declare enum FontFamily {
     Expressive = "expressive",
     Neutral = "neutral"
@@ -20,13 +19,24 @@ interface FontPluginOptions {
     };
     fontStyles?: Partial<Record<FontRole, Record<FontSize, Partial<FontStyle>>>>;
 }
-export declare class FontPlugin extends PluginAbstract {
-    protected appService: AppService;
-    protected options: FontPluginOptions;
-    private readonly fontFamily;
-    private readonly fontStyles;
-    constructor(appService: AppService, options: FontPluginOptions);
-    static config(options: FontPluginOptions): FontPluginOptions;
+export declare class FontPlugin extends PluginAbstract<FontPluginImpl, FontPluginOptions> {
+    dependencies: never[];
+    name: string;
+    pluginClass: typeof FontPluginImpl;
+}
+declare class FontPluginImpl extends PluginImplAbstract<FontPluginOptions> {
+    private _fontFamily;
+    get fontFamily(): {
+        expressive: string[];
+        neutral: string[];
+    };
+    set fontFamily(value: {
+        expressive: string[];
+        neutral: string[];
+    } | undefined);
+    private _fontStyles;
+    get fontStyles(): Record<FontRole, Record<FontSize, FontStyle>>;
+    set fontStyles(value: Record<FontRole, Record<FontSize, FontStyle>> | undefined);
     getFonts(): {
         fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
         fontFamily: {
@@ -34,5 +44,6 @@ export declare class FontPlugin extends PluginAbstract {
             neutral: string[];
         };
     };
+    onInit(): void;
 }
 export {};

package/dist/plugins/tailwind/tailwind.plugin.d.ts

@@ -1,5 +1,4 @@
-import { PluginAbstract } from '../../plugin';
-import { AppService } from '../../app.service';
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
 import { Theme } from './main';
 import { FontPlugin } from '../font';
 interface TailwindPluginOptions {
@@ -7,12 +6,13 @@ interface TailwindPluginOptions {
     responsiveBreakPoints?: Record<string, number>;
     subThemes?: Record<string, string>;
 }
-export declare class TailwindPlugin extends PluginAbstract {
-    protected appService: AppService;
-    protected options: TailwindPluginOptions;
-    static dependencies: (typeof FontPlugin)[];
-    constructor(appService: AppService, options: TailwindPluginOptions);
-    static config(options: TailwindPluginOptions): TailwindPluginOptions;
+export declare class TailwindPlugin extends PluginAbstract<TailwindImplPlugin, TailwindPluginOptions> {
+    dependencies: (typeof FontPlugin)[];
+    name: string;
+    pluginClass: typeof TailwindImplPlugin;
+}
+declare class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+    onInit(): void;
     getTheme(): Theme;
 }
 export {};

package/dist/theme.cjs.development.js

@@ -1542,11 +1542,7 @@ var ConfigService = /*#__PURE__*/function () {
     }
     if (plugins) {
       plugins.forEach(function (plugin) {
-        if (Array.isArray(plugin)) {
-          pluginService.addPlugin(plugin[0], plugin[1]);
-        } else {
-          pluginService.addPlugin(plugin, {});
-        }
+        pluginService.addPlugin(plugin);
       });
       pluginService.loadPlugins(this.appService);
     }
@@ -1583,35 +1579,32 @@ var ConfigModule = {
 
 var PluginService = /*#__PURE__*/function () {
   function PluginService() {
-    this.pluginInstances = new Map();
-    this.pluginConstructors = new Map();
+    this.plugins = new Map();
   }
   var _proto = PluginService.prototype;
-  _proto.addPlugin = function addPlugin(plugin, config) {
-    this.pluginConstructors.set(plugin.name, [plugin, config]);
+  _proto.addPlugin = function addPlugin(plugin) {
+    this.plugins.set(plugin.name, plugin);
   };
   _proto.loadPlugins = function loadPlugins(appService) {
     var _this = this;
-    var plugins = new Map(this.pluginConstructors);
+    var plugins = new Map(this.plugins);
     var size = 0;
     do {
       size = plugins.size;
-      plugins.forEach(function (_ref, key) {
-        var plugin = _ref[0],
-          option = _ref[1];
+      plugins.forEach(function (plugin, key) {
         var deps = plugin.dependencies.filter(function (dep) {
-          return !_this.pluginInstances.has(dep.name);
+          return !_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()));
+    if (plugins.size > 0) throw new Error("Some plugins couldn't be loaded due to missing dependencies: " + Array.from(plugins.keys()));
   };
   _proto.getPlugin = function getPlugin(plugin) {
-    var pluginInstance = this.pluginInstances.get(plugin.name);
+    var pluginInstance = this.plugins.get(new plugin().name);
     if (!pluginInstance) throw new Error("Plugin " + plugin.name + " not found");
     return pluginInstance;
   };
@@ -1647,8 +1640,32 @@ function bootstrapFromConfig(args) {
   return AppContainer.resolve('appService');
 }
 
-var PluginAbstract = function PluginAbstract() {};
-PluginAbstract.dependencies = [];
+var PluginAbstract = /*#__PURE__*/function () {
+  function PluginAbstract(options) {
+    this.options = void 0;
+    this.pluginInstance = void 0;
+    this.options = options;
+  }
+  var _proto = PluginAbstract.prototype;
+  _proto.init = function init(appService) {
+    this.pluginInstance = new this.pluginClass(appService, this.options);
+    return this;
+  };
+  _proto.getInstance = function getInstance() {
+    if (!this.pluginInstance) {
+      throw new Error("Plugin " + this.name + " is not initialized");
+    }
+    return this.pluginInstance;
+  };
+  return PluginAbstract;
+}();
+var PluginImplAbstract = function PluginImplAbstract(appService, options) {
+  this.appService = void 0;
+  this.options = void 0;
+  this.appService = appService;
+  this.options = options;
+  this.onInit();
+};
 
 exports.FontFamily = void 0;
 (function (FontFamily) {
@@ -1656,21 +1673,50 @@ exports.FontFamily = void 0;
   FontFamily["Neutral"] = "neutral";
 })(exports.FontFamily || (exports.FontFamily = {}));
 var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
-  function FontPlugin(appService, options) {
-    var _options$fontFamily$e, _options$fontFamily, _options$fontFamily$n, _options$fontFamily2;
+  function FontPlugin() {
     var _this;
-    _this = _PluginAbstract.call(this) || this;
-    _this.appService = void 0;
-    _this.options = void 0;
-    _this.fontFamily = void 0;
-    _this.fontStyles = void 0;
-    _this.appService = appService;
-    _this.options = options;
-    _this.fontFamily = {
-      expressive: (_options$fontFamily$e = options == null || (_options$fontFamily = options.fontFamily) == null ? void 0 : _options$fontFamily.expressive) != null ? _options$fontFamily$e : ['Roboto', 'sans-serif'],
-      neutral: (_options$fontFamily$n = options == null || (_options$fontFamily2 = options.fontFamily) == null ? void 0 : _options$fontFamily2.neutral) != null ? _options$fontFamily$n : ['Roboto', 'sans-serif']
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _PluginAbstract.call.apply(_PluginAbstract, [this].concat(args)) || this;
+    _this.dependencies = [];
+    _this.name = 'font';
+    _this.pluginClass = FontPluginImpl;
+    return _this;
+  }
+  _inheritsLoose(FontPlugin, _PluginAbstract);
+  return FontPlugin;
+}(PluginAbstract);
+var FontPluginImpl = /*#__PURE__*/function (_PluginImplAbstract) {
+  function FontPluginImpl() {
+    var _this2;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _PluginImplAbstract.call.apply(_PluginImplAbstract, [this].concat(args)) || this;
+    _this2._fontFamily = void 0;
+    _this2._fontStyles = void 0;
+    return _this2;
+  }
+  _inheritsLoose(FontPluginImpl, _PluginImplAbstract);
+  var _proto = FontPluginImpl.prototype;
+  _proto.getFonts = function getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily
+    };
+  };
+  _proto.onInit = function onInit() {
+    var _this$options$fontFam,
+      _this$options,
+      _this$options$fontFam2,
+      _this$options2,
+      _this3 = this;
+    this.fontFamily = {
+      expressive: (_this$options$fontFam = (_this$options = this.options) == null || (_this$options = _this$options.fontFamily) == null ? void 0 : _this$options.expressive) != null ? _this$options$fontFam : ['Roboto', 'sans-serif'],
+      neutral: (_this$options$fontFam2 = (_this$options2 = this.options) == null || (_this$options2 = _this$options2.fontFamily) == null ? void 0 : _this$options2.neutral) != null ? _this$options$fontFam2 : ['Roboto', 'sans-serif']
     };
-    _this.fontStyles = {
+    this.fontStyles = {
       display: {
         large: {
           fontWeight: 400,
@@ -1781,7 +1827,7 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
         }
       }
     };
-    if (options && options.fontStyles) Object.entries(options.fontStyles).forEach(function (_ref) {
+    if (this.options && this.options.fontStyles) Object.entries(this.options.fontStyles).forEach(function (_ref) {
       var key = _ref[0],
         fontParam = _ref[1];
       var fontRole = key;
@@ -1790,25 +1836,31 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontStyle = _ref2[1];
         var fontSize = size;
         if (fontStyle) {
-          _this.fontStyles[fontRole][fontSize] = _extends({}, _this.fontStyles[fontRole][fontSize], fontStyle);
+          _this3.fontStyles[fontRole][fontSize] = _extends({}, _this3.fontStyles[fontRole][fontSize], fontStyle);
         }
       });
     });
-    return _this;
-  }
-  _inheritsLoose(FontPlugin, _PluginAbstract);
-  FontPlugin.config = function config(options) {
-    return options;
   };
-  var _proto = FontPlugin.prototype;
-  _proto.getFonts = function getFonts() {
-    return {
-      fontStyles: this.fontStyles,
-      fontFamily: this.fontFamily
-    };
-  };
-  return FontPlugin;
-}(PluginAbstract);
+  return _createClass(FontPluginImpl, [{
+    key: "fontFamily",
+    get: function get() {
+      if (!this._fontFamily) throw new Error('Font family not initialized');
+      return this._fontFamily;
+    },
+    set: function set(value) {
+      this._fontFamily = value;
+    }
+  }, {
+    key: "fontStyles",
+    get: function get() {
+      if (!this._fontStyles) throw new Error('Font styles not initialized');
+      return this._fontStyles;
+    },
+    set: function set(value) {
+      this._fontStyles = value;
+    }
+  }]);
+}(PluginImplAbstract);
 
 var state = function state(colorkeys) {
   return plugin(function (pluginArgs) {
@@ -1877,7 +1929,7 @@ function createSubTheme(_ref) {
   var theme = {
     name: isDarkTheme ? name + 'Dark' : name,
     selectors: isDarkTheme && darkMode === 'class' ? ['.dark-mode .theme-' + name, '.dark-mode.theme-' + name, '[data-theme="dark"] .theme-' + name, '[data-theme="dark"].theme-' + name] : ['.theme-' + name],
-    mediaQuery: '@media (prefers-color-scheme: dark)',
+    mediaQuery: isDarkTheme && darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined,
     extend: {
       colors: colors
     }
@@ -1994,25 +2046,33 @@ var font = function font(fontStyles, responsiveBreakPoints) {
 };
 
 var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
-  function TailwindPlugin(appService, options) {
-    var _options$darkMode, _options$responsiveBr;
+  function TailwindPlugin() {
     var _this;
-    (_options$darkMode = options.darkMode) != null ? _options$darkMode : options.darkMode = 'class';
-    (_options$responsiveBr = options.responsiveBreakPoints) != null ? _options$responsiveBr : options.responsiveBreakPoints = {
-      lg: 1.125
-    };
-    _this = _PluginAbstract.call(this) || this;
-    _this.appService = void 0;
-    _this.options = void 0;
-    _this.appService = appService;
-    _this.options = options;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _PluginAbstract.call.apply(_PluginAbstract, [this].concat(args)) || this;
+    _this.dependencies = [FontPlugin];
+    _this.name = 'tailwind';
+    _this.pluginClass = TailwindImplPlugin;
     return _this;
   }
   _inheritsLoose(TailwindPlugin, _PluginAbstract);
-  TailwindPlugin.config = function config(options) {
-    return options;
+  return TailwindPlugin;
+}(PluginAbstract);
+var TailwindImplPlugin = /*#__PURE__*/function (_PluginImplAbstract) {
+  function TailwindImplPlugin() {
+    return _PluginImplAbstract.apply(this, arguments) || this;
+  }
+  _inheritsLoose(TailwindImplPlugin, _PluginImplAbstract);
+  var _proto = TailwindImplPlugin.prototype;
+  _proto.onInit = function onInit() {
+    var _this$options, _this$options$darkMod, _this$options2, _this$options2$respon;
+    (_this$options$darkMod = (_this$options = this.options).darkMode) != null ? _this$options$darkMod : _this$options.darkMode = 'class';
+    (_this$options2$respon = (_this$options2 = this.options).responsiveBreakPoints) != null ? _this$options2$respon : _this$options2.responsiveBreakPoints = {
+      lg: 1.125
+    };
   };
-  var _proto = TailwindPlugin.prototype;
   _proto.getTheme = function getTheme() {
     var colors = {};
     for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
@@ -2033,7 +2093,7 @@ var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
         colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
       }
     }
-    var _this$appService$plug = this.appService.pluginService.getPlugin(FontPlugin).getFonts(),
+    var _this$appService$plug = this.appService.pluginService.getPlugin(FontPlugin).getInstance().getFonts(),
       fontStyles = _this$appService$plug.fontStyles,
       fontFamily = _this$appService$plug.fontFamily;
     return {
@@ -2047,16 +2107,12 @@ var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
       })]
     };
   };
-  return TailwindPlugin;
-}(PluginAbstract);
-TailwindPlugin.dependencies = [FontPlugin];
+  return TailwindImplPlugin;
+}(PluginImplAbstract);
 
 var createTheme = function createTheme() {
   var app = bootstrapFromConfig();
-  var plugin = app.pluginService.getPlugin(TailwindPlugin);
-  if (!plugin) {
-    throw new Error('Tailwind plugin not found');
-  }
+  var plugin = app.pluginService.getPlugin(TailwindPlugin).getInstance();
   return _extends({}, plugin.getTheme(), {
     appService: app
   });
@@ -2075,6 +2131,7 @@ exports.ContrastCurve = ContrastCurve;
 exports.DynamicColor = DynamicColor;
 exports.FontPlugin = FontPlugin;
 exports.PluginAbstract = PluginAbstract;
+exports.PluginImplAbstract = PluginImplAbstract;
 exports.PluginModule = PluginModule;
 exports.PluginService = PluginService;
 exports.SchemeEntity = SchemeEntity;