wrap theme and parsers singleton into a single unified interface

[mauroerta]

Problem

Morfeo is based in 2 singletons, theme and parsers, the first is used to handle and provide the theme and the second one to parse it and generate styles. Even if it's not hard to understand this concept, most of the times the only methods we need to use of these 2 singleton are:

• theme.get to get the current theme
• theme.set to update the theme
• parsers.resolve to parse the style object with the theme and generate valid css-in-js objects.

Solution

My idea is to create another singleton morfeo that exposes only 5 methods:

• add to add a new theme with a given name (for example "light" or "dark")
• use to use one of the previously added themes
• set same as theme.set
• get same as theme.get
• resolve same as parsers.resolve
  With this solution, the new singleton morfeowill have an easy way to handle multi-theming and, most importantly, will expose only the API that 99% of the time we need; theme and parsers singletons will still be available for advanced usage for example add new parsers or easily get single slices or values from the theme.

Example

import { morfeo } from "@morfeo/core";
import { lightTheme, darkTheme } from "./themes";
 
morfeo.add("light", lightTheme);
morfeo.add("dark", darkTheme);

morfeo.use("light");

const style = morfeo.resolve({
    py: "m",
    gradient: "primary"
});

// will be the current theme, `lightTheme` in this case
const currentTheme = morfeo.get();
// optionally you can pass the name of the theme you want to get
const otherTheme = morfeo.get('dark');

Alternatives

Another alternative could be merge parsers and theme singletons completely, but I think the interface of the resulted singleton will expose too many API and it will be hard to use properly.

[mauroerta]

Another advantage related to this improvement is that multi-theming will be a native feature of morfeo, so even the dev tool can visualize all the themes added; For example, with a simple dropdown where all the themes are listed.

[andreaSimonePorceddu]

@mauroerta Using a unique class called morfeo makes the context of all methods a little less obvious. Let's evaluate to change them in this way:

• add => addTheme
• use => useTheme
• set => setTheme
• get => getTheme
• resolve => resolveStyle

or in this alternatives way:

• keep all theme-related methods as is
• resolve => resolveStyle

[mauroerta]

Yes I think it's a good idea, I think I prefer the first proposal. I'll open an issue based on this suggestion, thank you

[mauroerta]

I'm closing this discussion since this feature was actually been implemented in latest release 0.2.0