@lytjs/renderer 5.0.0 → 6.0.0

package/README.md

@@ -1,204 +1,371 @@
-# @lytjs/renderer
-
-Lyt.js 渲染器 - 提供 DOM、SSR、Vapor 等多种渲染模式。
-
-## 安装
-
-```bash
-npm install @lytjs/renderer
-
-# 或使用 pnpm
-pnpm add @lytjs/renderer
-```
-
-## 特性
-
-- 🌐 DOM 渲染器
-- 🚀 SSR 渲染器
-- ⚡ Vapor 无虚拟 DOM 渲染器
-- 🔌 可扩展的渲染器架构
-- 🎯 零运行时依赖
-
-## 快速开始
-
-### DOM 渲染
-
-```javascript
-import { createApp, defineComponent } from '@lytjs/core';
-import { render } from '@lytjs/renderer';
-
-const App = defineComponent({
-  setup() {
-    return { count: 0 };
-  },
-  template: `
-    <div>
-      <h1>{{ count }}</h1>
-      <button @click="count++">Increment</button>
-    </div>
-  `
-});
-
-const app = createApp(App);
-app.mount('#app');
-```
-
-### SSR 渲染
-
-```javascript
-import { createSSRApp, defineComponent } from '@lytjs/core';
-import { renderToString } from '@lytjs/renderer/ssr';
-
-const App = defineComponent({
-  template: '<div>Hello SSR!</div>'
-});
-
-const app = createSSRApp(App);
-const html = await renderToString(app);
-console.log(html);
-```
-
-### Vapor 模式
-
-Vapor 是无虚拟 DOM 的编译优化模式，性能更优：
-
-```javascript
-import { defineVaporComponent } from '@lytjs/renderer/vapor';
-
-const App = defineVaporComponent({
-  setup() {
-    const count = signal(0);
-    return { count };
-  },
-  template: `
-    <div>
-      <h1><span bind:text="count"></span></h1>
-      <button bind:onclick="() => count.set(count() + 1)">
-        Increment
-      </button>
-    </div>
-  `
-});
-```
-
-## API 参考
-
-### DOM 渲染器
-
-| API | 说明 |
-|------|------|
-| `render(vnode, container)` | 渲染 VNode 到容器 |
-| `hydrate(vnode, container)` | 激活 SSR 渲染的内容 |
-| `createRenderer(options)` | 创建自定义渲染器 |
-
-### SSR 渲染器
-
-| API | 说明 |
-|------|------|
-| `renderToString(app)` | 渲染应用到字符串 |
-| `renderToNodeStream(app)` | 渲染到 Node.js 流 |
-| `renderToWebStream(app)` | 渲染到 Web Stream |
-
-### Vapor 渲染器
-
-| API | 说明 |
-|------|------|
-| `defineVaporComponent(options)` | 定义 Vapor 组件 |
-| `createVaporApp(rootComponent)` | 创建 Vapor 应用 |
-
-## 渲染器架构
-
-### 自定义渲染器
-
-```javascript
-import { createRenderer } from '@lytjs/renderer';
-
-const { render, createApp } = createRenderer({
-  // 节点操作
-  insert: (child, parent, anchor) => { /* 自定义 */ },
-  remove: (child) => { /* 自定义 */ },
-  createElement: (tag) => { /* 自定义 */ },
-  createText: (text) => { /* 自定义 */ },
-  setElementText: (el, text) => { /* 自定义 */ },
-  patchProp: (el, key, prevValue, nextValue) => { /* 自定义 */ },
-  // ...其他钩子
-});
-```
-
-## Vapor 模式
-
-Vapor 模式通过编译时分析直接生成 DOM 操作代码，绕过虚拟 DOM：
-
-```javascript
-// Vapor 编译输出示例
-function render() {
-  const el1 = document.createElement('div');
-  const el2 = document.createElement('h1');
-  const textNode = document.createTextNode(count());
-  el2.appendChild(textNode);
-  el1.appendChild(el2);
-
-  // 响应式更新
-  effect(() => {
-    textNode.data = count();
-  });
-
-  return el1;
-}
-```
-
-## 示例
-
-### 自定义渲染器
-
-```javascript
-import { createRenderer } from '@lytjs/renderer';
-
-// Canvas 渲染器示例
-const canvasRenderer = createRenderer({
-  createElement(tag) {
-    return { type: tag };
-  },
-  insert(child, parent) {
-    parent.children = parent.children || [];
-    parent.children.push(child);
-  }
-  // ...其他实现
-});
-```
-
-### 流式 SSR
-
-```javascript
-import { createSSRApp } from '@lytjs/core';
-import { renderToNodeStream } from '@lytjs/renderer/ssr';
-import { createServer } from 'http';
-
-const App = defineComponent({ /* ... */ });
-
-createServer(async (req, res) => {
-  const app = createSSRApp(App);
-  const stream = renderToNodeStream(app);
-  res.setHeader('Content-Type', 'text/html');
-  stream.pipe(res);
-}).listen(3000);
-```
-
-## 性能
-
-- 体积：5.00 KB (ESM gzip)
-- 零运行时依赖
-- Vapor 模式性能接近原生 JS
-- SSR 支持流式渲染
-
-## 兼容性
-
-- Node.js >= 18.0.0
-- Chrome 64+
-- Firefox 63+
-- Safari 12+
-- Edge 79+
-
-## License
-
-MIT
+# @lytjs/renderer
+
+> LytJS 渲染后端，提供 DOM 渲染、SSR 渲染、Signal 渲染、Hydration 和 Island Architecture 支持
+
+## 安装
+
+```bash
+npm install @lytjs/renderer
+```
+
+## 渲染器类型
+
+### DOM 渲染器
+
+用于浏览器端的 DOM 渲染
+
+```typescript
+import { createDOMRenderer } from '@lytjs/renderer';
+
+const renderer = createDOMRenderer();
+renderer.render(vnode, document.getElementById('app'));
+```
+
+### Signal 渲染器
+
+用于细粒度响应式更新（Vapor 模式）
+
+```typescript
+import { createSignalRenderer, createVaporRenderer } from '@lytjs/renderer';
+
+// Signal 渲染器
+const signalRenderer = await createSignalRenderer();
+
+// Vapor 渲染器（Signal 渲染器的别名）
+const vaporRenderer = await createVaporRenderer();
+```
+
+### SSR 渲染器
+
+用于服务端渲染
+
+```typescript
+import { renderToString, renderToStream } from '@lytjs/renderer';
+
+// 渲染为字符串
+const html = await renderToString(vnode);
+
+// 流式渲染
+const stream = await renderToStream(vnode, {
+  onChunk: (chunk) => res.write(chunk),
+});
+```
+
+## 核心 API
+
+### createRenderer
+
+创建自定义渲染器实例
+
+```typescript
+import { createRenderer, type RendererOptions } from '@lytjs/renderer';
+
+const options: RendererOptions = {
+  createElement: (tag) => document.createElement(tag),
+  insert: (el, parent, anchor) => parent.insertBefore(el, anchor),
+  // ...
+};
+
+const renderer = createRenderer(options);
+```
+
+### createDOMRenderer
+
+创建 DOM 渲染器实例
+
+```typescript
+import { createDOMRenderer } from '@lytjs/renderer';
+
+const renderer = createDOMRenderer();
+```
+
+### patchProp / patchClass / patchStyle / patchEvent / patchAttr
+
+DOM 属性更新工具函数
+
+```typescript
+import {
+  patchProp,
+  patchClass,
+  patchStyle,
+  patchEvent,
+  patchAttr,
+  normalizeEventName,
+  getEventKey,
+  parseEventModifier,
+  createInvoker,
+} from '@lytjs/renderer';
+
+// 更新属性
+patchProp(el, 'class', prevValue, nextValue);
+
+// 更新 class
+patchClass(el, 'active visible');
+
+// 更新 style
+patchStyle(el, { color: 'red', fontSize: '14px' });
+
+// 更新事件
+patchEvent(el, 'onClick', prevHandler, nextHandler);
+```
+
+## Hydration
+
+### createHydrationFunctions
+
+创建服务端渲染 Hydration 函数
+
+```typescript
+import { createHydrationFunctions } from '@lytjs/renderer';
+
+const { hydrate, hydrateNode } = createHydrationFunctions(options);
+```
+
+## Island Architecture
+
+Island Architecture 用于在 SSR 页面中实现部分区域的客户端交互
+
+### hydrateIsland
+
+水合单个 Island 组件
+
+```typescript
+import { hydrateIsland, registerIslandComponent } from '@lytjs/renderer';
+
+// 注册 Island 组件
+await registerIslandComponent('Counter', CounterComponent);
+
+// 水合 Island
+const islandEl = document.querySelector('[data-island="Counter"]');
+await hydrateIsland(islandEl, CounterComponent, { initialCount: 0 });
+```
+
+### registerIslandComponent
+
+注册 Island 组件供后续水合使用
+
+```typescript
+import { registerIslandComponent } from '@lytjs/renderer';
+
+await registerIslandComponent('MyComponent', MyComponent);
+```
+
+### createIslandSSRContent
+
+创建 Island SSR 内容
+
+```typescript
+import { createIslandSSRContent } from '@lytjs/renderer';
+
+const html = await createIslandSSRContent(vnode, {
+  islandId: 'Counter',
+});
+```
+
+## 懒加载
+
+渲染器支持懒加载大型模块，减少初始包体积：
+
+```typescript
+// SSR 相关函数使用动态导入
+import { renderToString, renderToStream } from '@lytjs/renderer';
+
+// 这些函数会按需加载 SSR 模块
+const html = await renderToString(vnode);
+
+// Signal/Vapor 渲染器也是懒加载的
+const signalRenderer = await createSignalRenderer();
+```
+
+## 渲染器插件系统
+
+### use
+
+安装渲染器插件
+
+```typescript
+import { use, type RendererPlugin } from '@lytjs/renderer';
+
+const myPlugin: RendererPlugin = {
+  name: 'MyPlugin',
+  install(context) {
+    context.on('beforeMount', (vnode) => {
+      console.log('Before mount:', vnode);
+    });
+  },
+  beforeMount(vnode) {
+    console.log('Will mount:', vnode);
+  },
+};
+
+use(myPlugin);
+```
+
+### 插件生命周期钩子
+
+```typescript
+interface RendererPlugin {
+  name: string;
+  install: (context: PluginContext) => void;
+  beforeMount?: (vnode: VNode) => void;
+  afterMount?: (vnode: VNode, container: unknown) => void;
+  beforePatch?: (oldVNode: VNode, newVNode: VNode) => void;
+  afterPatch?: (vnode: VNode) => void;
+  beforeUnmount?: (vnode: VNode) => void;
+  afterUnmount?: (vnode: VNode) => void;
+}
+```
+
+### 插件管理
+
+```typescript
+import { use, getInstalledPlugins, isPluginInstalled, removePlugin } from '@lytjs/renderer';
+
+// 安装插件
+use(myPlugin);
+
+// 检查插件是否已安装
+if (isPluginInstalled('MyPlugin')) {
+  console.log('Plugin is installed');
+}
+
+// 获取所有已安装插件
+const plugins = getInstalledPlugins();
+
+// 移除插件
+removePlugin('MyPlugin');
+```
+
+## Vapor 模式
+
+Vapor 模式提供无虚拟 DOM 的细粒度响应式渲染
+
+### createVaporApp
+
+创建 Vapor 应用
+
+```typescript
+import { createVaporApp, defineVaporComponent } from '@lytjs/renderer';
+
+const MyComponent = await defineVaporComponent({
+  setup() {
+    const count = signal(0);
+    return () => html`<div>${count()}</div>`;
+  },
+});
+
+const app = await createVaporApp(MyComponent);
+app.mount('#app');
+```
+
+### defineVaporComponent
+
+定义 Vapor 组件
+
+```typescript
+import { defineVaporComponent } from '@lytjs/renderer';
+
+const Counter = await defineVaporComponent({
+  props: {
+    initialCount: { type: Number, default: 0 },
+  },
+  setup(props) {
+    // 组件逻辑
+  },
+});
+```
+
+## 组件资源清理
+
+```typescript
+import {
+  registerComponentEventListener,
+  registerComponentEffectSubscription,
+  registerComponentCleanup,
+  cleanupComponentResources,
+} from '@lytjs/renderer';
+
+// 注册事件监听器（卸载时自动清理）
+registerComponentEventListener(instance, target, 'click', handler);
+
+// 注册 effect 订阅（卸载时自动清理）
+registerComponentEffectSubscription(instance, subscription);
+
+// 注册自定义清理函数
+registerComponentCleanup(instance, () => {
+  // 清理逻辑
+});
+
+// 手动清理所有资源
+cleanupComponentResources(instance);
+```
+
+## 首次渲染优化
+
+```typescript
+import {
+  withFirstRenderOptimization,
+  shouldSkipTracking,
+  getSkippedTrackingCount,
+  resetSkippedTrackingCount,
+} from '@lytjs/renderer';
+
+// 使用首次渲染优化
+withFirstRenderOptimization(() => {
+  // 首次渲染时跳过不必要的追踪
+});
+
+// 检查是否跳过追踪
+if (shouldSkipTracking()) {
+  console.log('Tracking is skipped');
+}
+```
+
+## 工具函数
+
+```typescript
+import { escapeHtml, isBooleanAttr, isVoidElement } from '@lytjs/renderer';
+
+// HTML 转义
+const safe = escapeHtml('<script>alert("xss")</script>');
+
+// 检查布尔属性
+if (isBooleanAttr('disabled')) {
+  // 处理布尔属性
+}
+
+// 检查自闭合标签
+if (isVoidElement('img')) {
+  // 自闭合标签处理
+}
+```
+
+## 类型定义
+
+```typescript
+import type {
+  VNode,
+  RendererOptions,
+  RendererPlugin,
+  PluginContext,
+  LifecycleEvent,
+  DOMRenderer,
+  SignalRenderer,
+  VaporRenderer,
+  VaporApp,
+  VaporComponentOptions,
+  HydrationRenderer,
+  RendererHost,
+  HostRect,
+  HostStyleDeclaration,
+  HostEvent,
+  HostEventHandler,
+} from '@lytjs/renderer';
+```
+
+## 相关包
+
+- [@lytjs/vdom](../vdom) - 虚拟 DOM 实现，渲染器的基础
+- [@lytjs/core](../core) - 框架核心入口，整合所有子包
+- [@lytjs/adapter-web](../adapter-web) - Web 平台适配器
+- [@lytjs/host-contract](../host-contract) - 渲染器宿主抽象

