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

@xnetjs/runtime

v0.6.0

Published

Framework-agnostic xNet runtime: createXNetClient() and sync orchestration, usable from any framework, a CLI, a worker, or a Node service

Readme

@xnetjs/runtime

The framework-agnostic xNet runtime. It owns the orchestration that used to live inside the React provider's effects so the full data model — authorization, node-format validation, signing, encryption, SQLite-backed storage, and the live query/mutate/subscribe loop — is usable from any framework, a CLI, a worker, or a plain Node service.

Alpha software. xNet is released but early: this package is on npm and usable today, but its API can change between releases, sometimes without a migration path. Pin your version. See the project README for what alpha means here.

Nothing here imports React. The @xnetjs/react hooks, the CLI, and other-framework adapters are thin bindings over this surface.

What's here

  • Sync orchestration — createSyncManager, createConnectionManager, createOfflineQueue, createNodePool, WebSocketSyncProvider, NodeStoreSyncProvider, createInitialSyncManager (relocated from @xnetjs/react; they never imported React).
  • createXNetClient(config) — a batteries-included runtime that constructs and owns the NodeStore, DataBridge (main-thread / worker / IPC), optional SyncManager, PluginRegistry, and app-wide UndoManager, and exposes the same read/write/auth surface the hooks expose.

Quick start

import { createXNetClient } from '@xnetjs/runtime'
import { MemoryNodeStorageAdapter } from '@xnetjs/data'
import { generateIdentity } from '@xnetjs/identity'

const { identity, privateKey } = generateIdentity()

const client = await createXNetClient({
  nodeStorage: new MemoryNodeStorageAdapter(),
  authorDID: identity.did,
  signingKey: privateKey
  // local-only by default; pass `sync: { signalingUrl }` to enable background sync,
  // `plugins: { platform }` for the plugin registry, `undo: {}` for app-wide undo.
})

const sub = client.query(TaskSchema, { where: { status: 'todo' } })
const unsubscribe = sub.subscribe(() => console.log(sub.getSnapshot()))

await client.mutate.create(TaskSchema, { title: 'Ship the SDK' })
const decision = await client.auth.can({ action: 'write', nodeId: '…' })

await client.destroy()

Use xNet from any framework

client.query(schema, options) returns the universal { getSnapshot, subscribe } contract — the exact pair React's useSyncExternalStore, Vue's shallowRef, a Svelte store, a Solid signal, and Angular's toSignal all bind to. liveQuery() already adapts it into the Svelte store contract, so a binding for any framework is ~15–40 lines:

// Vue
import { shallowRef, onScopeDispose } from 'vue'
import { liveQuery } from '@xnetjs/runtime'

export function useQuery(client, schema, options) {
  const lq = liveQuery(client, schema, options)
  const data = shallowRef(lq.get())
  const stop = lq.subscribe((v) => (data.value = v))
  onScopeDispose(() => {
    stop()
    lq.destroy()
  })
  return data // Ref<NodeState[] | null>
}
<!-- Svelte: liveQuery IS a store, so $-auto-subscription just works -->
<script>
  import { liveQuery } from '@xnetjs/runtime'
  const tasks = liveQuery(client, TaskSchema, { where: { status: 'todo' } })
</script>
{#each $tasks ?? [] as task}<li>{task.properties.title}</li>{/each}
// Vanilla — no framework, no adapter package
const tasks = liveQuery(client, TaskSchema)
const stop = tasks.subscribe((rows) => render(rows ?? []))
await client.mutate.create(TaskSchema, { title: 'Ship it' }) // re-renders
// later: stop(); tasks.destroy(); await client.destroy()

Validate a binding with runAdapterConformance

Behaviour is tested once, framework-agnostically. Any adapter — or your own app — can run the same contract against its client factory:

import { runAdapterConformance } from '@xnetjs/runtime'
import { MemoryNodeStorageAdapter } from '@xnetjs/data'

// Throws on the first failed check; resolves with the result otherwise.
await runAdapterConformance((overrides) =>
  createXNetClient({
    nodeStorage: new MemoryNodeStorageAdapter(),
    authorDID,
    signingKey,
    ...overrides
  })
)

It asserts the reactive data contract: an immediate live-query snapshot then updates on mutate, no delivery after unsubscribe, one-shot fetch round-trips, the authorization surface is reachable and denial surfaces, and destroy() is idempotent.

Support tiers (what "supported" means)

Per exploration 0237, framework support is layered — binding the data layer is cheap; carrying a full per-framework component ecosystem is not. The committed levels:

| Tier | Surface | Scope | | ---------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | | Tier 0 | @xnetjs/runtime — createXNetClient + liveQuery | every framework, headless; conformance-gated. This page. | | Tier 1 | @xnetjs/react — hooks and components | first-class; the app dogfoods it. | | Tier 2 | thin Vue / Svelte data-binding adapters | useQuery/useMutate only — no components — published on demand. | | — | components in non-React frameworks | not offered (@xnetjs/ui is React-only by design). |

All UI components are React. Other frameworks consume the headless runtime.

See docs/explorations/0185_* (runtime extraction) and docs/explorations/0237_* (support-tier policy) for the design rationale.