Mount and unmount an application

Practice the complete mounted lifetime of one root view.

Table of contents

APIs used

mount: Starts a Valyrian.js application on a DOM target.
unmount: Ends the mounted application lifecycle.

Run this recipe

Starting project: Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File: Replace src/client-entry.tsx with this recipe snippet.
Run: Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result: The greeting remains visible after mount. Choosing the button removes the mounted root.

Starting point

Define one root view that renders the application content.

Steps

Mount the view in `body` and keep it visible until the Unmount application button calls `unmount`.

tsx

import { mount, unmount } from &quot;valyrian.js&quot;;

const App = () =&gt; (
  &lt;main&gt;
    &lt;p&gt;Hello, Valyrian.js&lt;/p&gt;
    &lt;button onclick={() =&gt; unmount()}&gt;Unmount application&lt;/button&gt;
  &lt;/main&gt;
);

mount(&quot;body&quot;, App);

Result

The greeting remains visible after mount. Choosing the button removes the mounted root.