Marek Piasecki
2 years ago
commit
72f8b8bd11
1 changed files with 201 additions and 0 deletions
@ -0,0 +1,201 @@ |
|||
# 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. |
Loading…
Reference in new issue