(3/3) Initial commit of domRef removal on vcomp

[dmjio]

• Drop domRef from VComp
• Drop NS, Tag, etc. from VComp

This gives us an ideal API for Component. mount no longer requires an unnecessary DOM node. vcomp is totally virtual now.

view :: View model action
view = div_ [] 
  [ mount counter
  , mount counter
  ]

counter :: Component p Int Action
counter = component 0 update $ \x ->
  div_
    [ P.className "counter" ]
    [ button_ [ onClick Add ] [ "+" ]
    , text (ms x)
    , button_ [ onClick Sub ] [ "-" ]
    ] where
        update = \case
          Add -> this += 1
          Sub -> this -= 1

data Action = Add | Sub | Alert

This PR represents a significant advancement in the miso internals. Namely,

• Hydration now builds the entire VTree before calling FFI.hydrate (previously it was hydrating recursively through each Component, but that did not work well with the fallback to diff logic. Operating on the entire VTree solves this).
• VComp has no underlying DOM node (like react), so diffing and delegation now account for this. This further opens up the door to supporting VFrag (https://react.dev/reference/react/Fragment).
• Hydration now falls back to diff in the Haskell layer.
• Adds many tests

[Copilot]

Pull request overview

This pull request completes the removal of domRef from the VComp (virtual component) type as part 3 of a 3-part refactoring. The changes fundamentally alter how components are represented in the virtual DOM by removing direct DOM references from component nodes and instead using a child property that drills down to the actual DOM element.

Key changes:

• VComp no longer stores domRef, NS, Tag, props, css, classList, events, or children array
• VComp now has a single child property pointing to its rendered VTree
• Mount callback signature changed from (vcomp, callback) to (parent, callback)
• New drill() helper function traverses VComp chain to find actual DOM reference
• New OP enum introduced to standardize DOM operations (APPEND, REPLACE, INSERT_BEFORE)
• Haskell API updated with new mounting combinators: +>, mount, and mount_

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
ts/miso/types.ts	Removed domRef and related properties from VComp, added child property and OP enum
ts/miso/dom.ts	Added drill() function, updated all DOM operations to handle VComp without domRef
ts/miso/event.ts	Updated event delegation to drill through VComp chains to find DOM references
ts/miso/hydrate.ts	Added setVCompRef() helper and updated hydration to handle new VComp structure
ts/miso/context/dom.ts	Updated drawingContext.nextSibling to use drill() for VComp
ts/miso/context/patch.ts	Updated patchDrawingContext.nextSibling to use drill() for VComp
ts/spec/*.spec.ts	Updated all test files to use new mount signature and cast children to VNode
src/Miso/Types.hs	Changed VComp constructor, added new mounting combinators (+>, mount, mount_)
src/Miso/Runtime.hs	Updated buildVTree to use new VComp structure with child instead of children
src/Miso/Html/Render.hs	Updated server-side rendering to handle new VComp structure
src/Miso.hs	Minor variable renaming for clarity
tests/app/Main.hs	Updated test to use mount_ combinator
js/miso.js, js/miso.prod.js	Minified/compiled JavaScript output reflecting TypeScript changes

Comments suppressed due to low confidence (1)

ts/miso/event.ts:44

• The parameter 'VTree' has type 'any', but its name coincides with the imported type VTree.

function listener<T>(e: Event | [Event], mount: T, getVTree: (VTree) => void, debug: boolean, context: EventContext<T>): void {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

ts/miso/event.ts:44

• The parameter 'VTree' has type 'any', but its name coincides with the imported type VTree.

function listener<T>(e: Event | [Event], mount: T, getVTree: (VTree) => void, debug: boolean, context: EventContext<T>): void {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

ts/miso/context/dom.ts:1

• The modelHydration function signature was updated to include componentId as the first parameter, but the old signature modelHydration: function (model: Object) is still being called elsewhere in the codebase (line 171 in ts/spec/context-dom.spec.ts calls it with only one argument). This will cause runtime errors when the function is invoked.

import

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.