package/dist/dom.cjs

@@ -1 +1,12 @@
-"use strict";var P=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var ye=Object.prototype.hasOwnProperty;var me=(n,e)=>{for(var t in e)P(n,t,{get:e[t],enumerable:!0})},ve=(n,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ue(e))!ye.call(n,r)&&r!==t&&P(n,r,{get:()=>e[r],enumerable:!(o=pe(e,r))||o.enumerable});return n};var he=n=>ve(P({},"__esModule",{value:!0}),n);var we={};me(we,{Comment:()=>W,DOMRenderer:()=>T,Fragment:()=>D,PatchFlags:()=>R,PatchPropFlags:()=>u.PatchFlags,ShapeFlags:()=>m,Text:()=>M,createInvoker:()=>Y,createRenderer:()=>ee,domRenderer:()=>de,getEventInvokers:()=>se,getEventKey:()=>B,getSVGPropName:()=>ie,isSVGElement:()=>w,normalizeEventName:()=>_,parseEventModifier:()=>G,patchAllProps:()=>C,patchClass:()=>L,patchDOMProp:()=>z,patchDOMProps:()=>re,patchElementProps:()=>fe,patchEvent:()=>g,patchEventOnElement:()=>le,patchProp:()=>y,patchStyle:()=>x,removeAllEventListeners:()=>I,removeDOMProp:()=>N,setDOMProp:()=>h});module.exports=he(we);var Z=require("@lytjs/vdom");var m=(s=>(s[s.ELEMENT=1]="ELEMENT",s[s.FUNCTIONAL_COMPONENT=2]="FUNCTIONAL_COMPONENT",s[s.STATEFUL_COMPONENT=4]="STATEFUL_COMPONENT",s[s.TEXT_CHILDREN=8]="TEXT_CHILDREN",s[s.ARRAY_CHILDREN=16]="ARRAY_CHILDREN",s[s.SLOTS_CHILDREN=32]="SLOTS_CHILDREN",s))(m||{}),R=(l=>(l[l.TEXT=1]="TEXT",l[l.CLASS=2]="CLASS",l[l.STYLE=4]="STYLE",l[l.PROPS=8]="PROPS",l[l.FULL_PROPS=16]="FULL_PROPS",l[l.STABLE_FRAGMENT=32]="STABLE_FRAGMENT",l[l.KEYED_FRAGMENT=64]="KEYED_FRAGMENT",l[l.UNKEYED_FRAGMENT=128]="UNKEYED_FRAGMENT",l[l.NEED_PATCH=256]="NEED_PATCH",l[l.DYNAMIC_SLOTS=512]="DYNAMIC_SLOTS",l[l.HOISTED=-1]="HOISTED",l[l.BAIL=-2]="BAIL",l))(R||{}),D=Symbol("Fragment"),M=Symbol("Text"),W=Symbol("Comment");function v(n){return n.type===D}function V(n){return n.type===M}function b(n){return n.type===W}function q(n,e){return n.type===e.type&&n.key===e.key}function K(n){return Array.isArray(n.dynamicChildren)}function $(n,e,t,o){if(t==="class")n.setClass(e,o);else if(t==="style")n.setStyle(e,o);else if(t.startsWith("on")||t.startsWith("@")){let r=t.startsWith("@")?t.slice(1).toLowerCase():t.slice(2).toLowerCase();n.addEventListener(e,r,o)}else t==="key"||t==="ref"||n.setAttribute(e,t,o)}function j(n,e,t,o,r){if(t==="class")n.setClass(e,o);else if(t==="style")n.setStyle(e,o||{});else if(t.startsWith("on")||t.startsWith("@")){let i=t.startsWith("@")?t.slice(1).toLowerCase():t.slice(2).toLowerCase();r&&n.removeEventListener(e,i,r),o&&n.addEventListener(e,i,o)}else n.setAttribute(e,t,o)}function H(n,e,t,o){for(let r in o){if(r==="key"||r==="ref")continue;let i=t[r],s=o[r];s!==i&&j(n,e,r,s,i)}for(let r in t)if(!(r==="key"||r==="ref")&&!(r in o))if(r==="class")n.setClass(e,"");else if(r==="style")n.setStyle(e,{});else if(r.startsWith("on")||r.startsWith("@")){let i=r.startsWith("@")?r.slice(1).toLowerCase():r.slice(2).toLowerCase();n.removeEventListener(e,i,t[r])}else n.removeAttribute(e,r)}function F(n,e,t,o,r,i){let{shapeFlag:s}=t;if(v(t)){Ee(n,e,t,o,r,i);return}if(V(t)){let a=n.createText(t.children);t.el=a,n.insert(o,a,r);return}if(b(t)){let a=n.createComment(t.children);t.el=a,n.insert(o,a,r);return}if(s&1){Ne(n,e,t,o,r,i);return}if(s&6){ge(e,t,o,r,i);return}}function Ne(n,e,t,o,r,i){let s=t.type,a=n.createElement(s);if(t.el=a,t.props)for(let d in t.props){let p=t.props[d];$(n,a,d,p)}let{shapeFlag:c,children:f}=t;c&8?a.textContent=f:c&16&&A(e,f,a,null,i),n.insert(o,a,r)}function A(n,e,t,o,r){for(let i=0;i<e.length;i++)n(null,e[i],t,o,r)}function Ee(n,e,t,o,r,i){let{children:s}=t,a=n.createComment("");n.insert(o,a,r),Array.isArray(s)&&s.length>0&&A(e,s,o,a,i),t.el=a,t.anchor=a}function ge(n,e,t,o,r){let i=e.component;i&&i.update&&i.update(),i&&i.subTree&&(n(null,i.subTree,t,o,i),e.el=i.subTree.el)}function J(n,e,t,o){let{shapeFlag:r,children:i}=t;if(v(t)){if(Array.isArray(i))for(let s=0;s<i.length;s++)e(i[s],o);t.anchor&&t.anchor.parentNode&&n.remove(t.anchor);return}if(r&6){t.component&&t.component.subTree&&e(t.component.subTree,o);return}t.el&&n.remove(t.el)}function O(n,e){for(let t=0;t<e.length;t++)n(e[t])}var k=require("@lytjs/vdom");function S(n,e,t,o,r,i=null,s=null){if(o==null){t&&e(t,r);return}if(t===null){F(n,U(n,e),o,r,i,s);return}if(K(o)&&K(t)){Te(n,e,t,o,r,s);return}if(!q(t,o)){e(t,r),F(n,U(n,e),o,r,i,s);return}o.el=t.el,o.anchor=t.anchor;let{shapeFlag:a}=o;if(v(o)){xe(n,e,t,o,r,i,s);return}if(V(o)){o.children!==t.children&&(o.el.nodeValue=o.children);return}if(b(o)){o.children!==t.children&&(o.el.nodeValue=o.children);return}if(a&1){Ce(n,e,t,o,s);return}if(a&6){Re(t,o,s);return}}function U(n,e){return(t,o,r,i,s)=>{S(n,e,t,o,r,i,s)}}function Ce(n,e,t,o,r=null){let i=o.el=t.el,s=t.props||{},a=o.props||{},{patchFlag:c,dynamicProps:f}=o;if(c&&c>0){if(c&1&&t.children!==o.children&&(i.textContent=o.children),c&2&&s.class!==a.class&&n.setClass(i,a.class),c&4&&s.style!==a.style&&n.setStyle(i,a.style||{}),c&8&&f)for(let d=0;d<f.length;d++){let p=f[d],l=s[p],X=a[p];X!==l&&j(n,i,p,X,l)}c&16&&H(n,i,s,a)}else H(n,i,s,a);(!c||!(c&1))&&Q(n,e,t,o,i,null,r)}function Q(n,e,t,o,r,i,s){let a=t.shapeFlag,c=o.shapeFlag,f=t.children,d=o.children;if(c&8){a&16&&O(e,f),f!==d&&(r.textContent=d);return}if(c&16){a&16?Le(n,e,f,d,r,i,s):(a&8&&(r.textContent=""),A(U(n,e),d,r,i,s));return}d==null&&(a&8?r.textContent="":a&16&&O(e,f))}function Le(n,e,t,o,r,i,s){o.every(c=>c.key!==null&&c.key!==void 0)&&t.every(c=>c.key!==null&&c.key!==void 0)?(0,k.patchKeyedChildren)(t,o,r,i,s,null,!1):(0,k.patchUnkeyedChildren)(t,o,r,i,s,null,!1)}function xe(n,e,t,o,r,i,s){let a=t.children,c=o.children;Array.isArray(c)&&c.length>0?(Q(n,e,t,o,r,i,s),o.el=c[0].el,o.anchor=c[c.length-1].el?n.nextSibling(c[c.length-1].el):i):Array.isArray(a)&&a.length>0&&c===null?(O(e,a),o.el=t.el,o.anchor=t.anchor):(o.el=t.el,o.anchor=t.anchor)}function Te(n,e,t,o,r,i){let s=t.dynamicChildren,a=o.dynamicChildren;for(let c=0;c<a.length;c++)S(n,e,s[c],a[c],r,null,i)}function Re(n,e,t){e.component=n.component,e.el=n.el,e.component&&e.component.update&&e.component.update()}function ee(n){function e(r,i){J(n,e,r,i)}(0,Z.registerDOMOperations)({insert(r,i,s){n.insert(i,r,s)},createElement(r){return n.createElement(r)},createText(r){return n.createText(r)},setText(r,i){r.nodeValue=i},setElementText(r,i){r.textContent=i},remove(r){n.remove(r)},createComment(r){return n.createComment(r)},mount(r,i,s,a,c,f,d){o(null,r,i,s,a)},patch(r,i,s,a,c,f,d,p){o(r,i,s,a,c)},unmount(r,i,s,a){e(r)},move(r,i,s){n.insert(i,r.el,s)}});function o(r,i,s,a,c){S(n,e,r,i,s,a,c)}return{mount(r,i){i.nodeType===1&&(i.textContent=""),o(null,r,i,null,null)},patch(r,i,s){var a;o(r,i,s||((a=r.el)==null?void 0:a.parentNode),null,null)},unmount(r,i){e(r,i)}}}var ne={acceptCharset:"acceptCharset",accessKey:"accessKey",className:"className",htmlFor:"htmlFor",httpEquiv:"httpEquiv",tabIndex:"tabIndex"},oe={allowfullscreen:!0,async:!0,autofocus:!0,autoplay:!0,checked:!0,controls:!0,default:!0,defer:!0,disabled:!0,formnovalidate:!0,hidden:!0,inert:!0,ismap:!0,itemscope:!0,loop:!0,multiple:!0,muted:!0,nomodule:!0,novalidate:!0,open:!0,playsinline:!0,readonly:!0,required:!0,reversed:!0,selected:!0},Ve={"accent-height":"accentHeight","alignment-baseline":"alignmentBaseline","baseline-shift":"baselineShift","clip-path":"clipPath","clip-rule":"clipRule","color-interpolation":"colorInterpolation","color-interpolation-filters":"colorInterpolationFilters","dominant-baseline":"dominantBaseline","enable-background":"enableBackground","fill-opacity":"fillOpacity","fill-rule":"fillRule","flood-color":"floodColor","flood-opacity":"floodOpacity","glyph-orientation-horizontal":"glyphOrientationHorizontal","glyph-orientation-vertical":"glyphOrientationVertical","font-family":"fontFamily","font-size":"fontSize","font-style":"fontStyle","font-variant":"fontVariant","font-weight":"fontWeight","image-rendering":"imageRendering","letter-spacing":"letterSpacing","lighting-color":"lightingColor","marker-end":"markerEnd","marker-mid":"markerMid","marker-start":"markerStart","paint-order":"paintOrder","pointer-events":"pointerEvents","shape-rendering":"shapeRendering","stop-color":"stopColor","stop-opacity":"stopOpacity","stroke-dasharray":"strokeDasharray","stroke-dashoffset":"strokeDashoffset","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","stroke-miterlimit":"strokeMiterlimit","stroke-opacity":"strokeOpacity","stroke-width":"strokeWidth","text-anchor":"textAnchor","text-decoration":"textDecoration","text-rendering":"textRendering","transform-origin":"transformOrigin","word-spacing":"wordSpacing","writing-mode":"writingMode","xlink:href":"xlinkHref","xlink:title":"xlinkTitle","xml:lang":"xmlLang","xml:space":"xmlSpace"};function h(n,e,t){if(e==="class"){n.className=t==null?"":String(t);return}if(e==="style"){if(typeof t=="string")n.style.cssText=t;else if(t!=null&&typeof t=="object")for(let r in t)n.style[r]=t[r];else n.style.cssText="";return}if(e.startsWith("on")||e.startsWith("@")){let r=e.startsWith("@")?e.slice(1).toLowerCase():e.slice(2).toLowerCase();typeof t=="function"&&n.addEventListener(r,t);return}if(e in oe){t?(n.setAttribute(e,""),e in n&&(n[e]=!0)):(n.removeAttribute(e),e in n&&(n[e]=!1));return}let o=ne[e]||e;if(o in n){try{n[o]=t==null?"":t}catch(r){n.setAttribute(e,t==null?"":String(t))}return}t==null||t===!1?n.removeAttribute(e):n.setAttribute(e,String(t))}function N(n,e){if(e==="class"){n.className="";return}if(e==="style"){n.style.cssText="";return}if(e.startsWith("on")||e.startsWith("@")){let o=e.startsWith("@")?e.slice(1).toLowerCase():e.slice(2).toLowerCase(),r=n._vei;if(r){let i="on"+o.charAt(0).toUpperCase()+o.slice(1),s=r[i];s&&(n.removeEventListener(o,s),r[i]=void 0)}return}if(e in oe){n.removeAttribute(e),e in n&&(n[e]=!1);return}let t=ne[e]||e;if(t in n){try{n[t]=""}catch(o){n.removeAttribute(e)}return}n.removeAttribute(e)}function te(n){return n.startsWith("on")||n.startsWith("@")}function re(n,e,t){let o=e?Object.keys(e):[],r=t?Object.keys(t):[];for(let i=0;i<r.length;i++){let s=r[i],a=t[s],c=e?e[s]:void 0;s==="key"||s==="ref"||a!==c&&(s==="class"?n.className=a==null?"":String(a):s==="style"?be(n,a,c):te(s)||h(n,s,a))}for(let i=0;i<o.length;i++){let s=o[i];s==="key"||s==="ref"||(!t||!(s in t))&&(s==="class"?n.className="":s==="style"?n.style.cssText="":te(s)||N(n,s))}}function be(n,e,t){if(!e||typeof e=="string"&&!e.trim()){n.style.cssText="";return}if(typeof e=="string"){n.style.cssText=e;return}if(typeof t=="object"&&t!==null)for(let o in t)o in e||(n.style[o]="");for(let o in e)n.style[o]=e[o]}function w(n){return n==="svg"||n==="path"||n==="circle"||n==="rect"||n==="line"||n==="polyline"||n==="polygon"||n==="ellipse"||n==="g"||n==="defs"||n==="use"||n==="text"||n==="tspan"||n==="clipPath"||n==="mask"||n==="filter"||n==="linearGradient"||n==="radialGradient"||n==="stop"||n==="pattern"||n==="symbol"||n==="image"||n==="foreignObject"||n==="animate"||n==="animateTransform"||n==="animateMotion"}function ie(n){return Ve[n]||n}var Ae=/^(?:@|on)/;function _(n){return n.replace(Ae,"").toLowerCase()}function B(n){let e=_(n);return"on"+e.charAt(0).toUpperCase()+e.slice(1)}var Oe={stop:"stop",prevent:"prevent",capture:"capture",once:"once",self:"self",passive:"passive"};function G(n){let e=n.split("."),o={name:e[0],stop:!1,prevent:!1,capture:!1,once:!1,self:!1,passive:!1};for(let r=1;r<e.length;r++){let i=e[r],s=Oe[i];s&&(o[s]=!0)}return o}function Y(n){let e=(t=>{e.value&&e.value(t)});return e.value=n,e}var E="_vei";function se(n){return n[E]||null}function g(n,e,t,o,r){let i=B(e),s=G(_(e)),a=s.name,c=n[E];c||(c=n[E]={});let f=c[i];if(t&&f)f.value=t;else if(t&&!f){let d=Y(t);c[i]=d;let p={};s.capture&&(p.capture=!0),s.once&&(p.once=!0),s.passive&&(p.passive=!0),n.addEventListener(a,d,p)}else!t&&f&&(n.removeEventListener(a,f),c[i]=void 0)}function I(n){let e=n[E];if(e){for(let t in e){let o=e[t];if(o){let r=t.charAt(2).toLowerCase()+t.slice(3);n.removeEventListener(r,o)}}n[E]={}}}var u=require("@lytjs/vdom");function L(n,e,t){let o=ce(e);o!==t&&(n.className=o)}function ce(n){if(n==null)return"";if(typeof n=="string")return n;if(typeof n=="object"){if(Array.isArray(n)){let t="";for(let o=0;o<n.length;o++){let r=ce(n[o]);r&&(t+=(t?" ":"")+r)}return t}let e="";for(let t in n)n[t]&&(e+=(e?" ":"")+t);return e}return String(n)}function x(n,e,t){if(!e){n.style.cssText="";return}if(!t){typeof e=="string"?n.style.cssText=e:typeof e=="object"&&ae(n,e);return}if(typeof e!=typeof t){n.style.cssText="",typeof e=="string"?n.style.cssText=e:typeof e=="object"&&ae(n,e);return}if(typeof e=="string"){e!==t&&(n.style.cssText=e);return}if(typeof e=="object"&&typeof t=="object"){for(let o in t)o in e||(n.style[o]="");for(let o in e){let r=e[o],i=t[o];r!==i&&(n.style[o]=r==null?"":r)}}}function ae(n,e){for(let t in e)n.style[t]=e[t]===null||e[t]===void 0?"":e[t]}function le(n,e,t,o){g(n,"",e,t,o)}var ke=new Set(["class","style","key","ref"]);function Se(n){return n.length>2&&(n[0]==="o"||n[0]==="O"||n[0]==="@")&&(n[1]==="n"||n[1]==="N")}function z(n,e,t,o,r){if(!ke.has(e)){if(Se(e)){g(n,e,t,o,r);return}if(t===!1||t===null||t===void 0){n.removeAttribute(e);return}if(e in n)try{n[e]=t}catch(i){n.setAttribute(e,String(t))}else n.setAttribute(e,String(t))}}function y(n,e,t,o,r){z(n,e,t,o,r)}function C(n,e,t,o){if(t)for(let r in t){if(r==="key"||r==="ref")continue;let i=t[r],s=e?e[r]:void 0;i!==s&&y(n,r,i,s,o)}if(e)for(let r in e)r==="key"||r==="ref"||(!t||!(r in t))&&y(n,r,null,e[r],o)}function fe(n,e,t,o){let r=e.props||{},i=t.props||{},{patchFlag:s,dynamicProps:a}=t;if(!s||s===u.PatchFlags.HOISTED){C(n,r,i,o);return}if(s===u.PatchFlags.BAIL){C(n,r,i,o);return}if(s&u.PatchFlags.TEXT&&e.children!==t.children&&(n.textContent=t.children),s&u.PatchFlags.CLASS&&r.class!==i.class&&L(n,i.class,r.class),s&u.PatchFlags.STYLE&&r.style!==i.style&&x(n,i.style,r.style),s&u.PatchFlags.PROPS&&a)for(let c=0;c<a.length;c++){let f=a[c],d=r[f],p=i[f];p!==d&&y(n,f,p,d,o)}s&u.PatchFlags.FULL_PROPS&&C(n,r,i,o)}var T=class{createElement(e){return w(e)?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e)}createText(e){return document.createTextNode(e)}createComment(e){return document.createComment(e)}setAttribute(e,t,o){h(e,t,o)}removeAttribute(e,t){N(e,t)}setStyle(e,t){if(typeof t=="string")e.style.cssText=t;else if(t&&typeof t=="object")for(let o in t)e.style[o]=t[o]}setClass(e,t){if(typeof t=="string")e.className=t;else if(t&&typeof t=="object"){let o="";for(let r in t)t[r]&&(o+=(o?" ":"")+r);e.className=o}else e.className=""}insert(e,t,o){o!=null?e.insertBefore(t,o):e.appendChild(t)}remove(e){e.parentNode&&e.parentNode.removeChild(e)}replace(e,t,o){e.replaceChild(o,t)}addEventListener(e,t,o,r){e.addEventListener(t,o,r)}removeEventListener(e,t,o){e.removeEventListener(t,o)}nextTick(e){Promise.resolve().then(e)}parentNode(e){return e.parentNode}nextSibling(e){return e.nextSibling}querySelector(e){return document.querySelector(e)}setClassWithOld(e,t,o){L(e,t,o)}setStyleWithOld(e,t,o){x(e,t,o)}setAttributeWithOld(e,t,o,r){y(e,t,o,r)}setElementText(e,t){e.textContent=t}setText(e,t){e.nodeValue=t}insertBefore(e,t,o){o!=null?e.insertBefore(t,o):e.appendChild(t)}removeChild(e,t){e.removeChild(t)}setAnchor(e,t){e.anchor=t}getNextSibling(e){return e.nextSibling}cleanupEvents(e){I(e)}},de=new T;
+'use strict';
+
+var adapterWeb = require('@lytjs/adapter-web');
+
+
+
+Object.defineProperty(exports, "createDOMRenderer", {
+  enumerable: true,
+  get: function () { return adapterWeb.createDOMRenderer; }
+});
+//# sourceMappingURL=dom.cjs.map
+//# sourceMappingURL=dom.cjs.map

package/dist/dom.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dom.cjs","sourcesContent":[]}

package/dist/dom.d.cts

@@ -0,0 +1 @@
+export { DOMRenderer, createDOMRenderer } from '@lytjs/adapter-web';

package/dist/dom.d.ts

@@ -0,0 +1 @@
+export { DOMRenderer, createDOMRenderer } from '@lytjs/adapter-web';