imba-review/README.md

Review no. 1

I didn't touch Imba for a while and I'm really happy with what it became. CSS syntax totally nails it! I played a bit with Imba2 and here are my notes:

require / import

I used to write:

let helpers =
  method1: require('lodash.method2')
  method2: require('lodash.method2')
  ...
  method9: require('somelib.method9')

There's no inline import equivalent and I need to write it like this:

import method1 from 'lodash.method1'
import method2 from 'lodash.method2'
...
import method9 from 'somelib.method9'

let helpers = { method1, method2 ... method9 }

Not terrible. require was more predictable though and if it's not a big deal it would be nice to have both - require and import. There's a chance it would be just an alias in existing implementation.

Also with import syntax it would be nice to have syntax like this:

import { method1, method2 ... method3 } as helpers from 'lodash'

Side note: Actually I had random issues with importing from lodash and I finished with using lodash-es library.

Issue

assigning attributes to self

There's neat syntax in Coffeescript for a thing which is repeatable in any object oriented program. I mean assigning attributes to the object without any modification.

class Dog
  constructor: (@name) ->

# is equal to:

class Dog
  constructor: (name) ->
    this.name = name

And I miss it here even Imba was forked from Coffeescript years ago. It could be @ or $ prefix or ! postfix to tell that argument should be assigned to self.

Issue

No errors in browser while having syntax error in imba file

I've been few times confused what happen after having a typo in source file. Then I find through browser tools that the file is simply not attached to the bundle. It would be much faster for a developer to have an error notice displayed in browser.

Issue

I miss pseudo :symbols from Imba1

:symbol # => 'symbol'

It was really small feature but I loved to use it. Why to drop it?

Issue

one-word webcomponents

I had an issue described here. Looks like you can't name a tag starting with a small letter if it's one word. The problem is

• I have read whole documentation before writing anything and didn't notice it - even it's written there. It could be more emphasised.
• It doesn't break program immediately. Many things worked normally before I occured a situation it doesn't work as expected.
• There are examples in documentation which use such naming themselves.
• Some templates after imba create produce such names.
• Historical examples will have such naming as it was totally fine before. Considering above I suggest allow such naming and implicitly convert it to web-component name, like x-name.

Issue

one line variable or prop declarations

Proposal:

let a, b, c

# is equal to:

let a
let b
let c

prop a, b, c

# is equal to:

prop a
prop b
prop c

let a, b, c = 1

# is equal to:
let a
let b
let c = 1

# and so on...

Issue

short form of loops

By skipping var name declaration and giving them default values (el, i, key, v) and also by skipping for keyword we could have a short syntax for for loops.

Examples accordingly after documentationlink:

el * 2 in [1,2,3]
# num * 2 for num in [1,2,3]

console.log(el * i) in [1,2,3]
# console.log(num * index) for num,index in [1,2,3]

el * 2 in [1,2,3] by 2
# num * 2 for num in [1,2,3] by 2

console.log(el) in [1,2,3] when i % 2
# console.log(num) for num,i in [1,2,3] when i % 2

el in [1 .. 3]
# num for num in [1 .. 3]

console.log(el) of [10,20,30]
#console.log(value) for value of [10,20,30]

# destructuring up to 2 elements could be implicated just by using key or v in code block
# or if it's not possible for imba parser it can have no shortcut

let iterable = new Map([['a',1],['b',2],['c',3]])
console.log(v) of iterable
# console.log(value) for [key,value] of iterable

el * 2 of arguments
# arg * 2 for arg of arguments

console.log el,i of iterable
# console.log entry,idx for entry,idx of iterable
console.log key,v,i of iterable
# console.log key,value,idx for [key,value],idx of iterable

let obj = {a: 1, b: 2, c: 3}
console.log "{key} is {v}" of obj
# console.log "{key} is {value}" for own key,value of obj

Issue

[bug] no .gitignore in Vite template (after imba create)

I didn't noticed and added whole node_modules in initial commit to the repo.

PR

Pro-router integration

This is result of my short play with Imba2: pro-router-imba2. I'm thinking about introducing syntax ? for operating with url params:

# url: /books/id/1

?id # => 1
?id = 2 # => url: /books/id/2

# advanced

??focus = 'title' # => url: /books/id/2/#/focus/title
??focus # => 'title'

???feature = 'selloff' # => url: /books/id/2/#/focus/title?feature=selloff
???feature # => 'selloff'

Both keeps router getters and setters in loop. Also I give you for consideration to introduce such syntax in Imba by default.

Issue