browser-module-runtime
v0.0.13
Published
Browser-native module runtime with scoped imports, package resolution, compilation pipelines, and declarative HTML rendering.
Maintainers
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 scanThe 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 utilitiesbrowser-module-runtime/html:createHTMLRuntimeand generic<runtime-render>integrationbrowser-module-runtime/packages: package policy utilitiesbrowser-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.
