Provide a widget that injects a function to enable consumers to change theme #256
Description
Enhancement
Currently it takes a significant amount of boilerplate to inject a function that can be used to change the current theme into the widget tree:
// main.ts
import renderer from "@dojo/framework/widget-core/vdom";
import { w } from "@dojo/framework/widget-core/d";
import App from "./widgets/App";
import { Registry } from "@dojo/framework/widget-core/Registry";
import { registerThemeInjector, Theme } from "@dojo/framework/widget-core/mixins/Themed";
import myTheme from './my-theme';
const registry = new Registry();
const injector = registerThemeInjector(myTheme, registry);
registry.defineInjector("update-theme", invalidator => {
function themeSwitcher(theme: Theme) {
injector.set({ theme });
}
return () => themeSwitcher;
});
const r = renderer(() => w(App, {}));
r.mount({ registry });
// ThemeSwitcherContainer.ts
// Used in the application somewhere to inject the theme switcher function
import Container from "@dojo/framework/widget-core/Container";
import ThemeSwitcher from "./ThemeSwitcher";
export default Container(ThemeSwitcher, "update-theme", {
getProperties(injector) {
return {
themeSwitcher: injector
};
}
});It would be helpful if Dojo could provide a customised widget that injects a function that can be to switch themes into an application widget tree.
The widget should be virtual and have no visual output, but provide an API to for the user to render widgets and nodes with access to the update theme function. This would remove the need for a user to register a new injector or create a custom container to get access to the update theme function.