JOPS 1.1.0: run a JOPS SPA inside Next.js, plus onPause(), tag props and multi-root layouts

[arkwld]

Hi everyone 👋

JOPS 1.1.0 is out. In our last announcement we said we'd explore integrating JOPS with Next.js. That exploration is now a feature: a JOPS SPA can run inside a page of a Next.js (App Router) app, next to React.

⚛️ Next.js integration

JOPS doesn't replace React here; it works alongside it. Next.js keeps what it does best: server rendering, data, Route Handlers, its routing and the React ecosystem. JOPS adds class-based views with an Android-style lifecycle on the pages where your team prefers that model.

• One component: import JopsApp from "jops-core/nextjs", then <JopsApp app="/my-app/App.js" />. It loads the library once per page, adds the import map, and mounts the app into its own <div>.
• Clear ownership: Next.js owns the path (/quotes), and JOPS owns the hash (/quotes#details?id=7). Next.js history state is kept in every entry JOPS writes, so Back/Forward work across both.
• No bundling of JOPS code: the app lives in public/ and is served as-is. Tailwind CSS still picks up the classes used in JOPS files.
• Clean lifecycle: leaving the page ends the app completely (Router, views, Store, EventBus, history hooks). Coming back relaunches it and restores the screen from the hash.
• Next.js is the backend: the SPA calls Route Handlers with fetch().

We tested this by migrating a complete quote-builder module of a Next.js CRM to JOPS: list, details, editor, status actions and new quote. Most of the fixes below came from that work.

Try it in a minute:

npx jops-core init

Pick 3. Next.js JOPS Embedded SPA: a Next.js project with a React-only page, a page hosting a JOPS SPA (mock login and a quotes list), and a Route Handler backend. To add JOPS to an existing Next.js app instead, see the README section "Next.js Integration".

🧩 New APIs

• onPause(): called when another view comes to the front while this one stays alive. It pairs with onResume(), as on Android.
• Tag props: attributes on a declared tag reach the view as this.props. For example, <Card jops src="/src/Card.js" title="Hi" item-id="7"> gives { title: "Hi", itemId: "7" }.
• Multi-root layouts: a layout may have several top-level elements. get(id) searches all of them, and the new find(id) returns every match.
• Owner-aware EventBus: with EventBus.subscribe(this, "event", callback), the subscription is removed automatically when the view is destroyed.
• Hosted mode without React: mount() / unmount(). Standalone apps can also render into an element with data-root="<id>".

🛠️ Fixes (all apps, not only Next.js)

• The root view gets the full lifecycle, and onclick handlers in its own layout work.
• The first route in <Router> is reliably the default route.
• Routes get onResume() only when shown and only once, including views opened with navigate().
• An empty hash shows the default route.
• loadLayout() loads each layout once, and new View("/layout.html") + addSubView() works.
• Element.set() / attr() / value() never throw. A wrong id logs a warning that names it.
• setStyle() accepts inline CSS with line breaks or quotes.

⚠️ Check before upgrading

• In npx jops-core init, "None" moved from choice 3 to choice 4. Scripts that pipe 3 into init now get the Next.js template.
• find("some-id") with a string used to throw; it now returns an array of Elements.

⬆️ How to upgrade

npm:

npm i jops-core@latest
npx jops-core update

Since 1.0.15, the CLI tells you when a newer version is available.

CDN: @latest serves 1.1.0. If you pin a version, use @1.1.0 in both the import map and the script tag.

---

Using Next.js? Tell us what you'd build with it in Ideas. Questions go to Q&A, and bugs to Issues.

Full changelog: CHANGELOG.md · Release: v1.1.0