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

browser-module-runtime

v0.0.13

Published

Browser-native module runtime with scoped imports, package resolution, compilation pipelines, and declarative HTML rendering.

Readme

Current API: runtime children and dynamic rendering (0.0.13 candidate)

Use createRuntime({children:{mode:'preserve'|'once'|'none',allowOverrides?:boolean,warnOnIgnoredOverrides?:boolean}}). Defaults: preserve, overrides enabled, diagnostics disabled. runtime.html.create()/process() remain canonical. Autonomous <runtime-render module="..." component="..."> batches synchronous identity changes; a change of module/export/scope remounts, emits disposal/ready with captured identity, and reprojects fresh authored child clones in preserve. Reactive props/prop:* updates use updateProps() without remounting. HTML children-mode overrides the runtime mode only when allowed. When overrides are disabled the runtime does not read or validate override attributes (the existing generic MutationObserver still receives mutation records because prop:* keys cannot be statically enumerated). See docs/HTML_INTEGRATION.md and docs/WEB_COMPONENTS.md.


browser-module-runtime

A framework-neutral browser module runtime with a native ESM linker, independent module registries, package-source and version resolution, a pre/compile/post build pipeline, caching, and optional HTML rendering.

Install

npm install [email protected]

Runtime-bound HTML integration (0.0.13)

import {createRuntime} from 'browser-module-runtime';
const runtime=createRuntime({plugins:[/* solid(), svelte(), octane() or vue() */]});
await runtime.html.process({scope:'demo'}); // process inert HTML declarations once
// Alternatively, without initial discovery:
const controller=await runtime.html.create({scope:'demo'});
// await controller.process(); // optional explicit later scan

The stable runtime.html facade loads the browser HTML adapter lazily, reuses scoped controllers for the same runtime/root/scope, and disconnects facade-owned controllers when runtime.dispose() runs. No browser DOM access, scanning, or observer starts merely from createRuntime(). Advanced standalones remain available: import {createHTMLRuntime,processHTML} from 'browser-module-runtime/html'. Controllers remain autonomous for <runtime-render> and <runtime-element>, while inert source <script> declarations need process() or opt-in observe:true.

Define, import and update modules

import { createRuntime } from 'browser-module-runtime';

const runtime = createRuntime({
  packages: {provider: 'esm.sh', versions: {'just-versions': '0.0.1'}},
});

runtime.define('/math.js', 'export const double = n => n * 2;');
const {double} = await runtime.import('/math.js');
console.log(double(21)); // 42

await runtime.dispose();

The factory is synchronous; asynchronous plugin setup is exposed as runtime.ready. The import, compile, mount, and loadSource methods await readiness. dispose() is async.

Modules and package sources

The core supports define, defineMany, defineModule, defineUrl, import, compile, update, invalidate, remove, and clear, plus graph inspection and subscriptions. Runtime-specific package selections support esm.sh, jsDelivr, npm versions, and supported GitHub/PR locators:

const runtime = createRuntime({
  packages: {
    provider: 'esm.sh',
    versions: {
      'just-versions': '0.0.2',
      'lodash-es': 'jsdelivr:4.17.21',
      versioning: 'esm.sh:gh/mizulu/[email protected]',
    },
  },
});

Package-root mappings include supported subpath imports (for example lodash-es/debounce), subject to the source/provider's rules.

Compilers and rendering

The default source format is JavaScript. Additional formats and rendering are opt-in through plugins such as browser-runtime-solid, browser-runtime-svelte, and browser-runtime-octane.

const runtime = createRuntime({plugins: [myCompilerAndRenderer]});
runtime.define('/Widget.sample', source, {type: 'sample'});
const handle = await runtime.mount({module: '/Widget.sample', target: '#app'});
await handle.dispose();

Public exports

  • browser-module-runtime: runtime, build pipeline, cache and resolver utilities
  • browser-module-runtime/html: createHTMLRuntime and generic <runtime-render> integration
  • browser-module-runtime/packages: package policy utilities
  • browser-module-runtime/cache: compile-cache implementations

<runtime-render> mounts framework plugins into its own element. This new generic API is distinct from the older solid-tag-runtime and <solid-render> APIs; use those packages for applications requiring their existing behavior.

Scoped HTML (development branch)

import {createHTMLRuntime} from 'browser-module-runtime/html';
createHTMLRuntime(runtime,{scope:'app',root:document}); // No initial scan or observer
<runtime-render scope="app" module="/Counter.jsx" prop:initial={5}></runtime-render>

Individual prop:* attributes support typed brace-wrapped safe literals, raw strings, and boolean presence; they override bulk props and react to attribute changes. The custom element waits for the runtime and module automatically. For already parsed inert script declarations use an explicit await html.process(); choose observe:true only when discovering uncontrolled future script insertions is necessary. Use html.appendAndRegister(script) for controlled injection. See docs/SCOPED_HTML.md in the workspace. These behaviors are not part of previously published npm 0.0.4 without a new release.