@neeloong/form 0.2.0 → 0.4.0

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.2.0
+* @neeloong/form v0.4.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -855,8 +855,8 @@ class ArrayStore extends Store {
 }
 
 const errors = {
-	CALC: 'no `creteCalc` option, no expression parsing support',
-	EVENT: 'no `creteEvent`, options, no event parsing support',
+	CALC: 'no `createCalc` option, no expression parsing support',
+	EVENT: 'no `createEvent`, options, no event parsing support',
 	/** @param {string} endTag @param {string} startTag */
 	CLOSE: (endTag, startTag) => `end tag name: ${endTag} is not match the current start tagName: ${startTag}`,
 	/** @param {string} name */
@@ -900,15 +900,15 @@ class ParseError extends Error {
 
 /** @import * as Layout from './index.mjs' */
 
-const attrPattern = /^(?<decorator>[:@!+*\.]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
+const attrPattern = /^(?<decorator>[:@!+*\.?]|style:|样式：)?(?<name>-?[\w\p{Unified_Ideograph}_][-\w\p{Unified_Ideograph}_:\d\.]*)$/u;
 const nameRegex = /^(?<name>[a-zA-Z$\p{Unified_Ideograph}_][\da-zA-Z$\p{Unified_Ideograph}_]*)?$/u;
 /**
  * @param {Layout.Node} node
- * @param {Exclude<Layout.Options['creteCalc'], undefined>} creteCalc
- * @param {Exclude<Layout.Options['creteEvent'], undefined>} creteEvent
+ * @param {Exclude<Layout.Options['createCalc'], undefined>} createCalc
+ * @param {Exclude<Layout.Options['createEvent'], undefined>} createEvent
  */
-function createAttributeAdder(node, creteCalc, creteEvent) {
-	const { attrs, directives, events, classes, styles, vars, aliases } = node;
+function createAttributeAdder(node, createCalc, createEvent) {
+	const { attrs, directives, events, classes, styles, vars, aliases, params } = node;
 	/**
 	 * @param {string} qName
 	 * @param {string} value
@@ -928,37 +928,36 @@ function createAttributeAdder(node, creteCalc, creteEvent) {
 		if (!decorator) {
 			attrs[name] = value;
 		} else if (decorator === ':') {
-			attrs[name] = nameRegex.test(value) ? {name: value} : creteCalc(value);
+			attrs[name] = nameRegex.test(value) ? {name: value} : createCalc(value);
 		} else if (decorator === '.') {
-			classes[name] = !value ? true : nameRegex.test(value) ? value : creteCalc(value);
+			classes[name] = !value ? true : nameRegex.test(value) ? value : createCalc(value);
 		} else if (decorator === 'style:') {
-			styles[name] = nameRegex.test(value) ? value : creteCalc(value);
+			styles[name] = nameRegex.test(value) ? value : createCalc(value);
 		} else if (decorator === '@') {
-			events[name] = nameRegex.test(value) ? value : creteEvent(value);
+			events[name] = nameRegex.test(value) ? value : createEvent(value);
 		} else if (decorator === '+') {
-			vars[name] = !value ? '' : nameRegex.test(value) ? value : creteCalc(value);
+			vars[name] = !value ? '' : nameRegex.test(value) ? value : createCalc(value);
 		} else if (decorator === '*') {
-			aliases[name] = nameRegex.test(value) ? value : creteCalc(value);
+			aliases[name] = nameRegex.test(value) ? value : createCalc(value);
+		} else if (decorator === '?') {
+			params[name] = nameRegex.test(value) ? value : createCalc(value);
 		} else if (decorator === '!') {
 			const key = name.toString();
 			switch (key) {
-				case 'fragment':
-				case 'else':
-					directives[key] = true;
-					break;
+				case 'fragment': directives.fragment = value || true; break;
+				case 'else': directives.else = true; break;
 				case 'enum':
-					directives.enum = value ? nameRegex.test(value) ? value : creteCalc(value) : true;
+					directives.enum = value ? nameRegex.test(value) ? value : createCalc(value) : true;
 					break;
 				case 'if':
 				case 'text':
 				case 'html':
-					directives[key] = nameRegex.test(value) ? value : creteCalc(value);
-					break;
-				case 'bind':
-				case 'value':
-				case 'comment':
-					directives[key] = value;
+					directives[key] = nameRegex.test(value) ? value : createCalc(value);
 					break;
+				case 'template': directives.template = value; break;
+				case 'bind': directives.bind = value || true; break;
+				case 'value': directives.value = value; break;
+				case 'comment': directives.comment = value; break;
 			}
 		}
 	}
@@ -985,6 +984,7 @@ function createElement(name, is) {
 		styles: Object.create(null),
 		vars: Object.create(null),
 		aliases: Object.create(null),
+		params: Object.create(null),
 	};
 }
 
@@ -1303,8 +1303,8 @@ function entityReplacer(a) {
  * @returns {(Layout.Node | string)[]}
  */
 function parse(source, {
-	creteCalc = () => { throw new ParseError('CALC'); },
-	creteEvent = () => { throw new ParseError('EVENT'); },
+	createCalc = () => { throw new ParseError('CALC'); },
+	createEvent = () => { throw new ParseError('EVENT'); },
 	simpleTag = new Set,
 } = {}) {
 	/** @type {(Layout.Node | string)[]} */
@@ -1424,7 +1424,7 @@ function parse(source, {
 		currentNode = createElement(tagRes.name, tagRes.is);
 		current.children.push(currentNode);
 		current = currentNode;
-		const addAttribute = createAttributeAdder(currentNode, creteCalc, creteEvent);
+		const addAttribute = createAttributeAdder(currentNode, createCalc, createEvent);
 
 		let run = true;
 		let closed = false;
@@ -1503,13 +1503,21 @@ function _xmlEncoder(c) {
  * @returns {Iterable<string>}
  */
 function* nodeToString(node, level = 0) {
-	const { attrs, events, directives, children, is, name, classes, styles, aliases, vars } = node;
+	const { attrs, events, directives, children, is, name, params, classes, styles, aliases, vars } = node;
 	const pad = level > 0 ? ''.padEnd(level, '\t') : '';
 
 	yield pad;
 	yield* ['<', name || '-'];
 	if (is) { yield* ['|', is]; }
 
+	for (const [name, value] of Object.entries(params)) {
+		if (value == null) { continue; }
+		const val = typeof value === 'function' ? String(value) : value;
+		yield* [' ?', name];
+		if (val && typeof val === 'string') {
+			yield* ['="', val.replace(/[<&"]/g, _xmlEncoder), '"'];
+		}
+	}
 	for (const [name, value] of Object.entries(directives)) {
 		if (value === false || value == null) { continue; }
 		const val = typeof value === 'function' ? String(value) : value;
@@ -1631,27 +1639,29 @@ function toString(value, formable) {
 /**
  * @typedef {object} Directives
  * 
- * @property {boolean} [fragment]
+ * @property {string} [template]
+ * 
+ * @property {boolean | string} [fragment]
  * 
- * @property {string | Function} [if]
+ * @property {string | Calc} [if]
  * @property {boolean} [else]
  * 
  * @property {string} [value] 值关联（关联为列表）
- * @property {boolean | string | Function} [enum] 列表属性枚举
+ * @property {boolean | string | Calc} [enum] 列表属性枚举
  * 
- * @property {string} [bind]
- * @property {string | Function} [text]
- * @property {string | Function} [html]
+ * @property {boolean | string} [bind]
+ * @property {string | Calc} [text]
+ * @property {string | Calc} [html]
  * 
- * @property {string | Function} [comment] 注释
+ * @property {string} [comment] 注释
  */
 
 
 
 /**
  * @typedef {object} Options
- * @property {(t: string) => (vars: Record<string, any>) => any} [options.creteCalc]
- * @property {(t: string) => ($event: any, vars: Record<string, any>) => any} [options.creteEvent]
+ * @property {(t: string) => Calc} [options.createCalc]
+ * @property {(t: string) => EventListener} [options.createEvent]
  * @property {Set<string>} [options.simpleTag]
  */
 /**
@@ -1659,16 +1669,31 @@ function toString(value, formable) {
  * @property {string} name
  * @property {string?} [is]
  * @property {string} [id]
- * @property {Record<string, string | {name: string} | ((global: any) => void)>} attrs
- * @property {Record<string, string | boolean | ((global: any) => void)>} classes
- * @property {Record<string, string | ((global: any) => void)>} styles
- * @property {Record<string, string | (($event: any, global: any) => void)>} events
- * @property {Record<string, string | ((global: any) => void)>} vars
- * @property {Record<string, string | Function>} aliases
+ * @property {Record<string, string | {name: string} | Calc>} attrs
+ * @property {Record<string, string | Calc>} params
+ * @property {Record<string, string | boolean | Calc>} classes
+ * @property {Record<string, string | Calc>} styles
+ * @property {Record<string, string | EventListener>} events
+ * @property {Record<string, string | Calc>} vars
+ * @property {Record<string, string | Calc>} aliases
  * @property {Directives} directives
  * @property {(Node | string)[]} children
  */
 
+/**
+ * @callback Calc
+ * @param {Record<string, any>} env
+ * @returns {any}
+*/
+
+
+/**
+ * @callback EventListener
+ * @param {*} $event
+ * @param {Record<string, any>} env
+ * @returns {void}
+*/
+
 var index$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	parse: parse,
@@ -1740,9 +1765,8 @@ const bindable = {
 /** @type {Set<keyof typeof bindable>} */
 // @ts-ignore
 const bindableSet = new Set(Object.keys(bindable));
-/** @typedef {{get(): any; set?(v: any): void; exec?: null; store?: Store; calc?: null; }} ValueDefine */
-/** @typedef {{get?: null; exec(...p: any[]): any;  calc?: null}} ExecDefine */
-/** @typedef {{get?: null; calc(...p: any[]): any;  exec?: null;}} CalcDefine */
+
+/** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
 /**
  * 
  * @param {Store} val 
@@ -1753,6 +1777,8 @@ function *toItem(val, key = '', sign = '$') {
 	yield [`${key}`, {get: () => val.value, set: v => val.value = v, store: val}];
 	yield [`${key}${sign}value`, {get: () => val.value, set: v => val.value = v}];
 	yield [`${key}${sign}state`, {get: () => val.state, set: v => val.state = v}];
+	yield [`${key}${sign}store`, {get: () => val}];
+	yield [`${key}${sign}schema`, {get: () => val.schema}];
 	yield [`${key}${sign}null`, {get: () => val.null}];
 	yield [`${key}${sign}index`, {get: () => val.index}];
 	yield [`${key}${sign}no`, {get: () => val.no}];
@@ -1760,7 +1786,6 @@ function *toItem(val, key = '', sign = '$') {
 	yield [`${key}${sign}creatable`, {get: () => val.creatable}];
 	yield [`${key}${sign}immutable`, {get: () => val.immutable}];
 
-	yield [`${key}${sign}schema`, {get: () => val.schema}];
 
 	for (const k of bindableSet) {
 		yield [`${key}${sign}${k}`, {get: () => val[k]}];
@@ -1772,6 +1797,9 @@ function *toItem(val, key = '', sign = '$') {
 	yield [`${key}${sign}move`, {exec: (from, to) => val.move(from, to)}];
 	yield [`${key}${sign}exchange`, {exec: (a, b) => val.exchange(a, b)}];
 }
+
+/** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
+
 /**
  * 
  * @param {Store?} parent 
@@ -1811,9 +1839,95 @@ function *toParentItem(parent, val, key = '', sign = '$') {
 		parent.move(s, s + 1);
 	}}];
 }
+
+/** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
+/**
+ * 
+ * @param {Record<string, ValueDefine | ExecDefine | CalcDefine>} items 
+ * @param {Store} store 
+ * @param {Store} [parent] 
+ */
+function setStore(items, store, parent) {
+	for (const [name, val] of store) {
+		for (const [b, x] of toItem(val, name)) {
+			items[b] = x;
+		}
+		for (const [b, x] of toItem(val, name, '$$')) {
+			items[b] = x;
+		}
+	}
+
+}
+
+/** @import { ValueDefine, ExecDefine, CalcDefine } from './index.mjs' */
+
+/**
+ * @param {Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>?} [global] 
+ */
+function toGlobal(global) {
+	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
+	const items = Object.create(null);
+	if (!global || typeof global !== 'object') { return items; }
+	for (const [key, value] of Object.entries(global)) {
+		if (!key || key.includes('$')) { continue; }
+		if (!value || typeof value !== 'object') { continue; }
+		if (value instanceof Store) {
+			for (const [k, v] of toItem(value, key)) {
+				items[k] = v;
+			}
+			continue;
+		}
+		const {get,set,exec,calc} = value;
+		if (typeof get === 'function') {
+			items[key] = typeof set === 'function' ? {get,set} : {get};
+			continue;
+		}
+		if (typeof calc === 'function') {
+			items[key] = {calc};
+			continue;
+		}
+		if (typeof exec === 'function') {
+			items[key] = {exec};
+			continue;
+		}
+	}
+	return items;
+}
+
+/** @import Store from '../../Store/index.mjs' */
+
+/**
+ * @param {Store} store
+ * @param {*} env
+ */
+function addStore(store, env) {
+	Object.defineProperty(env, '$store', {
+		value: store,
+		writable: false,
+		configurable: true,
+		enumerable: false,
+	});
+	Object.defineProperty(env, '$root', {
+		value: store.root,
+		writable: false,
+		configurable: true,
+		enumerable: false,
+	});
+}
+
+/** @import * as Layout from '../../Layout/index.mjs' */
+
+
+/** @typedef {{get(): any; set?(v: any): void; exec?: null; store?: Store; calc?: null; }} ValueDefine */
+/** @typedef {{get?: null; exec(...p: any[]): any;  calc?: null}} ExecDefine */
+/** @typedef {{get?: null; calc(...p: any[]): any;  exec?: null;}} CalcDefine */
+
+/**
+ * @template {Store} [T=Store]
+ */
 class Environment {
 	/**
-	 * @param {string | Function} value
+	 * @param {string | Layout.Calc} value
 	 */
 	exec(value) {
 		if (typeof value === 'string') {
@@ -1826,18 +1940,18 @@ class Environment {
 		}
 	}
 	/**
-	 * @param {string | Function} value
+	 * @param {string | Layout.Calc} value
 	 * @param {(value: any) => void} cb 
 	 */
 	watch(value, cb) { return watch(() => this.exec(value), cb); }
 
 	/**
-	 * @param {string | Function} name
+	 * @param {string | Layout.Calc | boolean | null} [name]
 	 */
 	enum(name) {
-		if (typeof name === 'function') {
-			return () => name(this.getters);
-		}
+		if (!name) { return true; }
+		if (name === true) { return this.store; }
+		if (typeof name === 'function') { return () => name(this.getters); }
 		if (typeof name !== 'string') { return null; }
 		const item = this.#items[name];
 		if (typeof item?.get !== 'function') { return null }
@@ -1922,8 +2036,8 @@ class Environment {
 	}
 
 	/**
-	 * @param {string | (($event: any, global: any) => any)} event
-	 * @returns {(($event: any, global: any) => any)?}
+	 * @param {string | Layout.EventListener} event
+	 * @returns {Layout.EventListener?}
 	 */
 	getEvent(event) {
 		if (typeof event === 'function') { return event }
@@ -1936,10 +2050,11 @@ class Environment {
 
 	}
 	/**
-	 * 
+	 * @param {T} store
 	 * @param {Environment | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }>?} [global] 
 	 */
-	constructor(global) {
+	constructor(store, global) {
+		this.store = store;
 		if (global instanceof Environment) {
 			this.#global = global.#global;
 			const schemaItems = this.#schemaItems;
@@ -1952,33 +2067,8 @@ class Environment {
 			}
 			return;
 		}
-		const items = Object.create(null);
-		this.#global = items;
-		if (!global) { return }
-		if (typeof global !== 'object') { return; }
-		for (const [key, value] of Object.entries(global)) {
-			if (!key || key.includes('$')) { continue; }
-			if (!value || typeof value !== 'object') { return; }
-			if (value instanceof Store) {
-				for (const [k, v] of toItem(value, key)) {
-					items[k] = v;
-				}
-				continue;
-			}
-			const {get,set,exec,calc} = value;
-			if (typeof get === 'function') {
-				items[key] = typeof set === 'function' ? {get,set} : {get};
-				continue;
-			}
-			if (typeof calc === 'function') {
-				items[key] = {calc};
-				continue;
-			}
-			if (typeof exec === 'function') {
-				items[key] = {exec};
-				continue;
-			}
-		}
+		setStore(this.#schemaItems, store);
+		this.#global = toGlobal(global);
 	}
 	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
 	#global
@@ -1986,8 +2076,8 @@ class Environment {
 	#schemaItems = Object.create(null);
 	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
 	#explicit = Object.create(null);
-	/** @type {Store?} */
-	#store = null
+	/** @readonly @type {T} */
+	store
 	/** @type {Record<string, any>?} */
 	#object = null
 	/** @type {Store?} */
@@ -2003,10 +2093,14 @@ class Environment {
 			...this.#global,
 			...this.#explicit,
 		}));
-		const store = this.#store;
+		const store = this.store;
 		const parent = this.#parent;
 		const object = this.#object;
-		if (store) {
+		if (object) {
+			for (const k of Object.keys(object)) {
+				ais[`$${k}`] = {get: () => object[k]};
+			}
+		} else {
 			for (const [key, item] of toItem(store)) {
 				ais[key] = item;
 			}
@@ -2014,50 +2108,114 @@ class Environment {
 				ais[key] = item;
 			}
 		}
-		if (object) {
-			for (const k of Object.keys(object)) {
-				ais[`$${k}`] = {get: () => object[k]};
-			}
-		}
 		this.#allItems = ais;
 		return ais;
 	}
 	/**
 	 * 
 	 * @param {Store} store 
-	 * @param {Store} [parent] 
+	 * @param {Store} parent 
 	 */
 	setStore(store, parent) {
-		const cloned = new Environment(this);
-		cloned.#store = store;
+		const cloned = new Environment(store, this);
 		if (parent) { cloned.#parent = parent; }
-		if (store instanceof ArrayStore) { return cloned; }
-		const items = cloned.#schemaItems;
-		for (const [name, val] of store) {
-			for (const [b, x] of toItem(val, name)) {
-				items[b] = x;
-			}
-			for (const [b, x] of toItem(val, name, '$$')) {
-				items[b] = x;
+		setStore(cloned.#schemaItems, store);
+		return cloned;
+	}
+	/**
+	 * 
+	 * @param {string?} [name] 
+	 */
+	child(name) {
+		if (!name) { return this; }
+		const store = this.store.child(name);
+		if (!store) { return null; }
+		const cloned = new Environment(store, this);
+		setStore(cloned.#schemaItems, store);
+		return cloned;
+	}
+	/**
+	 * 
+	 * @param {Layout.Node} template 
+	 * @param {Layout.Node} source 
+	 * @param {Environment} sourceEnv 
+	 * @param {string | null | boolean} [bind] 
+	 */
+	params({params}, {attrs}, sourceEnv, bind) {
+		/** @type {Store} */
+		let store = this.store;
+		if (bind === true) {
+			store = sourceEnv.store;
+		} else if (bind) {
+			const item = sourceEnv.#items[bind];
+			const s = item?.get && item.store;
+			if (s) { store = s; }
+		}
+		if (Object.keys(params).length === 0) { return this; }
+		const cloned = new Environment(store, this);
+		cloned.#parent = this.#parent;
+		cloned.#object = this.#object;
+		const explicit = cloned.#explicit;
+		const items = cloned.#items;
+		for (const [key, param] of Object.entries(params)) {
+			const attr = key in attrs ? attrs[key] : null;
+			if (typeof attr === 'string') {
+				explicit[key] = items[key] = {get: () => attr};
+			} else if (attr && typeof attr === 'object') {
+				const item = sourceEnv.#items[attr.name];
+				if (!item?.get) { continue; }
+				if (!item.store) {
+					explicit[key] = items[key] = item;
+					continue;
+				}
+				for (const [k, it] of toItem(item.store, key)) {
+					explicit[k] = items[k] = it;
+				}
+				continue;
+
+			} else if (typeof attr === 'function') {
+				const val = new Signal.Computed(() => attr(sourceEnv.getters));
+				explicit[key] = items[key] = {
+					get: () => { return val.get(); },
+				};
+				continue;
+			} else if (typeof param === 'function') {
+				const getters = cloned.getters;
+				cloned.#getters = null;
+				const val = new Signal.Computed(() => param(getters));
+				explicit[key] = items[key] = {
+					get: () => { return val.get(); },
+				};
+				continue;
+			} else {
+				const item = items[param];
+				if (!item?.get) { continue; }
+				if (!item.store) {
+					explicit[key] = items[key] = item;
+					continue;
+				}
+				for (const [k, it] of toItem(item.store, key)) {
+					explicit[k] = items[k] = it;
+				}
+				continue;
 			}
 		}
 		return cloned;
 	}
 	/** @param {Record<string, any>} object */
 	setObject(object) {
-		const cloned = new Environment(this);
+		const cloned = new Environment(this.store, this);
 		cloned.#object = object;
 		return cloned;
 	}
 	/**
 	 * 
-	 * @param {Record<string, string | Function>} aliases 
-	 * @param {Record<string, any>} vars 
+	 * @param {Record<string, string | Layout.Calc>} aliases 
+	 * @param {Record<string, string | Layout.Calc>} vars 
 	 */
 	set(aliases, vars) {
 		if (Object.keys(aliases).length + Object.keys(vars).length === 0) { return this; }
-		const cloned = new Environment(this);
-		cloned.#store = this.#store;
+		const cloned = new Environment(this.store, this);
 		cloned.#parent = this.#parent;
 		cloned.#object = this.#object;
 		const explicit = cloned.#explicit;
@@ -2133,6 +2291,7 @@ class Environment {
 				});
 			}
 		}
+		addStore(this.store, ngt);
 		this.#all = ngt;
 		return ngt;
 	}
@@ -2160,6 +2319,7 @@ class Environment {
 				});
 			}
 		}
+		addStore(this.store, ngt);
 		this.#settable = ngt;
 		return ngt;
 	}
@@ -2186,19 +2346,22 @@ class Environment {
 				});
 			}
 		}
+		addStore(this.store, ngt);
 		this.#getters = ngt;
 		return ngt;
 	}
 }
 
 /** @import { Component } from '../types.mjs' */
+/** @import * as Layout from '../Layout/index.mjs' */
+
 
 /**
  * @param {Component.Handler} handler
  * @param {Environment} envs
- * @param {Record<string, string | {name: string} | ((...any: any) => void)>} attrs
+ * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
  * @param {Record<string, Component.Attr>} componentAttrs
- * @param {string?} [bindValue]
+ * @param {string | boolean | null} [bindValue]
  */
 function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 
@@ -2210,7 +2373,7 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 				handler.set(name, attrValue);
 				continue;
 			}
-			const attrSchema = typeof attrValue === 'function' ? attrValue : attrValue.name;
+			const attrSchema = typeof attrValue === 'function' ? /** @type{Layout.Calc} */(attrValue) : attrValue.name;
 			if (attr.immutable) {
 				handler.set(name, envs.exec(attrSchema));
 				continue;
@@ -2219,7 +2382,7 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 			continue;
 		}
 		const bind = attr.bind;
-		if (!bindValue || !bind) {
+		if (!bindValue || !bind || typeof bindValue === 'boolean') {
 			handler.set(name, attr.default);
 			continue;
 		}
@@ -2263,12 +2426,14 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 }
 
 /** @import { Component } from '../types.mjs' */
+/** @import * as Layout from '../Layout/index.mjs' */
+
 
 /**
  * @param {Component.Handler} handler
  * @param {Environment} envs
- * @param {Record<string, string | {name: string} | ((...any: any) => void)>} attrs
- * @param {string?} [bindValue]
+ * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
+ * @param {string | boolean | null} [bindValue]
  */
 function bindBaseAttrs(handler, envs, attrs, bindValue) {
 	const tag = handler.tag;
@@ -2278,7 +2443,7 @@ function bindBaseAttrs(handler, envs, attrs, bindValue) {
 			handler.set(name, attr);
 			continue;
 		}
-		const attrSchema = typeof attr === 'function' ? attr : attr.name;
+		const attrSchema = typeof attr === 'function' ? /** @type{Layout.Calc} */(attr) : attr.name;
 		if (typeof tag === 'string' && tag.toLocaleLowerCase() === 'input' && name.toLocaleLowerCase() === 'type') {
 			const value = envs.exec(attrSchema);
 			handler.set(name, value);
@@ -2286,7 +2451,7 @@ function bindBaseAttrs(handler, envs, attrs, bindValue) {
 		}
 		bk.add(envs.watch(attrSchema, val => handler.set(name, val)));
 	}
-	if (bindValue) {
+	if (bindValue && typeof bindValue !== 'boolean') {
 		for (const [key, effect] of Object.entries(envs.bindAll(bindValue) || {})) {
 			if (typeof effect !== 'function') { continue; }
 			bk.add(effect(val => handler.set(key, val)));
@@ -2306,10 +2471,13 @@ function bindBaseAttrs(handler, envs, attrs, bindValue) {
 	}
 }
 
+/** @import * as Layout from '../Layout/index.mjs' */
+
+
 /**
  * @param {Node} node
  * @param {Environment} envs
- * @param {Record<string, string | boolean | ((...any: any) => void)>} classes
+ * @param {Record<string, string | boolean | Layout.Calc>} classes
  */
 function bindClasses(node, classes, envs) {
 	if (!(node instanceof Element)) {
@@ -2343,6 +2511,9 @@ function bindClasses(node, classes, envs) {
 	}
 }
 
+/** @import * as Layout from '../Layout/index.mjs' */
+
+
 /** @type {Record<string, string>} */
 const unit = {
 	'width': 'px',
@@ -2409,7 +2580,7 @@ function toStyle(name, value) {
 /**
  * @param {Element} node
  * @param {Environment} envs
- * @param {Record<string, string | ((...any: any) => void)>} classes
+ * @param {Record<string, string | Layout.Calc>} classes
  */
 function bindStyles(node, classes, envs) {
 	if (!(node instanceof HTMLElement) && !(node instanceof SVGElement)) {
@@ -2481,10 +2652,11 @@ class EventEmitter {
 }
 
 /** @import { Component } from '../types.mjs' */
-/** @import Environment from './Environment.mjs' */
+/** @import Environment from './Environment/index.mjs' */
+/** @import Store from '../Store/index.mjs' */
 
 
-/** @type {Record<string, (evt: any, param: string[], global: any) => boolean | null | void>} */
+/** @type {Record<string, Component.Event.Filter>} */
 const eventFilters = {
 	stop(evt) {
 		if (evt instanceof Event) { evt.stopPropagation(); }
@@ -2648,7 +2820,7 @@ function createContext(component, env) {
 			if (!filters) { return; }
 			/** @type {AddEventListenerOptions} */
 			const options = {};
-			/** @type {[($event: any, param: string[], env: any) => boolean | null | void, string[], boolean][]} */
+			/** @type {[Component.Event.Filter, string[], boolean][]} */
 			const filterFns = [];
 			if (filters) for (let f = fs.shift();f;f = fs.shift()) {
 				const paramIndex = f.indexOf(':');
@@ -2964,19 +3136,17 @@ function createTagComponent (context, name, is) {
 	return node;
 }
 
-/** @import * as Layout from '../Layout/index.mjs' */
 /** @import Store, { ArrayStore } from '../Store/index.mjs' */
 
 /**
  *
- * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
  * @param {ArrayStore} store
  * @param {Environment} env
- * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
+ * @param {(next: Node | null, env: any) => () => void} renderItem
  */
-function renderArray(layout, parent, next, store, env, renderItem) {
+function renderArray(parent, next, store, env, renderItem) {
 	const start = parent.insertBefore(document.createComment(''), next);
 	/** @type {Map<Store, [Comment, Comment, () => void]>} */
 	let seMap = new Map();
@@ -2999,7 +3169,7 @@ function renderArray(layout, parent, next, store, env, renderItem) {
 			if (!old) {
 				const ItemStart = parent.insertBefore(document.createComment(''), nextNode);
 				const itemEnd = parent.insertBefore(document.createComment(''), nextNode);
-				const d = renderItem(layout, parent, itemEnd, child, env.setStore(child, store));
+				const d = renderItem(itemEnd, env.setStore(child, store));
 				seMap.set(child, [ItemStart, itemEnd, d]);
 				continue;
 			}
@@ -3092,17 +3262,26 @@ function renderFillDirectives(parent, next, envs, { text, html }) {
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} envs
- * @param {(layout: Layout.Node) => () => void} renderItem
+ * @param {Record<string, [Layout.Node, Environment]>} templates
+ * @param {(layout: Layout.Node, templates: Record<string, any>) => () => void} renderItem
  * @returns {() => void}
  */
-function renderList(layouts, parent, next, envs, renderItem) {
+function renderList(layouts, parent, next, envs, templates, renderItem) {
 
 	/** @type {Set<() => void>?} */
 	let bkList = new Set();
-	/** @type {[string | Function | null, Layout.Node][]} */
+	/** @type {[string | Layout.Calc | null, Layout.Node][]} */
 	let ifList = [];
+	/** @type {Record<string, [Layout.Node, Environment]>} */
+	let currentTemplates = Object.create(templates);
+	for (const layout of layouts) {
+		if (typeof layout === 'string') { continue; }
+		const name = layout.directives.template;
+		if (!name) { continue; }
+		currentTemplates[name] = [layout, envs];
+	}
 
-	/** @param {[string | Function | null, Layout.Node][]} list */
+	/** @param {[string | Layout.Calc | null, Layout.Node][]} list */
 	function renderIf(list) {
 		if (!list.length || !bkList) { return; }
 		const end = parent.insertBefore(document.createComment(''), next);
@@ -3118,7 +3297,7 @@ function renderList(layouts, parent, next, envs, renderItem) {
 		function renderIndex(index) {
 			const layout = list[index]?.[1];
 			if (!layout) { return; }
-			destroy = renderItem(layout);
+			destroy = renderItem(layout, currentTemplates);
 		}
 		bkList.add(() => {
 			destroy();
@@ -3145,6 +3324,11 @@ function renderList(layouts, parent, next, envs, renderItem) {
 			bkList.add(() => node.remove());
 			continue;
 		}
+		if (layout.directives.template) {
+			renderIf(ifList);
+			ifList = [];
+			continue;
+		}
 		if (ifList.length && layout.directives.else) {
 			const ifv = layout.directives.if || null;
 			ifList.push([ifv, layout]);
@@ -3162,7 +3346,7 @@ function renderList(layouts, parent, next, envs, renderItem) {
 			continue;
 		}
 		bkList.add(
-			renderItem(layout)
+			renderItem(layout, currentTemplates)
 		);
 	}
 
@@ -3176,23 +3360,21 @@ function renderList(layouts, parent, next, envs, renderItem) {
 	};
 }
 
-/** @import * as Layout from '../Layout/index.mjs' */
-/** @import Store, { ObjectStore } from '../Store/index.mjs' */
+/** @import { ObjectStore } from '../Store/index.mjs' */
 
 /**
  *
- * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
  * @param {ObjectStore} store
  * @param {Environment} env
- * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
+ * @param {(next: Node | null, env: any) => () => void} renderItem
  */
-function renderObject(layout, parent, next, store, env, renderItem) {
+function renderObject(parent, next, store, env, renderItem) {
 	/** @type {(() => void)[]} */
 	const children = [];
 	for (const [k, child] of [...store]) {
-	children.push(renderItem(layout, parent, next, child, env.setStore(child, store)));
+	children.push(renderItem(next, env.setStore(child, store)));
 	}
 
 	return () => {
@@ -3202,20 +3384,15 @@ function renderObject(layout, parent, next, store, env, renderItem) {
 	};
 }
 
-/** @import * as Layout from '../Layout/index.mjs' */
-/** @import Store from '../Store/index.mjs' */
-
 /**
  *
- * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
- * @param {Store} store
  * @param {() => any} getter
  * @param {Environment} env
- * @param {(layout: Layout.Node, parent: Element, next: Node | null, store: Store, env: any) => () => void} renderItem
+ * @param {(next: Node | null, env: any) => () => void} renderItem
  */
-function renderEnum(layout, parent, next, store, getter, env, renderItem) {
+function renderEnum(parent, next, getter, env, renderItem) {
 
 	/** @type {Signal.Computed<[value: any, index: number, kKey: any][]>} */
 	const list = new Signal.Computed(() => {
@@ -3256,7 +3433,7 @@ function renderEnum(layout, parent, next, store, getter, env, renderItem) {
 				const itemEnd = parent.insertBefore(document.createComment(''), nextNode);
 				const valueState = new Signal.State(value);
 				const indexState = new Signal.State(index);
-				const d = renderItem(layout, parent, itemEnd, store, env.setObject({
+				const d = renderItem(itemEnd, env.setObject({
 					get key() { return key; },
 					get value() { return valueState.get(); },
 					get index() { return indexState.get(); },
@@ -3297,29 +3474,25 @@ function renderEnum(layout, parent, next, store, getter, env, renderItem) {
  * @param {Element} parent
  * @param {Node?} next
  * @param {Environment} env
- * @param {(layout: Layout.Node) => () => void} renderItem
- * @returns {() => void}
- */
-function renderFragment(layout, parent, next, env, renderItem) {
-	return renderFillDirectives(parent, next, env, layout.directives) || 
-	renderList(layout.children || [], parent, next, env, renderItem);
-
-}
-/**
- * @param {Layout.Node} layout
- * @param {Element} parent
- * @param {Node?} next
- * @param {Store} store
- * @param {Environment} env
+ * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
  * @param {((path: string[]) => Component?)?} [getComponent]
  */
-function renderItem(layout, parent, next, store, env, componentPath, getComponent) {
+function renderItem(layout, parent, next, env, templates, componentPath, getComponent) {
 	env = env.set(layout.aliases, layout.vars);
+	const fragment = layout.directives.fragment;
+	if (fragment && typeof fragment === 'string') {
+		const template = templates[fragment];
+		if (!template) { return () => {}; }
+		const [templateLayout, templateEnv] = template;
+		const newEnv = templateEnv.params(templateLayout, layout, env, layout.directives.bind);
+		return render(templateLayout, parent, next, newEnv, templates, componentPath, getComponent);
+	}
 	if (!layout.name || layout.directives.fragment) {
-		return renderFragment(layout, parent, next, env, l => {
-			return render(l, parent, next, store, env, componentPath, getComponent);
-		});
+		return renderFillDirectives(parent, next, env, layout.directives) || 
+			renderList(layout.children || [], parent, next, env, templates, (layout, templates) => {
+				return render(layout, parent, next, env, templates, componentPath, getComponent);
+			});
 	}
 	const path = [...componentPath, layout.name];
 	const component = getComponent?.(path);
@@ -3343,20 +3516,20 @@ function renderItem(layout, parent, next, store, env, componentPath, getComponen
 			: createTagComponent(context, component.tag, component.is)
 		: createTagComponent(context, layout.name, layout.is);
 	const root = Array.isArray(r) ? r[0] : r;
-	const slot = Array.isArray(r) && r[1] || root;
+	const slot = Array.isArray(r) ? r[1] : root;
 	parent.insertBefore(root, next);
-	const children =
+	const children = slot ? 
 		renderFillDirectives(slot, null, env, layout.directives)
-		|| renderList(layout.children || [], slot, null, env, l => {
-			return render(l, slot, null, store, env, componentPath, getComponent);
-		});
+		|| renderList(layout.children || [], slot, null, env,  templates, (layout, templates) => {
+			return render(layout, slot, null, env, templates, componentPath, getComponent);
+		}) : () => {};
 
 
 	bindClasses(root, layout.classes, env);
 	bindStyles(root, layout.styles, env);
 
 	handler.init();
-	// TODO: 创建组件
+	
 	return () => {
 		root.remove();
 		handler.destroy();
@@ -3369,40 +3542,30 @@ function renderItem(layout, parent, next, store, env, componentPath, getComponen
  * @param {Layout.Node} layout
  * @param {Element} parent
  * @param {Node?} next
- * @param {Store} store
  * @param {Environment} env
+ * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
  * @param {((path: string[]) => Component?)?} [getComponent]
  * @returns {() => void}
  */
-function render(layout, parent, next, store, env, componentPath, getComponent) {
+function render(layout, parent, next, env, templates, componentPath, getComponent) {
 	const { directives } = layout;
-	const { value } = directives;
-	if (value) {
-		const newStore = store.child(value);
-		if (!newStore) { return () => {}; }
-		store = newStore;
-		env = env.setStore(store);
-	}
-	const enumValue = directives.enum;
-	if (!enumValue) {
-		return renderItem(layout, parent, next, store, env, componentPath, getComponent);
-	}
-	const newStore = enumValue === true ? store : env.enum(enumValue);
-	if (newStore instanceof ArrayStore) {
-		return renderArray(layout, parent, next, newStore, env, (a, b, c, store, env) => {
-			return renderItem(a, b, c, store, env, componentPath, getComponent);
-		});
+	const newEnv = env.child(directives.value);
+	if (!newEnv) { return () => {}; }
+	const list = newEnv.enum(directives.enum);
+	/** @type {(next: Node | null, env: any) => () => void} */
+	const r = (next, env) => renderItem(layout, parent, next, env, templates, componentPath, getComponent);
+	if (list === true) {
+		return r(next, newEnv);
 	}
-	if (newStore instanceof ObjectStore) {
-		return renderObject(layout, parent, next, newStore, env, (a, b, c, store, env) => {
-			return renderItem(a, b, c, store, env, componentPath, getComponent);
-		});
+	if (list instanceof ArrayStore) {
+		return renderArray(parent, next, list, newEnv, r);
 	}
-	if (typeof newStore === 'function') {
-		return renderEnum(layout, parent, next, store, newStore, env, (a, b, c, store, env) => {
-			return renderItem(a, b, c, store, env, componentPath, getComponent);
-		});
+	if (list instanceof ObjectStore) {
+		return renderObject(parent, next, list, newEnv, r);
+	}
+	if (typeof list === 'function') {
+		return renderEnum(parent, next, list, newEnv, r);
 	}
 	return () => { };
 }
@@ -3435,9 +3598,10 @@ function index (store, layouts, parent, opt1, opt2) {
 	const options = [opt1, opt2];
 	const components = options.find(v => typeof v === 'function');
 	const global = options.find(v => typeof v === 'object');
-	const env = new Environment(global).setStore(store);
-	return renderList(layouts, parent, null, env, l => {
-		return render(l, parent, null, store, env, [], components);
+	const env = new Environment(store, global);
+	const templates = Object.create(null);
+	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
+		return render(layout, parent, null, env, templates, [], components);
 	});
 }