Imba language preview

1. Card component

a tag definition with inline css and a render method

horizon-dark

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

atom-one-dark

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

github-dark

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

dracula

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

nord

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

github

# a card component with inline css
tag Card
  css .card
    padding: 8px

  def render
    <self.card>
      <div.title> "Hello"
      <button @click=onClick> "Click"

2. Control flow

if/elif/else, unless, and the yes/no literals

horizon-dark

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

atom-one-dark

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

github-dark

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

dracula

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

nord

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

github

def visible? state
  if state.open
    yes
  elif state.pending
    no
  else
    unless state.archived
      yes

3. Attributes and refs

id, attribute, and $ref selectors on a tag literal

horizon-dark

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"

atom-one-dark

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"

github-dark

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"

dracula

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"

nord

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"

github

def render
  <self>
    <input#email $emailRef [placeholder="Email"]>
    <button.primary @click=submit> "Submit"