[📖] Portal recipe gives a lexical-scope-error

[intellix]

Suggestion

In the example of the Portals, it recommends having an array of Portal instances https://qwik.dev/docs/cookbook/portals/#using-the-portalprovider. Those instances contain a property called jsx: JSXOutput which causes the valid-lexical-scope to throw a warning/error: https://qwik.dev/docs/advanced/eslint/#valid-lexical-scope

Should the example include a disable for the lint error, or is there an improvement within v2 perhaps that allows the linting rule to not fail there?

portal.close = $(() => {
  // eslint-disable-next-line qwik/valid-lexical-scope
  portals.value = portals.value.filter((p) => p !== portal);
});

[thejackshelton]

Hey @intellix! This is an early on portal approach that allows you to project content using context. Hence the valid lexical scope warnings.

This is because projection is currently not native to the framework. My understanding, is that v2 will have projection that enables much easier portal behavior that the framework is aware of. (to confirm that this is still the case @wmertens

Regardless, portals are no longer the standard, as there is native top layer behavior that now takes precedence over portals, which were previously a hack with stacking contexts. If you continue to use a portal, something using the popover api / top layer is going to be above your content.

As an alternative, I would look into the popover api, dialog element, or Qwik UI which intends to this all for you. Hoped this helps! I'll be closing this issue for now, let me know if you have any other questions.