Breaking changes

• The app component now extends the page component, and it has the render, meta and params middlewares added by default.
• The $hasAttribute method is removed from the attribute middleware.
• Changed attribute handling order. Custom attributes are handled synchronously before native prefixed attributes. Until now it was the other way around.
• The $unobserve and $queue methods are removed from the observe middleware and observer util. The $observe method returns an object signal and signal.unobserve() should be called instead.
• Functions passed to $observe run synchronously for the first time, previously they were always async.
• The $route method of the ref middleware has an object parameter from now on.
• Parameters of the params middleware are no longer reflected in the URL by default, you have to pass the new url: true config to keep this behavior.

Features

• Added the new props middleware.
• Added the new display and control components.
• Added the new router utility.
• Active anchors - which point to the current page and parameters - receive the active CSS class automatically from now on.
• Added the url and durable config options to the params middleware.
• Added an params event, which is fired before synchronization on parameter changes.
• The template config is now optional in the render middleware config.
• Added a level property to the route event's detail.
• The $attribute method of the attributes middleware optionally accepts an object with more granular control.

Fixes

• Elements now have correct width and height during their leave-animation.
• The to (previously path) config is now optional in the $route method.
• Fixed occasional double routing.

Features

• Added the new meta middleware, which handles analytics and metadata for single-page apps.

Docs

• Added a page for the new meta middleware.
• Modified page component's docs.

Breaking changes

• Changed to framework's npm package from @risingstack/nx-framework to @nx-js/framework.
• Removed the content, expression and code low level middlewares. content is moved into @nx-js/dom-util, expression and code is moved into @nx-js/compiler-util.

Refactor

• Moved every module (core and middlewares) into its own GitHub repo and npm package, this opens up the possibility for custom frameworks.

Fixes

• Fixed URI encoding and decoding in params-middleware.

Docs

• Docs are completely rewritten and there is a new Getting started guide.

Features

• Added elem.$hasAttribute method (added by attributes middleware).
• Added elem.$queue method (added by observe middleware). It queues a function to be executed together with the triggered observed functions.

Fixes

• Fixed for in loop and built in object (Map, Set, WeakMap, Date, etc) observation.

Performance

• Changed observed function execution to be always async (no more synchronous first run).

Breaking

• track-by="$index" is deprecated. You can pass a function to track-by instead with $track-by="fn" or track-by="fn". See the relevant docs for details.
• node.$root points to the nearest root element or shadow root for every node, instead of being a boolean. (Low level API change).

Features

• Added an nx.supported boolean flag, which indicates if NX is supported in the current browser.

Fixes

• Fixed attribute processing order in attributes middleware. From now the processing order is
  1. Every $ or @ prefixed attribute without a special handler. (Like @hidden or $required)
  2. Attributes that have a handler in handler definition order. This means the order of elem.$attribute(name, handler) calls. (Like repeat-key and @repeat).
• Fixed observable.$raw sometimes not pointing to the raw (non observable) object in case of nested observables.

Performance

• Refactored the router, params, ref, animate, render, bind and bindable middlewares for better performance.

Others

• Adding content middlewares to and isolated: true component will log a warning instead of throwing an error from now on.

Breaking

• The default isolate setting of app component is changed from undefined to 'middlewares'.
• The style passed to the render middleware is parsed and attached as a scoped style by default.
• The throttle limiter is tweaked a bit. Previously it could emit a final event even after the triggering events are finished. This won't happen anymore.
• The cache setting is removed from the render middleware. Templates are now always cached internally. (Should not affect you.)

Features

• Added shadow DOM support to the render middleware. It is toggleable with the shadow boolean config property.
• Added scoped style support to the render middleware.

Fixes

• Fixed throttle limiter sometimes not triggering at all.
• Fixed incorrect animation default durations in firefox.

This update contains mainly low level and performance related changes.

Breaking

• Renamed the repeat-key attribute to track-by.
• Changed the filter and limiter middlewares to be regular functions instead. They are accessible as nx.middlewares.expression.filter and nx.middlewares.code.limiter. See this and this pages for details.
• Observability is moved from the core to the new observe middleware. Most others middlewares depend on it. observe is added to the app component.
• Changed the $use and $require core methods to be middleware function properties instead. From function middleware (elem) { elem.$require('name'); elem.$use('name') } to function middleware () {} middleware.$require = ['name']; middleware.$name = 'name'

Features

• If the track-by attribute is set to $index (or the value of repeat-index), the repeat attribute will cause minimal DOM changes. Make sure to always combine this feature with dynamic @ attributes and interpolations instead of single $ ones in the content for proper updating.
• $observe accepts any number of injectable arguments after the passed function. It also returns a singnal, which should be passed to unobserve (similarly to setTimeout, clearTimeout). See this page for details.
• $compileCode accepts a second object argument, which may contain temporary variables for the compiled function. See this page for details.
• $cleanup accpepts any number of injectable arguments, similarly to $observe.
• The this context is now the element everywhere (in middlewares and $cleanup, $observe and $attribute callbacks.)
• $normalizeContent is now added by the content middleware. It removes empty text nodes from the node content.

