Host integration events
Paprel components do not install a router or control your application shell. They emit versioned, framework-neutral DOM events that bubble through Shadow DOM. Add one delegated listener to a stable parent instead of wiring every component separately.
import type {
PaprelOperationSuccessDetail,
PaprelResourceOpenDetail,
PaprelViewChangeDetail,
} from "@paprel/embed-core";
const container = document.querySelector("#accounting")!;
container.addEventListener("paprel:resource-open", (event) => {
const detail = (event as CustomEvent<PaprelResourceOpenDetail>).detail;
event.preventDefault();
router.push(`/${detail.resource}/${detail.id}`);
});
container.addEventListener("paprel:view-change", (event) => {
const { source, state } = (event as CustomEvent<PaprelViewChangeDetail>).detail;
syncQueryParameters(source.component, state);
});
container.addEventListener("paprel:operation-success", (event) => {
const { message, action, resource } =
(event as CustomEvent<PaprelOperationSuccessDetail>).detail;
toast.show(message);
analytics.track(action, resource);
});
Shared contract
| Event | Behavior | Detail |
|---|---|---|
paprel:resource-open | Cancelable. Prevent the default and route inside your host app. | { version: 1, source, resource, id } |
paprel:view-change | Fires after search, filter, tab, sort, page, or page-size changes. | { version: 1, source, reason, state } |
paprel:operation-success | Fires after a successful mutation for host-owned feedback. | { version: 1, source, action, message, resource? } |
source.component is the emitting custom-element tag. paprel:view-change reports the complete collection state, so hosts can replace their URL query parameters rather than reconstructing state from individual controls.
Component-specific events
Existing events such as journal-select, journal-saved, account-saved, and transaction-matched remain available for local component composition. Prefer shared events for routing, URL synchronization, toasts, and analytics across the application.
Refresh after external mutations
Collection and detail components expose refresh() where reloading is meaningful. Call it after your host changes the same resource through REST, an import, or another screen:
await importTransactions();
await document.querySelector("paprel-transaction-inbox")?.refresh();
Mutations performed inside Paprel components update their own state and emit paprel:operation-success where host feedback is appropriate.