@lytjs/renderer 3.1.0

package/dist/types/vapor/vapor-renderer.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Lyt.js Vapor Mode - 渲染器
+ *
+ * Vapor Mode 绕过虚拟 DOM，直接操作真实 DOM。
+ * 每个 VaporNode 代表一个直接的 DOM 绑定关系，
+ * 当响应式信号变化时，只更新受影响的 DOM 节点。
+ *
+ * 核心思想：
+ *   - 无 VNode 中间层，直接创建 DOM 元素
+ *   - 无 diff 算法，每个绑定精确知道要更新哪个 DOM 节点
+ *   - 信号变化时，直接操作对应的 DOM 属性
+ */
+import type { Signal } from '@lytjs/reactivity/signal';
+import type { VaporElement, BindingCleanup } from './vapor-reactive';
+import { bindText, bindProp, bindAttr, bindClass, bindEvent, bindIf, bindEach } from './vapor-reactive';
+/** Vapor 绑定类型 */
+export type VaporBindingType = 'text' | 'prop' | 'attr' | 'class' | 'style' | 'event';
+/** Vapor 绑定描述 */
+export interface VaporBinding {
+    /** 绑定类型 */
+    type: VaporBindingType;
+    /** 目标属性名或事件名 */
+    target: string;
+    /** 绑定的响应式信号 */
+    signal?: Signal<any>;
+    /** 计算值表达式 */
+    expression?: () => any;
+}
+/** Vapor 节点 — 代表一个直接 DOM 绑定 */
+export interface VaporNode {
+    /** HTML 标签名 */
+    tag: string;
+    /** 关联的真实 DOM 元素 */
+    el?: VaporElement;
+    /** 子节点 */
+    children: VaporNode[];
+    /** 静态属性 */
+    props: Record<string, any>;
+    /** 事件处理器 */
+    events: Record<string, Function>;
+    /** 响应式绑定列表 */
+    bindings: VaporBinding[];
+    /** 文本内容（静态） */
+    text?: string;
+    /** 节点 key（用于列表渲染） */
+    key?: string | number;
+}
+/** Vapor 挂载容器接口 */
+export interface VaporContainer {
+    appendChild(child: VaporElement): void;
+    removeChild(child: VaporElement): void;
+    childNodes: VaporElement[];
+    firstChild: VaporElement | null;
+}
+/** Vapor 组件选项 */
+export interface VaporComponentOptions {
+    /** 组件名称 */
+    name?: string;
+    /** 初始化函数，返回组件上下文 */
+    setup?: () => Record<string, any>;
+    /** 渲染函数，接收上下文和 createElement 函数 */
+    render?: (ctx: Record<string, any>, h: typeof createVaporElement) => VaporNode | VaporNode[];
+    /** 模板字符串（需要编译器） */
+    template?: string;
+    /** 子组件 */
+    components?: Record<string, VaporComponentOptions>;
+    /** 挂载前 */
+    beforeMount?: () => void;
+    /** 挂载后 */
+    mounted?: () => void;
+    /** 卸载前 */
+    beforeUnmount?: () => void;
+    /** 卸载后 */
+    unmounted?: () => void;
+}
+/** Vapor App 实例 */
+export interface VaporApp {
+    /** 挂载到容器 */
+    mount(container: VaporContainer | string): void;
+    /** 卸载 */
+    unmount(): void;
+}
+/**
+ * 设置自定义 DOM 工厂函数（用于测试环境）
+ */
+export declare function setVaporDOMFactory(factory: (tag: string) => VaporElement): void;
+/**
+ * 获取当前 DOM 工厂函数
+ */
+export declare function getVaporDOMFactory(): (tag: string) => VaporElement;
+/**
+ * 创建 Vapor 元素
+ *
+ * 直接创建 DOM 元素并应用静态属性，不涉及 VNode。
+ *
+ * @param tag       HTML 标签名
+ * @param props     属性对象（可包含信号绑定）
+ * @param children  子节点
+ * @returns VaporNode
+ */
+export declare function createVaporElement(tag: string, props?: Record<string, any>, ...children: (VaporNode | string)[]): VaporNode;
+/**
+ * 将 VaporNode 渲染为真实 DOM 元素
+ *
+ * 直接创建 DOM 元素树，并建立信号绑定。
+ *
+ * @param node  VaporNode
+ * @returns 渲染后的 DOM 元素
+ */
+export declare function renderVaporNode(node: VaporNode): VaporElement;
+/**
+ * Vapor Patch — 直接 DOM 更新，无 VDOM diff
+ *
+ * 与传统 VDOM patch 不同，Vapor patch 直接操作 DOM：
+ *   - 如果 tag 相同，更新属性和绑定
+ *   - 如果 tag 不同，替换整个 DOM 元素
+ *
+ * @param oldNode  旧的 VaporNode
+ * @param newNode  新的 VaporNode
+ * @param parentEl 父 DOM 元素
+ */
+export declare function vaporPatch(oldNode: VaporNode, newNode: VaporNode, parentEl: VaporElement): void;
+/**
+ * 使用 Vapor Mode 挂载组件到容器
+ *
+ * @param container  挂载容器
+ * @param component  组件选项
+ * @returns 卸载函数
+ */
+export declare function vaporMount(container: VaporContainer, component: VaporComponentOptions): () => void;
+export { bindText, bindProp, bindAttr, bindClass, bindEvent, bindIf, bindEach, };
+export type { VaporElement, BindingCleanup, };
+//# sourceMappingURL=vapor-renderer.d.ts.map

