Add Logical && as a way to handle logic blocks

[arkmech]

In order to reduce lines of code, I am proposing a shorthand like other frameworks/libraries:

{answer === 42 && <p>what was the question?</p>}

in addition to what is currently available:

{#if answer === 42}
	<p>what was the question?</p>
{/if}

Just having several optional props, you end up with a very large component due to if blocks taking 3 lines when they can take 1.
Example:

{#snippet logoMarkup(src, alt)}
  {#if src && alt}
    <img {src} {alt} class="h-12 w-12">
  {/if}
{/snippet}

{#snippet titleMarkup(title)}
  {#if title}
    <h1>{title}</h1>
  {/if}
{/snippet}

{#snippet subtitleMarkup(subtitle)}
  {#if subtitle}
    <span>{subtitle}</span>
  {/if}
{/snippet}

<div>
  {#if title || subtitle || (logoSrc && logoAlt)}
    <div>
      {@render logoMarkup(logoSrc, logoAlt)}
      {#if title || subtitle}
        <div class="flex flex-col gap-2 md:gap-3">
          {@render titleMarkup(title)}
          {@render subtitleMarkup(subtitle)}
        </div>
      {/if}
    </div>
  {/if}
  <slot />
  {#if footerText || footerHref || footerLink}
    <div class="flex items-center gap-1">
      {#if footerText}
        <span>{footerText}</span>
      {/if}
      {#if footerHref && footerLink}
        <a href={footerHref}>{footerLink}</a>
      {/if}
    </div>
  {/if}
</div>

New Approach:

{#snippet logoMarkup(src, alt)}
  {src && alt && <img {src} {alt} class="h-12 w-12">}
{/snippet}

{#snippet titleMarkup(title)}
  {title && <h1>{title}</h1>}
{/snippet}

{#snippet subtitleMarkup(subtitle)}
  {subtitle && <span>{subtitle}</span>}
{/snippet}

<div>
  {(title || subtitle || (logoSrc && logoAlt)) &&
    <div>
      {@render logoMarkup(logoSrc, logoAlt)}
      {(title || subtitle) &&
      <div class="flex flex-col gap-2 md:gap-3">
        {@render titleMarkup(title)}
        {@render subtitleMarkup(subtitle)}
      </div>}
    </div>
  }
  <slot />
  {(footerText || footerHref || footerLink) &&
    <div class="flex items-center gap-1">
      {footerText && <span>{footerText}</span>}
      {footerHref && footerLink && <a href={footerHref}>{footerLink}</a>}
    </div>
  }
</div>

[Conduitry]

This isn't a good idea. It makes it look like this is JSX when it's not, and it makes parsing much more complicated.