Context and virtual components

[orlov-vo]

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);

[matthewp]

@askbeka Can you remember what the problem was with context in virtual components?

[askbeka]

Yes, problem is with unsubscribing from context changes, since virtual components do not have a knowledge when they are removed, neither do parts. One of the way could be to put text or comment element and check if it still present in DOM in interval.

I am workings through couple of ideas, for DOM traversal, to find virtual provider, from virtual consumer, which are abstractions of collection of nodes they cover in templates.
But events are no longer beneficial in that case, it is better to just traverse manually, and it is faster too.

[matthewp]

Can we use a MutationObserver to know when it's removed?

[askbeka]

@matthewp Not really. since directive do not have their own parts, parts can be reused across directives.
consider:

html`${predicate ? ComponentOne() : ComponentTwo()}`

they will use the same part and the same marker nodes, which means that when Component is no longer used markers will not be removed.

Exmaple above will not work with virtual components, I have addressed it in this issue

Only way to do this is to associate part with directive, so that when different directive is used with the same part, previous directive gets revoked.

Same should happend when previous part gets removed,
I will file an issue, future request to lit-html, see if they have some solution in mind

[djalmajr]

Any news about it? 😁

[djalmajr]

lit/lit#283

[ianldgs]

Polymer/lit-html#283

Issue is closed 🚀