npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@molecule/app-notification-center-default

v1.0.2

Published

Default provider for @molecule/app-notification-center

Readme

@molecule/app-notification-center-default

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Default notification center provider for molecule.dev.

Implements NotificationCenterProvider from @molecule/app-notification-center using pure TypeScript in-memory state management with support for polling, realtime push updates, and subscription-based state notifications.

Quick Start

import { provider } from '@molecule/app-notification-center-default'
import { setProvider } from '@molecule/app-notification-center'

setProvider(provider)

Type

provider

Installation

npm install @molecule/app-notification-center-default @molecule/app-notification-center

API

Interfaces

DefaultNotificationCenterConfig

Provider-specific configuration for the default notification center provider.

interface DefaultNotificationCenterConfig {
  /**
   * Default number of notifications to fetch per page.
   * Defaults to `20`.
   */
  defaultPageSize?: number

  /**
   * Whether to automatically refresh the unread count when polling.
   * Defaults to `true`.
   */
  refreshUnreadOnPoll?: boolean
}

Functions

createDefaultProvider(config)

Creates a default notification center provider.

function createDefaultProvider(config?: DefaultNotificationCenterConfig): NotificationCenterProvider
  • config — Optional provider-specific configuration.

Returns: A NotificationCenterProvider backed by in-memory state management.

Constants

provider

Default notification center provider instance.

const provider: NotificationCenterProvider

Core Interface

Implements @molecule/app-notification-center interface.

Bond Wiring

Setup function to register this provider with the core interface:

import { setProvider } from '@molecule/app-notification-center'
import { provider } from '@molecule/app-notification-center-default'

export function setupNotificationCenterDefault(): void {
  setProvider(provider)
}

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-notification-center >=1.0.1

Runtime Dependencies

  • @molecule/app-notification-center

poll(), loadMore(), and refresh() all catch their own fetch failures — the in-memory list is never wiped and the loop/promise chain never throws — but the failure is not silently discarded: it is captured into NotificationCenterState.lastError (cleared back to undefined on the next successful call of that same method) and emitted to subscribers, so a UI consumer can render a retry affordance even while a stale-but-populated list continues to display.

E2E Tests

Integration checklist — drive the real UI (live preview, no mocks), adapt each item to this app's actual screens/flows, and check every box off one by one. A box you can't check is an integration bug to fix — not a skip:

  • [ ] Unread notifications render with a distinct unread treatment vs read ones, and the unread badge/count (unreadCount / getUnreadCount()) exactly equals the number of loaded AppNotifications with read: false.
  • [ ] Clicking a notification navigates to its own actionUrl (its target, not a shared/hardcoded route) AND marks it read (markAsRead(id)): its read flag flips, it loses the unread treatment, and the badge decrements by one — and that stays after a full reload (persisted server-side, not just local state).
  • [ ] markAllAsRead() drops the unread badge to 0 and NO remaining item still shows the unread treatment; the cleared state survives a reload.
  • [ ] Applying a filter (unread-only via NotificationFilter.read / by-type via NotificationFilter.type, passed as FetchOptions.filter) renders ONLY matching notifications and the visible count reflects the filter honestly — no read items leak into an unread-only view.
  • [ ] Load-more / pagination (loadMore() following PaginatedResult.hasMore
    • nextCursor) appends OLDER notifications to the list with zero duplicates — every rendered id is unique — and the control stops once hasMore is false.
  • [ ] A notification pushed over the realtime transport (NotificationRealtimeAdapter wired via realtime / realtimeEvent, surfaced through onNotification) appears at the TOP of the list and bumps the unread badge WITHOUT any manual reload or refetch.
  • [ ] With zero notifications the panel shows a real empty state (not a blank or broken widget), and that empty state is visibly distinct from a failed fetch — a lastError renders a retry affordance, never a silent "empty".
  • [ ] A user sees ONLY their own notifications: an id belonging to another user is never listed, and cannot be reached via markAsRead(id) or the click-through actionUrl (no cross-user read/navigation).