You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Marek Piasecki 72f8b8bd11 sketch of a review 2 years ago
README.md sketch of a review 2 years ago

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:

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:

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.

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.

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

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