Incremental Mounting
Instructions for embedding Vani components into existing applications via mount points.
When to Use
Use this when adding a Vani widget inside a non-Vani app or server-rendered page.
Steps
- Create a Vani component with explicit updates.
- Find or create a DOM mount node inside the host app.
- Call
renderToDOM(Widget(), mountNode)(arrays also work) and store the returned handles. - On host unmount/cleanup, call
handle.dispose()for each handle.
Arguments
- mountSelector - CSS selector or id for the mount point (defaults to
#app) - componentName - name of the embedded component (defaults to
Widget) - cleanupStrategy - how cleanup is triggered (defaults to
onUnmount)
Examples
Example 1 usage pattern:
Embed a Vani counter inside a React or server-rendered page using a div mount node.
Example 2 usage pattern:
Create multiple independent widgets with separate mount points and dispose them on teardown.
Output
Example output:
Created: src/widget.ts
Updated: src/host-integration.ts
Notes: Handles are disposed when the host unmounts.
Present Results to User
Explain the mount point, how handles are stored and disposed, and list file changes.