Build Snake in Aurelia 2
A playable Snake game in one Aurelia 2 component: a CSS grid board, a requestAnimationFrame loop, keyboard and touch controls, and a high score that survives a refresh. Under 300 lines, and no game engine.
A playable Snake game in one Aurelia 2 component: a CSS grid board, a requestAnimationFrame loop, keyboard and touch controls, and a high score that survives a refresh. Under 300 lines, and no game engine.
Counting with repeat.for, comparing against the previous item, template variables, promises in markup, portals, two-way focus, key modifiers, and a few more small things that save you writing code.
Aurelia 2 doesn't diff your view model or run a digest loop. It swaps properties for getters and setters, tracks getters with a proxy, patches collection methods, and falls back to polling only when it has no other choice. Here's how each piece works, and the changes it can't see.
if, repeat, with and promise are ordinary custom attributes with one flag set. Here's how they work, and how to build your own: one that renders content while a media query matches, and one that adds a variable to its template.
Two release candidates shipped this year without a blog post. Eager route loading, IContextRouter, Vite 8 support, reactive destructuring in repeat.for, and nearly 40 changes in total.
A practical guide to testing Aurelia 2 apps with Vitest and @aurelia/testing: setting up jsdom, rendering components with createFixture, waiting for the DOM with tasksSettled, swapping DI registrations for fakes, and testing routed components.
Navigate from /users/1 to /users/2 and Aurelia throws your component away and builds a new one. Here's why: how the router turns a URL into a route tree, how viewports claim components, the order the hooks run in, and how transition plans decide what gets reused.