@jucie.io/cli 1.0.20 → 1.0.23

package/dist/interactivity.md

@@ -4,12 +4,21 @@
 
 All bindings and expressions resolve as paths on `ctx`:
 
-- `$store.<name>` — store data (e.g. `$store.todo.items`)
+- `$<name>` — a store, by its name (e.g. `$todo.items` for the `todo` store)
 - `$item`, `$index`, `$key` — loop variables (inside repeat)
-- `$router.currentRoute`, `$router.navigate(path)` — routing
+- `$router.currentRoute` — current route object (path, params, query, meta)
+- `$router.push(path)`, `$router.push({ name, params, query })` — navigate (adds history entry)
+- `$router.replace(path)` — navigate (replaces history entry)
+- `$router.go(-1)`, `$router.back()`, `$router.forward()` — history navigation
+- `$router.navigate(path)` — legacy navigation (prefer `push`/`replace`)
+- `injectStore('$router')` — direct access outside render context (same store)
 
-In code: access via `ctx.$store.todo.items`
-In bindings: use `$store.todo.items` (dot-path on ctx)
+Every store is a top-level `$<name>` key on `ctx`, beside the system keys `$router`, `$animator` and `$env`. User store names cannot start with `$`, and a store named `router`, `animator` or `env` is skipped (its key is taken).
+
+Inside a component, `ctx` holds only the component's declared props and emits — no stores and no `$router`; pass data in through props.
+
+In code: access via `ctx.$todo.items`
+In bindings: use `$todo.items` (dot-path on ctx)
 In text templates: use `{{$item.text}}` (automatically prefixed with `ctx.`)
 
 ## Stores
@@ -36,15 +45,15 @@ Create a store with optional seed data in one call:
 Event code MUST be a complete function expression:
 
 ```js
-function (ctx, event) { ctx.$store.todo.addTodo() }
+function (ctx, event) { ctx.$todo.addTodo() }
 ```
 
-Access stores via `ctx.$store.<storeName>`. Same event name replaces.
+Access stores via `ctx.$<storeName>`. Same event name replaces.
 
 For zero-arg store actions, use binding shorthand:
 
 ```js
-{ name: 'onClick', binding: '$store.todo.addTodo' }
+{ name: 'onClick', binding: '$todo.addTodo' }
 ```
 
 Use code when passing args (e.g. `ctx.$index`).
@@ -54,7 +63,7 @@ Use code when passing args (e.g. `ctx.$index`).
 Bind an input to data with the `model` attribute (`model` XOR `value`/`checked`):
 
 ```js
-{ name: 'model', mode: 'binding', binding: '$store.form.email' }
+{ name: 'model', mode: 'binding', binding: '$form.email' }
 ```
 
 Use `behavior:updateAttribute` (or the `behavior` tool with `op: 'updateAttribute'`).
@@ -65,7 +74,36 @@ Clear with `behavior:removeAttribute` and `name: 'model'`.
 Render a node once per item:
 
 ```js
-{ nodeId, binding: '$store.todo.items', as: '$item' }
+{ nodeId, binding: '$todo.items', as: '$item' }
+```
+
+## Page navigation with $router
+
+Use `$router` instead of store state for page visibility. The router is available as
+`injectStore('$router')` in store code, or `ctx.$router` in expressions/events.
+
+Navigate in store actions:
+```js
+import { injectStore } from '@jucie.io/reactive';
+navigateTo: function(path) {
+  const router = injectStore('$router');
+  router.push(path);
+}
+```
+
+Navigate in events:
+```js
+function (ctx, event) { ctx.$router.push('/billing') }
+```
+
+Show a section based on the current route (render condition):
+```js
+function (ctx) { return ctx.$router.currentRoute.path === '/billing' }
+```
+
+Active state on nav buttons:
+```js
+$router.currentRoute.path === '/billing'
 ```
 
 ## Conditional render
@@ -73,16 +111,16 @@ Render a node once per item:
 Show/hide based on an expression (wrapped as computed; use `ctx.` paths):
 
 ```js
-{ nodeId, value: 'ctx.$store.user.isAdmin' }
+{ nodeId, value: 'ctx.$user.isAdmin' }
 ```
 
 ## Custom state
 
-Register a state class, then style with breakpoint `&.is-active`:
+Register a state class, then style it with `state: '&.is-active'`:
 
 ```js
 { nodeId, stateName: 'is-active' }
-// then updateStyle with breakpoint: '&.is-active'
+// then updateStyle with state: '&.is-active' (add breakpoint: '@768' for a state at a width)
 ```
 
-Hover styles use `breakpoint: ':hover'` — no `addState` needed.
+Hover styles use `state: ':hover'` — no `addState` needed.