@jorgebucaran jorgebucaran released this Sep 7, 2018

Assets 2

Patch version packing few but solid improvements, including more consistent DOM attribute behavior, and improvements to the diffing algorithm! 🎉


  • 18bfb9b Support both object and string as value for style attribute. #756 @jorgebucaran
  • aa2ce46 More consistent behavior between client and server rendering for reserved DOM attributes such as spellcheck, draggable, translate, etc. #629 @frenzzy
  • f16f7fc Improve keyed algorithm performance. Results in fewer "insertBefore" calls when a keyed item is removed but other items are in the same order. #663 @SkaterDad
  • 4638e39 Minor improvements to the documentaion. Because grammar matters.

@jorgebucaran jorgebucaran released this Mar 18, 2018 · 50 commits to master since this release

Assets 2


Thank you, everyone, for your ongoing support and interest in the project. Special thanks go to @frenzzy for contributing several new features and his work on @hyperapp/render. Also, thank you @okwolf for @hyperapp/fx and @zaceno for @hyperapp/transitions! 🎉

I'm also excited to report that Hyperapp has been the 3rd trendiest UI framework on GitHub at a rate of 52 stars a day since the beginning of this year! Wow! ⭐️


This release packs some juicy new features I can't wait for you to try out. 1.2.0 comes with CSS variables (#612) support in inline styles, several bug fixes (notably #614 and #595), a moderate performance boost via delegation of DOM events (#638), extensive documentation & code readability improvements — and a game-changing new feature: Lazy Components.

Lazy components (a.k.a subviews) refers to Hyperapp's new ability to treat a function as a virtual node. This allows you to create components that are wired to the global state and actions effortlessly.

For example, this is a regular component: you need to feed it its state and actions as props, which can be painful if the component is deeply nested within the document hierarchy.

const MyComponent = props => <div>{props.value}</div>

Now, this is a lazy component. Notice it returns a function that receives the application state and actions (just like the top-level view).

const MyComponent = props => (state, actions) => <div>{state.counter.value}</div>

See the documentation for examples or refer to this issue for more information and background.