Open
Description
Now we have a React-like context (see issue #17). But we can't use it in an application built with virtual components only (without web components).
I think we should provide some directives for lit-html after creating context. However, we need to discuss and choose the comfortable api for it...
An abstract example of usage:
const ThemeContext = createContext('dark');
const { provide, consume } = ThemeContext;
const MyConsumer = virtual(() => {
const context = useContext(ThemeContext);
return context;
});
const App = virtual(() => {
const [theme, setTheme] = useState('light');
return html`
<select value=${theme} @change=${(e) => setTheme(e.target.value)}>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
${provide(theme, html`
${MyConsumer()}
${provide(theme === 'dark' ? 'light' : 'dark', html`
${consume((value) => html`<h1>${value}</h1>`)}
`)}
`)}
`;
});
render(App(), document.body);