Performance

The core and observe, code, expression, interpolate, attributes, events, flow, style and content middleware performance has be greatly improved.

Fixed

• Fixed double Web Component registration in browsers not supporting native Web Components.
• Fixed a flickering issue with Safari (caused by a native Safari bug, which incorrectly queues some microtask as task when Promises and MutationObservers interact with eachother).
• Fixed the animationFillMode in Firefox to default to 'both'.

Breaking changes and new features

• Added the animate middleware.
• Removed the compose option from the render middleware. It is always true from now on. If it finds a slot element it composes.
• Added a style option to the render middleware, which expects a css string.
• Added the default and required options to the params middleware config.
• Removed element.$schedule.
• The attributes middleware supports boolean attributes from now on, by removing the attribute if it has a falsy value.
• Removed the show attribute, use the native hidden boolean attributes instead.
• Calling next() asynchronously in middlewares won't work anymore.
• next() calls can be omitted if it is at the end of the middleware. It is called automatically when the middleware finishes execution.
• Added a repeat-key attribute for performance optimizations with loops in the view.
• Added state.$raw to every state, which provides acces to the raw, unreactive version of the state.
• The core filters and limiters are exposed on nx.filters and nx.limiters.
• Inline JS expressions will return undefined instead of throwing a TypeError when you try to access a property of undefined (a not yet fetched object).

Fixed

• The ref attribute triggers correctly, when a descendant element of the link is clicked.
• The href attribute is generated correctly from iref attributes.

Performance

• The Web Components polyfill is replaced by a smaller and more performant subset.
• The core is reworked to make execution order more predictable and less bug prone.
• The repeat attribute is refactored to reuse existing DOM nodes more efficiently.

Fixed

• Fixed the repeat attribute not mapping arrays correctly some times.
• Inline event handlers are now triggered in the capture phase of events. This makes them works with events, which has no bubbling phase (scroll event for example).

Performance

• Internal improvement by removing Object.setPrototype(). Currently it improves repeat attribute performance only.

New

• The repeat attribute now accepts any iterable (map, set, array, custom), not just arrays.
• The key limiter became a lot smarter regarding special key names. It now works with the common aliases and ignores upper/lower case. For example esc and Escape are both working.

Fixed

• Fixed an issue with the router double routing sometimes.
• Inline event handlers (defined with the #event="handler()" syntax) are now correctly triggered when a child element dispatches the required event.

Performance

• The list rendering performance of the repeat attribute is dramatically improved.

New

• It is now possible to define real relative routes in iref attributes and the $route method by ../ and ./.
• Routers fire a route event before routing.

Fixed

• Fixed an issue with the params middleware always pushing a new history state if it reaches the first state.
• Fixed an issue with the key limiter displaying a deprecated warning.

New

• It is now possible to list multiple events after the # prefix in inline event handlers to trigger the handler on nay of them.
• The data binding on option now accepts any native or custom event name or a list of comma separated events. Looks like this: bind="two-way change,click,my-event string".
• Added a new rate limiter, called key. In case of a keyboard event it triggers the handler only for the passed keys.
• You can access the current event inside custom rate limiters. It is exposed on context.$event.

Fixed

• Fixed custom elements, which extend a native type being processed to early sometimes.
• Fixed an issue with data bound inputs, which caused the text cursor to jump to the end of the text while typing.
• Fixed an issue with some event handlers not triggering in case of multiple different event handlers for the same event on a single element.
• The unit filter will only interpret the number 1 as singular from now on.

Breaking changes

• Existing special attributes renamed from nx-attr to simply attr
• Bind syntax changed from nx-sync, nx-cync-on, nx-sync-mode and nx-sync-type to a single bind="mode on type".
• Inline event handling syntax changed from nx-eventName to #eventName.
• Renamed nx-ref, nx-ref-params and nx-ref-options to iref, iref-params and iref-options.
• iref, iref-params and iref-options will only work on anchor elements from now on.

New

• Improved data binding. Simpler syntax, more flexibility, dynamic binding options and custom bindable elements.
• Improved attributes. Now any attribute can be prefixed by @ or $ similarly to interpolation.
• Attribute shorthand syntax: @class="class" is equal to @class.
• Improved inline event handlers. Now works with any events.
• Added rate limiters, which can be used with event handlers.
• Added the capitalize, lowercase, uppercase, json, slice, unit, date, datetime and time filters.
• Added the debounce, delay, if, throttle rate limiters.
• Anchor elements with an iref attribute gets a fake href attribute from NX, which helps web crawlers.
• class and style attributes now accept an object as value
• Added the show attribute, which toggles element visibility.

Fixed

• Fixed an error hiding issue. Errors thrown inside developer code won't be hidden by NX.

New

• Events middleware for inline event handling code.