Comment by progx

8 hours ago

I don't like this html-syntax, cause you use a separate syntax-methods for existing js-functions wrapped as html-tags:

  <if text.isEmpty()>
    <div class="preview-text empty">Start typing...</div>
  <else>
    <div class="preview-text">{text}</div>
  </else>
  </if>

As a JS/TS dev it feel unnatural to write language operations as html-tags. That is what i did not like in svelte too.

Here something that looks little more like PHP-Style, better separation, but too much to type:

  <?coi
  if (empty($text)) {
  ?>
    <div class="preview-text empty">Start typing...</div>
  <?coi
  } else {
  ?>
    <div class="preview-text">${text}</div>
  <?coi
  }
  ?>

Shorter with a $-func for wrapping html-content

  if (empty($text)) {
    $(<div class="preview-text empty">Start typing...</div>)
  } else {
    $(<div class="preview-text">${text}</div>)
  }

I don't know, has somebody a better idea?

2 comments

progx

gdotdesign 8 hours ago

It's perfectly fine to allow if in tags (the compiler can figure it out). In Mint you can do that no problem: https://mint-lang.com/sandbox/6lnZHiG8LVRJqA

    component Main {
      fun render : Html {
        <div>
          if true {
            <div>"Hello World!"</div>
          } else {
            <div>"False"</div>
          }
        </div>
      }
    }

zareith 7 hours ago

Vue style attribute directives are imho a far better dx compared to all of the above.