---
tagName: 10.0.0
name: 'Neo.mjs v10: The Reactive Revolution'
publishedAt: '2025-07-24T06:03:17Z'
isPrerelease: false
isDraft: false
---
# Neo.mjs v10: The Reactive Revolution

This release brings significant enhancements and refactorings, improving performance, reactivity, and the overall developer experience.

#### Core Framework Improvements

*   **Reactive Core Refactoring (`core.Observable`):**
    *   Architectural refactoring of `core.Observable` to a fully reactive mixin (`#7090`).
    *   **Modernized `core.Observable`:** Refactored `core.Observable` to align with the reactive config system. This involved converting the `listeners` property to a reactive `listeners_` config, eliminating manual initialization, and establishing true encapsulation using a module-scoped `Symbol` (`eventMapSymbol`) for internal event registry management. A bug in `removeListener` related to incorrect state access was also fixed. (`#7090`)
    *   Listeners are now managed as a reactive config within `core.Observable` (`#7089`).
*   **Effect Management System:**
    *   **Foundational Refactoring of Effect Management:** The core reactivity system has been refactored and unified under a single `Neo.core.EffectManager` (`#7085`). This introduces a clear distinction between:
        *   **Execution Batching (`pause()` / `resume()`):** Replaced the old `isPaused` flag with a numeric `pauseCounter` for robust, nested batching of UI updates. Effects are queued and executed only when the counter is zero.
        *   **Dependency Tracking Suppression (`pauseTracking()` / `resumeTracking()`):** A new mechanism (`isTrackingPaused` flag) to temporarily stop active effects from collecting new dependencies, solving self-dependency issues.
    *   The `EffectBatchManager` singleton has been completely removed, and its functionality absorbed by the enhanced `EffectManager`. This results in a more predictable, robust, and resilient reactive system.
*   **State Management:**
    *   **State Provider Refactoring & Deep Merging:**
        *   Refactored `state.Provider`'s `internalSetData()` method to support intuitive deep-merging of nested objects, allowing dynamic creation of new, fully reactive data structures at runtime. This resolves inconsistent behavior and aligns with expected merge operations. (`#7099`)
        *   **Enhanced Reactivity & Atomic Updates:** `state.Provider` now features "Reactivity Bubbling," where changes to leaf properties recursively update parent objects, correctly triggering effects on intermediate data objects. Public `setData()` and `setDataAtSameLevel()` methods are now wrapped with `Neo.batch()` (leveraging the new `EffectManager`'s batching capabilities) to ensure all reactive updates are collected, de-duplicated, and executed atomically, preventing race conditions and improving performance. A new test suite (`ProviderNestedDataConfigs.mjs`) validates this functionality.
        *   Moved all state provider related logic (configs like `bind`, `modelData`, `stateProvider_`, `data_`, `parentComponent_`, and methods like `getStateProvider()`, `getState()`, `setState()`, `beforeGetData()`, `getConfigInstanceByNtype()`, along with lifecycle logic and two-way binding logic) from `src/component/Base.mjs` to `src/component/Abstract.mjs`. This makes state providers available to both classic class-based components and modern functional components. (`#7100`)
*   **Component Base Classes:**
    *   **Common Abstract Base Class:** Introduced `Neo.component.Abstract` as a new common base class for both `Neo.component.Base` (classic) and `Neo.functional.component.Base` (functional) components. This refactoring centralizes shared logic (e.g., `set()`, `destroy()`, `mountedPromise`, core configs, `DomEvents`, `Observable`, `VdomLifecycle` mixins), improving code reusability, enhancing consistency, and simplifying maintenance by removing duplicated code. (`#7089`)
    *   Removed redundant `createBindings()` calls from `onConstructed` (`#7101`).

#### Functional Components

*   **VDOM Reconciliation:** Enhanced Functional Component VDOM Reconciliation (`#7086`).
*   **Lifecycle Hook:** Introduced a new `beforeUpdate()` lifecycle method to `Neo.functional.component.Base` (`#7084`). This hook executes after all state changes from a reactive `Effect` have been processed and just before `updateVdom()`. It provides a predictable entry point for pre-render logic and allows conditionally canceling a VDOM update by returning `false`.
*   **Functional Button Component:** Introduced a new `Neo.functional.button.Base` component (`#7087`). This component serves as a key UI element built using the functional component paradigm, demonstrating integration with the reactive VDOM system and leveraging automatic VDOM node ID generation for efficient diffing. A dedicated test suite and demo application were created.
*   `functional.button.Base`: `beforeSetBadgePosition()`, `beforeSetIconPosition()` now use constructor access for future class extensions.

#### VDOM & Rendering

*   `util.vdom.TreeBuilder`: Improvements to `buildTree()`: Refactored `getVdomTree` and `getVnodeTree` into a single, DRY method (`#7098`).
*   `util.VDom`: `syncVdomIds()` enhanced for future-proofing and improved filtering.
*   `manager.VDomUpdate`: Significantly enhanced JSDoc comments and method order/cleanup.

#### Other Enhancements & Fixes

*   **Dependencies:** Updated FontAwesome to v7.
*   **Examples Website:** Fixed flakiness on Safari (`#7102`).
*   **Tests:** All 770 unit tests now pass successfully, including a significant number of new tests added since beta.6.
*   `form.field.Text`: `onInputValueChange()` intent made clearer.
*   `Portal.view.ViewportController`: Cube-layout timing adjustments.
*   `core.EffectManager`: Optimized `Neo.batch` usage.
*   Removed obsolete `onNeoConfigChange()` calls from tests.
*   Updated `test/siesta/tests/vdom/layout/Cube.mjs` to match current `VdomHelper.create()` signature.

#### Documentation Updates

*   The `learn/guides/datahandling/StateProviders.md` guide has been updated to accurately describe the new deep-merge behavior of state providers.
*   Code examples in the `learn/blog/v10-deep-dive-state-provider.md` blog post have been updated to demonstrate the intuitive API usage.

All changes combined into 1 commit: https://github.com/neomjs/neo/commit/c84a2cd65cb9206ffe2221d7a2f675b9466ac646
