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