@neeloong/form 0.4.2 → 0.5.0

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.4.2
+* @neeloong/form v0.5.0
 * (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;
@@ -153,16 +153,14 @@ declare namespace Schema {
         }
     }
     type Object = {
-        type?: null | undefined;
-        props?: Record<string, Schema.Field> | undefined;
+        type: Record<string, Schema.Field>;
         array?: boolean | undefined;
     };
     type Type = {
         type: string;
-        props?: null | undefined;
         array?: boolean | undefined;
     };
-    type Event = {
+    type Events = {
         input: InputEvent;
         change: InputEvent;
         click: Event;
@@ -286,19 +284,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;
@@ -387,7 +385,7 @@ declare class Store<T = any> {
 }
 declare class ObjectStore extends Store<any> {
     /**
-     * @param {Schema.Field} schema
+     * @param {Schema.Object & Schema.Attr} schema
      * @param {object} [options]
      * @param {Store?} [options.parent]
      * @param {string | number} [options.index]
@@ -395,7 +393,7 @@ declare class ObjectStore extends Store<any> {
      * @param {(value: any, index: any) => void} [options.onUpdate]
      * @param {(value: any, index: any) => void} [options.onUpdateState]
      */
-    constructor(schema: Schema.Field, { parent, index, new: isNew, onUpdate, onUpdateState }?: {
+    constructor(schema: Schema.Object & Schema.Attr, { parent, index, new: isNew, onUpdate, onUpdateState }?: {
         parent?: Store<any> | null | undefined;
         index?: string | number | undefined;
         new?: boolean | undefined;
@@ -426,9 +424,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.2
+* @neeloong/form v0.5.0
 * (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) {
@@ -736,7 +736,7 @@
   	 * @param {boolean} [options.new] 
   	 */
   	static create(schema, options = {}) {
-  		return new ObjectStore({type: null, props: schema}, { ...options, parent: null });
+  		return new ObjectStore({type: schema}, { ...options, parent: null });
   	}
   	#null = false;
   	get null() { return this.#null; }
@@ -1179,7 +1179,7 @@
   	 */
   	child(key) { return this.#children[key] || null; }
   	/**
-  	 * @param {Schema.Field} schema
+  	 * @param {Schema.Object & Schema.Attr} schema
   	 * @param {object} [options] 
   	 * @param {Store?} [options.parent] 
   	 * @param {string | number} [options.index] 
@@ -1218,7 +1218,7 @@
   			}
   		};
 
-  		for (const [index, field] of Object.entries(schema.props || {})) {
+  		for (const [index, field] of Object.entries(schema.type)) {
   			let child;
   			if (typeof field.type === 'string') {
   				if (field.array) {
@@ -1229,7 +1229,7 @@
   			} else if (field.array) {
   				child = new ArrayStore(field, {...childCommonOptions, index});
   			} else {
-  				child = new ObjectStore(field, { ...childCommonOptions, index});
+  				child = new ObjectStore(/**@type {*}*/(field), { ...childCommonOptions, index});
   			}
   			children[index] = child;
   		}
@@ -1334,9 +1334,9 @@
   				child.index = index;
   				return child
   			};
-  		} else if (!Array.isArray(schema.props)) {
+  		} else if (schema.type && typeof schema.type === 'object' && !Array.isArray(schema.type)) {
   			this.#create = (index, isNew) =>  {
-  				const child = new ObjectStore(schema, { ...childCommonOptions, index, new: isNew});
+  				const child = new ObjectStore(/** @type {*} */(schema), { ...childCommonOptions, index, new: isNew});
   				child.index = index;
   				return child
   			};
@@ -2517,6 +2517,14 @@
   function toGlobal(global) {
   	/** @type {Record<string, ValueDefine | ExecDefine | CalcDefine>} */
   	const items = Object.create(null);
+  	items.$$size = { calc(v) {
+  		if (!v) { return 0; }
+  		if (Array.isArray(v)) { return v.length; }
+  		if (v instanceof Map) { return v.size; }
+  		if (v instanceof Set) { return v.size; }
+  		return Object.keys(v).length;
+  	} };
+
   	if (!global || typeof global !== 'object') { return items; }
   	for (const [key, value] of Object.entries(global)) {
   		if (!key || key.includes('$')) { continue; }
@@ -2611,12 +2619,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 +2640,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 +2659,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,11 +2674,11 @@
   		}
   	}
   	/**
-  	 * @param {string} name
+  	 * @param {string | true} name
   	 * @returns {Record<string, (value: any) => void> | void} 
   	 */
   	bindEvents(name) {
-  		const item = this.#items[name];
+  		const item = this.#items[name === true ? '' : name];
   		if (!item?.get) { return; }
   		const { store } = item;
   		if (!store) { 
@@ -3036,7 +3044,7 @@
   			continue;
   		}
   		const bind = attr.bind;
-  		if (!bindValue || !bind || typeof bindValue === 'boolean') {
+  		if (!bindValue || !bind) {
   			handler.set(name, attr.default);
   			continue;
   		}
@@ -3058,8 +3066,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));
@@ -3296,7 +3305,6 @@
 
   /** @import { Component } from '../types.mjs' */
   /** @import Environment from './Environment/index.mjs' */
-  /** @import Store from '../Store/index.mjs' */
 
 
   /** @type {Record<string, Component.Event.Filter>} */
@@ -3345,7 +3353,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;
   		}
@@ -3384,34 +3392,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;
   		}
   	},
@@ -3424,25 +3432,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} */
@@ -3450,11 +3478,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; }
@@ -3465,14 +3500,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;
@@ -3493,20 +3528,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 });
   		},
 
   	};
@@ -4119,7 +4159,7 @@
    * @param {string | boolean | null} [bind]
    */
   function bindBase(handler, env, bind) {
-  	if (!bind || typeof bind === 'boolean') { return () => {}; }
+  	if (!bind) { return () => {}; }
   	let bk = new Set();
   	for (const [key, effect] of Object.entries(env.bindAll(bind) || {})) {
   		if (typeof effect !== 'function') { continue; }
@@ -4147,7 +4187,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);
@@ -4203,7 +4243,7 @@
   	bindClasses(root, layout.classes, env);
   	bindStyles(root, layout.styles, env);
 
-  	handler.init();
+  	handler.mount();
   	
   	return () => {
   		root.remove();
@@ -4221,7 +4261,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) {
@@ -4260,15 +4300,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];