imba_wiki.md

Personal wiki for imba progamming languare.

Basics

yes/no = true/false.

if status >= 200
  return yes

return no

---

Imba compile var, const and let «as is». It's ok for new browsers, but if you need backward copability use babel-loader after imba-loader or just stay with var all the time.

---

Passing named arguments:

var func1 = do |opts = {a: 42, b: 'bar'}| 
  console.log opts

func1                   # {a: 42, b: 'bar'}
func1(b: 'new b')       # {b: 'new b'}
func1 110, 'some text'  # 110
func1(b: 'new b', a: 'new a') # {b: 'new b', a: 'new a'}
func1(c: 'hello', d: 'world') # {c: 'hello', d: 'world'}
func1 c: 'hello', d: 'world'  # {c: 'hello', d: 'world'}

var func2 = do |optA: 42, optB: 'bar'| 
  console.log optA, optB
  
func2 'new A', 'new B'        # 42 'bar'
func2 optB: 74, optA: 'new A' # 'new A' 74
func2 optB: 'new B' # 42 'new B'
func2 optZ: 'ZZZZ'  # 42 'bar'
func2 {optB: 330, optA: 22, optZ: 'zzz'} # 22 330

---

Tag

Render method should return <self> as the root.

# correct
tag MyComponent
  def render
    <self>
      <h1> "Hello"
      
# wrong
tag MyComponent
  def render
    <div>
      <h1> "Hello"

---

By the default custom tags uses div as the root. If you want something else, you should inherit your component from default tag class.

tag Todos < ul
  def render
    <self>
      <li> "1"
      <li> "2"
      
tag App
  def render
    <self>
      <Todos>

Custom tags (components) should start from any html-tag as the root. Imba currently (1.3.2) supports document fragments but not as the root.

tag MyComponent
  def render
    <self> # required
      <span> 42
      <fragment>
        <span> 'a'
        <span> 'b'
        
 ###
<div>
  <span>42</span>
  <span>a</span>
  <span>b</span>
</div>
 ###

Desn't work:

tag MyComponent < fragment 

---

Writing inline html in tag (imba/imba#113):

<p html="<b>Superstart</b>, your my <em>superstar</em>">

---

Tag lifecircle: https://scrimba.com/c/cyKbyCZ

---

Module

Default export is not supported so far (09.03.18). See issue. Use named export.

---

Router

<a route-to="/"> "Home"
<a route-to.sticky="/categories"> "Categories"
<a route-to.exact="/about"> "About page"
<a route-to="/about/team"> "Team"

---

todo:

• Describe difference between optA = 42 and optA: 42.
• isa, example: status = res isa Number ? res : 200