mount() and unmount()

A JOPS app starts in one of two ways, chosen by the attributes of the jops-core <script> tag:

• Standalone (default): the library imports the entry module named by data-app and renders into <body> (or data-root).
• Hosted mode (data-host): nothing starts automatically; the host page starts and ends the app with mount() and unmount(). Used by JopsApp in Next.js, the WordPress plugin and any page that embeds a JOPS app.

Learn more: Hosted mode, Embedding.

Script attributes

Attribute	Mode	Description
data-app	standalone	Path of the entry module. Its default export is instantiated. Default: ./src/App.js
data-root	standalone	id of an element to render into instead of <body>; the rest of the page is kept. If the element is missing, a warning is logged and the app renders into <body>
data-host	hosted	Turns on hosted mode: no automatic start, window.JOPS is defined and jops:ready fires
data-native-back="off"	standalone	Turns off the built-in Android back button handling in Cordova and Capacitor apps

Standalone

index.html

<script type="importmap">
  { "imports": { "jops-core": "https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js" } }
</script>

<div id="app"></div>
<script type="module"
        src="https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js"
        data-app="./src/App.js" data-root="app"></script>

Hosted

page.html

<script type="importmap">
  { "imports": { "jops-core": "/lib/jops-core.min.js" } }
</script>
<script type="module" src="/lib/jops-core.min.js" data-host></script>

<div id="app" style="position: relative"></div>
<script type="module">
  const start = () => window.JOPS.mount({ app: "/my-app/App.js", root: document.getElementById("app") });
  window.JOPS ? start() : window.addEventListener("jops:ready", start, { once: true });
</script>

Caution

The import map entry for "jops-core" and the script src must be the same URL. Otherwise the browser loads two jops-core instances, each with its own Router, Store and EventBus.

The entry module

data-app and mount({ app }) name the same kind of module: its default export is a class that the library instantiates with new. It usually creates the root view and renders it.

src/App.js

import { View } from "jops-core";

export default class App {
  constructor() {
    const root = new View();
    root.loadLayout("/src/layout/main.html").then(() => root.render());
  }
}

mount()

mount({ app, root }: { app: string; root: HTMLElement }): Promise<object>

Starts a JOPS app inside root instead of <body>. Requires the library to be loaded with data-host.

Parameters

• app: URL of the app’s entry module.
• root: the element the app’s root view renders into. It becomes the root view’s container.

Returns a promise of the App instance (the default export of app, instantiated).

import { mount } from "jops-core";

await mount({ app: "/my-app/App.js", root: document.getElementById("app") });

• Give root position: relative; the Router’s slide and fade animations need it.
• One JOPS app per page: Router, Store and EventBus are page-wide singletons.
• After unmount(), mount() can start an app again.

unmount()

unmount(): void

Ends the hosted app completely, like closing a standalone app:

• destroys the Router (history listeners, routes, stacked views) and every view;
• empties the root element (the element itself stays in the page);
• clears the Store and the EventBus;
• restores the history methods JOPS wrapped.

The current URL and history entry are left alone: they belong to the host page. Safe to call more than once.

import { unmount } from "jops-core";

unmount();

When the app ends by itself: a full page load ends it anyway, and when history moves to another path (Back past the entry the app was launched from, or a host link to another page), the Router calls unmount() itself. A host that removes the app’s element without a page load, or navigates with history.pushState(), calls unmount().

window.JOPS

window.JOPS: { mount: typeof mount; unmount: typeof unmount }

Defined in hosted mode only. window.JOPS.mount and window.JOPS.unmount are the same functions as the module exports, for classic scripts and inline code that don’t import jops-core. Modules on the same page can also import { mount, unmount } from "jops-core".

jops:ready

window.addEventListener("jops:ready", listener)

Fired on window once, in hosted mode, after jops-core has fully loaded and window.JOPS is set. A listener may call mount() directly. Check window.JOPS first, since the event may already have fired:

const start = () => window.JOPS.mount({ app: "/my-app/App.js", root: document.getElementById("app") });
window.JOPS ? start() : window.addEventListener("jops:ready", start, { once: true });

Hosted mode differences

• setStyle() has no effect: the host page provides the CSS.
• The Android back button integration is off.

Paths

Library	Paths in mount({ app }), src=, layout=, loadLayout()
From the CDN	resolved relative to the hosting page; root-based paths are turned page-relative too
Vendored on the same origin (/lib/jops-core.min.js)	write root-based paths (/my-app/App.js), which work on every page

For a standalone Electron app loaded from file://, write data-app and every JOPS path relative to the page without ./ or / (data-app="App.js"). See Electron.