package/dist/types/vapor/vapor-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vapor-renderer.d.ts","sourceRoot":"","sources":["../../../src/vapor/vapor-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACpE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,kBAAkB,CAAA;AAMzB,iBAAiB;AACjB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAErF,iBAAiB;AACjB,MAAM,WAAW,YAAY;IAC3B,WAAW;IACX,IAAI,EAAE,gBAAgB,CAAA;IACtB,gBAAgB;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAA;IACpB,aAAa;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,CAAA;CACvB;AAED,+BAA+B;AAC/B,MAAM,WAAW,SAAS;IACxB,eAAe;IACf,GAAG,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB,UAAU;IACV,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,WAAW;IACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,YAAY;IACZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAChC,cAAc;IACd,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,eAAe;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAED,mBAAmB;AACnB,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;IACtC,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;IACtC,UAAU,EAAE,YAAY,EAAE,CAAA;IAC1B,UAAU,EAAE,YAAY,GAAG,IAAI,CAAA;CAChC;AAED,iBAAiB;AACjB,MAAM,WAAW,qBAAqB;IACpC,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACjC,mCAAmC;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,OAAO,kBAAkB,KAAK,SAAS,GAAG,SAAS,EAAE,CAAA;IAC5F,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU;IACV,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;IAClD,UAAU;IACV,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,UAAU;IACV,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU;IACV,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU;IACV,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,mBAAmB;AACnB,MAAM,WAAW,QAAQ;IACvB,YAAY;IACZ,KAAK,CAAC,SAAS,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAAA;IAC/C,SAAS;IACT,OAAO,IAAI,IAAI,CAAA;CAChB;AAoBD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAE/E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,CAAC,GAAG,EAAE,MAAM,KAAK,YAAY,CAElE;AAMD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3B,GAAG,QAAQ,EAAE,CAAC,SAAS,GAAG,MAAM,CAAC,EAAE,GAClC,SAAS,CAiDX;AAkBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,CAqD7D;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,YAAY,GACrB,IAAI,CAsEN;AAMD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,qBAAqB,GAC/B,MAAM,IAAI,CAiCZ;AAMD,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,GACT,CAAA;AAED,YAAY,EACV,YAAY,EACZ,cAAc,GACf,CAAA"}

