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