@inglorious/web 2.2.0 → 2.2.1

package/README.md

@@ -412,9 +412,9 @@ This method is the cornerstone of entity-based rendering. It looks up an entity
 
 **`api.select(selectorFn)`**
 
-Selects a slice of the application state and returns a reactive object. This is useful for creating components that only depend on a small part of the state, avoiding unnecessary re-renders.
+Selects a slice of the application state and returns a reactive getter function. This is useful for creating components that only depend on a small part of the state, avoiding unnecessary re-renders.
 
-The `selectorFn` receives the `api` and should return a value. The `select` method returns an object with a `value` property and an `unsubscribe` function.
+The `selectorFn` receives the `api` and should return a value. The `select` method returns a getter function that you call to get the latest value. This function also has an `unsubscribe` property.
 
 **Parameters:**
 
@@ -422,7 +422,7 @@ The `selectorFn` receives the `api` and should return a value. The `select` meth
 
 **Returns:**
 
-- `{ value, unsubscribe }`: A reactive result object.
+- `() => T`: A reactive getter function. It also has an `unsubscribe` method attached.
 
 **Example:**
 
@@ -430,7 +430,8 @@ While `mount` re-renders the entire application on any state change, `api.select
 
 ```javascript
 // Inside a component's render method
-const { value: user } = api.select((api) => api.getEntity("user-1"))
+const getUser = api.select((api) => api.getEntity("user-1"))
+const user = getUser() // Call the getter to get the value
 ```
 
 ### Re-exported `lit-html` Utilities

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "lit-html": "^3.3.1",
-    "@inglorious/store": "7.1.1",
-    "@inglorious/utils": "3.7.0"
+    "@inglorious/utils": "3.7.0",
+    "@inglorious/store": "7.1.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/mount.js

@@ -22,13 +22,15 @@ export function mount(store, renderFn, element) {
  * Creates a reactive selector function for the mount API.
  * @param {import('../types/mount').Api} api - The mount API.
  * @param {import('@inglorious/store').Store} store - The application state store.
- * @returns {import('../types/mount').Api['select']} A `select` function that can be used to get a reactive slice of the state.
+ * @returns {import('../types/mount').Api['select']} A `select` function that returns a reactive getter.
  * @private
  */
 function createReactiveSelector(api, store) {
   return function select(selectorFn) {
     let current = selectorFn(api)
 
+    const getter = () => current // stable function, lit-html will call this each render
+
     const unsubscribe = store.subscribe(() => {
       const next = selectorFn(api)
       if (next !== current) {
@@ -36,12 +38,8 @@ function createReactiveSelector(api, store) {
       }
     })
 
-    return {
-      get value() {
-        return current
-      },
-      unsubscribe,
-    }
+    getter.unsubscribe = unsubscribe
+    return getter
   }
 }
 

package/src/mount.test.js

@@ -116,11 +116,11 @@ describe("mount", () => {
         capturedSelectResult = api.select(
           (api) => api.getEntity("player-1").score,
         )
-        return html`<div>Selected: ${capturedSelectResult.value}</div>`
+        return html`<div>Selected: ${capturedSelectResult()}</div>`
       }
       mount(store, renderFn, rootElement)
 
-      expect(capturedSelectResult.value).toBe(0)
+      expect(capturedSelectResult()).toBe(0)
       expect(rootElement.textContent).toBe("Selected: 0")
     })
 
@@ -130,16 +130,16 @@ describe("mount", () => {
         capturedSelectResult = api.select(
           (api) => api.getEntity("player-1").score,
         )
-        return html`<div>Selected: ${capturedSelectResult.value}</div>`
+        return html`<div>Selected: ${capturedSelectResult()}</div>`
       }
       mount(store, renderFn, rootElement)
 
-      expect(capturedSelectResult.value).toBe(0)
+      expect(capturedSelectResult()).toBe(0)
 
       store.notify("incrementScore", "player-1")
       await Promise.resolve() // Wait for store subscription to trigger and update `current` in select, and for lit-html to render
 
-      expect(capturedSelectResult.value).toBe(1)
+      expect(capturedSelectResult()).toBe(1)
       expect(rootElement.textContent).toBe("Selected: 1")
     })
 
@@ -149,16 +149,16 @@ describe("mount", () => {
         capturedSelectResult = api.select(
           (api) => api.getEntity("player-1").score,
         )
-        return html`<div>Selected: ${capturedSelectResult.value}</div>`
+        return html`<div>Selected: ${capturedSelectResult()}</div>`
       }
       mount(store, renderFn, rootElement)
 
-      expect(capturedSelectResult.value).toBe(0)
+      expect(capturedSelectResult()).toBe(0)
 
       store.notify("takeDamage", "enemy-1", 10) // This changes enemy health, not player score
       await Promise.resolve()
 
-      expect(capturedSelectResult.value).toBe(0) // Should remain 0
+      expect(capturedSelectResult()).toBe(0) // Should remain 0
       expect(rootElement.textContent).toBe("Selected: 0") // DOM also remains 0
     })
 
@@ -172,19 +172,19 @@ describe("mount", () => {
             (api) => api.getEntity("player-1").score,
           )
         }
-        return html`<div>Selected: ${initialSelectResult.value}</div>`
+        return html`<div>Selected: ${initialSelectResult()}</div>`
       }
       mount(store, renderFn, rootElement)
 
-      expect(initialSelectResult.value).toBe(0)
+      expect(initialSelectResult()).toBe(0)
 
       initialSelectResult.unsubscribe() // Unsubscribe the reactive selector's internal listener
       store.notify("incrementScore", "player-1")
       await Promise.resolve() // Wait for store subscription to trigger and for lit-html to render
 
-      // The main mount subscription still triggers renderFn, but the `initialSelectResult.value`
+      // The main mount subscription still triggers renderFn, but the value from `initialSelectResult()`
       // should *not* have updated because its internal listener was unsubscribed.
-      expect(initialSelectResult.value).toBe(0) // Should remain 0
+      expect(initialSelectResult()).toBe(0) // Should remain 0
       expect(rootElement.textContent).toBe("Selected: 0")
       expect(rootElement.textContent).not.toBe("Selected: 1")
     })

package/types/mount.d.ts

@@ -2,24 +2,24 @@ import type { TemplateResult } from "lit-html"
 import type { Store, Api as StoreApi } from "@inglorious/store"
 
 /**
- * The result of a reactive selector.
+ * A reactive getter function returned by `api.select`.
+ * Call the function to get the current value.
+ * The function also has an `unsubscribe` method to stop listening for updates.
  * @template T The type of the selected value.
  */
-export type ReactiveSelectorResult<T> = {
-  /** The current value of the selected state. */
-  readonly value: T
+export type ReactiveSelectorResult<T> = (() => T) & {
   /** A function to stop listening for updates. */
   unsubscribe: () => void
 }
 
 export type Api = StoreApi & {
   /**
-   * Selects a slice of the application state and returns a reactive object.
+   * Selects a slice of the application state and returns a reactive getter function.
    * The value will update whenever the selected part of the state changes.
    *
    * @template T The type of the selected state slice.
    * @param selectorFn A function that takes the API and returns a slice of the state.
-   * @returns A reactive result object with the current value and an unsubscribe function.
+   * @returns A reactive getter function. Call it to get the value. It also has an `unsubscribe` method.
    */
   select: <T>(selectorFn: (api: Api) => T) => ReactiveSelectorResult<T>