@neeloong/form 0.4.1 → 0.4.3

package/index.mjs

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.1
+* @neeloong/form v0.4.3
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -119,9 +119,9 @@ class Store {
 	#events = new Map()
 	/**
 	 * 
-	 * @template {keyof Schema.Event} K
+	 * @template {keyof Schema.Events} K
 	 * @param {K} event 
-	 * @param  {Schema.Event[K]} value 
+	 * @param  {Schema.Events[K]} value 
 	 */
 	emit(event, value) {
 		const key = typeof event === 'number' ? String(event) : event;
@@ -134,9 +134,9 @@ class Store {
 	}
 	/**
 	 * 
-	 * @template {keyof Schema.Event} K
+	 * @template {keyof Schema.Events} K
 	 * @param {K} event 
-	 * @param  {(this: this, p: Schema.Event[K], store: this) => void | boolean | null} listener
+	 * @param  {(this: this, p: Schema.Events[K], store: this) => void | boolean | null} listener
 	 * @returns {() => void}
 	 */
 	listen(event, listener) {
@@ -2033,12 +2033,12 @@ class Environment {
 	}
 
 	/**
-	 * @param {string} name
+	 * @param {string | true} name
 	 * @param {string} type
 	 * @param {(value: any) => void} cb 
 	 */
 	bind(name, type, cb) {
-		const item = this.#items[name];
+		const item = this.#items[name === true ? '' : name];
 		if (!item?.get) { return; }
 		const { store } = item;
 		if (!store) {
@@ -2054,11 +2054,11 @@ class Environment {
 		}
 	}
 	/**
-	 * @param {string} name
+	 * @param {string | true} name
 	 * @returns {Record<string, ((cb: (value: any) => void) => () => void) | void> | void}
 	 */
 	bindAll(name) {
-		const item = this.#items[name];
+		const item = this.#items[name === true ? '' : name];
 		if (!item?.get) { return; }
 		const { store } = item;
 		if (!store) {
@@ -2073,12 +2073,12 @@ class Environment {
 		return res;
 	}
 	/**
-	 * @param {string} name
+	 * @param {string | true} name
 	 * @param {string} type
 	 * @returns {((value: any) => void) | void} 
 	 */
 	bindSet(name, type) {
-		const item = this.#items[name];
+		const item = this.#items[name === true ? '' : name];
 		if (!item?.get) { return; }
 		const { store } = item;
 		if (!store) { return; }
@@ -2088,37 +2088,21 @@ class Environment {
 		}
 	}
 	/**
-	 * @param {string} name
+	 * @param {string | true} name
 	 * @returns {Record<string, (value: any) => void> | void} 
 	 */
-	bindStateAllSet(name) {
-		const item = this.#items[name];
+	bindEvents(name) {
+		const item = this.#items[name === true ? '' : name];
 		if (!item?.get) { return; }
 		const { store } = item;
 		if (!store) { 
 			const set = item.set;
 			if (typeof set !== 'function') { return; }
 			return { '$value': set }
-		 }
+		}
 		return {
 			'$value': v => {store.value = v; },
 			'$state': v => {store.state = v; },
-		}
-	}
-	/**
-	 * @param {string} name
-	 * @returns {Record<string, (value: any) => void> | void} 
-	 */
-	bindEvents(name) {
-		const item = this.#items[name];
-		if (!item?.get) { return; }
-		const { store } = item;
-		if (!store) { 
-			const set = item.set;
-			if (typeof set !== 'function') { return; }
-			return { '$value': set }
-		 }
-		return {
 			'$input': v => {store.emit('input', v); },
 			'$change': v => {store.emit('change', v); },
 			'$click': v => {store.emit('click', v); },
@@ -2474,7 +2458,7 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 			continue;
 		}
 		const bind = attr.bind;
-		if (!bindValue || !bind || typeof bindValue === 'boolean') {
+		if (!bindValue || !bind) {
 			handler.set(name, attr.default);
 			continue;
 		}
@@ -2496,8 +2480,9 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
 			continue;
 		}
 		if (!isState) {
-			bk.add(envs.watch(bindValue, v => handler.set(name, v)));
-			handler.addEvent(event, (...args) => { envs.all[bindValue] = set(...args);});
+			const bindKey = bindValue === true ? '' : bindValue;
+			bk.add(envs.watch(bindKey, v => handler.set(name, v)));
+			handler.addEvent(event, (...args) => { envs.all[bindKey] = set(...args);});
 			continue;
 		}
 		const r = envs.bind(bindValue, 'state', v => handler.set(name, v));
@@ -2525,9 +2510,8 @@ function bindAttrs(handler, envs, attrs, componentAttrs, bindValue) {
  * @param {Component.Handler} handler
  * @param {Environment} envs
  * @param {Record<string, string | {name: string} | Layout.Calc>} attrs
- * @param {string | boolean | null} [bindValue]
  */
-function bindBaseAttrs(handler, envs, attrs, bindValue) {
+function bindBaseAttrs(handler, envs, attrs) {
 	const tag = handler.tag;
 	let bk = new Set();
 	for (const [name, attr] of Object.entries(attrs)) {
@@ -2543,16 +2527,6 @@ function bindBaseAttrs(handler, envs, attrs, bindValue) {
 		}
 		bk.add(envs.watch(attrSchema, val => handler.set(name, val)));
 	}
-	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)));
-		}
-		for (const [key, setter] of Object.entries(envs.bindStateAllSet(bindValue) || {})) {
-			if (typeof setter !== 'function') { continue; }
-			handler.addEvent(key, $event => setter($event));
-		}
-	}
 
 	return ()=> {
 		const list = bk;
@@ -2745,7 +2719,6 @@ class EventEmitter {
 
 /** @import { Component } from '../types.mjs' */
 /** @import Environment from './Environment/index.mjs' */
-/** @import Store from '../Store/index.mjs' */
 
 
 /** @type {Record<string, Component.Event.Filter>} */
@@ -2794,7 +2767,7 @@ const eventFilters = {
 		if (evt instanceof KeyboardEvent) {
 			const key = evt.code.toLowerCase().replace(/-/g, '');
 			for (const k of param) {
-				if (key === k.toLowerCase().replace(/-/g, '')) { return true }
+				if (key === k.toLowerCase().replace(/-/g, '')) { return true; }
 			}
 			return false;
 		}
@@ -2833,34 +2806,34 @@ const eventFilters = {
 		if (evt instanceof PointerEvent) {
 			const pointerType = evt.pointerType.toLowerCase().replace(/-/g, '');
 			for (const k of param) {
-				if (pointerType === k.toLowerCase().replace(/-/g, '')) { return true }
+				if (pointerType === k.toLowerCase().replace(/-/g, '')) { return true; }
 			}
 			return false;
 		}
 	},
 
 	ctrl(evt) {
-		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+		if (evt instanceof MouseEvent || evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
 			return evt.ctrlKey;
 		}
 	},
 	alt(evt) {
-		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+		if (evt instanceof MouseEvent || evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
 			return evt.altKey;
 		}
 	},
 	shift(evt) {
-		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+		if (evt instanceof MouseEvent || evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
 			return evt.shiftKey;
 		}
 	},
 	meta(evt) {
-		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+		if (evt instanceof MouseEvent || evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
 			return evt.metaKey;
 		}
 	},
 	cmd(evt) {
-		if (evt instanceof MouseEvent|| evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
+		if (evt instanceof MouseEvent || evt instanceof KeyboardEvent || evt instanceof TouchEvent) {
 			return evt.ctrlKey || evt.metaKey;
 		}
 	},
@@ -2873,25 +2846,45 @@ const eventFilters = {
  */
 function createContext(component, env) {
 	const tag = typeof component === 'string' ? component : component.tag;
-	const { attrs, events } = typeof component !== 'string' && component || {attrs: null, events: null };
+	const { attrs, events } = typeof component !== 'string' && component || { attrs: null, events: null };
 
 	let destroyed = false;
-	let init = false;
+	const destroyedState = new Signal.State(false);
+	let mounted = false;
+	const mountedState = new Signal.State(false);
+	/** @type {Record<string, Signal.State<any> | void>} */
+	const attrStates = Object.create(null);
 	const tagAttrs = Object.create(null);
 
+	const attrWatchers = new Set();
+
 	/** @type {[string, ($event: any) => void, AddEventListenerOptions][]} */
 	const allEvents = [];
 	const stateEmitter = new EventEmitter();
-	/** @type {EventEmitter<Record<string, [any, any, string]>>} */
-	const attrEmitter = new EventEmitter();
 	/** @type {Component.Context} */
 	const context = {
 		events: allEvents,
-		props: attrs ? new Set(Object.entries(attrs).filter(([,a]) => a.isProp).map(([e]) => e)) : null,
+		props: attrs ? new Set(Object.entries(attrs).filter(([, a]) => a.isProp).map(([e]) => e)) : null,
 		tagAttrs,
-		watchAttr(name, fn) { return attrEmitter.listen(name, fn); },
-		get destroyed() { return destroyed},
-		get init() { return init},
+		watchAttr(name, fn) {
+			if (destroyed) { return () => { }; }
+			const state = attrStates[name];
+			if (!state) { return () => { }; }
+			let old = state.get();
+			const w = watch(() => state.get(), v => {
+				const o = old;
+				old = v;
+				fn(v, o, name);
+			});
+			attrWatchers.add(w);
+
+			return () => {
+				attrWatchers.delete(w);
+				w();
+			};
+		},
+		get destroyed() { return destroyedState.get(); },
+		get init() { return mountedState.get(); },
 		listen(name, listener) { return stateEmitter.listen(name, listener); },
 	};
 	/** @type {Component.Handler} */
@@ -2899,11 +2892,18 @@ function createContext(component, env) {
 		tag,
 		set(name, value) {
 			if (attrs && !(name in attrs)) { return; }
-			if (!(name in tagAttrs)) { tagAttrs[name] = void 0; }
-			const old = tagAttrs[name];
-			if (old === value) { return; }
-			tagAttrs[name] = value;
-			attrEmitter.emit(name, value, old, name);
+			let state = attrStates[name];
+			if (state) {
+				state.set(value);
+				return;
+			}
+			const s = new Signal.State(value);
+			attrStates[name] = s;
+			Object.defineProperty(tagAttrs, name, {
+				configurable: true,
+				enumerable: true,
+				get: s.get.bind(s),
+			});
 		},
 		addEvent(name, fn) {
 			if (typeof fn !== 'function') { return; }
@@ -2914,14 +2914,14 @@ function createContext(component, env) {
 			const options = {};
 			/** @type {[Component.Event.Filter, string[], boolean][]} */
 			const filterFns = [];
-			if (filters) for (let f = fs.shift();f;f = fs.shift()) {
+			if (filters) for (let f = fs.shift(); f; f = fs.shift()) {
 				const paramIndex = f.indexOf(':');
 				const noParamName = paramIndex >= 0 ? f.slice(0, paramIndex) : f;
 				const param = paramIndex >= 0 ? f.slice(paramIndex + 1).split(':') : [];
 				const filterName = noParamName.replace(/^-+/, '');
 				const sub = (noParamName.length - filterName.length) % 2 === 1;
 				let filter = filters[filterName] || filterName;
-				switch(filter) {
+				switch (filter) {
 					case 'once':
 						options.once = !sub;
 						break;
@@ -2942,20 +2942,25 @@ function createContext(component, env) {
 			allEvents.push([e, $event => {
 				const global = env.all;
 				for (const [filter, param, sub] of filterFns) {
-					if (filter($event, param, global) === sub) { return}
+					if (filter($event, param, global) === sub) { return; }
 				}
 				fn($event, global);
 			}, options]);
 		},
 		destroy() {
-			if (destroyed) { return }
+			if (destroyed) { return; }
 			destroyed = true;
+			destroyedState.set(true);
+			for (const w of attrWatchers) {
+				w();
+			}
 			stateEmitter.emit('destroy');
 		},
-		init() {
-			if (init) { return }
-			init = true;
-			stateEmitter.emit('init', {events: allEvents});
+		mount() {
+			if (mounted) { return; }
+			mounted = true;
+			mountedState.set(true);
+			stateEmitter.emit('init', { events: allEvents });
 		},
 
 	};
@@ -3559,6 +3564,34 @@ function renderEnum(parent, next, getter, env, renderItem) {
 	};
 }
 
+/** @import { Component } from '../types.mjs' */
+
+
+/**
+ * @param {Component.Handler} handler
+ * @param {Environment} env
+ * @param {string | boolean | null} [bind]
+ */
+function bindBase(handler, env, bind) {
+	if (!bind) { return () => {}; }
+	let bk = new Set();
+	for (const [key, effect] of Object.entries(env.bindAll(bind) || {})) {
+		if (typeof effect !== 'function') { continue; }
+		bk.add(effect(val => handler.set(key, val)));
+	}
+	for (const [key, setter] of Object.entries(env.bindEvents(bind) || {})) {
+		handler.addEvent(key, $event => setter($event));
+	}
+
+	return ()=> {
+		const list = bk;
+		bk = new Set();
+		for (const s of list) {
+			s();
+		}
+	}
+}
+
 /** @import Store from '../Store/index.mjs' */
 
 /**
@@ -3568,7 +3601,7 @@ function renderEnum(parent, next, getter, env, renderItem) {
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
- * @param {((path: string[]) => Component?)?} [getComponent]
+ * @param {Component.Getter?} [getComponent]
  */
 function renderItem(layout, parent, next, env, templates, componentPath, getComponent) {
 	env = env.set(layout.aliases, layout.vars);
@@ -3596,18 +3629,15 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
 	const componentAttrs = component?.attrs;
 	const attrs = componentAttrs
 		? bindAttrs(handler, env, layout.attrs, componentAttrs, bind)
-		: bindBaseAttrs(handler, env, layout.attrs, bind);
+		: bindBaseAttrs(handler, env, layout.attrs);
 
 	for (const [name, event] of Object.entries(layout.events)) {
 		const fn = env.getEvent(event);
 		if (fn) { handler.addEvent(name, fn); }
 	}
 
-	if (bind && typeof bind !== 'boolean') {
-		for (const [key, event] of Object.entries(env.bindEvents(bind) || {})) {
-			handler.addEvent(key, event);
-		}
-	}
+	const base = bindBase(handler, env, bind);
+
 
 	const r = component ?
 		typeof component.tag === 'function'
@@ -3627,13 +3657,14 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
 	bindClasses(root, layout.classes, env);
 	bindStyles(root, layout.styles, env);
 
-	handler.init();
+	handler.mount();
 	
 	return () => {
 		root.remove();
 		handler.destroy();
 		attrs();
 		children();
+		base();
 	};
 }
 /**
@@ -3644,7 +3675,7 @@ function renderItem(layout, parent, next, env, templates, componentPath, getComp
  * @param {Environment} env
  * @param {Record<string, [Layout.Node, Environment]>} templates
  * @param {string[]} componentPath
- * @param {((path: string[]) => Component?)?} [getComponent]
+ * @param {Component.Getter?} [getComponent]
  * @returns {() => void}
  */
 function render(layout, parent, next, env, templates, componentPath, getComponent) {
@@ -3683,15 +3714,15 @@ function render(layout, parent, next, env, templates, componentPath, getComponen
  * @param {Store} store
  * @param {(Layout.Node | string)[]} layouts 
  * @param {Element} parent 
- * @param {((path: string[]) => Component?)?} [components] 
+ * @param {Component.Getter?} [components] 
  * @returns {() => void}
  */
 /**
  * @param {Store} store
  * @param {(Layout.Node | string)[]} layouts 
  * @param {Element} parent 
- * @param {((path: string[]) => Component?) | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt1] 
- * @param {((path: string[]) => Component?) | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt2] 
+ * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt1] 
+ * @param {Component.Getter | Record<string, Store | {get?(): any; set?(v: any): void; exec?(...p: any[]): any; calc?(...p: any[]): any }> | null} [opt2] 
  */
 function index (store, layouts, parent, opt1, opt2) {
 	const options = [opt1, opt2];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neeloong/form",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "",
   "keywords": [
     "from",