createApp creates an application instance around initial state and a top-level view. The instance exposes mount(), which receives a DOM element and starts rendering there. section 5.2.2
The initial implementation separates a few small responsibilities:
- Stores the mounting element in parentEl and the previous virtual DOM tree in vdom; both begin as null. section 5.2.2
- Renders by destroying an existing DOM tree, calling view(state) to create a new virtual DOM tree, and mounting it. section 5.2.2
- Keeps renderApp private while exposing mount() as the developer-facing application method. section 5.2.2
Initial application setup
createApp({ state, view }).mount(document.querySelector('#app')) creates the instance, remembers the parent element, evaluates the top-level view with state, and mounts its virtual DOM. section 5.2.2
Listing 5.5 The application instance with its renderer (app.js)
import { destroyDOM } from './destroy-dom'
import { mountDOM } from './mount-dom'
export function createApp({ state, view }) { #1
let parentEl = null
let vdom = null
function renderApp() {
if (vdom) {
destroyDOM(vdom) #2
}
vdom = view(state)
mountDOM(vdom, parentEl) #3
}
return {
mount(_parentEl) { #4
parentEl = _parentEl
renderApp()
},
}
}
The implementation listing shows how the closure variables, renderApp(), and mount() fit together in app.js. section 5.2.2
Later, the application instance becomes smaller: state moves into components, createApp receives a root component and optional props, and the returned instance adds unmount() with mount-state checks. section 12.4
