Conditional rendering

[josephguillaume]

As someone building a dashboard, I want to change what is displayed based on properties of the data, without writing scripts.

[josephguillaume]

As documented in #14 , pos-app-browser selects between hardcoded components based on type using pos-type-router and selectAppForTypes

[josephguillaume]

My understanding is that data modules define a custom js API that is then accessed through specific routes, i.e. properties of data are converted to routes rather than used directly

https://github.com/pod-os/PodOS/blob/main/contacts/src/components/router/router.tsx

[josephguillaume]

In my experiments, I've found it useful to have

• I can declaratively define what html I want rendered in each case
• I can define the html to render either inline or loaded from a url (htmx-like, but with caching)
• I can express if statements based on type, property and rev, about
• I can express full if-elseif-else logic
• I can test for presence/absence of the type, property, rev, about
• More rarely, I can test for equality against a specific value

I note that Mavo allows a broad range of expressions
https://mavo.io/docs/expressions/#conditionals-if-and-the-mv-if-attribute
I haven't needed this level of control yet.

[josephguillaume]

The specific user interface needed is less clear. Here's a few options.

Option 1

<show-if not typeof property rev about src>
Content to show
</show-if>

Fairly intuitive guard for a slot, but the attributes result in invalid RDFa when used with not, and else-if/else reasoning is difficult to express

Option 2

It seems the router PodOS currently uses loads its children and then selectively renders them using stenciljs' usual jsx magic.
This approach could be extended with conditions rather than just using routes.

https://github.com/stencil-community/stencil-router/blob/73bd1571a9acc646d39162be2ec36b3587fc3112/packages/router/src/router.ts#L460

Option 3

LWC uses attributes on template elements. This is would still need work on what the conditional looks like but wouldn't require code to specifically suppress display of light dom slots.
New syntax would be needed to load from a uri.

<template>
  <template lwc:if={property1}> Statement1 </template>
  <template lwc:elseif={property2}> Statement2 </template>
  <template lwc:else> Statement3 </template>
</template>

https://developer.salesforce.com/docs/platform/lwc/guide/create-conditional.html

Option 4

Vaadin routes are defined declaratively in js. This is most similar to pos-type-router, i.e. instead of hardcoded types, it could somehow load an array of condition-component/uri combinations.
Arbitrary html would need to be loaded from a uri, similar to htmx.

const router = new Router(document.getElementById('outlet'));
router.setRoutes([
  {path: '/', component: 'x-home-view'},
  {path: '/users', component: 'x-user-list'}
]);

https://github.com/vaadin/router

[josephguillaume]

Combining options 1 and 3, my preferred option is currently

<show-if>
  <template if-typeof src>
  <template else not if-property>
  <template else>

I've rejected Option 2 because the intent of templates is clearer than using slots and natively they are not rendered until needed.
I've rejected Option 4 in order to support arbitrary inline html.