package/dist/types/vnode.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Lyt.js 渲染器 — VNode 最小接口定义与辅助类型
+ *
+ * 本模块定义了渲染器所需的 VNode 接口、形状标记、补丁标记，
+ * 以及 Fragment/Text/Comment 类型标识符和辅助判断函数。
+ */
+/**
+ * VNode 最小接口
+ *
+ * 本地定义渲染器所需的 VNode 字段，不依赖 @lytjs/vdom 包。
+ * 完整的 VNode 类型由 @lytjs/vdom 提供，此处仅声明渲染器使用到的字段。
+ *
+ * 在 monorepo 中，可以使用 import type 从 @lytjs/vdom 导入完整类型，
+ * 但为了保持渲染器包的独立性，此处定义最小接口。
+ */
+export interface VNode {
+    /** 节点类型：HTML 标签字符串 | 组件对象 | Symbol（Fragment/Text/Comment） */
+    type: string | object | symbol;
+    /** 节点属性 */
+    props: Record<string, any> | null;
+    /** 子节点：文本字符串 | VNode 数组 | 插槽对象 */
+    children: string | VNode[] | Record<string, any> | null;
+    /** 节点的唯一标识，用于列表 diff */
+    key: string | number | null;
+    /** ref 回调或 ref 对象 */
+    ref: any;
+    /** 形状标记，描述节点类型和子节点形态 */
+    shapeFlag: number;
+    /** PatchFlag，标记哪些 props 是动态的 */
+    patchFlag: number;
+    /** 动态子节点列表（Block Tree 优化） */
+    dynamicChildren: VNode[] | null;
+    /** 动态 props 的键名列表 */
+    dynamicProps: string[] | null;
+    /** 关联的组件实例 */
+    component: any;
+    /** 应用上下文（用于 provide/inject 等跨层级通信） */
+    appContext: Record<string, any> | null;
+    /** 对应的真实 DOM 元素引用 */
+    el: any;
+    /** Fragment 锚点 */
+    anchor: any;
+}
+/**
+ * VNode 形状标记
+ *
+ * 使用位标记描述 VNode 的类型和子节点形态。
+ * 与 @lytjs/vdom 的 ShapeFlags 保持一致。
+ */
+export declare const enum ShapeFlags {
+    /** 普通 HTML/SVG 元素 */
+    ELEMENT = 1,
+    /** 函数式组件 */
+    FUNCTIONAL_COMPONENT = 2,
+    /** 有状态组件 */
+    STATEFUL_COMPONENT = 4,
+    /** 子节点是纯文本 */
+    TEXT_CHILDREN = 8,
+    /** 子节点是数组 */
+    ARRAY_CHILDREN = 16,
+    /** 子节点是插槽 */
+    SLOTS_CHILDREN = 32
+}
+/**
+ * PatchFlag 位标记
+ *
+ * 与 @lytjs/vdom 的 PatchFlags 保持一致。
+ */
+export declare const enum PatchFlags {
+    /** 动态文本 */
+    TEXT = 1,
+    /** 动态 class */
+    CLASS = 2,
+    /** 动态 style */
+    STYLE = 4,
+    /** 动态 props */
+    PROPS = 8,
+    /** 动态 props，键名可能变化 */
+    FULL_PROPS = 16,
+    /** 稳定的 Fragment */
+    STABLE_FRAGMENT = 32,
+    /** 带 key 的 Fragment */
+    KEYED_FRAGMENT = 64,
+    /** 不带 key 的 Fragment */
+    UNKEYED_FRAGMENT = 128,
+    /** 需要 patch */
+    NEED_PATCH = 256,
+    /** 动态插槽 */
+    DYNAMIC_SLOTS = 512,
+    /** 静态提升 */
+    HOISTED = -1,
+    /** 退出优化 */
+    BAIL = -2
+}
+/**
+ * Fragment 类型标识符
+ *
+ * Fragment 用于表示一组没有父容器的子节点。
+ * 本地定义以避免依赖 @lytjs/vdom 包。
+ */
+export declare const Fragment: unique symbol;
+/**
+ * Text 类型标识符
+ */
+export declare const Text: unique symbol;
+/**
+ * Comment 类型标识符
+ */
+export declare const Comment: unique symbol;
+/**
+ * 判断 VNode 是否为 Fragment 类型
+ */
+export declare function isFragment(vnode: VNode): boolean;
+/**
+ * 判断 VNode 是否为文本类型
+ */
+export declare function isTextVNode(vnode: VNode): boolean;
+/**
+ * 判断 VNode 是否为注释类型
+ */
+export declare function isCommentVNode(vnode: VNode): boolean;
+/**
+ * 判断两个 VNode 是否为相同类型
+ *
+ * 相同类型的定义：type 相同且 key 相同。
+ */
+export declare function isSameVNodeType(n1: VNode, n2: VNode): boolean;
+/**
+ * 判断 VNode 是否为 Block
+ *
+ * Block 的 dynamicChildren 是非 null 的数组。
+ */
+export declare function isBlock(vnode: VNode): boolean;
+//# sourceMappingURL=vnode.d.ts.map

