"blabla" ``` ## 2.0.0-alpha.195 * Fixed compilation issue for functional tags without arguments * Throw error when trying to use bind on functional tags ## 2.0.0-alpha.194 * Improved syntax for functional tags If you supply `()` after a tag name, Imba will now treat it as a functional tag. Ie, `` is equal to `<( some-name(1,2) )>`. The old syntax may be phased out before final release. ```imba def List items return if items.length == 0

item.title tag App def head
"Welcome"
"Newest posts"
"All posts" ``` ## 2.0.0-alpha.193 * Fix issue where parts of runtime was incorrectly tree-shaked * Always resolve `node:*` imports as external * Include changelog.md in npm package ## 2.0.0-alpha.191 There will likely be a few more alpha releases fixing regressions and issues related to the new features in alpha 191, but after these potential issues have been resolved we're moving to beta 🥳! This release does contain a few breaking changes, both in relation to styles and memoization. We'll update the docs at imba.io and publish a screencast going over the changes to make it easier to transition to this new version. Changes; * Rename $key to key To give elements a stable identity (usually inside lists) you should now use `` instead of ``. `$key` is deprecated and will be removed in `beta.1`. * Allow using any object as `` value Keyed elements now use a `Map` instead of a plain object to keep track of unique elements. This means that any value (both objects and primitive values) may be used as keys. ```imba const items = [{title: "One"},{title: "Two"}] tag App for item in items # objects themselves can be used as keys now ``` * New (improved) syntax for rendering functional components / tag trees This was the main change holding us back from reaching beta, as it is a breaking change for most users. When you want to include external live dom elements from getters or methods outside of the render-tree, wrap the expression in `<(expression)>`. Besides simplifying the way memoization works it also allows you to add classes and styles to these external fragments, making it vastly more flexible than before. ```imba tag App get body
"This is body" def list title, items

