aberdeen 1.4.3 → 1.6.0

package/src/route.ts

@@ -170,9 +170,9 @@ export function go(target: RouteTarget, nav: NavType = "go"): void {
  * @param target Same as for {@link go}, but merged into the current route instead deleting all state.
  */
 export function push(target: RouteTarget): void {
-	let copy = clone(unproxy(current));
-	merge(copy, targetToPartial(target));
-	go(copy);
+	const c = clone(unproxy(current));
+	merge(c, targetToPartial(target));
+	go(c);
 }
 
 /**

package/skill/references/prediction.md

@@ -1,45 +0,0 @@
-# Prediction (Optimistic UI)
-
-Apply UI changes immediately, auto-revert when server responds.
-
-## API
-
-```typescript
-import { applyPrediction, applyCanon } from 'aberdeen/prediction';
-```
-
-### `applyPrediction(func)`
-Runs function and records all proxy changes as a "prediction".
-Returns a `Patch` to use as `dropPatches` later, when the server responds.
-
-### `applyCanon(func?, dropPatches?)`
-1. Reverts all predictions
-2. Runs `func` (typically applies server data)
-3. Drops specified patches
-4. Re-applies remaining predictions that still apply cleanly
-
-## Example
-```typescript
-async function toggleTodo(todo: Todo) {
-    // Optimistic update
-    const patch = applyPrediction(() => {
-        todo.done = !todo.done;
-    });
-
-    try {
-        const data = await api.updateTodo(todo.id, { done: todo.done });
-        
-        // Server responded - apply canonical state
-        applyCanon(() => {
-            Object.assign(todo, data);
-        }, [patch]);
-    } catch {
-        // On error, just drop the prediction to revert
-        applyCanon(undefined, [patch]);
-    }
-}
-```
-
-## When to Use
-- When you want immediate UI feedback for user actions for which a server is authoritative.
-- As doing this manually for each such case is tedious, this should usually be integrated into the data updating/fetching layer.

package/skill/references/routing.md

@@ -1,81 +0,0 @@
-# Routing and Dispatching
-
-## Router (`aberdeen/route`)
-
-The `current` object is a reactive proxy of the current URL state.
-
-### Properties
-| Property | Type | Description |
-|----------|------|-------------|
-| `path` | `string` | Normalized path (e.g., `/users/123`) |
-| `p` | `string[]` | Path segments (e.g., `['users', '123']`) |
-| `search` | `Record<string,string>` | Query parameters |
-| `hash` | `string` | URL hash including `#` |
-| `state` | `Record<string,any>` | JSON-compatible state data |
-| `nav` | `NavType` | How we got here: `load`, `back`, `forward`, `go`, `push` |
-| `depth` | `number` | Navigation stack depth (starts at 1) |
-
-### Navigation Functions
-```typescript
-import * as route from 'aberdeen/route';
-
-route.go('/users/42');                    // Navigate to new URL
-route.go({ p: ['users', 42], hash: 'top' }); // Object form
-route.push({ search: { tab: 'feed' } });  // Merge into current route
-route.back();                             // Go back in history
-route.back({ path: '/home' });            // Back to matching entry, or replace
-route.up();                               // Go up one path level
-route.persistScroll();                    // Save/restore scroll position
-```
-
-### Reactive Routing Example
-```typescript
-import * as route from 'aberdeen/route';
-
-$(() => {
-    const [section, id] = route.current.p;
-    if (section === 'users') drawUser(id);
-    else if (section === 'settings') drawSettings();
-    else drawHome();
-});
-```
-
-## Dispatcher (`aberdeen/dispatcher`)
-
-Type-safe path segment matching for complex routing.
-
-```typescript
-import { Dispatcher, matchRest } from 'aberdeen/dispatcher';
-import * as route from 'aberdeen/route';
-
-const d = new Dispatcher();
-
-// Literal string match
-d.addRoute('home', () => drawHome());
-
-// Number extraction (uses built-in Number function)
-d.addRoute('user', Number, (id) => drawUser(id));
-
-// String extraction
-d.addRoute('user', Number, 'post', String, (userId, postId) => {
-    drawPost(userId, postId);
-});
-
-// Rest of path as array
-d.addRoute('search', matchRest, (terms: string[]) => {
-    performSearch(terms);
-});
-
-// Dispatch in reactive scope
-$(() => {
-    if (!d.dispatch(route.current.p)) {
-        draw404();
-    }
-});
-```
-
-### Custom Matchers
-```typescript
-const uuid = (s: string) => /^[0-9a-f-]{36}$/.test(s) ? s : matchFailed;
-d.addRoute('item', uuid, (id) => drawItem(id));
-```

package/skill/references/transitions.md

@@ -1,52 +0,0 @@
-# Transitions
-
-Animate elements entering/leaving the DOM via the `create` and `destroy` properties.
-
-**Important:** Transitions only trigger for **top-level** elements of a scope being (re-)run. Deeply nested elements drawn as part of a larger redraw do not trigger transitions.
-
-## Built-in Transitions
-
-```typescript
-import { grow, shrink } from 'aberdeen/transitions';
-
-// Apply to individual elements
-$('div create=', grow, 'destroy=', shrink, '#Animated');
-
-// Common with onEach for list animations
-onEach(items, item => {
-    $('li create=', grow, 'destroy=', shrink, `#${item.text}`);
-});
-```
-
-- `grow`: Scales element from 0 to full size with margin animation
-- `shrink`: Scales element to 0 and removes from DOM after animation
-
-Both detect horizontal flex containers and animate width instead of height.
-
-## CSS-Based Transitions
-
-For custom transitions, use CSS class strings (dot-separated):
-```typescript
-const fadeStyle = insertCss({
-    transition: 'all 0.3s ease-out',
-    '&.hidden': { opacity: 0, transform: 'translateY(-10px)' }
-});
-
-// Class added briefly on create (removed after layout)
-// Class added on destroy (element removed after 2s delay)
-$('div', fadeStyle, 'create=.hidden destroy=.hidden#Fading element');
-```
-
-## Custom Transition Functions
-
-For full control, pass functions. For `destroy`, your function must remove the element:
-```typescript
-$('div create=', (el: HTMLElement) => {
-    // Animate on mount - element already in DOM
-    el.animate([{ opacity: 0 }, { opacity: 1 }], 300);
-}, 'destroy=', (el: HTMLElement) => {
-    // YOU must remove the element when done
-    el.animate([{ opacity: 1 }, { opacity: 0 }], 300)
-        .finished.then(() => el.remove());
-}, '#Custom animated');
-```