@neeloong/form 0.4.1 → 0.4.3

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.1
+* @neeloong/form v0.4.3
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -79,7 +79,7 @@ declare namespace index_d {
 
 type VerifyError = any;
 type Component = {
-    tag: string | ((ctx: any) => Element | [Element, (Element | null)?]);
+    tag: string | ((ctx: Component.Context) => Element | [Element, (Element | null)?]);
     is?: string | undefined;
     attrs?: Record<string, Component.Attr> | undefined;
     events?: Record<string, Component.Event> | undefined;
@@ -100,7 +100,7 @@ declare namespace Component {
         addEvent: (event: string, listener: EventListener) => void;
         destroy: () => void;
         tag: any;
-        init: () => void;
+        mount: () => void;
     };
     type Context = {
         props?: Set<string> | null | undefined;
@@ -128,8 +128,8 @@ declare namespace Component {
     namespace Event {
         type Filter = ($event: any, param: string[], env: any) => boolean | null | void;
     }
+    type Getter = (path: string[], next?: ((path: string[]) => Component | null) | undefined) => Component | null;
 }
-type ComponentGetter = (path: string[], next?: ((path: string[]) => Component | null) | undefined) => Component | null;
 type Schema = Record<string, Schema.Field>;
 declare namespace Schema {
     type Field = (Schema.Object | Schema.Type) & Schema.Attr;
@@ -162,7 +162,7 @@ declare namespace Schema {
         props?: null | undefined;
         array?: boolean | undefined;
     };
-    type Event = {
+    type Events = {
         input: InputEvent;
         change: InputEvent;
         click: Event;
@@ -286,19 +286,19 @@ declare class Store<T = any> {
     });
     /**
      *
-     * @template {keyof Schema.Event} K
+     * @template {keyof Schema.Events} K
      * @param {K} event
-     * @param  {Schema.Event[K]} value
+     * @param  {Schema.Events[K]} value
      */
-    emit<K extends keyof Schema.Event>(event: K, value: Schema.Event[K]): boolean;
+    emit<K extends keyof Schema.Events>(event: K, value: Schema.Events[K]): boolean;
     /**
      *
-     * @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<K extends keyof Schema.Event>(event: K, listener: (this: this, p: Schema.Event[K], store: this) => void | boolean | null): () => void;
+    listen<K extends keyof Schema.Events>(event: K, listener: (this: this, p: Schema.Events[K], store: this) => void | boolean | null): () => void;
     get null(): boolean;
     get kind(): string;
     schema: Schema.Field;
@@ -426,9 +426,9 @@ declare function _default(store: Store, layouts: (Node | string)[], parent: Elem
  * @param {Store} store
  * @param {(Layout.Node | string)[]} layouts
  * @param {Element} parent
- * @param {((path: string[]) => Component?)?} [components]
+ * @param {Component.Getter?} [components]
  * @returns {() => void}
  */
-declare function _default(store: Store, layouts: (Node | string)[], parent: Element, components?: ((path: string[]) => Component | null) | null | undefined): () => void;
+declare function _default(store: Store, layouts: (Node | string)[], parent: Element, components?: Component.Getter | null | undefined): () => void;
 
-export { Component, type ComponentGetter, index_d as Layout, Schema, Store, type VerifyError, _default as render };
+export { Component, index_d as Layout, Schema, Store, type VerifyError, _default as render };

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.1
+* @neeloong/form v0.4.3
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -697,9 +697,9 @@
   	#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;
@@ -712,9 +712,9 @@
   	}
   	/**
   	 * 
-  	 * @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) {
@@ -2611,12 +2611,12 @@
   	}
 
   	/**
-  	 * @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) {
@@ -2632,11 +2632,11 @@
   		}
   	}
   	/**
-  	 * @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) {
@@ -2651,12 +2651,12 @@
   		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; }
@@ -2666,37 +2666,21 @@
   		}
   	}
   	/**
-  	 * @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); },
@@ -3052,7 +3036,7 @@
   			continue;
   		}
   		const bind = attr.bind;
-  		if (!bindValue || !bind || typeof bindValue === 'boolean') {
+  		if (!bindValue || !bind) {
   			handler.set(name, attr.default);
   			continue;
   		}
@@ -3074,8 +3058,9 @@
   			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));
@@ -3103,9 +3088,8 @@
    * @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)) {
@@ -3121,16 +3105,6 @@
   		}
   		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;
@@ -3323,7 +3297,6 @@
 
   /** @import { Component } from '../types.mjs' */
   /** @import Environment from './Environment/index.mjs' */
-  /** @import Store from '../Store/index.mjs' */
 
 
   /** @type {Record<string, Component.Event.Filter>} */
@@ -3372,7 +3345,7 @@
   		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;
   		}
@@ -3411,34 +3384,34 @@
   		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;
   		}
   	},
@@ -3451,25 +3424,45 @@
    */
   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 exports.Signal.State(false);
+  	let mounted = false;
+  	const mountedState = new exports.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} */
@@ -3477,11 +3470,18 @@
   		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 exports.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; }
@@ -3492,14 +3492,14 @@
   			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;
@@ -3520,20 +3520,25 @@
   			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 });
   		},
 
   	};
@@ -4137,6 +4142,34 @@
   	};
   }
 
+  /** @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' */
 
   /**
@@ -4146,7 +4179,7 @@
    * @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);
@@ -4174,18 +4207,15 @@
   	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'
@@ -4205,13 +4235,14 @@
   	bindClasses(root, layout.classes, env);
   	bindStyles(root, layout.styles, env);
 
-  	handler.init();
+  	handler.mount();
   	
   	return () => {
   		root.remove();
   		handler.destroy();
   		attrs();
   		children();
+  		base();
   	};
   }
   /**
@@ -4222,7 +4253,7 @@
    * @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) {
@@ -4261,15 +4292,15 @@
    * @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];