@basenative /运行时
原生HTML的基于信号的响应式运行时——零构建步骤,零生产依赖
部分 BaseNative 生态系统——基于信号的web运行时,基于原生HTML。
安装
npm install @basenative/runtime
快速入门
import { signal, computed, effect, hydrate } from '@basenative/runtime';
// Create reactive state
const count = signal(0);
const doubled = computed(() => count() * 2);
// React to changes
effect(() => {
console.log(`count: ${count()}, doubled: ${doubled()}`);
});
count.set(5); // logs: count: 5, doubled: 10
// Hydrate server-rendered HTML with signal bindings
hydrate(document.body, { count });
API
信号
signal(initial)—创建可读/可写的响应值。调用它来读取(count()),使用.set(value)写,.peek()无迹可寻地阅读。computed(fn)-创建一个派生信号,当它的依赖改变时重新计算。懒惰的自动依赖跟踪。effect(fn)——运行fn立即运行,并在内部读取的任何信号发生变化时重新运行。返回一个dispose停止跟踪功能。batch(fn)-组信号写在里面fn转换为单次刷新,而不是每次写入一次刷新。巢;只有最外层的调用刷新。registerPlugin(plugin)-注册一个全局变量{ onSignalWrite(signal, prev, next) }观察每个信号写入的钩子。返回一个注销函数。不同于definePlugin/createPluginRegistry下面是生命周期系统。
水合作用
hydrate(root, ctx)-附加信号响应到服务器端呈现的HTML。读取<!--bn:*-->发出的标记@basenative/server.
浏览器特性
browserFeatures-包含检测到的浏览器功能标志的信号。detectBrowserFeatures()-运行特性检测和更新browserFeatures.supportsFeature(name)-对命名功能返回true/false。
诊断和DevTools
emitDiagnostic(diagnostic)-发出结构化运行时诊断。reportHydrationMismatch(info)-报告服务器/客户端HTML不匹配。enableDevtools()/disableDevtools()/isDevtoolsEnabled()-切换BaseNative devtools钩子(实时信号/效果/水合状态)globalThis.__BASENATIVE_DEVTOOLS__;创建在启用时自动注册)。trackSignal(signal)/trackEffect(effect)/recordHydration(info)- DevTools工具挂钩。
调试模式
enableDebug(options)/disableDebug()/isDebugEnabled()-为信号/效果活动切换详细控制台日志记录。关闭时零开销。getDebugStats()-返回计数器的快照(signalsCreated,effectsCreated,signalWrites,signalReads,effectRuns)。debugSignal(signal, name)/debugEffect(fn, name)-包装信号或效果,以便记录其活动。debugTime(label, fn)-时间和日志同步调用;仍运行fn并在调试模式关闭时返回其结果。debugAssert(condition, message)-投掷condition为false,并开启调试模式;关闭时完全无操作。debugDeps(signal, name)-记录信号的当前值;当调试模式关闭时,无操作。
错误的边界
createErrorBoundary(options)-创建可重复使用的边界({ onError, fallback }),try(fn)/getError()/hasError()/getFallback()/reset()。捕获呈现错误并公开回退。renderWithBoundary(renderFn, options)-单一渲染调用的单镜头版本;相同{ onError, fallback }选项,没有可重用的边界对象。如果没有,则返回到HTML注释fallback给出。
插件
definePlugin(plugin)注册一个带有生命周期钩子的运行时插件。createPluginRegistry()-创建一个独立的插件注册表。
懒惰的水合作用
lazyHydrate(el, fn)-按需水合一种元素。hydrateOnIdle(el, fn)-当浏览器空闲时通过requestIdleCallback.hydrateOnInteraction(el, fn)-在用户与元素的第一次交互时进行补水。hydrateOnMedia(fn, query)-当CSS媒体查询匹配时,会发生水合物。注意:fn首先出现,不像其他hydrateOn*帮手。createLazyHydrator(options)-创建一个懒惰的水合控制器与共享选项。
Web命脉
createVitalsReporter(options)—创建一个报告器,将核心Web生命体征发送到端点。observeLCP(cb)/observeFID(cb)/observeCLS(cb)/observeFCP(cb)/observeTTFB(cb)/observeINP(cb)-观察个别Web Vital指标。每个返回一个清理函数,或null当PerformanceObserver不可用(例如在SSR期间)。
共享实用程序(子路径导出)
raw(value)-将字符串标记为可信标记,免除html转义。也可以从包根目录中获得。@basenative/runtime/shared/escape- - - - - -isRaw,unwrapRaw,escapeText,escapeAttr,isUrlAttribute,sanitizeUrl,findInterpolations。共享的输出转义原语@basenative/server.@basenative/runtime/shared/expression- - - - - -compileExpression,evaluateExpression,clearExpressionCache,isScopeSlot,SCOPE_SLOT。共享的csp安全表达式求值器@basenative/server;看到docs/api/runtime.md了解完整的API及其安全约束。
许可证
apache - 2.0