@neeloong/form 0.9.0 → 0.10.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.9.0
+* @neeloong/form v0.10.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -283,13 +283,14 @@ function merge(...v) {
 /** @import { AsyncValidator, Schema, Validator } from '../types.mjs' */
 
 /**
+ * 管理单个表单字段的状态和行为
  * @template [T=any]
  */
 class Store {
 	/** @type {Map<string, Set<(value: any, store: any) => void | boolean | null>>} */
 	#events = new Map()
 	/**
-	 * 
+	 * 触发事件并通知监听器
 	 * @template {keyof Schema.Events} K
 	 * @param {K} event 
 	 * @param  {Schema.Events[K]} value 
@@ -304,7 +305,7 @@ class Store {
 		return !canceled;
 	}
 	/**
-	 * 
+	 * 监听事件
 	 * @template {keyof Schema.Events} K
 	 * @param {K} event 
 	 * @param  {(this: this, p: Schema.Events[K], store: this) => void | boolean | null} listener
@@ -324,14 +325,16 @@ class Store {
 
 	}
 	/**
-	 * @param {Schema} schema
-	 * @param {object} [options] 
-	 * @param {boolean} [options.new] 
+	 * 从数据结构模式创建存储
+	 * @param {Schema} schema 数据结构模式
+	 * @param {object} [options] 选项
+	 * @param {boolean} [options.new] 是否为新建环境
 	 */
 	static create(schema, options = {}) {
 		return create({type: schema}, { ...options, parent: null });
 	}
 	/**
+	 * 设置自定义类型的存储类
 	 * @param {string} type
 	 * @param {{new(...p: ConstructorParameters<typeof Store>): Store}} Class
 	 */
@@ -339,14 +342,16 @@ class Store {
 		return setStore$1(type, Class);
 	}
 	#null = false;
+	/** 是否为无效空存储 */
 	get null() { return this.#null; }
+	/** 存储类类别，继承的自定义类需要设置自定义的此只读属性 */
 	get kind() { return ''; }
 	/** @type {Ref?} */
 	#ref = null;
 	get ref() { return this.#ref || createRef(this); }
 	/**
-	 * @param {Schema.Field} schema
-	 * @param {object} [options] 
+	 * @param {Schema.Field} schema 字段的 Schema 定义
+	 * @param {object} [options] 可选配置
 	 * @param {*} [options.parent] 
 	 * @param {*} [options.state] 
 	 * @param {number | string | null} [options.index] 
@@ -510,19 +515,28 @@ class Store {
 	#meta;
 	/** @readonly @type {any} */
 	#component;
+	/** 存储对象自身 */
 	get store() { return this; }
+	/** 父级存储对象 */
 	get parent() { return this.#parent; }
+	/** 根节点的存储对象 */
 	get root() { return this.#root; }
+	/** 字段类型 */
 	get type() { return this.#type; }
+	/** 字段元信息 */
 	get meta() { return this.#meta; }
+	/** 自定义渲染组件信息 */
 	get component() { return this.#component; }
 
 	/** @type {Signal.State<number> | Signal.Computed<number>} */
 	#length;
+	/** 长度信息 */
 	get length() { return this.#length.get(); }
 	#index = new Signal.State(/** @type {string | number} */(''));
+	/** 索引信息 */
 	get index() { return this.#index.get(); }
 	set index(v) { this.#index.set(v); }
+	/** 数组项目的序号 */
 	get no() {
 		if (this.#null) { return ''; }
 		const index = this.index;
@@ -530,8 +544,10 @@ class Store {
 	}
 
 	#creatable = true;
+	/** 值是否可创建（`$new` 为 `true` 时，字段只读） */
 	get creatable() { return this.#creatable; }
 	#immutable = false;
+	/** 值是否不可改变（`$new` 为 `false` 时，字段只读） */
 	get immutable() { return this.#immutable; }
 
 	/** @readonly @type {Signal.Computed<boolean>} */
@@ -540,6 +556,7 @@ class Store {
 	#selfNew
 	get selfNew() { return this.#selfNew.get(); }
 	set selfNew(v) { this.#selfNew.set(Boolean(v)); }
+	/** 是否新建项 */
 	get new() { return this.#new.get(); }
 	set new(v) { this.#selfNew.set(Boolean(v)); }
 
@@ -549,6 +566,7 @@ class Store {
 	#hidden
 	get selfHidden() { return this.#selfHidden.get(); }
 	set selfHidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
+	/** 是否可隐藏 */
 	get hidden() { return this.#hidden.get(); }
 	set hidden(v) { this.#selfHidden.set(typeof v === 'boolean' ? v : null); }
 
@@ -558,6 +576,7 @@ class Store {
 	#clearable
 	get selfClearable() { return this.#selfClearable.get(); }
 	set selfClearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
+	/** 是否可清除 */
 	get clearable() { return this.#clearable.get(); }
 	set clearable(v) { this.#selfClearable.set(typeof v === 'boolean' ? v : null); }
 
@@ -567,6 +586,7 @@ class Store {
 	#required
 	get selfRequired() { return this.#selfRequired.get(); }
 	set selfRequired(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
+	/** 是否必填 */
 	get required() { return this.#required.get(); }
 	set required(v) { this.#selfRequired.set(typeof v === 'boolean' ? v : null); }
 
@@ -576,6 +596,7 @@ class Store {
 	#disabled
 	get selfDisabled() { return this.#selfDisabled.get(); }
 	set selfDisabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
+	/** 是否禁用字段 */
 	get disabled() { return this.#disabled.get(); }
 	set disabled(v) { this.#selfDisabled.set(typeof v === 'boolean' ? v : null); }
 
@@ -585,6 +606,7 @@ class Store {
 	#readonly
 	get selfReadonly() { return this.#selfReadonly.get(); }
 	set selfReadonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
+	/** 是否只读 */
 	get readonly() { return this.#readonly.get(); }
 	set readonly(v) { this.#selfReadonly.set(typeof v === 'boolean' ? v : null); }
 
@@ -597,6 +619,7 @@ class Store {
 	#label
 	get selfLabel() { return this.#selfLabel.get(); }
 	set selfLabel(v) { this.#selfLabel.set(string(v)); }
+	/** 字段的标签信息 */
 	get label() { return this.#label.get(); }
 	set label(v) { this.#selfLabel.set(string(v)); }
 
@@ -607,6 +630,7 @@ class Store {
 	#description
 	get selfDescription() { return this.#selfDescription.get(); }
 	set selfDescription(v) { this.#selfDescription.set(string(v)); }
+	/** 字段的描述信息 */
 	get description() { return this.#description.get(); }
 	set description(v) { this.#selfDescription.set(string(v)); }
 
@@ -616,6 +640,7 @@ class Store {
 	#placeholder
 	get selfPlaceholder() { return this.#selfPlaceholder.get(); }
 	set selfPlaceholder(v) { this.#selfPlaceholder.set(string(v)); }
+	/** 字段的占位符信息 */
 	get placeholder() { return this.#placeholder.get(); }
 	set placeholder(v) { this.#selfPlaceholder.set(string(v)); }
 
@@ -626,6 +651,7 @@ class Store {
 	#min
 	get selfMin() { return this.#selfMin.get(); }
 	set selfMin(v) { this.#selfMin.set(number(v)); }
+	/** 数值字段的最小值限制 */
 	get min() { return this.#min.get(); }
 	set min(v) { this.#selfMin.set(number(v)); }
 
@@ -636,6 +662,7 @@ class Store {
 	#max
 	get selfMax() { return this.#selfMax.get(); }
 	set selfMax(v) { this.#selfMax.set(number(v)); }
+	/** 数值字段的最大值限制 */
 	get max() { return this.#max.get(); }
 	set max(v) { this.#selfMax.set(number(v)); }
 
@@ -646,6 +673,7 @@ class Store {
 	#step
 	get selfStep() { return this.#selfStep.get(); }
 	set selfStep(v) { this.#selfStep.set(number(v)); }
+	/** 数值字段的步长 */
 	get step() { return this.#step.get(); }
 	set step(v) { this.#selfStep.set(number(v)); }
 
@@ -655,6 +683,7 @@ class Store {
 	#minLength
 	get selfMinLength() { return this.#selfMinLength.get(); }
 	set selfMinLength(v) { this.#selfMinLength.set(number(v)); }
+	/** 最小长度 */
 	get minLength() { return this.#minLength.get(); }
 	set minLength(v) { this.#selfMinLength.set(number(v)); }
 
@@ -664,6 +693,7 @@ class Store {
 	#maxLength
 	get selfMaxLength() { return this.#selfMaxLength.get(); }
 	set selfMaxLength(v) { this.#selfMaxLength.set(number(v)); }
+	/** 最大长度 */
 	get maxLength() { return this.#maxLength.get(); }
 	set maxLength(v) { this.#selfMaxLength.set(number(v)); }
 
@@ -673,6 +703,7 @@ class Store {
 	#pattern
 	get selfPattern() { return this.#selfPattern.get(); }
 	set selfPattern(v) { this.#selfPattern.set(regex(v)); }
+	/** 模式 */
 	get pattern() { return this.#pattern.get(); }
 	set pattern(v) { this.#selfPattern.set(regex(v)); }
 
@@ -683,6 +714,7 @@ class Store {
 	#values
 	get selfValues() { return this.#selfValues.get(); }
 	set selfValues(v) { this.#selfValues.set(values$1(v)); }
+	/** 可选值列表 */
 	get values() { return this.#values.get(); }
 	set values(v) { this.#selfValues.set(values$1(v)); }
 
@@ -699,13 +731,15 @@ class Store {
 	#cancelChange
 	/** @type {() => void} */
 	#cancelBlur
+	/** 所有校验错误列表 */
 	get errors() { return this.#errors.get(); }
+	/** 字段校验错误信息 */
 	get error() { return this.#errors.get()[0]; }
 
 	/** @returns {IterableIterator<[key: string | number, value: Store]>} */
 	*[Symbol.iterator]() {}
 	/**
-	 * 
+	 * 获取子存储
 	 * @param {string | number} key 
 	 * @returns {Store?}
 	 */
@@ -718,8 +752,10 @@ class Store {
 	
 	#state = new Signal.State(/** @type {any} */(null));
 
+	/** 内容是否已改变 */
 	get changed() { return this.#value.get() === this.#initValue.get(); }
 
+	/** 字段当前值 */
 	get value() { return this.#value.get(); }
 	set value(v) {
 		const newValue = this.#setValue?.(v);
@@ -732,6 +768,7 @@ class Store {
 		this.#requestUpdate();
 	}
 
+	/** 字段状态 */
 	get state() { return this.#state.get(); }
 	set state(v) {
 		const newState = this.#setState?.(v);
@@ -749,6 +786,7 @@ class Store {
 			this.#runUpdate(oldValue, oldState);
 		});
 	}
+	/** 重置数据 */
 	reset(value = this.#initValue.get()) {
 		this.#reset(value);
 	}
@@ -841,18 +879,19 @@ class Store {
 		return [val, sta];
 	}
 	/**
-	 * 
+	 * 异步校验
 	 * @overload
 	 * @param {null} [path]
 	 * @returns {Promise<string[] | null>}
 	 */
 	/**
+	 * 异步校验
 	 * @overload
-	 * @param {(string | number)[]} path 
+	 * @param {(string | number)[]} path 到当前层级的路径
 	 * @returns {Promise<{ path: (string | number)[]; store: Store; errors: string[]}[]>}
 	 */
 	/**
-	 * 
+	 * 异步校验
 	 * @param {(string | number)[]?} [path] 
 	 * @returns {Promise<string[] | { path: (string | number)[]; store: Store; errors: string[] | null;}[] | null>}
 	 */
@@ -1280,9 +1319,11 @@ function parse$1(value, createCalc) {
 /**
  * @param {Layout.Node} node
  * @param {Exclude<Layout.Options['createCalc'], undefined>} createCalc
+ * @param {Exclude<Layout.Options['createInit'], undefined>} createInit
  * @param {Exclude<Layout.Options['createEvent'], undefined>} createEvent
+ * @param {boolean} enableHTML
  */
-function createAttributeAdder(node, createCalc, createEvent) {
+function createAttributeAdder(node, createCalc, createInit, createEvent, enableHTML) {
 	const { attrs, events, classes, styles, vars, aliases, params, enhancements } = node;
 	/**
 	 * @param {string} qName
@@ -1338,7 +1379,7 @@ function createAttributeAdder(node, createCalc, createEvent) {
 			return;
 		}
 		if (decorator === '+') {
-			vars[name] = !value ? {value: undefined} : parse$1(value, createCalc);
+			vars[name] = !value ? {value: undefined} : parse$1(value, createInit);
 			return;
 		}
 		if (decorator === '*') {
@@ -1366,7 +1407,7 @@ function createAttributeAdder(node, createCalc, createEvent) {
 				node.text = parse$1(value, createCalc);
 				break;
 			case 'html':
-				node.html = parse$1(value, createCalc);
+				if (enableHTML) { node.html = parse$1(value, createCalc); }
 				break;
 			case 'template': node.template = value; break;
 			case 'bind': node.bind = value || true; break;
@@ -1710,15 +1751,17 @@ function entityReplacer(a) {
 	return a;
 }
 /**
- *
- * @param {string} source
- * @param {Layout.Options} [options]
+ * 解析模板内容
+ * @param {string} source 输入源字符串
+ * @param {Layout.Options} [options] 解析选项
  * @returns {(Layout.Node | string)[]}
  */
 function parse(source, {
 	createCalc = () => { throw new ParseError('CALC'); },
+	createInit = createCalc,
 	createEvent = () => { throw new ParseError('EVENT'); },
 	simpleTag = new Set,
+	enableHTML = false,
 } = {}) {
 	/** @type {(Layout.Node | string)[]} */
 	const children = [];
@@ -1769,7 +1812,20 @@ function parse(source, {
 		if (tagStart > index) {
 			appendText(tagStart);
 		}
-		if (source.charAt(tagStart + 1) === '/') {
+		const nextChar = source.charAt(tagStart + 1);
+		if (nextChar === '!') {
+			let begin = tagStart + 2;
+			let sign = '>';
+			if (source.slice(tagStart + 2, tagStart + 4) === '--') {
+				begin += 4;
+				sign = '-->';
+			}
+			index = source.indexOf(sign, begin);
+			if (index < 0) { break; }
+			index++;
+			continue;
+		}
+		if (nextChar === '/') {
 			index = source.indexOf('>', tagStart + 3);
 			let name = source.substring(tagStart + 2, index);
 			if (index < 0) {
@@ -1837,7 +1893,7 @@ function parse(source, {
 		currentNode = createElement(tagRes.name, tagRes.is);
 		current.children.push(currentNode);
 		current = currentNode;
-		const addAttribute = createAttributeAdder(currentNode, createCalc, createEvent);
+		const addAttribute = createAttributeAdder(currentNode, createCalc, createInit, createEvent, enableHTML);
 
 		let run = true;
 		let closed = false;
@@ -2041,12 +2097,12 @@ function* listToString(nodes, level = 0) {
 	}
 }
 /**
- * 
- * @param {Layout.Node | (Layout.Node |string)[]} value 
- * @param {boolean} [formable] 
+ * 将模板转为字符串
+ * @param {Layout.Node | (Layout.Node |string)[]} value 要转换的节点或节点数组
+ * @param {boolean} [formable] 是否对代码进行格式化
  * @returns {string}
  */
-function toString(value, formable) {
+function stringify(value, formable) {
 	const level = formable ? 0 : -1;
 	if (Array.isArray(value)) { return [...listToString(value, level)].join(''); }
 	return [nodeToString(value, level)].join();
@@ -2054,95 +2110,90 @@ function toString(value, formable) {
 }
 
 /**
- * @typedef {object} Directives
- * 
- */
-
-
-
-/**
- * @typedef {object} Enhancement
- * @property {Record<string, Node.Name | Node.Event>} events
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs
- * @property {Node.Name | Node.Calc | Node.Value} [value]
- * @property {boolean | string} [bind]
+ * @typedef {object} Enhancement 增强信息
+ * @property {Record<string, Node.Name | Node.Event>} events 事件
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
+ * @property {Node.Name | Node.Calc | Node.Value} [value] 主值
+ * @property {boolean | string} [bind] 绑定信息
  */
 
 /**
- * @typedef {object} Options
- * @property {(t: string) => Calc} [options.createCalc]
- * @property {(t: string) => EventListener} [options.createEvent]
- * @property {Set<string>} [options.simpleTag]
+ * @typedef {object} Options 解析选项
+ * @property {boolean} [enableHTML] 启用 `!html` 指令
+ * @property {(t: string) => Calc} [createCalc] 创建计算属性的工厂函数
+ * @property {(t: string) => Calc} [createInit] 创建变量初始化的工厂函数
+ * @property {(t: string) => EventListener} [createEvent] 创建事件监听器的工厂函数
+ * @property {Set<string>} [simpleTag] 简单标签的集合
  */
 /**
  * @template [T=any]
- * @typedef {{value: T; name?: undefined; calc?: undefined; event?: undefined}} Node.Value
+ * @typedef {{value: T; name?: undefined; calc?: undefined; event?: undefined}} Node.Value 基础值
  */
 /**
- * @typedef {{name: string; value?: undefined; calc?: undefined; event?: undefined}} Node.Name
+ * @typedef {{name: string; value?: undefined; calc?: undefined; event?: undefined}} Node.Name 名称
  */
 /**
- * @typedef {{event: EventListener; name?: undefined; calc?: undefined; value?: undefined}} Node.Event
+ * @typedef {{event: EventListener; name?: undefined; calc?: undefined; value?: undefined}} Node.Event 事件
  */
 /**
- * @typedef {{calc: Calc; name?: undefined; value?: undefined; event?: undefined}} Node.Calc
+ * @typedef {{calc: Calc; name?: undefined; value?: undefined; event?: undefined}} Node.Calc 计算
  */
 /**
- * @typedef {object} Node
- * @property {string} name
+ * @typedef {object} Node 布局节点
+ * @property {string} name 标签名
  * @property {string?} [is]
  * @property {string} [id]
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} params
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} classes
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} styles
- * @property {Record<string, Node.Name | Node.Event>} events
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} vars
- * @property {Record<string, Node.Name | Node.Calc | Node.Value>} aliases
- * @property {Record<string, Enhancement>} enhancements
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} attrs 属性
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} params 模板参数定义
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} classes 类名
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} styles 样式
+ * @property {Record<string, Node.Name | Node.Event>} events 事件
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} vars 局部变量
+ * @property {Record<string, Node.Name | Node.Calc | Node.Value>} aliases 别名/计算名
+ * @property {Record<string, Enhancement>} enhancements 增强
  * 
- * @property {string} [template]
- * @property {boolean | string} [fragment]
+ * @property {string} [template] 模板定义的名称
+ * @property {boolean | string} [fragment] 是否为片段或模板调用
  * 
- * @property {Node.Name | Node.Calc | Node.Value} [if]
- * @property {boolean} [else]
+ * @property {Node.Name | Node.Calc | Node.Value} [if] 分歧条件
+ * @property {boolean} [else] 否定
  * 
  * @property {string} [value] 值关联
  * @property {Node.Name | Node.Calc | Node.Value} [enum] 列表属性枚举
  * 
- * @property {boolean | string} [bind]
- * @property {Node.Name | Node.Value | Node.Calc} [text]
- * @property {Node.Name | Node.Value | Node.Calc} [html]
+ * @property {boolean | string} [bind] 绑定内容
+ * @property {Node.Name | Node.Value | Node.Calc} [text] 文本渲染
+ * @property {Node.Name | Node.Value | Node.Calc} [html] HTML 渲染
  * 
  * @property {string} [comment] 注释
  * 
- * @property {(Node | string)[]} children
+ * @property {(Node | string)[]} children 子元素
  */
 
 /**
- * @callback Calc
- * @param {Record<string, any>} env
+ * @callback Calc 计算函数
+ * @param {Record<string, any>} env 上下文环境
  * @returns {any}
  */
 
 
 /**
- * @callback EventListener
- * @param {*} $event
- * @param {Record<string, any>} env
+ * @callback EventListener 事件监听器
+ * @param {*} $event 事件
+ * @param {Record<string, any>} env 上下文环境
  * @returns {void}
 */
 
 var index$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	parse: parse,
-	stringify: toString
+	stringify: stringify
 });
 
 /**
- * 
- * @param {() => void} fn 
- * @returns {() => void}
+ * 相应式执行
+ * @param {() => void} fn 执行函数
+ * @returns {() => void} 取消函数
  */
 function effect(fn) {
 	let needsEnqueue = true;
@@ -2170,7 +2221,7 @@ function effect(fn) {
  * @template T
  * @param {() => T} getter 取值方法
  * @param {(value: T) => void} callback 取值方法
- * @param {boolean} immediate 
+ * @param {boolean} immediate 是否立即执行一次
  * @returns {() => void}
  */
 function watch(getter, callback, immediate) {
@@ -2917,11 +2968,12 @@ class Environment {
 }
 
 /** @import { Component } from '../types.mjs' */
+/** @import { ComponentHandler } from './types.mjs' */
 /** @import * as Layout from '../Layout/index.mjs' */
 
 
 /**
- * @param {Component.Handler} handler
+ * @param {ComponentHandler} handler
  * @param {Environment} envs
  * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} attrs
  * @param {Record<string, Component.Attr>} componentAttrs
@@ -2990,12 +3042,12 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 	}
 }
 
-/** @import { Component } from '../types.mjs' */
+/** @import { ComponentHandler } from './types.mjs' */
 /** @import * as Layout from '../Layout/index.mjs' */
 
 
 /**
- * @param {Component.Handler} handler
+ * @param {ComponentHandler} handler
  * @param {Environment} envs
  * @param {Record<string, Layout.Node.Name | Layout.Node.Calc | Layout.Node.Value>} attrs
  */
@@ -3146,7 +3198,12 @@ function bindStyles(node, envs, styles, styleAttr) {
 		return () => {};
 	}
 	if (styleAttr) {
-		node.setAttribute('style', node.getAttribute('style') + ';' + envs.exec(styleAttr));
+		const oldStyle = node.getAttribute('style') || '';
+		const newStyle = envs.exec(styleAttr) || '';
+		const style = [oldStyle,newStyle].filter(Boolean).join(';');
+		if (style) {
+			node.setAttribute('style', style);
+		}
 	}
 
 	/** @type {Set<() => void>?} */
@@ -3385,6 +3442,7 @@ function bindFilters(env, fn, filterFns) {
 }
 
 /** @import { Component, Relatedness } from '../types.mjs' */
+/** @import { ComponentHandler } from './types.mjs' */
 /** @import Store from '../Store/index.mjs' */
 /** @import Environment from './Environment/index.mjs' */
 
@@ -3419,8 +3477,8 @@ function createContext(component, env, store, relate) {
 	const context = {
 		events: allEvents,
 		props: attrs ? new Set(Object.entries(attrs).filter(([, a]) => a.isProp).map(([e]) => e)) : null,
-		tagAttrs,
-		watchAttr(name, fn) {
+		attrs: tagAttrs,
+		watch(name, fn) {
 			if (destroyed) { return () => { }; }
 			const state = attrStates[name];
 			if (!state) { return () => { }; }
@@ -3456,7 +3514,7 @@ function createContext(component, env, store, relate) {
 		get init() { return mountedState.get(); },
 		listen(name, listener) { return stateEmitter.listen(name, listener); },
 	};
-	/** @type {Component.Handler} */
+	/** @type {ComponentHandler} */
 	const handler = {
 		tag,
 		set(name, value) {
@@ -3671,7 +3729,7 @@ const tagBindMap = {
  */
 function createTagComponent (context, name, is) {
 	const node = document.createElement(name, {is: is || undefined});
-	const { watchAttr, props } = context;
+	const { watch, props } = context;
 	if(['input', 'textarea', 'select'].includes(name.toLowerCase())) {
 		context.relate(node);
 	}
@@ -3692,8 +3750,8 @@ function createTagComponent (context, name, is) {
 			node.addEventListener(type, listener, options);
 		}
 		if (props) {
-			for (const [name, attr] of Object.entries(context.tagAttrs)) {
-				watchAttr(name, v => {
+			for (const [name, attr] of Object.entries(context.attrs)) {
+				watch(name, v => {
 					// @ts-ignore
 					if (props.has(name)) { node[name] = v; } else {
 						const val = toAttrValue(v);
@@ -3715,7 +3773,7 @@ function createTagComponent (context, name, is) {
 			return;
 
 		}
-		for (const [name, attr] of Object.entries(context.tagAttrs)) {
+		for (const [name, attr] of Object.entries(context.attrs)) {
 			if (node instanceof HTMLInputElement && name.toLocaleLowerCase() === 'type') {
 				const value = toAttrValue(attr);
 				if (value !== null) {
@@ -3725,7 +3783,7 @@ function createTagComponent (context, name, is) {
 			}
 			if (name === '$hidden') {
 				if (attr) { node.hidden = attr; }
-				watchAttr(name, (val) => { node.hidden = val; });
+				watch(name, (val) => { node.hidden = val; });
 				continue;
 			}
 
@@ -3733,7 +3791,7 @@ function createTagComponent (context, name, is) {
 				const e = eAttrs[name];
 				if (e) {
 					e(attr, node);
-					watchAttr(name, (attr) => e(attr, node));
+					watch(name, (attr) => e(attr, node));
 				}
 				continue;
 			}
@@ -3741,7 +3799,7 @@ function createTagComponent (context, name, is) {
 			if (typeof prop === 'function') {
 				// @ts-ignore
 				node[name] = prop(attr);
-				watchAttr(name, (attr) => {
+				watch(name, (attr) => {
 					// @ts-ignore
 					node[name] = prop(attr);
 				});
@@ -3750,7 +3808,7 @@ function createTagComponent (context, name, is) {
 			if (prop) {
 				// @ts-ignore
 				node[name] = attr;
-				watchAttr(name, (attr) => {
+				watch(name, (attr) => {
 					// @ts-ignore
 					node[name] = attr;
 				});
@@ -3760,7 +3818,7 @@ function createTagComponent (context, name, is) {
 			if (value !== null) {
 				node.setAttribute(name, value);
 			}
-			watchAttr(name, (val) => {
+			watch(name, (val) => {
 				const value = toAttrValue(val);
 				if (value === null) {
 					node.removeAttribute(name);
@@ -4105,11 +4163,11 @@ function renderEnum(parent, next, getter, env, renderItem) {
 	};
 }
 
-/** @import { Component } from '../types.mjs' */
+/** @import { ComponentHandler } from './types.mjs' */
 
 
 /**
- * @param {Component.Handler} handler
+ * @param {ComponentHandler} handler
  * @param {Environment} env
  * @param {string | boolean | null} [bind]
  */
@@ -4225,7 +4283,7 @@ function bindEnhancements(tag, enhancementDefine, env, enhancements, root, slot)
 			get value() { return null; },
 			events: allEvents,
 			attrs: attrs,
-			watchAttr(name, fn) {
+			watch(name, fn) {
 				if (destroyed) { return () => { }; }
 				let old = attrs[name];
 				const w = watch(() => attrs[name], v => {
@@ -4382,14 +4440,14 @@ function render(layout, parent, next, env, templates, componentPath, enhancement
 }
 
 /**
- * @param {Store} store
- * @param {(Layout.Node | string)[]} layouts 
- * @param {Element} parent 
- * @param {object} [options] 
- * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 
- * @param {(path: string[]) => Component?} [options.component] 
- * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate]
- * @param {Record<string, Enhancement>} [options.enhancements]
+ * @param {Store} store 存储实例
+ * @param {(Layout.Node | string)[]} layouts 布局信息
+ * @param {Element} parent 渲染节点
+ * @param {object} [options] 选项
+ * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>} [options.global] 全局数据
+ * @param {Component.Getter?} [options.component]  自定义组件
+ * @param {(store: Store, el: Element | Relatedness) => () => void} [options.relate] 关联函数
+ * @param {Record<string, Enhancement>} [options.enhancements] 增强信息
  * @returns {() => void}
  */
 function index (store, layouts, parent, {component, global, relate, enhancements} = {}) {