Theme template syntax

[luwes]

Themes are <template>s, that use a templating language built on the template parts proposal.

<template id="my-fancy-theme">
        <style>...</style>

        <media-controller>
            <slot name="media" slot="media"></slot>
            <media-text-display>{{ title }}</media-text-display>
            ...
        </media-controller>
</template>

This is a thread to discuss what functionality is required and what the syntax should look like.
The following basic concepts are already included but could potentially change syntax in the future.
Note that this syntax is heavily inspired by Mustache, Handlebars, Nunjucks, Liquid, etc.

Variables

The most basic tag type is the variable. A {{name}} tag in a basic template will try to find the name key in the current state that is derived from the <media-theme> attributes. Variables are escaped by default.

If you like to provide a fallback for a variable that might be empty, this can be done like so {{name ?? 'Frank'}}

Partials

Partials are defined by using an inner <template> element with a partial attribute which is set to a unique name in your theme.

<template partial="PlayButton">
  <media-play-button></media-play-button>
</template>

These can then be used in other places in the theme with a partial variable like so {{>PlayButton}}
They can also accept params by adding them after the var name {{>PlayButton section="center"}}

Conditionals

When a single element or a multiple elements need to be left out from the theme when certain conditions are met it's possible to use a conditional. A conditional is also defined by an inner template with a if attribute. The value of this if attribute can be a simple equality check or just a empty check.

<template if="layout == 'on-demand large'">
  <media-text-display>{{title}}</media-text-display>
</template>

[luwes]

How complex should the conditions for the template if directive allowed to be?

myVar
myVar == 'hello'.
myVar == 'hello' && myVar2 == 99
myVar > 480

[luwes]

keep it as simple as possible for the time being.
currently no support for condition chaining with && or ||.
only supported operators are == and != with primitive params

[luwes]

Was wondering lately about adding something to make the syntax more readable or simpler for negation.

Current:

    <template if="audio == null">
      <template if="streamType == 'live'">
        <template if="targetLiveWindow == 0">
          <template if="breakpointSm == null">
            <media-control-bar slot="top-chrome">
              {{>LiveButton}}
            </media-control-bar>
            <media-control-bar>
              {{>PlayButton}}
            </media-control-bar>
          </template>
          <template if="breakpointSm">
            <template if="breakpointMd == null">

Proposal: Add a unless directive to remove the need of == null and == 0 similar to Elixir or Coffeescript.

    <template unless="audio">
      <template if="streamType == 'live'">
        <template unless="targetLiveWindow">
          <template unless="breakpointSm">
            <media-control-bar slot="top-chrome">
              {{>LiveButton}}
            </media-control-bar>
            <media-control-bar>
              {{>PlayButton}}
            </media-control-bar>
          </template>
          <template if="breakpointSm">
            <template unless="breakpointMd">

Alternative: Add a not operator similar to Python or Elixir

    <template if="not audio">
      <template if="streamType == 'live'">
        <template if="not targetLiveWindow">
          <template if="not breakpointSm">
            <media-control-bar slot="top-chrome">
              {{>LiveButton}}
            </media-control-bar>
            <media-control-bar>
              {{>PlayButton}}
            </media-control-bar>
          </template>
          <template if="breakpointSm">
            <template if="not breakpointMd">

[luwes]

we ended up going with supporting the ! logical not operator

[luwes]

worth a look for inspiration Go templates! https://pkg.go.dev/text/template