vanjs-core

VanJS Core Documentation

Core API Structure

const van = {
  tags: {}, // HTML/SVG tag functions
  add: (dom, ...children) => dom, // Add children to DOM element
  state: (initVal) => State, // Create reactive state
  derive: (f) => State, // Create derived state
  hydrate: (dom, f) => void // Hydrate SSR components
}

Key Concepts

1. DOM Composition

• Tag functions create DOM elements directly (no virtual DOM)
• Elements can have properties and child nodes
• Supports both HTML and SVG elements via namespace

2. State Management

• State objects represent mutable values
• States have a .val property for getting/setting
• Derived states update automatically based on dependencies
• State bindings update DOM when state changes

3. State Binding Types

• Property binding: Bind state to element property
• Child binding: Bind state as child node
• Derived binding: Complex bindings with computation

Core APIs

van.tags

• Creates DOM elements
• Parameters: [props], ...children
• Returns: DOM Element
• Props can be primitive values or state objects

van.state(initVal)

• Creates reactive state
• Parameters: initial value
• Returns: State object with .val property

van.derive(f)

• Creates derived state
• Parameters: derivation function
• Returns: State object that auto-updates

van.add(dom, ...children)

• Adds children to DOM element
• Parameters: target DOM, child nodes
• Returns: target DOM element

van.hydrate(dom, f)

• Hydrates SSR components with reactivity
• Parameters:
  • dom: Existing SSR DOM node
  • f: Function returning hydrated component
• Returns: undefined
• Example:

van.hydrate(document.getElementById('app'), (dom) =>
  Counter({
    init: Number(dom.getAttribute('data-count')),
  })
)

DOM Implementation Details

Namespace Support

// Create elements with custom namespace
const { circle, path, svg } = van.tags('http://www.w3.org/2000/svg')
const { math, mi, mn } = van.tags('http://www.w3.org/1998/Math/MathML')