imba-review/README.md

# Review #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:

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

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

```js
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:

```js
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.

## 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.

```coffee
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.

## 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 notive displayed in browser.

## I miss :symbols from Imba1

```js
:symbol # => 'symbol'
```
It was really small feature but I loved to use it. Why to drop it?

## 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`.

## one line variable or prop declarations

Probably it was already discussed. 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...
```

## 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 shortcut syntax for `for` loops.

Examples accordingly after documentation[link]:

```
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
```

## [bug] deleting or adding `extend tag` / `tag` definitions

for some cases spins vite crazy (consumes whole processor) and requires restart.

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

I didn't noticed and added whole node\_modules in initial commit to the
repo.

link to PR

### Pro-router integration

This is result of my short play with Imba2: [pro-router-imba2](https://router.maniak.pr/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.