Provide a widget that injects a function to enable consumers to change theme

[agubler]

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.

[matt-gadd]

@agubler do we think this is true for everything we currently have injectors for? ie i18n too?

[agubler]

@matt-gadd indeed! I was going to raise a separate issue for i18n and then also a generic Provider widget

[agubler]

@matt-gadd Issues raised #257 and #258 - WIP PR raised here #259