title
for item in items
item.title <( body )> <( list 'Top', data.popular ).large [mt:2]> <( list 'New', data.posts.slice(0,10) )> ``` * Log warnings to console when building/running without minification Added runtime checks that notify about erroneous behaviour when building/running w/o minification. Initially it will only warn about non-memoized elements being created during rendering. Eventually we'll use these conventions to add much more elobrate checks and readable error messages for the most common issues users can run into. * Allow instantiating elements w/o memoization using `new` Imba will automagically allow any element (literal tag) in any method to be memoized. ```imba def wrap text let div = text return div imba.mount do
<( wrap "One" )> <( wrap "Two" )> ``` If you call a method or access a getter that returns an element (like `def wrap`) it will look up a memoization context and just reuse/update the div for that particular context. If you call it directly without being in a context, Imba will warn you. There are however some situations where you actually just want to create new elements. In this case, use `new` in front of the element. If the root is not memoized, the children won't either, so you only need to add `new` in front of the top element. ```imba def wrap text let div = new text return div ``` * Allow non-global tag types in dynamic tag names Local tag types are now allowed in `<{tag-type} ...>` syntax. Previously it would only work when `tag-type` evaluated to a string, and there was a globally defined web component or native tag with that name. Now it works with classes as well. ```imba import {PostView,ArticleView} from './views' const items = [ { type: Post, title: "My post"} { type: Article, title: "My article"} ] tag App for item in items <{item.type} data=item> ``` * Only allow named elements inside `` Using named elements (``) outside of self would previously introduce subtle bugs and conflicts. They are now only allowed inside of ``. * Changed css specificity Styles declared in tag declaration body now has lower specificity than class selectors. ```imba css .warn hue:red css .large p:4 fs:lg tag Button css p:2 fs:sm hue:blue # styles from classes take precedence ``` * Scoped selectors no longer applies to self Now, selectors like `.warn` declared in tag declaration body only applies to elements _inside_ `Button`, not the button itself. To target the button itself, use `&` in the selector. ```imba tag Button css bg:blue2 css .warn bg:red2 css &.large fs:lg "Still blue bg - but large" ``` * Add `declare` keyword for declaring fields (with type annotations) without generating any code for that field ```imba class Foo declare a\number ``` * Allow multiline conditionals when lines start with `and`,`or`,`||`, or `&&` This is a temporary solution for a larger challenge. It simply ignores new-lines whenever your line starts with these operators. ```imba if condition and test or force return ... ``` * Allow third argument in `for in` loops referencing length If you need to know the length of a collection you are iterating over, you can now access the total length of the collection by supplying a third argument. This is not available in `for of`, only `for in`. ```imba for member,index,len in list # len refers to the length of the iterable list if index == len - 1 yes # this is the last element ``` * Exposed `imba.hotkeys.humanize` for converting hotkey combos to readable shortcuts * Exposed `imba.hotkeys.htmlify` for converting hotkey combos to readable shortcuts as html ## 2.0.0-alpha.190 * Fixed regression related to implicit parenthesis in tag trees * Renamed `@hotkey.capture` to `@hotkey.force` ## 2.0.0-alpha.189 * Introduced `@hotkey.repeat` modifier When a user presses a key and then keeps holding it, keydown/keypress events will be generated every n milliseconds. For hotkeys you usually only want to trigger once when the user press the combination. If you want the handler to keep firing while user holds down the keys you can now use the `.repeat` modifier: ```imba # will only toggle when pressing space, no matter how long you # keep it pressed.
# holding the right arrow will call fastForward repeatedly
``` * Changed rules for implicit parenthes / calling in tag trees Indented code under a tag-tree will no longer be compiled as an invocation. ```imba
data.name "something" if data.name "something" ``` The code above would previously compile to div `data.name("something")`. Now indentation in tag trees will behave like they do in statements like if/for/while etc. This fixes #630, so you can now add css blocks like this: ```imba
data.name css d:block # style for the div ``` * Added `@first-child` and `@last-child` css modifiers We already have `@first` and `@last` as shorter aliases, but since all other standard pseudo-selectors exist it makes sense to include the longer versions of these as well. * Fixed issue with nested loops in tag trees It is now possible to use nested loops without wrapping the inner loops in a fragment. ```imba
for item in data.items for label in item.labels
label ``` * Allow declaring variables and global tags with the same name Global web components should not be registered as regular variables. Previously the compiler would throw an error if `tag app` and `let app = ...` were declared in the same file. * Allow optional chaining with dynamic keys - #638 ```imba user..[key] ``` * Mark imported SVGs as @__PURE__ This allows efficient tree-shaking so that one can include all icons from a collection and only bundle the ones that are used. ```imba import * as icons from 'imba-codicons'
``` * Fixed bug in `@event.throttle` modifier ## 2.0.0-alpha.183 - Remove unneeded class names on tags when building ## 2.0.0-alpha.182 - Fixed issues with using event modifiers with external imba library ## 2.0.0-alpha.177 - Added type declarations into typings/ ## 2.0.0-alpha.176 - Deprecated `@touch.moved-dir` The direction of the `@touch.moved` modifier can now be specified in the second argument of `@touch.moved` instead of as 6 separate modifiers. These are not used that often and it seems natural to keep inside a single modifier instead. ```imba
# before
# after ``` - Renamed style property `tint` to `hue` Hue is a better name for the newly introduced `tint` style property. ```imba # hue can be set to any named color from the imba color palette # refer to a shade/tint of the aliased color ``` - Refactored event modifiers Foundations to allow defining custom event modifiers down the road. Complex modifiers have access to the context in which it was called, including a state-object that is persisted across events etc. Documentation fo this will be in place before 2.0 final. As an example, a tiny `@keydown.f1` modifier for only passing through F1 can be defined like this: ```imba extend class KeyboardEvent def @f1 return keyCode == 112 ``` - Changed behavior of `@event.throttle` modifier `throttle` would previously fire once and suppress subsequent events for a certain duration (default 250ms). Now it will re-fire at the end of the throttling if there were any suppressed events during the initial throttle. For events like `@resize` and `@scroll` where you just want to limit how often they fire, the new behavior is much more useful. ```imba # handler will be called immediately upon scrolling and keep emitting # every 100ms until there are no more scroll events.
# So, clicking this button twice will trigger once immediately, # and then again after 1 second. Previously the second click would # never trigger.
``` - Introduced `@event.cooldown` modifier The old `throttle` was renamed to `cooldown`. Ie, if you want subsequent button clicks to be suppressed for `n` time (250ms default) you should now use `cooldown` instead of `throttle`. ```imba # So, clicking this button twice will trigger once immediately, and # the next click will be ignored as long as it happens less than a second later
``` - Allow negated event modifiers Certain event modifiers are called guards, like `@keydown.enter`, `@click.self` etc. These are modifiers that essentially evaluate to true/false and decides whether to continue handling an event or not. `@click.self` would only trigger if the target of the event is the same as the element to which the `@click` is bound. Now you can include a `!` in front of any such event handler to only continue if the guard is false. Ie. `
` would only trigger if shiftKey is _not_ pressed. ```imba # Only call handler if shiftKey is NOT pressed
# Only call handler if target does NOT match the selector
``` - Introduced `@mouse.left`, `@mouse.middle`, and `@mouse.right` modifiers Only trigger if the left,middle, or right mouse button is pressed. Works for all mouse and pointer events, as well as the custom `@touch` event. ```imba # Only call handler if the middle mouse button was pressed
# Only start touch handling if the right mouse button was pressed
``` - Introduced `@intersect.flag` modifier The `flag` modifier now works differently for `@intersect` event. It will add a css class to the element when it is intersecting and remove it whenever it is not intersecting. ```imba # the html class showing will be present on div # whenever it is intersecting with the viewport
``` - Introduced `@touch.end` modifier The `end` guard breaks unless the touch is in its ending state. ```imba # handler is only called at the end of the touch
# handler is only called at the end of the touch if pointer moved
``` - Introduced `@touch.hold(dur=1000ms)` modifier The `hold` modifier allows you to require an element to be pressed for some time (default 1000ms) until it starts allow events to come through. ```imba # handler is only called once the touch has been held for 1000ms
# handler only called if ctrl was pressed and touch held for 250ms
``` - Introduced `@touch.apply(target,xprop='x',yprop='y')` modifier Like `@touch.sync` but just setting the x,y values on an object directly instead of adding to the previous values. ```imba const obj = {} # apply is essentially shorthand for setting properties:

``` - Added `@event.key(keyOrCode)` modifier for keyboard events KeyboardEvent.keyCode is deprecated but still useful in many cases. If you supply a number to the modifier it will stop handling if `keyCode` does not match this number. ```imba # Only trigger if F1 is pressed (event.keyCode==112)
``` If you supply a string it will compare it against KeyboardEvent.key. ```imba # Only trigger if PrintScreen is pressed (event.key=='PrintScreen')
``` - Changed behavior of `@touch.moved` modifier Now, if you add a `moved-left(threshold = 4px)` modifier, the event handling will be cancelled if the touch has moved more in any other direction (in this case up,down, or right) _before_ moving 4px left. ```imba # If user moves more than 10px up/down before left/right # the touch will not be handled
``` - Improved behaviour of `@touch` and `@click` events `@click` events on nested children of an element with a `@touch` handler would previously be prevented. This made `@touch` pretty challenging to use for things like dragging elements with buttons etc. Now `@click` events will be triggered unless the `@touch` handler has a `prevent` modifier, a `moved(-x|y|up|down)` modifier that has activated, or a `hold` modifier that has activated. ```imba # button click is triggered onless touch is held more than 500ms