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