houxit 0.1.11 → 0.1.14

package/dist/houxit.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/index.js
 var log = console.log;
-var version = "0.1.10";
-var get_version = () => "houxit-0.1.10";
+var version = "0.1.15";
+var get_version = () => "houxit-0.1.15";
 var isArray = Array.isArray;
 var toString = Object.prototype.toString;
 var _toStringCall = (txt) => toString.call(txt);
@@ -54,7 +54,7 @@ var isChar = (char) => isString(char) || isSymbol(char);
 var isPromise = (prom) => _toStringCall(prom) === "[object Promise]" && isFunction(prom.then) && isFunction(prom.catch);
 var isTrue = (compute) => compute === true;
 var isFalse = (compute) => compute === false;
-var $warner = `<<< Houxit Exception >>> ..... >>>>>>>`;
+var $warner = `<<<[ Houxit Exception ]>>> ..... >>>>>>>`;
 var stringsMonitorRegex = /"(.*?)"|'(.*?)'|`+(.*?\s)`+/gm;
 function debugHandler(msg, self, dictateW = false, txt = "") {
 	let DEBUG_ENV = true;
@@ -311,9 +311,6 @@ var validHouxitWidget = (w) => w && ((is_wuf_class(w) || isObject(w)) && !isProx
 function isAsyncFunction(fn) {
 	return isPFunction(fn) && fn?.constructor?.name === "AsyncFunction";
 }
-function parseScript(script, args) {
-	return new Function(`"use strict"; return (${script})`)(args);
-}
 var isInDomNode = (element) => inBrowserCompiler && element?.getRootNode() === document;
 var GLOBAL_EVENTS = "abort,animationcancel,animationend,animationiteration,animationstart,auxclick,blur,error,focus,canplay,canplaythrough,cancel,change,click,close,contextmenu,dblclick,drag,dragend,dragenter,dragleave,dragover,dragstart,drop,durationchange,emptied,ended,formdata,gotpointercapture,input,invalid,keydown,keypress,load,keyup,loadeddata,loadedmetadata,loadend,loadstart,lostpointercapture,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup,mousewheel,wheel,pause,play,playing,pointerdown,pointermove,pointerup,pointercancel,pointerover,pointerout,pointerleave,pointerenter,pointerlockchange,pointerlockerror,progress,ratechange,reset,resize,scroll,securitypolicyviolation,seeked,seeking,select,selectstart,selectionchange,slotchange,stalled,submit,suspend,timeupdate,touchcancel,touchend,touchstart,touchmove,transitioncancel,transitionrun,transitioned,transitionstart,waiting,volumechange,autocompleteerror,autocomplete,hover";
 var IS_VALID_EVENT_HANDLER = (eventName) => _makeMap_(GLOBAL_EVENTS, eventName);
@@ -372,7 +369,7 @@ function compileToRenderable(value, preserve = true) {
 var arrowFNRegex = /^(async[ ]+)?(\(([\w$,.\[\]\{\} ]*)\)|[\w$]+)[ ]*=>[ ]*[{]?\s*/;
 var functionFNRegex = /^(async[ ]+)?(function)?([*]?([ ]*)[\w$]*)?\(([\w$]*)?\)[ ]*\{\s*/m;
 var isArrowFunction = (fn) => isPFunction(fn) && arrowFNRegex.test(fn.toString());
-var isFNString = (str) => isString(str) && isTrue(arrowFNRegex.test(str) || functionFNRegex.test(str));
+var isFNString = (str) => isString(str) && (arrowFNRegex.test(str) || functionFNRegex.test(str));
 var objectDestructureRegex = /^{(.*?)}$/;
 var arrayDestructureRegex = /^\[(.*?)\]$/;
 var isForLoopDestructureRegex = /^((\(|\<)(.*?)(\)|\>))$/;
@@ -944,89 +941,52 @@ var arrayMM = "push,pop,shift,unshift,splice,sort,reverse,copyWithin,fill";
 var setMM = "add,delete,clear";
 var mapMM = "set,delete,clear";
 var tupleMM = "add,delete,clear,shift,unshift,splice,pop,extend,replace,prepend,arrange,exchange";
-var objectMM = "define,delete";
-function getMutationArgs(data) {
-	return isArray(data) ? arrayMM : isSet(data) ? setMM : isMap(data) ? mapMM : isTuple(data) ? tupleMM : isPObject(data) ? objectMM : "";
-}
-function getAgentMutators(data, prop, model) {
-	const value = data;
-	data = unwrap(data);
-	let mutateArgs = getMutationArgs(data) + "write";
-	const mutation_object = createObj("Mutatations");
-	for (let name of mutateArgs.split(",").values()) {
-		function mutate(arg) {
-			let rv = void 0;
-			if (validateType(data, [
-				Set,
-				Tuple,
-				Array,
-				Map
-			])) rv = data[name](arg);
-			else if (isPObject(data)) {
-				if ("define" === name) rv = define(data, ...arguments);
-				else if ("delete" === name) {
-					delete data[arg];
-					rv = true;
-				}
-			}
-			let assV = rv;
-			if ((model || !isPrimitive(value)) && prop && name === "write") assV = set_Object_Value(isModelInstance(model) ? model : !isPrimitive(value) ? value : freeze(), prop, len(arguments) ? arg : data);
-			return assV;
-		}
-		mutate = Function("fn", `
-        return function ${name === "delete" ? "del" : name}(value){
-          return fn(...arguments);
-        }
-      `)(mutate);
-		define(mutation_object, name, {
-			value: mutate,
-			enumerable
-		});
-	}
-	return mutation_object;
+function getMutationArgs(base) {
+	return hasPrototype(base, Set) || hasPrototype(base, WeakSet) ? setMM : hasPrototype(base, Array) ? arrayMM : hasPrototype(base, Tuple) ? tupleMM : hasPrototype(base, Map) || hasPrototype(base, WeakMap) ? mapMM : "";
 }
-function _useAgent_(data, ModelInstance) {
+function _useAgent_(data, config) {
 	const dataRead = () => data;
 	if (!validateCollectionArgs(arguments, {
 		min: 1,
 		max: 2,
-		validators: [Any, [Model]],
+		validators: [Any, [Object]],
 		name: "useAgent"
 	})) return [dataRead, pass];
-	if (isHouxitBuild(this) && !isChar(data)) {
+	let model = isHouxitBuild(this) ? this.__public_model__ : void 0;
+	if (!model && isObject(this)) model = this;
+	if (model && (!isChar(data) || !object_Has_Path(model, data))) {
 		debugHandler(`[ ] data path at positional argument 1 expects a string/symbol value of an existing model path\n\n.>...$useAgent`);
 		return [dataRead, pass];
-	} else if (isModelInstance(ModelInstance) && !isChar(data)) {
-		debugHandler(`[ ] data property at positional argument 1 of "useAgent" expects a string/symbol value\n\nMust be a model valid path`);
-		return [dataRead, pass];
-	}
-	const self = isHouxitBuild(this) ? this : isModelInstance(ModelInstance) ? { __public_model__: ModelInstance } : null;
-	ModelInstance = self ? self.__public_model__ : null;
-	if (self && !isHouxitBuild(self)) delete self.__public_model__;
-	let prop = isModelInstance(ModelInstance) ? data : isToken(data) ? data[refInternalEffectKey].accessor : "";
-	if (isModelInstance(ModelInstance) && !object_Has_Path(ModelInstance, prop)) {
-		debugHandler(`[ ] "${prop}" property is not a valid model property`);
-		return [dataRead, pass];
 	}
-	data = isModelInstance(ModelInstance) && exists(prop) ? _$runModelBind(ModelInstance, prop || "") : data;
-	const mutateArgs = getAgentMutators(data, prop, ModelInstance);
-	let defineCount = 0;
+	let prop = model ? data : isToken(data) ? data[refInternalEffectKey].accessor : "";
+	data = model && exists(prop) ? () => _$runModelBind(model, prop || "") : data;
 	const unwrappedGetter = () => read(data);
-	function mutate(mutation) {
-		if (isPFunction(mutation) && defineCount < 1) {
-			defineCount++;
-			define(mutateArgs, "data", { get() {
-				return unwrappedGetter();
-			} });
-		}
-		if (isPFunction(mutation)) try {
+	const mutateArgs = {
+		get value() {
+			return unwrappedGetter();
+		},
+		write(...args) {
+			return write(...args);
+		}
+	};
+	function write(value) {
+		return mutate(value, PRIVATE_PROPERTY_KEY);
+	}
+	function mutate(mutation, p_p_k) {
+		if (isPFunction(mutation) && p_p_k !== PRIVATE_PROPERTY_KEY) try {
 			mutation(mutateArgs);
 		} catch (err) {
-			debugHandler(`[ ] Encountered an error during the call of the writer callback\n\n${err}`);
+			debugHandler(`[ useAgent write failure ] Encountered an error during the call of the writer callback\n\n${err}`);
+			debugHandler(`${err}`);
 			return false;
 		}
 		else if (!isPFunction(mutation)) {
-			set_Object_Value(isModelInstance(ModelInstance) ? ModelInstance : !isPrimitive(data) ? data : freeze(), prop, mutation);
+			try {
+				set_Object_Value(model ? model : !isPrimitive(data) ? data : freeze(), prop, mutation);
+			} catch (e) {
+				debugHandler(e);
+				return false;
+			}
 			return true;
 		}
 	}
@@ -1038,8 +998,8 @@ function _useAgent_(data, ModelInstance) {
 	}
 	return [reader, writer];
 }
-function useAgent(data, ModelInstance) {
-	return _useAgent_(...arguments);
+function useAgent(data, value) {
+	return _useAgent_.call(this, ...arguments);
 }
 function WRITE(props) {
 	if (!validateCollectionArgs(arguments, {
@@ -2208,10 +2168,8 @@ function _createAgent(value, config) {
 		min: 1,
 		max: 2,
 		validators: [Any, Object]
-	})) return pass;
-	if (!getCurrentRunningEffect({ name: "agent" })) return [pass, pass];
-	const parameters = [value, assign({ shallow: true }, config || {})];
-	return _useAgent_(!isToken(value) && !isPrimitive(value) ? stream(...parameters) : token(...parameters));
+	})) return [pass, pass];
+	return _useAgent_(token(...[value, assign({ shallow: true }, config || {})]));
 }
 function agent(value, config) {
 	return _createAgent(...arguments);
@@ -2340,35 +2298,10 @@ var FrameworkCompilerOptions = class {
 	scopedStyle = true;
 };
 var Compiler_Config_Options = new FrameworkCompilerOptions();
-var HouxitCompilerSetup = class {
-	debug(debug) {
-		if (isFalse(mapSettingCheck(this, "debug", debug))) return this;
-		Compiler_Config_Options.debug = debug;
-	}
-	forwardAttrs(forwardAttrs) {
-		if (isFalse(mapSettingCheck(this, "forwardAttrs", forwardAttrs))) return this;
-		Compiler_Config_Options.forwardAttrs = forwardAttrs;
-	}
-	forwardEvents(forwardEvents) {
-		if (isFalse(mapSettingCheck(this, "forwardEvents", forwardEvents))) return this;
-		Compiler_Config_Options.forwardEvents = forwardEvents;
-	}
-	flushType(flushType) {
-		if (isFalse(mapSettingCheck(this, "flushType", flushType))) return this;
-		Compiler_Config_Options.flushType = flushType;
-	}
-	forwardSlot(forwardSlot) {
-		if (isFalse(mapSettingCheck(this, "forwardSlot", forwardSlot))) return this;
-		Compiler_Config_Options.forwardSlot = forwardSlot;
-	}
-	delimiters(delimiters) {
-		if (isFalse(mapSettingCheck(this, "delimiters", delimiters))) return this;
-		Compiler_Config_Options.delimiters = delimiters;
-	}
-	scopedStyle(scopedStyle) {
-		if (isFalse(mapSettingCheck(this, "scopedStyle", scopedStyle))) return this;
-		Compiler_Config_Options.scopedStyle = scopedStyle;
-	}
+var CompilerConfigOptions = class {};
+for (let key of keys(Compiler_Config_Options)) CompilerConfigOptions.prototype[key] = function(config) {
+	if (isFalse(mapSettingCheck(this, key, config))) return this;
+	Compiler_Config_Options[key] = config;
 };
 function isXtruct(func, ...arg) {
 	try {
@@ -3589,7 +3522,7 @@ function HydrateSuspenseRender(self, suspense, element, isRerender, config) {
 var BUILT_IN_TRANSITIONS = {};
 var BUILT_IN_ANIMATIONS = {};
 var hasMotionInstance = (self, name, mode) => {
-	return _makeMap_(mode === "transitions" ? BUILT_IN_TRANSITIONS : BUILT_IN_ANIMATIONS, name) || _makeMap_(self[$$$register][mode], name) || _wufHas_instance(name);
+	return _makeMap_(mode === "transitions" ? BUILT_IN_TRANSITIONS : BUILT_IN_ANIMATIONS, name) || _makeMap_(self[$$$register][mode], name) || _wufHas_instance(self, name);
 };
 function normalize_Motion(self, name, mode) {
 	const BUILT_IN_MOTION = mode === "transitions" ? BUILT_IN_TRANSITIONS : BUILT_IN_ANIMATIONS;
@@ -3887,7 +3820,7 @@ function debug_unrecognized_tagname(tagname, self) {
 	debugHandler(`[ ] [unexpected template tagname]  "${tagname}" is not a valid html element, or a registered widget instance.\n\nif this is a customElement, make sure its defined through the "customElements.define()" method `, self, true);
 }
 function isCustomElementTagname(tagname) {
-	return isPFunction(customElements.get(tagname));
+	return isFunction(customElements.get(tagname));
 }
 function getBoundary(instance) {
 	return isHouxitBuild(instance) ? instance[$$$core].virtualNode.filesFilter.suspense : instance?.[isVNodeClass(instance) ? "filesFilter" : "VNodeManager"]?.suspense;
@@ -4128,6 +4061,7 @@ var HouxitNativeElement = class extends HouxitElement {
 	constructor(vnode) {
 		super(...arguments);
 		this.VNodeManager.SSRVnode = new vNodeClass();
+		this.VNodeManager.customEvents = {};
 		HouxitTemplateGenerators.call(this, ...arguments);
 		this.prototype_ = vnode.type;
 	}
@@ -4335,19 +4269,9 @@ function generateTemplateElement(vnode, self, hx_Element, siblings, IS_RENDERLES
 }
 function _generateTemplateElement(virtualNode, self, hx_Element, siblings, IS_RENDERLESS, customElementsArgs, config) {
 	const { prototype_ } = virtualNode;
-	if (isString(prototype_) && IS_VALID_TAGNAME(prototype_)) return _createNativeElement(...arguments);
-	else if (isString(prototype_)) return generateCustomNativeElement(...arguments);
+	if (isString(prototype_)) return _createNativeElement(...arguments);
 	else return _createWidgetElement(...arguments);
 }
-function generateCustomNativeElement(vnode, self, hx_Element, siblings, IS_RENDERLESS, customElementsArgs, config) {
-	let { type, props, children, key } = vnode;
-	len(arguments);
-	hx_Element?.is_hyperscript;
-	if (self[$$$operands]?.initializedRender) return;
-	const element = document.createElement(type);
-	element._set_compiler_options(...arguments);
-	return element;
-}
 function _createNativeElement(virtualNode, self, hx_Element, siblings, IS_RENDERLESS, customElementsArgs, config, o) {
 	config = assign({}, config);
 	let { type, props, children, key } = virtualNode;
@@ -4415,7 +4339,10 @@ function _createNativeElement(virtualNode, self, hx_Element, siblings, IS_RENDER
 			index++;
 		}
 	}
-	if (props) Props_dilation_compile(virtualNode, self, hx_Element, metrics, element, config);
+	if (props) {
+		if (!IS_VALID_TAGNAME(type)) config.isCustomElement = true;
+		Props_dilation_compile(virtualNode, self, hx_Element, metrics, element, config);
+	}
 	if (!isRerender && virtualNode.prototype_ === "slot" && !(isSSR ? element?.props.name.trim() : element.name?.trim())) {
 		slotNamingTRANSITION(self, { value: "default" }, element, hx_Element, {
 			is_hyperscript,
@@ -4713,21 +4640,14 @@ function abstractFilterName(filter) {
 }
 var HouxitDirectives = "if,else,else-if,html,text,for,raw,slot,model,bind,on,scoped,provide,transite,animate,clone";
 var isHouxitDirective = (dir) => _makeMap_(HouxitDirectives, dir);
+var commentRegex = /\/\/.*$|\/\*[^]*?\*\//gm;
+var unsupportedRegex = /(?:\.\.|\bthrow\b|\bdelete\b|\bvoid\b|\bconst\b|\blet\b|\bvar\b|\bwhile\b|\bfor\b|\bof\b|\bif\b|\belse\b|\bimport\b|\bexport\b|\bswitch\b|\bcase\b|\btry\b|\bcatch\b|\bcontinue\b|\bbreak\b|\bwith\b|\bdebugger\b|\blabel\b|\bdo\b|\bfrom\b|\bas\b|\bfinally\b|\benum\b|\bimplements\b|\binterface\b|\bpackage\b|\bprotected\b|\bin\b)/gm;
 function _Evaluate_THIS(obj, str, self, optional) {
-	const commentRegex = /\/\/.*$|\/\*[^]*?\*\//g;
-	let expressionWithoutComments = str.replace(commentRegex, "").replace(stringsMonitorRegex, () => "");
-	const unsupportedRegex = /(?:\.\.|\bthrow\b|\bdelete\b|\bvoid\b|\bconst\b|\blet\b|\bvar\b|\bwhile\b|\bfor\b|\bof\b|\bif\b|\belse\b|\bimport\b|\bexport\b|\bswitch\b|\bcase\b|\btry\b|\bcatch\b|\bcontinue\b|\bbreak\b|\bwith\b|\bdebugger\b|\blabel\b|\bdo\b|\bfrom\b|\bas\b|\bfinally\b|\benum\b|\bimplements\b|\binterface\b|\bpackage\b|\bprotected\b)/;
-	let checkRegex = false;
-	try {
-		parseScript(expressionWithoutComments);
-	} catch (err) {
-		checkRegex = true;
-	}
-	if (checkRegex && unsupportedRegex.test(expressionWithoutComments.replace(stringsMonitorRegex, () => ""))) throw new Error(`Invalid expression: \n\nUnsupported constructs are not allowed.\n\n"${str}"`, self, true);
-	else if (commentRegex.test(str)) {
-		debugHandler(`[ ] Template SyntaxError...\n\nComments not allowed in template expression\n\n"${str}"`, self, true);
+	let expressionWithoutComments = str.replace(commentRegex, "").replace(stringsMonitorRegex, "");
+	if (unsupportedRegex.test(expressionWithoutComments.replace(stringsMonitorRegex, () => ""))) {
+		debugHandler(`Invalid expression: \n\nUnsupported constructs are not allowed.\n\n"${str}"\n\n"${expressionWithoutComments.match(unsupportedRegex).join(", ")}" not supported in an inline bind expression`, self, true);
 		return;
-	}
+	} else if (commentRegex.test(str.replace(stringsMonitorRegex, () => ""))) str = expressionWithoutComments;
 	let dexTransform;
 	if (optional && isPObject(optional) && hasOwn(optional, $$dexTransformKey)) {
 		dexTransform = optional[$$dexTransformKey];
@@ -4737,7 +4657,8 @@ function _Evaluate_THIS(obj, str, self, optional) {
 	let compile_Str = `with(obj){
         with($$$ctx){
           try{
-            return dexTransform ? dexTransform.traverse()  : ${str.trim() || "undefined"};
+            if(dexTransform) return  dexTransform.traverse();
+            else return ${str.trim() || "undefined"};
           }catch(err){
             throw new Error(err);
           }
@@ -4750,7 +4671,10 @@ function _Evaluate_THIS(obj, str, self, optional) {
 	let value;
 	try {
 		value = getValue.call(obj, obj, isPObject(optional) ? optional : {}, dexTransform, self[$$$core].__env__ || {});
-	} catch (error) {}
+	} catch (error) {
+		debugHandler(`${error}`, self, true);
+		return;
+	}
 	return value;
 }
 function transformDestructureContext(props, sources, vv, metrics = []) {
@@ -5218,7 +5142,7 @@ function validateListenSpecialEvent(self, bindings) {
 	bindings.modifiers = isString(modifiers) ? modifiers.split("|") : isArray(modifiers) ? modifiers : [];
 	return true;
 }
-function HTMLAttrsMagnifier(element, bindings, hx_Element, self, metrics) {
+function HTMLAttrsMagnifier(element, bindings, hx_Element, self, metrics, config) {
 	let { is_hyperscript, isRerender, vNode, forwardAttrs } = metrics;
 	const isSSR = isSSRCompiler(self);
 	let { key, value: attr, src } = bindings;
@@ -5236,7 +5160,7 @@ function HTMLAttrsMagnifier(element, bindings, hx_Element, self, metrics) {
 		is_hyperscript,
 		bindings,
 		forwardAttrs
-	}, hx_Element);
+	}, hx_Element, config);
 	else if (!isRerender && (isOnListener(key) || isInlineListener(key) || key === "dispatch")) {
 		if (!click_handler_facading(self, [
 			key,
@@ -5250,7 +5174,7 @@ function HTMLAttrsMagnifier(element, bindings, hx_Element, self, metrics) {
 	else if (key === "motion") motionPropFacade(self, bindings, element, hx_Element, metrics);
 	else {
 		try {
-			attr = compileToRenderable(unwrap(attr));
+			attr = compileToRenderable(unwrap(attr), config.isCustomElement);
 			const sp = hx_Element?.VNodeManager?.patchFlags.shapeProps;
 			if (isSSR || isRerender) {
 				const props = isRerender ? sp : element.props;
@@ -5263,10 +5187,10 @@ function HTMLAttrsMagnifier(element, bindings, hx_Element, self, metrics) {
 		}
 		if (isRerender && !len(bindings.subscribers) || isSSR) return;
 		const flush = createPriorityFlush(bindings.effect, function(observers) {
-			value = _createElementPropsEffectBlock_(self, {
+			attr = _createElementPropsEffectBlock_(self, {
 				element,
 				key,
-				value: compileToRenderable(value),
+				value: compileToRenderable(attr, config.isCustomElement),
 				mode: void 0,
 				effect: bindings.effect
 			}, observers);
@@ -5300,6 +5224,7 @@ function isInlineListener(key) {
 }
 function click_handler_facading(self, [key, attr, src], bindings, element, hx_Element, metrics) {
 	attr = unwrap(attr);
+	const { config } = metrics;
 	if (key === "dispatch" && !isArray(attr)) {
 		debugHandler(`[ ] <dispatch> dispatcher expects an array value of events and method\n\nFound "${attr}" of "${getType(attr)}" type`, self, !isNull(self));
 		return;
@@ -5312,6 +5237,10 @@ function click_handler_facading(self, [key, attr, src], bindings, element, hx_El
 	bindings.value = attr;
 	metrics = assign({ options }, metrics);
 	if (!validateListenSpecialEvent(self, bindings)) return;
+	if (config.isCustomElement) {
+		element[key] = attr;
+		return;
+	}
 	$$dir_ON(self, bindings, element, hx_Element, metrics);
 	return true;
 }
@@ -5463,9 +5392,8 @@ function transformAttachProp(self, bindings, element, hx_Element, metrics) {
 }
 function __widget_props_effect(app, metrics, observers) {
 	if (!isHouxitBuild(app)) return;
-	const { value, effect, key } = metrics;
-	const transform = effect.runEffect().value;
-	const newValue = unwrap(transform);
+	const { value, effect, key, config } = metrics;
+	const newValue = unwrap(isEffect(effect) ? effect.runEffect?.().value : effect);
 	const params = app[$$$ownProperties].$params;
 	const attrs = app.__public_model__.$attrs;
 	const mode = hasOwn(params, key) ? "params" : hasOwn(attrs, key) ? "attrs" : void 0;
@@ -5534,7 +5462,7 @@ function attributes_hydration(props, self, hx_Element, metrics, element, config,
 	else if (bindings.key === "key") {
 		hx_Element.VNodeManager.vNodeClass.key = bindings.value;
 		hx_Element.VNodeManager.keyIdBinding = bindings;
-	} else (isW ? widget_props_plugin : HTMLAttrsMagnifier)(element, bindings, hx_Element, self, metrics);
+	} else (isW ? widget_props_plugin : HTMLAttrsMagnifier)(element, bindings, hx_Element, self, metrics, config);
 }
 function slotNamingTRANSITION(self, bindings, element, hx_Element, metrics) {
 	let { value } = bindings;
@@ -5594,7 +5522,7 @@ function SlotContextBindingTRANSITON(self, bindings, element, hx_Element, metric
 		});
 	}
 }
-function IDLPropsTransform(self, props, element, metrics, hx_Element) {
+function IDLPropsTransform(self, props, element, metrics, hx_Element, config) {
 	let [key, attr] = props;
 	const { is_hyperscript, bindings } = metrics;
 	const isSSR = isSSRCompiler(self);
@@ -5610,8 +5538,8 @@ function IDLPropsTransform(self, props, element, metrics, hx_Element) {
 		} else element.className = element.className + " " + transform.join(" ");
 	} else if (isSSR || isRerender) {
 		const props = isRerender ? sp : hx_Element.VNodeManager.SSRVnode.props;
-		props[_makeMap_("innerText,textContent", key) ? "innerText" : key] = escapeDecoder(compileToRenderable(attr));
-	} else element[key] = compileToRenderable(attr);
+		props[_makeMap_("innerText,textContent", key) ? "innerText" : key] = config.isCustomElement ? attr : escapeDecoder(compileToRenderable(attr));
+	} else element[key] = compileToRenderable(attr, config.isCustomElement);
 	if (isRerender && !len(bindings.subscribers) || isSSR) return;
 	const flush = createPriorityFlush(bindings.effect, function(observers) {
 		_createElementPropsEffectBlock_(self, {
@@ -5813,7 +5741,7 @@ function Special_REF_Modifier(self, node, binding, hx_Element, metrics) {
 	self[$$$core].map.is_hyperscript;
 	let refKey = effect ? effect.value : value;
 	const templateRefs = self[$$$operands].templateRefsInputs;
-	const model = self.__public_model__;
+	self.__public_model__;
 	let ref;
 	if (isString(refKey)) {
 		if (!hasOwn(templateRefs, refKey)) {
@@ -5826,7 +5754,7 @@ function Special_REF_Modifier(self, node, binding, hx_Element, metrics) {
 		debugHandler(`[templateRefs reference] not a token. templateRefs expects a token() instance.\nSee [Template Refs] reference`, self, true);
 		return;
 	}
-	const [getRef, setRef] = model.$useAgent(ref);
+	const [getRef, setRef] = useAgent(ref);
 	let cb = pass;
 	const current = getRef();
 	if (current && !isArray(current)) setRef(shallowStream([current]));
@@ -5957,9 +5885,8 @@ function $$dir_ON(self, bindings, node, hx_Element, metrics) {
 		}, hx_Element, metrics.is_hyperscript);
 		const funcToken = attr;
 		effect = _createHouxitEffectFrame(() => {
-			attr = _$runModelBind(self, attr, hx_Element);
-			attr = object_Has_Path(self.__public_model__, funcToken) && isPFunction(attr) ? attr.bind(self.__public_model__) : attr;
-			return attr;
+			let res = _$runModelBind(self, attr, hx_Element);
+			return object_Has_Path(self.__public_model__, funcToken) && isPFunction(res) ? res.bind(self.__public_model__) : res;
 		}, self);
 		try {
 			attr = effectRunner(effect).value;
@@ -5979,21 +5906,19 @@ function $$dir_ON(self, bindings, node, hx_Element, metrics) {
 	if (!isRerender && isWidget) {
 		const board = vNode.filesFilter.$$$Events;
 		for (let [ind, ev] of deepKeys.entries()) {
-			let card = {
+			if (!hasOwn(board, ev)) board[ev] = {
 				callbacks: new Tuple(),
 				event: ev,
 				effect
 			};
-			if (hasOwn(board, ev)) card = board[ev];
-			else board[ev] = card;
 			attr.options = options;
-			card.callbacks.add(attr);
+			board[ev].callbacks.add(attr);
 		}
-	} else if (!isRerender && isHydration(self) && isVNodeClass(node) || !isSSR && IS_ELEMENT_NODE(node)) for (let event of deepKeys.values()) if (!IS_VALID_EVENT_HANDLER(event)) debugHandler(`[ ] "${event}" is not a valid event name`, self, true);
+	} else if (!isRerender && isHydration(self) && isVNodeClass(node) || !isSSR && IS_ELEMENT_NODE(node)) for (let event of deepKeys.values()) if (!IS_VALID_EVENT_HANDLER(event) && !metrics.config.isCustomElement) debugHandler(`[ ] "${event}" is not a valid event name`, self, true);
 	else {
 		const callbackListen = (element) => {
 			element.addEventListener(event, (...args) => {
-				(isFunction(listenerHandle) ? listenerHandle : pass)(...args);
+				safeCall(listenerHandle, ...args);
 			}, options);
 		};
 		if (isHydration(self)) node.filesFilter.$ssr_kit.hydrationFlushs.add(callbackListen);
@@ -6001,7 +5926,6 @@ function $$dir_ON(self, bindings, node, hx_Element, metrics) {
 	}
 	createPriorityFlush(effect, () => {
 		listenerHandle = effect.runEffect().value;
-		listenerHandle = !isPFunction(listenerHandle) ? pass : listenerHandle;
 	});
 	return node;
 }
@@ -6039,10 +5963,6 @@ function normalize_motion_directives(self, bindings, node, hx_Element, metrics,
 	let { value, modifiers, key, directive, deepKeys } = bindings;
 	modifiers = new Set(modifiers);
 	hx_Element.is_hyperscript;
-	value = effectRunner(_createHouxitEffectFrame(function() {
-		return _$runModelBind(self, value, hx_Element, !modifiers.has("bind"));
-	}, self)).value;
-	value = unwrap(value);
 	const obj = hx_Element.VNodeManager.motion_object;
 	const mode = modifiers.has("in") ? "in," : modifiers.has("out") ? "out" : "both";
 	const activateMotion = (key, directive) => {
@@ -6157,13 +6077,12 @@ function $$dir_MODEL(self, bindings, element, hx_Element, metrics) {
 				try {
 					initVal = updateElementModelValue(self, element, get_I_V($ev.target), item, initVal, modifiers);
 				} catch (err) {
-					debugHandler(err);
 					debugHandler(`[ ] ${err}`, self, true);
 				}
 			});
 		}
 		if (isHydration(self)) element.filesFilter.$ssr_kit.hydrationFlushs.add(flushCallback);
-		else if (!isSSR) whenMounted(self, element, () => flushCallback(element));
+		else if (!isSSR) flushCallback(element);
 		createPriorityFlush(effect, () => {
 			if (localName === "form") return;
 			applyModelInitialState(self, element, unwrap(effect.runEffect().value), localName);
@@ -6205,6 +6124,7 @@ function normalize_form_model(self, element, value, modifiers, effect) {
 			try {
 				initVal = updateElementModelValue(self, control, get_I_V($ev.target), name, initVal, modifiers, value);
 			} catch (err) {
+				console.error(err);
 				debugHandler(err);
 				debugHandler(`[ ] ${err}`, self, true);
 			}
@@ -6244,7 +6164,7 @@ function applyModelInitialState(self, element, initVal, localName, inForm) {
 			if (isCollection(initVal) ? genericCollection(initVal).has(value) : !element.hasAttribute("value") ? initVal : value === initVal) element.checked = true;
 			else element.checked = false;
 		} else if (type === "file") {
-			debugHandler(`[Houxit $$model Warning]:$$model is not supported on ${escapeDecoder("<input type=\"file\">")}. Use @change to access event.target.files instead.`);
+			debugHandler(`[Houxit $$model Warning]:$$model is not supported on ${escapeDecoder("<input type=\"file\">")}. \nUse @change to access event.target.files instead.`);
 			return;
 		} else if (!isNull(initVal)) element.value = compileToRenderable(initVal);
 	}
@@ -6258,11 +6178,15 @@ function updateElementModelValue(self, element, target_value, path, value, modif
 		return val;
 	};
 	if (name === "select") {
+		if (element.multiple && !isCollection(value)) {
+			debugHandler(`[ invalid $$model value ] ${escapeDecoder("<select multiple>")} expects an array/collection value reference`, self, true);
+			return;
+		}
 		let coll = isCollection(value) && element.multiple ? genericCollection(value) : value;
 		for (let [index, opt] of entries(element.options)) {
 			const v = applyModelValueModifiers(opt.value, modifiers);
 			if (opt.selected && !(element.multiple ? coll.has(v) : v === value)) value = isCollection(value) && element.multiple ? coll.add(v) : setV(v);
-			else if (!opt.selected && (element.multiple ? coll.has(v) : v === value)) value = isCollection(value) && element.multiple ? coll.delete(v) : setV(null);
+			else if (!opt.selected && (element.multiple ? coll.has?.(v) : v === value)) value = isCollection(value) && element.multiple ? coll.delete(v) : setV(null);
 		}
 	} else {
 		if (!element.hasAttribute("value")) current = element.checked ? true : false;
@@ -6272,7 +6196,7 @@ function updateElementModelValue(self, element, target_value, path, value, modif
 				if (element.checked && !coll.has(current)) coll.add(current);
 				else if (!element.checked && coll.has(current)) coll.delete(current);
 			} else if (!cs || cs && isNull(value)) value = setV(current);
-		} else if (!cs || cs && isNull(value)) value = setV(current);
+		} else if (!cs || cs && isNull(value)) value = setV(target_value);
 	}
 	return value;
 }
@@ -6337,7 +6261,7 @@ function applyHouxitAnimation(node, animation, params = {}, options = {}) {
 		fill: "both",
 		autoplay: false
 	}, config || {});
-	const { duration, delay, easing, iterations, direction, fill, autoplay, styles, keyframes, frame } = config;
+	const { duration, delay, easing, iterations, direction, fill, autoplay, styles, keyframes, frame, onStart } = config;
 	if (!frame && isString(easing.css) && keyframes && !isFunction(keyframes.keyframes)) return applyCSSBasedAnimation(node, config, params, options);
 	let player = null, destroyed = false;
 	function startRAF() {
@@ -6365,10 +6289,7 @@ function applyHouxitAnimation(node, animation, params = {}, options = {}) {
 			const rawT = elapsed / duration;
 			let iterationIndex = Math.floor(rawT);
 			let iterationProgress = rawT - iterationIndex;
-			if (!started) {
-				started = true;
-				onStart?.();
-			}
+			if (!started) started = true;
 			if (totalIterations !== Infinity && iterationIndex >= totalIterations) {
 				iterationIndex = totalIterations - 1;
 				iterationProgress = 1;
@@ -6420,7 +6341,6 @@ function applyHouxitAnimation(node, animation, params = {}, options = {}) {
 		player.oncancel = () => {
 			if (!destroyed) oncancel?.();
 		};
-		onstart?.();
 		if (!autoplay) player.pause();
 		return player;
 	}
@@ -6473,7 +6393,6 @@ function applyCSSBasedAnimation(node, config, params = {}, options = {}) {
 	document.head.appendChild(style);
 	function handleStart(e) {
 		if (e.target !== node) return;
-		onstart?.();
 	}
 	function handleEnd(e) {
 		if (e.target !== node) return;
@@ -7556,7 +7475,7 @@ function grabSSRVNodSlots(self, vnode, name) {
 		if (name === value.props.name || ssrSmartDefaultToggle(value.props, name)) return value;
 	}
 }
-function assignSlot(self, slot, content, name, assynedSlots, renderedSlotsList, vnode) {
+function assignSlot(self, slot, content, name, assynedSlots, renderedSlotsList, vnode, isCustomElement) {
 	if (content && isHouxitElement(content) && !hasOwn(renderedSlotsList, name)) {
 		if (isSSRCompiler(self)) {
 			slot = grabSSRVNodSlots(self, vnode, name);
@@ -7579,13 +7498,26 @@ var shouldForwwardSlots = (element, slots, self) => {
 	if (isSSRCompiler(self)) return isString(element.type) && !len(element.children) && element?.type !== "slot";
 	return IS_ELEMENT_NODE(element) && !element.innerHTML.trim() && element?.localName !== "slot";
 };
+function custom_elements_slotting(element, slots, self) {
+	slots.default = new Tuple();
+	for (let [ind, el] of entries(element.children)) {
+		let name = el.slot || "default";
+		if (!hasOwn(slots, name)) slots[name] = new Tuple();
+		slots[name].add(el._hx_Element.hx_Element);
+		if (isInDomNode(el)) el.remove();
+	}
+	for (let [name, content] of entries(slots)) if (len(content) > 1) slots[name] = new HouxitFragmentElement(content.list(), self);
+	else if (len(content)) slots[name] = content.at(0);
+}
 function _$slotHydrationRenderer(self, opts, vnode_build) {
 	const slots = self[$$$core].slots;
-	if (!len(slots) || !vnode_build || !isHouxitElement(vnode_build) || isHouxitTextElement(vnode_build)) return vnode_build;
+	const $$config = self[$$$compiler].$$config;
+	if (!len(slots) && !$$config?.isCustomElement || !vnode_build || !isHouxitElement(vnode_build) || isHouxitTextElement(vnode_build)) return vnode_build;
 	const renderedSlotsList = {};
 	const slot_elements = resolveSlotsFilter(self, vnode_build);
 	const assynedSlots = new Tuple();
-	for (const [slotN, slot_el] of entries(slot_elements)) if (hasOwn(slots, slotN) && !assynedSlots.has(slotN)) assignSlot(self, slot_el, slots[slotN]?.(self), slotN, assynedSlots, renderedSlotsList, vnode_build);
+	if ($$config?.isCustomElement) custom_elements_slotting($$config.element, slots, self);
+	for (const [slotN, slot_el] of entries(slot_elements)) if (hasOwn(slots, slotN) && !assynedSlots.has(slotN)) assignSlot(self, slot_el, safeCall(slots[slotN], self), slotN, assynedSlots, renderedSlotsList, vnode_build, $$config.isCustomElement);
 	if (shouldForwwardSlots(vnode_build?.$element, slot_elements, self) && !len(vnode_build.NodeList)) {
 		if (self[$$$core].settings.forwardSlot) {
 			const slotContent = hasOwn(slots, "default") ? slots.default(self) : null;
@@ -7919,12 +7851,34 @@ function createSignalFromEventObject(self, event) {
 		return merger.call(this, ...arguments);
 	};
 }
+var HouxitEvents = class extends Event {
+	#properties;
+	constructor(event, properties = {}) {
+		super(event);
+		this.#properties = properties;
+	}
+	get target() {
+		return this.#properties.target_value;
+	}
+};
 function $construct_With_Signals(self, options, in_build = false, vnode) {
+	const $$config = self[$$$compiler].$$config;
 	if (!self.__public_model__.$events) defineGetter(self.__public_model__, "$events", new Events());
 	if (in_build) vnode = options;
 	const $$events = self[$$$core].virtualNode.filesFilter.$$$Events;
 	const signals = new Tuple(...options.signals || []);
 	const $signals = self.__public_model__.$signals;
+	const ce_hx_Element = $$config?.element?._hx_Element.hx_Element;
+	if (!in_build && $$config?.isCustomElement) for (let [ev_name, my_event] of entries(ce_hx_Element.VNodeManager.customEvents)) {
+		if (!hasOwn($$events, ev_name)) $$events[ev_name] = {
+			callbacks: new Tuple(),
+			event: ev_name,
+			effect: void 0
+		};
+		$$events[ev_name].callbacks.add(function() {
+			$$config.element.dispatchEvent(my_event);
+		});
+	}
 	for (const [key, event] of entries($$events)) if (signals.has(key)) $signals[key] = createSignalFromEventObject(self, event);
 	for (const signal of signals.values()) if (!hasOwn($signals, signal)) $signals[signal] = createSignalFromEventObject(self, { callbacks: [] });
 }
@@ -8153,9 +8107,9 @@ function collectionsPropAssertion(target, prop) {
 	} else if (isMap(target) || isWeakMap(target)) {
 		if (_makeMap_(mapMM, prop)) response = false;
 	} else if (isTuple(target)) {
-		if (_makeMap_(tupleMM)) response = false;
+		if (_makeMap_(tupleMM, prop)) response = false;
 	} else if (isArray(target)) {
-		if (_makeMap_(arrayMM)) response = false;
+		if (_makeMap_(arrayMM, prop)) response = false;
 	} else if (prop === $$$StreamProxyKey) response = false;
 	if (isCollection(target)) prop = target;
 	return [response, prop];
@@ -8231,6 +8185,7 @@ function transformProxyStream(obj, ReactiveEffect, config) {
 	return reactive;
 }
 function hasPrototype(obj, prototype) {
+	if (!isClass(obj) && isPObject(obj)) obj instanceof prototype;
 	obj = obj.prototype;
 	prototype = prototype.prototype;
 	while (obj) {
@@ -8246,7 +8201,7 @@ function streamReactiveHook(X, args, name, ReactiveEffect) {
 	return res;
 }
 function CollectionsEffectMutationsTrap(BaseStream, ReactiveEffect) {
-	(hasPrototype(BaseStream, Set) || hasPrototype(BaseStream, WeakSet) ? setMM : hasPrototype(BaseStream, Array) ? arrayMM : hasPrototype(BaseStream, Tuple) ? tupleMM : hasPrototype(BaseStream, Map) || hasPrototype(BaseStream, WeakMap) ? mapMM : "").split(",").values().forEach((method) => {
+	getMutationArgs(BaseStream).split(",").values().forEach((method) => {
 		if (!method) return;
 		BaseStream.prototype[method] = Function("streamReactiveHook", `
         return function ${method === "delete" ? "del" : method}(){
@@ -8697,7 +8652,7 @@ function mapPublicationsTraverse(self, opts, adapter) {
 }
 function receivePublicationPrefix(self, opts, in_build = false) {
 	if (!hasOwn(opts, "receive")) return;
-	const globalBoard = isInitialBuild(self) ? self[$$$core]?.$globals.transmited : (self[$$$core].$root || {})[$$$core]?.$globals.transmited;
+	const globalBoard = isInitialBuild(self) ? self[$$$core]?.$globals.transmited : (self[$$$core].$root || {})[$$$core]?.$globals.transmited || {};
 	for (let [key, valueX] of getIterator(opts.receive)) {
 		let keyName = isArray(opts.receive) ? valueX : key;
 		if (!validateType(keyName, [String, Symbol])) {
@@ -8759,7 +8714,7 @@ function applyMixinMergeStrategy(self, options, mixins) {
 	const store = {};
 	for (const mx of mixins.toReversed().values()) {
 		if (!validateType(mx, [Function, Object])) {
-			debugHandler(`[ ] [Houxit Mixin Merge Warn] Mixins expects a plain fuction/object instance/valid Houxit widget instance`, self, true);
+			debugHandler(`[Houxit Mixin Merge Warn] Mixins expects a plain fuction/object instance/valid Houxit widget instance`, self, true);
 			return;
 		} else if (applied_mixins.has(mx)) continue;
 		applied_mixins.prepend(mx);
@@ -9780,7 +9735,10 @@ function Render_Effect_Reactive_Transform(self, observer) {
 				is_hyperscript,
 				observer
 			});
-		}).catch((e) => debugHandler(e));
+		}).catch((e) => {
+			console.error(e);
+			debugHandler(e);
+		});
 	} catch (e) {
 		RenderEffect_$Warn(self, e);
 	}
@@ -10190,7 +10148,7 @@ function installTransformersArgumentations(self, child, hx_Element, vNode) {
 	define(child[$$$core], "$root", { value: root });
 	define(child[$$$core], "$parent", { value: hx_Element.compiler_options.parent });
 	define(child[$$$core], "$owner", { value: self });
-	for (let [prop, content] of entries(root[$$$core].$globals.register)) child[$$$core].$globals.register[prop] = assign(child[$$$core].$globals.register[prop], content);
+	for (let [prop, content] of entries(root?.[$$$core]?.$globals?.register || {})) child[$$$core].$globals.register[prop] = assign(child[$$$core].$globals.register[prop], content);
 }
 function resolveInstanceWidgetNormalizer(self, vNode) {
 	const tagname = isBlockTag(vNode.type) ? getBlockTagName(vNode.type) : vNode.type;
@@ -10256,16 +10214,18 @@ function $compilerEngine(self, virtualNode, hx_Element, slotsCompilerArgs, confi
 		virtualNode.filesFilter.useSSRCompiler = true;
 		if (isHydration(self)) virtualNode.filesFilter.isHydration = true;
 	}
-	return initializedRenderBuild(self, hx_Element, virtualNode).mount(_createFragment());
+	return initializedRenderBuild(self, hx_Element, virtualNode, config).mount(_createFragment());
 }
-function initializedRenderBuild(self, hx_Element, virtualNode) {
+function initializedRenderBuild(self, hx_Element, virtualNode, config) {
 	const child = new HouxitBuild(virtualNode);
+	child[$$$compiler].$$config = config;
 	integrateUseInstallProto(child);
 	if (hx_Element) hx_Element.widget_instance = child;
 	if (self) {
 		controllerHydration(self, child, hx_Element, virtualNode);
 		child.install(controllerGlobalPlugin, { self });
 	}
+	if (config.isCustomElement) for (let callback of config.configureApp.values()) callback.call(config.element, child);
 	return child;
 }
 function integrateUseInstallProto(self) {
@@ -10478,7 +10438,7 @@ function isDynamicPropTag(tag) {
 var isOpenEmptyTag = (tag) => /(\<[ ]*\>)/.test(tag);
 var isCloseEmptyTag = (tag) => /(\<\/[ ]*\>)/.test(tag);
 var openingTagsRegex = /(\<[ ]*\>|\<\/[ ]*\>)|(<(\/)?([\w\-\$!:\#\@.()[\]%?\/&]+)(\s+[^>]*?(?:(?:[\w]+[_!@#$'"%^&*()+\-\[\]{};:\\|,.<\/?~`]*)|(?:'[^']*'[^>\s]*)|(?:"[^"]*"[^>\s]*)))*\s*(\/)?>)|([\w \s!@#$'"%^&*()+\-\[\]{};:\\|,.>=\/?`~]+)/gm;
-var openingTagRegex = /<([\w\-\$!:\#\@.()[\]%?&]+)(\s+[^>]*?(?:(?:[\w]+[_!@#$'"%^&*()+\-\[\]{};:\\|,.<\/?>=`~]*)|(?:'[^']*'[^>\s]*)|(?:"[^"]*"[^>\s]*)))*\s*(\/)?>/m;
+var openingTagRegex = /<([\w\-\$!:\#\@.()[\]%?&]+)(\s+[^>]*?(?:(?:[\w]+[_!@#$'"%^&*()+\-\[\]{};:\\|,.<\/?=`~]*)|(?:'[^']*'[^>\s]*)|(?:"[^"]*"[^>\s]*)))*\s*(\/)?>/m;
 var isOpeningTag = (source) => openingTagRegex.test(source);
 var closingTagRegex = /<[\/]([\w$.:\-\@()[\]%&?\\\/]+)[ ]*>/;
 var isClosingTag = (source) => closingTagRegex.test(source);
@@ -10487,7 +10447,7 @@ var openingTagAttrRegex = /^<[\w\-\$!\@:.()[\]%?&]+([\s\S]*[^\/>])?\s*(\/)?>\s*$
 var JSXParserRegex = /hx:\(\(__(\d)__\)\)/;
 var isOpeningCommentTag = (tag) => /<!-->/.test(tag);
 var isClosingCommentTag = (tag) => /<\/-->/.test(tag);
-var commentRegex = /((<!--)|(-->))/g;
+var tempCommentRegex = /((<!--)|(-->))/g;
 function compelToResolveTagname(self, vNode, config = {}) {
 	if (isHouxitBuild(self) && isString(vNode.type) && !IS_VALID_TAGNAME(vNode.type)) resolveInstanceWidgetNormalizer(self, vNode);
 	else if (config.JSXParser && isString(vNode.type) && JSXParserRegex.test(vNode.type)) {
@@ -10540,7 +10500,7 @@ function normalize_jsx_props(vnode, config) {
 	else if (JSXParserRegex.test(value)) {
 		const instance = normalizeJSXPropValue(config, key);
 		if (!isString(instance)) {
-			debugHandler(`[ ] property key value passed to the "html" macro is not a valid prop name\n\ntype of "${typeof instance}" found >>>> Expects a "string" value`);
+			debugHandler(`[ ] property key value passed to the "htx" macro is not a valid prop name\n\ntype of "${typeof instance}" found >>>> Expects a "string" value`);
 			return;
 		}
 		vnode.props[instance] = vnode.props[key];
@@ -10617,7 +10577,7 @@ function openingTagHydrate(tagMatch, NodeList, setup, metrics) {
 function parserSourceInitializer(source, self) {
 	return source.replace(generateBlockTagRegex(isHouxitBuild(self) ? self[$$$core].settings.delimiters : void 0), (match, timing, ClosingTag, name, value, selfClosed) => {
 		return `<${ClosingTag === "/" ? "/" : ""}::@_(${name})_ ${ClosingTag === "@" ? "exp=\"" + escapeDecoder(value) + "\"" : ""} ${selfClosed ? "/" : ""}>`;
-	}).replace(commentRegex, (match, path, r) => /<!--/.test(match) ? "<!-->" : /-->/.test(match) ? "</-->" : match);
+	}).replace(tempCommentRegex, (match, path, r) => /<!--/.test(match) ? "<!-->" : /-->/.test(match) ? "</-->" : match);
 }
 function __HouxitHTMLParser__(source, NodeList = [], config = {}, self) {
 	if (!isString(source) && !source.trim()) return !isArray(NodeList) ? [] : NodeList;
@@ -11130,7 +11090,7 @@ function blockConstPreprocessor(self, node, blockN, metrics, [children, exp], co
 		debugHandler(`[ ] "${variable}" is an invalid identifier`, self, true);
 		return [];
 	}
-	const data = _$runModelBind(self, expression?.trim(), hx_Element || context);
+	let data = _$runModelBind(self, expression?.trim(), hx_Element || context);
 	if (isDestructureSyntax(variable)) {
 		if (isFalse(destructWarn(variable, data, self))) return [];
 		smartDextCtxMerging(fall, { [$$dexTransformKey]: {
@@ -11179,12 +11139,12 @@ function blockForProcessor(self, node, blockN, metrics, [children, exp], isWidge
 			count: index
 		}, options);
 		else if (!is_hyperscript) {
-			if (isForLoopDestructureRegex.test(provide.value)) provide.value = "[" + provide.value.slice(1, -1) + "]";
-			options = wrapNamespaceBind(self, options, provide.value, arrayDestructureRegex.test(provide.value) ? loopState : loopState[0]);
+			if (isForLoopDestructureRegex.test(provide?.value)) provide.value = "[" + provide.value.slice(1, -1) + "]";
+			options = wrapNamespaceBind(self, options, provide?.value, arrayDestructureRegex.test(provide?.value) ? loopState : loopState[0]);
 		}
 		config.loop_context = loopState;
 		const createElement = () => {
-			let src = children.map((child) => factoryRender(options, config, safeCall(child, loopState))).filter((v) => isHouxitElement(v));
+			let src = children.map((child) => factoryRender(options, config, safeCall(child, ...loopState))).filter((v) => isHouxitElement(v));
 			src = len(src) < 2 ? src[0] : new HouxitFragmentElement(src, self, hx_Element, null, value);
 			return src;
 		};
@@ -11471,12 +11431,12 @@ function normalizePreJSXFormat(strings, values) {
 	}
 	return __HouxitHTMLParser__(boundJoin.join(""), [], { JSXParser: { sources: values } });
 }
-function html(strings, ...values) {
+function htx(strings, ...values) {
 	return __EncodeJSXParser__(strings, values);
 }
 function __EncodeJSXParser__(strings, values) {
 	if (!isFunction(strings.reduce)) {
-		debugHandler(`[ ] html macro can only be called with backticks embeded directly to method name\n\n"html\`<templates>\`" instead of "html()"\nCheck html macro call`);
+		debugHandler(`[ ] htx macro can only be called with backticks embeded directly to method name\n\n"htx\`<templates>\`" instead of "htx()"\nCheck htx macro call`);
 		return;
 	}
 	if (len(values)) return normalizePreJSXFormat(strings, values);
@@ -11485,13 +11445,15 @@ function __EncodeJSXParser__(strings, values) {
 		return acc + str + value;
 	}, "");
 	if (!isString(html)) {
-		debugHandler(`[ ] html parser macro expects strings values`);
+		debugHandler(`[ ] htx parser macro expects strings values`);
 		return null;
 	}
 	return __HouxitHTMLParser__(html, [], { trim: true }, null);
 }
-function MKDParser(mkd) {}
-function markdown(mkd, ...values) {
+function MKDParser(mkd) {
+	return MKDParser(mkd);
+}
+function mdx(mkd, ...values) {
 	if (!isString(mkd)) {
 		debugHandler(`[ ] markdown helper expects strings values`);
 		return null;
@@ -11500,76 +11462,158 @@ function markdown(mkd, ...values) {
 function createCustomElement(options) {
 	return _createCustomElement.call({}, ...arguments);
 }
-function generateCustomNativeElementConstructor() {
+function __observeAttributes() {
+	this.__attributeObserver = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type !== "attributes") continue;
+			const name = mutation.attributeName;
+			const newValue = this.getAttribute(name);
+			const oldValue = mutation.oldValue;
+			if (oldValue === newValue) continue;
+			__widget_props_effect(this.__app, {
+				value: oldValue,
+				effect: newValue,
+				key: name
+			});
+		}
+	});
+}
+function generateCustomNativeElementConstructor(setup, self) {
 	if (!inBrowserCompiler) return;
-	return class CustomNativeElement extends HTMLElement {
+	return class HouxitCustomElement extends HTMLElement {
 		constructor() {
 			super();
+			__observeAttributes.call(this);
+		}
+		static get observedAttributes() {
+			return [];
+		}
+		__app = void 0;
+		get __eventsMap() {
+			return new Tuple();
+		}
+		addEventListener(e, h, o) {
+			const customEvents = this._hx_Element.hx_Element.VNodeManager.customEvents;
+			if (!hasOwn(customEvents, e)) customEvents[e] = new HouxitEvents(e, { target_value: this });
+			return super.addEventListener(e, h, o);
 		}
-		compiler_options = {};
-		_set_compiler_options(...compiler_options) {
-			this.compiler_options = compiler_options;
+		dispatchEvent(e) {
+			return super.dispatchEvent(e);
+		}
+		connectedCallback(...args) {
+			for (let hooks of setup.connected.values()) hooks.call(this, ...args);
+		}
+		disConnectedCallback(...args) {
+			for (let hooks of setup.disconnected.values()) hooks.call(this, ...args);
+		}
+		adoptedCallback(...args) {
+			for (let hooks of setup.adopted.values()) hooks.call(this, ...args);
+		}
+		attributeChangedCallback(...args) {
+			for (let hooks of setup.attrChanged.values()) hooks.call(this, ...args);
 		}
 	};
 }
-function generateCustomElementConstructor(name) {
+function generateCustomElementConstructor(name, HouxitCustomElement) {
 	name = ToPascalCase(name);
 	if (!isValidIdentifier(name)) {
 		debugHandler(`[ ] unable to parse the customElements tag name\n\n
       seems to have been an invalid identifier`);
 		return;
 	}
-	return Function("CustomNativeElement", `
-      return class ${name} extends CustomNativeElement{
+	return Function("HouxitCustomElement", `
+      return class ${name} extends HouxitCustomElement{
         constructor(){
           super(...arguments);
         }
       }
-    `)(CustomNativeElement);
-}
-function _createCustomElement(opts) {
+    `)(HouxitCustomElement);
+}
+var configOpts = {
+	shadowMode: [String, Boolean],
+	nonce: String,
+	configureElement: Function,
+	configureApp: Function,
+	connected: Function,
+	adopted: Function,
+	attrChanged: Function,
+	disconnected: Function
+};
+var ce_lch = "connected,disconnected,adopted,attrChanged,configureApp,configureElement";
+function _createCustomElement(opts, config) {
 	this.is_Custom_Node = true;
 	if (!validateCollectionArgs(arguments, {
-		count: 1,
-		validators: [[Function, Object]],
+		min: 1,
+		max: 2,
+		validators: [[Function, Object], Object],
 		name: "createCustomElement"
 	})) return;
-	const LifeCycleHooksList = "onConnected,onDisconnected,onAdopted,onAttrChanged,plugin";
-	let Hooks = {};
-	entries(defineWidget(opts)).forEach(([ind, value]) => {
-		if (_makeMap_(LifeCycleHooksList, ind)) {
-			if (!isFunction(value)) {
-				debugHandler(`[ ] LifeCycle callback error\n\n"${ind}" is a callback function, received an invalid type`);
-				return;
-			}
-			if (ind != "plugin") Hooks[ind] = value;
-			delete opts[ind];
+	const setup = {
+		connected: [],
+		disconnected: [],
+		adopted: [],
+		attrChanged: [],
+		configureApp: [],
+		configureElement: []
+	};
+	for (let [name, type] of entries(configOpts)) {
+		if (!hasOwn(config, name)) continue;
+		const value = config[name];
+		if (!validateType(value, type)) {
+			debugHandler(`[ createCustomElement options ] customElements config options fails to meet type validation\n"${name}" option`);
+			continue;
 		}
-	});
-	const CustomNativeElement = generateCustomNativeElementConstructor();
-	CustomNativeElement.prototype.disConnectedCallback = Hooks.disConnectedCallback || pass;
-	CustomNativeElement.prototype.adoptedCallback = Hooks.adoptedCallback || pass;
-	CustomNativeElement.prototype.attributeChangedCallback = Hooks.attributeChangedCallback || pass;
-	CustomNativeElement.prototype.connectedCallback = connectedCallback;
+		if (name === "shadowMode" && isString(value) && !_makeMap_("closed,open", value)) debugHandler(`"shadowMode" config option of createCustomElement expects only valid type of 'open' | 'closed'\n\nmay output Unexpected result`);
+		if (_makeMap_(ce_lch, name)) setup[name].push(value);
+	}
+	let { shadowMode = "open", nonce = "" } = config || {};
+	const HouxitCustomElement = generateCustomNativeElementConstructor(setup);
 	function connectedCallback() {
 		let props = {};
+		const compiler_options = {};
 		if (len(keys(this.attributes))) for (const [key, attr] of entries(this.attributes)) {
-			const { name, value } = attr;
+			let { name, value } = attr;
+			if (isOnListener(name)) {
+				const customEvents = this._hx_Element.hx_Element.VNodeManager.customEvents;
+				name = name.slice(2);
+				if (!hasOwn(customEvents, name)) customEvents[name] = new HouxitEvents(name, { target_value: this });
+				continue;
+			}
 			props[name] = value;
 		}
-		let [vnode, self, hx_Element, siblings, IS_RENDERLESS, customElementsArgs] = this.compiler_options;
-		const shadow = this.attachShadow({ mode: "open" });
-		vnode = h(opts, assign(props, vnode.props || {}), vnode.children);
-		customElementsArgs.unshift();
-		const createElement = () => $compilerEngine(null, vnode, null, {}).$build;
+		let shadow;
+		if (isBoolean(shadowMode)) if (!shadowMode) shadowMode = "closed";
+		else shadowMode = "open";
+		if (isString(shadowMode)) shadow = this.attachShadow({ mode: shadowMode });
+		let vnode = h(opts, props);
+		const createElement = () => {
+			return $compilerEngine(null, vnode, null, {}, {
+				isCustomElement: true,
+				element: this,
+				shadow,
+				compiler_options,
+				configureApp: setup.configureApp
+			}).$build;
+		};
+		setup.configureApp.unshift(function(app) {
+			defineGetter(this, "__app", app);
+		});
 		const template = createElement();
 		shadow.appendChild(template.$element);
-		(Hooks.connectedCallback || pass).call(this, ...arguments);
+		this.__attributeObserver.observe(this, {
+			attributes: true,
+			attributeOldValue: true
+		});
 	}
-	CustomNativeElement.define = function define(name, inherit) {
-		return __define.call(this, ...arguments);
+	setup.connected.unshift(connectedCallback);
+	setup.disconnected.unshift(function() {
+		this.__attributeObserver.disconnect();
+	});
+	for (let hks of setup.configureElement.values()) hks.call(this);
+	HouxitCustomElement.define = function define(name, inherit) {
+		return __define.call(this, name, inherit, HouxitCustomElement);
 	};
-	function __define(name, inherit) {
+	function __define(name, inherit, HouxitCustomElement) {
 		if (!validateCollectionArgs(arguments, {
 			name: "customElements.define()",
 			min: 1,
@@ -11581,15 +11625,15 @@ function _createCustomElement(opts) {
 			return;
 		}
 		if (inherit && !isString(inherit) && !IS_HTML_TAG(inherit)) {
-			debugHandler(`[ ] problem with the inherit value, \n\n may not be a string value or a valid HTML tagName`);
+			debugHandler(`[ ] problem with the inherit value, \n\n may not be a string value or a valid HTML tagName signature`);
 			debugHandler(`[ ] CustomElement registration failed`);
 			return;
 		}
-		const CustomElementsInstance = generateCustomElementConstructor(name);
+		const CustomElementsInstance = generateCustomElementConstructor(name, HouxitCustomElement);
 		if (inBrowserCompiler) customElements.define(name, CustomElementsInstance, inherit ? { extends: inherit } : {});
 		return CustomElementsInstance;
 	}
-	return CustomNativeElement;
+	return HouxitCustomElement;
 }
 function _asyncWidget(callback, config) {
 	if (!validateCollectionArgs(arguments, {
@@ -11664,7 +11708,7 @@ function createSSRStreamHack(vnodePlate, ssrConfig) {
 }
 function _renderToStringCompiler(build, config) {
 	if (!isSSRCompiler(build)) {
-		debugHandler(`[ ] "renderToString" macro was called on a non SSR renderer build...\n\nplease check, you may have used "initBuild" app initializer instead of the "initSSRBuild"`);
+		debugHandler(`[ ] "renderToString" macro was called on a non SSR App build...\n\nuse "initSSRBuild" instead for an SSR App`);
 		return;
 	}
 	return new Promise((resolve) => {
@@ -11707,6 +11751,11 @@ function compileSSRProps(props, ctx) {
 	else src += " " + key + (value.trim() ? "=\"" + value + "\"" : "");
 	return src;
 }
+function renderToNodeStream(app) {}
+function renderToNodeWritable(app, writable) {}
+function renderToWebWritable(app, writable) {}
+function renderToWebStream(app) {}
+function renderToSimpleStream(app, cbs) {}
 function _createInitSSRBuild_(options, props, children) {
 	const vNode = createSSRStreamHack(arguments, {
 		type: "stream",
@@ -11799,6 +11848,7 @@ exports.Any = Any;
 exports.Arguments = Arguments;
 exports.Build = Build;
 exports.Class = Class;
+exports.CompilerConfigOptions = CompilerConfigOptions;
 exports.Else = Else;
 exports.ElseIf = ElseIf;
 exports.Exception = Exception;
@@ -11806,7 +11856,6 @@ exports.For = For;
 exports.Fragment = Fragment;
 exports.HTMLParser = HTMLParser;
 exports.HTMLPropsParser = HTMLPropsParser;
-exports.HouxitCompilerSetup = HouxitCompilerSetup;
 exports.If = If;
 exports.MKDParser = MKDParser;
 exports.Memo = Memo;
@@ -11861,7 +11910,7 @@ exports.generateTemplateElement = generateTemplateElement;
 exports.generateUUID = generateUUID;
 exports.get_version = get_version;
 exports.h = h;
-exports.html = html;
+exports.htx = htx;
 exports.initBuild = initBuild;
 exports.initSSRBuild = initSSRBuild;
 exports.isComputed = isComputed;
@@ -11879,7 +11928,7 @@ exports.isToken = isToken;
 exports.len = len;
 exports.log = log;
 exports.markRaw = markRaw;
-exports.markdown = markdown;
+exports.mdx = mdx;
 exports.memMove = memMove;
 exports.mergeProps = mergeProps;
 exports.observe = observe;
@@ -11900,7 +11949,12 @@ exports.raise = raise;
 exports.read = read;
 exports.readonly = readonly;
 exports.readonlyStream = readonlyStream;
+exports.renderToNodeStream = renderToNodeStream;
+exports.renderToNodeWritable = renderToNodeWritable;
+exports.renderToSimpleStream = renderToSimpleStream;
 exports.renderToString = renderToString;
+exports.renderToWebStream = renderToWebStream;
+exports.renderToWebWritable = renderToWebWritable;
 exports.resolve = resolve;
 exports.scaffold = scaffold;
 exports.scopeEffectHook = scopeEffectHook;