commit 72f8b8bd114d84d0457debbeb7947827777d4f17 Author: Marek Piasecki Date: Mon Jan 23 19:00:42 2023 +0100 sketch of a review diff --git a/README.md b/README.md new file mode 100644 index 0000000..7792643 --- /dev/null +++ b/README.md @@ -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.