@yoltra/react 0.2.0 → 0.3.0

package/README.es.md

@@ -77,16 +77,16 @@ export const { store, useAtomicProp, useEmit, StoreProvider } = createYoltra({
 ### 2. Usa los hooks — sin provider
 
 Los hooks usan por defecto el store de arriba, asi que puedes renderizar componentes directamente.
-Suscribete con un **accessor tipado**: `s` autocompleta la forma de tu estado y el tipo de retorno
-se infiere.
+Suscribete con una spec **`{ reducer, property }`**: el `property` con puntos nombra la ruta exacta
+a leer.
 
 ```tsx
 // Counter.tsx
 import { useAtomicProp, useEmit } from "./yoltra";
 
 export function Counter() {
-  // Accessor tipado — se re-renderiza solo cuando counter.value cambia. Sin selectores, sin memo.
-  const value = useAtomicProp("counter", (s) => s.value);
+  // Forma objeto — se re-renderiza solo cuando counter.value cambia. Sin selectores, sin memo.
+  const value = useAtomicProp({ reducer: "counter", property: "value" });
   const emit = useEmit();
 
   return (
@@ -132,21 +132,18 @@ Provee el store con `<AppStoreContext.Provider value={store}>` en tu raiz.
 
 ## API de Hooks
 
-### `useAtomicProp(reducer, accessor)` — o `useAtomicProp({ reducer, property }, map?, isEqual?)`
+### `useAtomicProp({ reducer, property }, map?, isEqual?)`
 
-Selector de ruta unica con grano fino. Se re-renderiza solo cuando la hoja especificada cambia.
-Prefiere la forma de **accessor tipado** — autocompleta la forma del estado e infiere el tipo de
-retorno; usa la forma string para rutas dinamicas o con comodines.
+Selector de ruta unica con grano fino. Se re-renderiza solo cuando la hoja especificada cambia. El
+`property` con puntos nombra la ruta exacta — incluyendo rutas dinamicas
+(`` `items.${id}.title` ``) y con comodines.
 
 ```tsx
-// Accessor tipado (recomendado) — autocompleta items[0].title, infiere string
-const title = useAtomicProp("todos", (s) => s.items[0].title);
+// Forma objeto (recomendada) — suscribete a la ruta exacta
+const title = useAtomicProp({ reducer: "todos", property: "items.0.title" });
 
-// Forma string — misma suscripcion, para rutas dinamicas
-const sameTitle = useAtomicProp({
-  reducer: "todos",
-  property: "items.0.title",
-});
+// Ruta dinamica — interpola la clave
+const byId = useAtomicProp({ reducer: "todos", property: `items.${id}.title` });
 
 // Con mapper — derivar un valor de la ruta
 const count = useAtomicProp({ reducer: "todos", property: "items" }, (items) => items.length);
@@ -159,6 +156,9 @@ const allTitles = useAtomicProp(
 );
 ```
 
+> Tambien existe una sobrecarga con accessor tipado — `useAtomicProp("todos", (s) => s.items[0].title)`
+> — para rutas estaticas; autocompleta la forma del estado e infiere el tipo de retorno.
+
 **Patrones soportados:**
 
 - `"items.0.title"` -- ruta exacta (incluyendo indices numericos de array)
@@ -377,10 +377,10 @@ function TodoItem({ index }: { index: number }) {
 ## Ejemplos
 
 - **[App de Tareas con Profiler](../../examples/v0/yoltra-in-react)** -- CRUD completo con
-  comparacion de flamegraph
+  comparacion de flamegraph · [▶ Abrir la demo en vivo](https://yoltra.dev/es/demos/in-react)
 - **[Logo Cinetico (3000 particulas)](../../examples/v0/yoltra-kinetic-logo)** -- Suscripciones
-  independientes por circulo SVG
-- **[Next.js (Pages Router)](../../examples/v0/yoltra-in-nextjs)** -- estado de cliente + cambio de tema
+  independientes por circulo SVG · [▶ Abrir la demo en vivo](https://yoltra.dev/es/demos/kinetic-logo)
+- **[Next.js (Pages Router)](../../examples/v0/yoltra-in-nextjs)** -- estado de cliente + cambio de tema · [▶ Abrir la demo en vivo](https://yoltra.dev/es/demos/in-nextjs)
 
 ---
 

package/README.md

@@ -77,15 +77,15 @@ export const { store, useAtomicProp, useEmit, StoreProvider } = createYoltra({
 ### 2. Use the hooks — no provider required
 
 The hooks default to the store above, so you can render components directly. Subscribe with a
-**typed accessor**: `s` autocompletes your state shape and the return type is inferred.
+**`{ reducer, property }`** spec: the dotted `property` names the exact path to read.
 
 ```tsx
 // Counter.tsx
 import { useAtomicProp, useEmit } from "./yoltra";
 
 export function Counter() {
-  // Typed accessor — re-renders only when counter.value changes. No selectors, no memo.
-  const value = useAtomicProp("counter", (s) => s.value);
+  // Object form — re-renders only when counter.value changes. No selectors, no memo.
+  const value = useAtomicProp({ reducer: "counter", property: "value" });
   const emit = useEmit();
 
   return (
@@ -131,21 +131,17 @@ Provide the store with `<AppStoreContext.Provider value={store}>` at your root.
 
 ## Hooks API
 
-### `useAtomicProp(reducer, accessor)` — or `useAtomicProp({ reducer, property }, map?, isEqual?)`
+### `useAtomicProp({ reducer, property }, map?, isEqual?)`
 
-Fine-grained single-path selector. Re-renders only when the specified leaf changes. Prefer the
-**typed accessor** form — it autocompletes the state shape and infers the return type; use the
-string form for dynamic or wildcard paths.
+Fine-grained single-path selector. Re-renders only when the specified leaf changes. The dotted
+`property` names the exact path — including dynamic (`` `items.${id}.title` ``) and wildcard paths.
 
 ```tsx
-// Typed accessor (recommended) — autocompletes items[0].title, infers string
-const title = useAtomicProp("todos", (s) => s.items[0].title);
+// Object form (recommended) — subscribe to the exact path
+const title = useAtomicProp({ reducer: "todos", property: "items.0.title" });
 
-// String form — same subscription, for dynamic paths
-const sameTitle = useAtomicProp({
-  reducer: "todos",
-  property: "items.0.title",
-});
+// Dynamic path — interpolate the key
+const byId = useAtomicProp({ reducer: "todos", property: `items.${id}.title` });
 
 // With mapper — derive a value from the path
 const count = useAtomicProp({ reducer: "todos", property: "items" }, (items) => items.length);
@@ -158,6 +154,9 @@ const allTitles = useAtomicProp(
 );
 ```
 
+> A typed-accessor overload — `useAtomicProp("todos", (s) => s.items[0].title)` — is also available
+> for static paths; it autocompletes the state shape and infers the return type.
+
 **Supported patterns:**
 
 - `"items.0.title"` — exact path (including numeric array indices)
@@ -374,10 +373,10 @@ function TodoItem({ index }: { index: number }) {
 ## Examples
 
 - **[Todo App with Profiler](../../examples/v0/yoltra-in-react)** — Full CRUD with flamegraph
-  comparison
+  comparison · [▶ Open the live demo](https://yoltra.dev/en/demos/in-react)
 - **[Kinetic Logo (3000 particles)](../../examples/v0/yoltra-kinetic-logo)** — Independent
-  subscriptions per circle
-- **[Next.js (Pages Router)](../../examples/v0/yoltra-in-nextjs)** — client-side state + theme switcher
+  subscriptions per circle · [▶ Open the live demo](https://yoltra.dev/en/demos/kinetic-logo)
+- **[Next.js (Pages Router)](../../examples/v0/yoltra-in-nextjs)** — client-side state + theme switcher · [▶ Open the live demo](https://yoltra.dev/en/demos/in-nextjs)
 
 ---
 

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * @yoltra/react v0.2.0
+ * @yoltra/react v0.3.0
  * (c) 2026 Manu Ramirez <@pixerael>
  * License: MIT
  * Homepage: https://yoltra.dev

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /*!
- * @yoltra/react v0.2.0
+ * @yoltra/react v0.3.0
  * (c) 2026 Manu Ramirez <@pixerael>
  * License: MIT
  * Homepage: https://yoltra.dev

package/package.json

@@ -1,18 +1,7 @@
 {
   "name": "@yoltra/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React bindings for Yoltra",
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && vite build",
-    "lint": "node ../../tools/repo-tools/bin/repo-eslint.cjs --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "node ../../tools/repo-tools/bin/repo-eslint.cjs --fix",
-    "test": "vitest --coverage --watch=false",
-    "test:watch": "vitest --coverage",
-    "prepublishOnly": "node ../../common/scripts/copy-license.cjs",
-    "docs": "rushx docs:js && rushx docs:md",
-    "docs:md": "pnpm typedoc --options ./typedoc.react.json",
-    "docs:js": "pnpm typedoc --options ./typedoc.react.json --json ./.typedoc/react-en.json"
-  },
   "license": "MIT",
   "author": {
     "name": "Manu Ramirez <@pixerael>",
@@ -51,7 +40,7 @@
     "node": ">=18.18"
   },
   "peerDependencies": {
-    "@yoltra/core": "^0.2.0",
+    "@yoltra/core": "^0.3.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -64,7 +53,6 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@yoltra/core": "workspace:*",
     "@eslint/js": "^9.30.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -95,7 +83,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^4.3.2",
     "vite": "^7.1.11",
-    "vitest": "3.2.4"
+    "vitest": "3.2.4",
+    "@yoltra/core": "0.3.0"
   },
   "exports": {
     ".": {
@@ -106,5 +95,15 @@
       "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "lint": "node ../../tools/repo-tools/bin/repo-eslint.cjs --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "node ../../tools/repo-tools/bin/repo-eslint.cjs --fix",
+    "test": "vitest --coverage --watch=false",
+    "test:watch": "vitest --coverage",
+    "docs": "rushx docs:js && rushx docs:md",
+    "docs:md": "pnpm typedoc --options ./typedoc.react.json",
+    "docs:js": "pnpm typedoc --options ./typedoc.react.json --json ./.typedoc/react-en.json"
   }
-}
+}