@neeloong/form 0.2.0 → 0.3.0

package/README.md

@@ -160,12 +160,13 @@ render(store, layouts, app);
 
 优先级从高到低:
 
-1. 片段标志: `!fragment` 
+1. 模板定义: `!template`
 1. 条件: `!if` `!else`
 1. 子属性: `!value`
 1. 枚举: `!enum`
 1. 别名与计算名: `*别名` `*计算名`
 1. 显式变量: `+变量`
+1. 片段与模板调用: `!fragment` 
 1. 属性与事件: `:绑定属性` `@事件` `普通属性` `!bind`
 1. 子内容: `!text` `!html`
 1. 注释: `!comment`

package/index.d.mts

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.2.0
+* @neeloong/form v0.3.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -325,7 +325,8 @@ declare function parse(source: string, { creteCalc, creteEvent, simpleTag, }?: O
 declare function toString(value: Node | (Node | string)[], formable?: boolean): string;
 
 type Directives = {
-    fragment?: boolean | undefined;
+    template?: string | undefined;
+    fragment?: string | boolean | undefined;
     if?: string | Function | undefined;
     else?: boolean | undefined;
     /**
@@ -356,6 +357,7 @@ type Node = {
     attrs: Record<string, string | {
         name: string;
     } | ((global: any) => void)>;
+    params: Record<string, string | ((global: any) => void)>;
     classes: Record<string, string | boolean | ((global: any) => void)>;
     styles: Record<string, string | ((global: any) => void)>;
     events: Record<string, string | (($event: any, global: any) => void)>;

package/index.js

@@ -1,5 +1,5 @@
 /*!
-* @neeloong/form v0.2.0
+* @neeloong/form v0.3.0
 * (c) 2024-2025 Fierflame
 * @license Apache-2.0
 */
@@ -1478,7 +1478,7 @@
 
   /** @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
@@ -1486,7 +1486,7 @@
    * @param {Exclude<Layout.Options['creteEvent'], undefined>} creteEvent
    */
   function createAttributeAdder(node, creteCalc, creteEvent) {
-  	const { attrs, directives, events, classes, styles, vars, aliases } = node;
+  	const { attrs, directives, events, classes, styles, vars, aliases, params } = node;
   	/**
   	 * @param {string} qName
   	 * @param {string} value
@@ -1517,13 +1517,13 @@
   			vars[name] = !value ? '' : nameRegex.test(value) ? value : creteCalc(value);
   		} else if (decorator === '*') {
   			aliases[name] = nameRegex.test(value) ? value : creteCalc(value);
+  		} else if (decorator === '?') {
+  			params[name] = nameRegex.test(value) ? value : creteCalc(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;
   					break;
@@ -1532,6 +1532,7 @@
   				case 'html':
   					directives[key] = nameRegex.test(value) ? value : creteCalc(value);
   					break;
+  				case 'template':
   				case 'bind':
   				case 'value':
   				case 'comment':
@@ -1563,6 +1564,7 @@
   		styles: Object.create(null),
   		vars: Object.create(null),
   		aliases: Object.create(null),
+  		params: Object.create(null),
   	};
   }
 
@@ -2209,7 +2211,9 @@
   /**
    * @typedef {object} Directives
    * 
-   * @property {boolean} [fragment]
+   * @property {string} [template]
+   * 
+   * @property {boolean | string} [fragment]
    * 
    * @property {string | Function} [if]
    * @property {boolean} [else]
@@ -2238,6 +2242,7 @@
    * @property {string?} [is]
    * @property {string} [id]
    * @property {Record<string, string | {name: string} | ((global: any) => void)>} attrs
+   * @property {Record<string, string | ((global: any) => void)>} params
    * @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
@@ -2298,6 +2303,8 @@
   	return () => { w.unwatch(computed); };
   }
 
+  /** @import * as Layout from '../Layout/index.mjs' */
+
   const bindable = {
   	new: true,
   	readonly: true,
@@ -2621,6 +2628,67 @@
   		}
   		return cloned;
   	}
+  	/**
+  	 * 
+  	 * @param {Layout.Node} template 
+  	 * @param {Layout.Node} source 
+  	 * @param {Environment} sourceEnv 
+  	 */
+  	params({params}, {attrs}, sourceEnv) {
+  		if (Object.keys(params).length === 0) { return this; }
+  		const cloned = new Environment(this);
+  		cloned.#store = this.#store;
+  		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 exports.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 exports.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);
@@ -3670,15 +3738,24 @@
    * @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][]} */
   	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 */
   	function renderIf(list) {
@@ -3696,7 +3773,7 @@
   		function renderIndex(index) {
   			const layout = list[index]?.[1];
   			if (!layout) { return; }
-  			destroy = renderItem(layout);
+  			destroy = renderItem(layout, currentTemplates);
   		}
   		bkList.add(() => {
   			destroy();
@@ -3723,6 +3800,11 @@
   			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]);
@@ -3740,7 +3822,7 @@
   			continue;
   		}
   		bkList.add(
-  			renderItem(layout)
+  			renderItem(layout, currentTemplates)
   		);
   	}
 
@@ -3870,34 +3952,31 @@
 
   /** @import Store from '../Store/index.mjs' */
 
-  /**
-   * @param {Layout.Node} layout
-   * @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, store, 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);
+  		return render(templateLayout, parent, next, store, 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, store, env, templates, componentPath, getComponent);
+  			});
   	}
   	const path = [...componentPath, layout.name];
   	const component = getComponent?.(path);
@@ -3921,13 +4000,13 @@
   			: 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, store, env, templates, componentPath, getComponent);
+  		}) : () => {};
 
 
   	bindClasses(root, layout.classes, env);
@@ -3949,11 +4028,12 @@
    * @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, store, env, templates, componentPath, getComponent) {
   	const { directives } = layout;
   	const { value } = directives;
   	if (value) {
@@ -3964,22 +4044,22 @@
   	}
   	const enumValue = directives.enum;
   	if (!enumValue) {
-  		return renderItem(layout, parent, next, store, env, componentPath, getComponent);
+  		return renderItem(layout, parent, next, store, env, templates, 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);
+  			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
   		});
   	}
   	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);
+  			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
   		});
   	}
   	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);
+  			return renderItem(a, b, c, store, env, templates, componentPath, getComponent);
   		});
   	}
   	return () => { };
@@ -4014,8 +4094,9 @@
   	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 templates = Object.create(null);
+  	return renderList(layouts, parent, null, env, templates, (layout, templates) => {
+  		return render(layout, parent, null, store, env, templates, [], components);
   	});
   }