LearnNewsExamplesServices
Frontmatter
id6116
titlecomponent.Base: vdom => flag => ref
stateOpen
labels
enhancementno auto close
assigneestobiu
createdAtNov 18, 2024, 12:03 PM
updatedAtJun 13, 2025, 2:23 AM
githubUrlhttps://github.com/neomjs/neo/issues/6116
authortobiu
commentsCount4
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]

component.Base: vdom => flag => ref

Openenhancementno auto close
tobiu
tobiu commented on Nov 18, 2024, 12:03 PM

minor breaking change.

inside the component tree, we are using reference as identifiers. inside the vdom tree we are using flag. this feels a bit inconsistent.

it might be confusing to use the exact same name (2 different trees, controller.getReference() will not search inside the vdom), so i think ref would be a good alternative.

tobiu added the enhancement label on Nov 18, 2024, 12:03 PM
tobiu assigned to @tobiu on Nov 18, 2024, 12:03 PM
tobiu reopened this issue on Mar 3, 2025, 8:30 AM
tobiu removed the stale label on Mar 3, 2025, 8:30 AM
tobiu added the no auto close label on Mar 3, 2025, 8:30 AM
tobiu
tobiu Mar 3, 2025, 8:30 AM

this ticket is supposed to stay open.

tobiu
tobiu Jun 13, 2025, 2:23 AM

Input from Gemini:

Your proposal to change flag to ref within the vdom markup, despite it being a breaking change and necessitating the removal of flag, makes a lot of sense and I would strongly support it.

Here's why:

Unified Mental Model: This is the most compelling reason. Using ref consistently across the framework, whether you're referring to a component instance in the component tree (reference on a component config, then accessed via lookupReference) or a specific virtual DOM node within a component's vdom (ref property on a vdom node, then accessed via a helper method like getVdomNodeByRef), creates a much more cohesive and intuitive mental model for developers. "Ref" universally implies "I want a programmatic reference to this specific item."

Reduced Cognitive Load: While flag avoids immediate collision with reference, introducing a separate concept for a very similar purpose (getting a programmatic handle) can actually increase cognitive load in the long run. Unifying under ref simplifies the API surface developers need to learn and remember.

Familiarity for Newcomers: Many popular VDOM-based frameworks (like React) use ref for similar purposes (getting a reference to a DOM node or component). This familiar terminology could ease the onboarding process for developers coming from other ecosystems.

Improved Readability: ref is concise and widely understood in the context of getting references to UI elements.

Regarding the "breaking change" aspect: You're correct that supporting both flag and ref simultaneously for the same purpose makes no sense. A clean break, deprecating flag entirely and migrating to ref, is the right approach. For a framework like Neo.mjs, which prioritizes architectural elegance and performance, occasional breaking changes that lead to significant long-term API improvements are often justifiable, provided they are clearly documented with migration paths.

Implementation Considerations: If you make this change, it would be beneficial to:

Update the proposed getVdomNodeByFlag helper: Rename it to something like getVdomNodeByRef or queryVdomRef, to align with the new property name. Clear Documentation: Explicitly state the deprecation of flag and the new usage of ref in migration guides and documentation, clearly distinguishing how ref is used in vdom vs. reference is used for component instances (if reference remains separate). However, the conceptual overlap is much smaller now.