package/dist/types/vnode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vnode.d.ts","sourceRoot":"","sources":["../../src/vnode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB,6DAA6D;IAC7D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IAE9B,WAAW;IACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAEjC,kCAAkC;IAClC,QAAQ,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAEvD,wBAAwB;IACxB,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAE3B,qBAAqB;IACrB,GAAG,EAAE,GAAG,CAAA;IAER,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAA;IAEjB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAA;IAEjB,6BAA6B;IAC7B,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAE/B,qBAAqB;IACrB,YAAY,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAE7B,cAAc;IACd,SAAS,EAAE,GAAG,CAAA;IAEd,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;IAEtC,qBAAqB;IACrB,EAAE,EAAE,GAAG,CAAA;IAEP,kBAAkB;IAClB,MAAM,EAAE,GAAG,CAAA;CACZ;AAMD;;;;;GAKG;AACH,0BAAkB,UAAU;IAC1B,qBAAqB;IACrB,OAAO,IAAI;IAEX,YAAY;IACZ,oBAAoB,IAAI;IAExB,YAAY;IACZ,kBAAkB,IAAI;IAEtB,cAAc;IACd,aAAa,IAAI;IAEjB,aAAa;IACb,cAAc,KAAK;IAEnB,aAAa;IACb,cAAc,KAAK;CACpB;AAMD;;;;GAIG;AACH,0BAAkB,UAAU;IAC1B,WAAW;IACX,IAAI,IAAI;IACR,eAAe;IACf,KAAK,IAAI;IACT,eAAe;IACf,KAAK,IAAI;IACT,eAAe;IACf,KAAK,IAAI;IACT,sBAAsB;IACtB,UAAU,KAAK;IACf,mBAAmB;IACnB,eAAe,KAAK;IACpB,uBAAuB;IACvB,cAAc,KAAK;IACnB,wBAAwB;IACxB,gBAAgB,MAAM;IACtB,eAAe;IACf,UAAU,MAAM;IAChB,WAAW;IACX,aAAa,MAAM;IACnB,WAAW;IACX,OAAO,KAAK;IACZ,WAAW;IACX,IAAI,KAAK;CACV;AAMD;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,eAAqB,CAAA;AAE1C;;GAEG;AACH,eAAO,MAAM,IAAI,eAAiB,CAAA;AAElC;;GAEG;AACH,eAAO,MAAM,OAAO,eAAoB,CAAA;AAMxC;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAEhD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAEpD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,GAAG,OAAO,CAE7D;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE7C"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@lytjs/renderer",
+  "version": "3.1.0",
+  "description": "Lyt.js 渲染器抽象层 - 支持 DOM、SSR、原生和小程序多平台渲染",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "sideEffects": false,
+  "files": ["dist"],
+  "license": "MIT",
+  "author": "lytjs",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/@lytjs/lytjs"
+  },
+  "homepage": "https://gitee.com/@lytjs/lytjs",
+  "keywords": [
+    "lyt",
+    "lytjs",
+    "javascript",
+    "framework",
+    "frontend",
+    "vue-like",
+    "lightweight",
+    "zero-dependency",
+    "renderer",
+    "dom",
+    "ssr",
+    "hydration",
+    "渲染器"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}