lilact 0.31.10 → 0.31.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.31.10",
+  "version": "0.31.12",
   "description": "A Little React/JSX Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",

package/src/components.jsx

@@ -453,7 +453,7 @@ class ComponentCore
 
 				const prev_state = this.state, prev_props=this.props;
 
-				if(this.element) {
+				if( this.element && ! (this?.component instanceof RootComponent) ) {
 					this.updateElementProps(next_props);
 				}
 				this.props = next_props;
@@ -642,14 +642,16 @@ class ComponentCore
 		for(let a in this.props) {
 			const al = a.toLowerCase();
 
-			if( !patch.hasOwnProperty(a) ) {
-
+			if( !patch.hasOwnProperty(a) || (  !a.startsWith('data-') && !a.startsWith('aria-') && 
+						(patch[a]===undefined || patch[a]===null || patch[a]==='' || patch[a]===false )  ) ) 
+			{
 				if( events_set.has(al) ) {
 					this.event_detachers[al]();
 				}
 				else {
 					this.element.removeAttribute(a);
 				}
+
 			}
 		}
 
@@ -731,29 +733,27 @@ class ComponentCore
 
 	updateElementClass(patch=this.props) 
 	{
-		let cn = patch?.className;
-		cn ??= patch?.class ? patch.class : '';
+		let cn = patch?.className ?? patch?.class ?? '';
 
 		if(this?.parent?.[CHILD_CLASS_ADDENDUM]) {
-			cn += ' ' + this?.parent?.[CHILD_CLASS_ADDENDUM];
+			cn += ' ' + this.parent[CHILD_CLASS_ADDENDUM];
 		}
-		
+		cn = cn.trim();
+
+		for(const n of Array.from(this.element.classList)) {
+			if(cn.indexOf(n)===-1) {
+				this.element.classList.remove(n);
+			}
+		}
+
 		if(cn.length>0) {
 			cn = cn.split(/\s+/g);
-			for(const n of Array.from(this.element.classList)) {
-				if(cn.indexOf(n)===-1) {
-					this.element.classList.remove(n);
-				}
-			}
 			for(const n of cn) {
 				if(n.length>0) {
 					this.element.classList.add(n);
 				}
 			}
 		}
-		else {
-			delete this.element.className;
-		}
 	}
 
 

package/src/events.jsx

@@ -29,269 +29,91 @@
 */
 
 
-// Minimal shims (small and explicit)
-if (typeof Element !== 'undefined' && !Element.prototype.matches) {
-	Element.prototype.matches = Element.prototype.msMatchesSelector ||
-															Element.prototype.webkitMatchesSelector ||
-															function(s) {
-																var matches = (this.document || this.ownerDocument).querySelectorAll(s);
-																var i = matches.length;
-																while (--i >= 0 && matches.item(i) !== this) {}
-																return i > -1;
-															};
-}
-
-if (typeof Event !== 'undefined' && !Event.prototype.composedPath) {
-	Event.prototype.composedPath = function() {
-		var path = [];
-		var el = this.target;
-		while (el) {
-			path.push(el);
-			el = el.parentElement;
-		}
-		path.push(window);
-		return path;
-	};
-}
-
-// Event pool for reuse
-const _pool = [];
-const MAX_POOL_SIZE = 10;
-const POINTER_TYPES = ["mouse", "pen", "touch"];
-
-export function createSyntheticEvent(nativeEvent, currentTarget) 
-{
-  const e = _pool.length ? _pool.pop() : {};
-
-  e.nativeEvent = nativeEvent;
-  e.type = nativeEvent.type;
-  e.target = nativeEvent.target || nativeEvent.srcElement || null;
-  e.currentTarget = currentTarget || nativeEvent.currentTarget || null;
-  e.timeStamp = nativeEvent.timeStamp || Date.now();
-
-  // Standard flags
-  e.defaultPrevented = !!nativeEvent.defaultPrevented;
-  e.isPropagationStopped = false;
-  e.isPersistent = false;
-
-  // Common DOM meta when present
-  e.bubbles = !!nativeEvent.bubbles;
-  e.cancelable = !!nativeEvent.cancelable;
-  e.composed = !!nativeEvent.composed;
-  e.detail = nativeEvent.detail;
-
-  e.relatedTarget =
-    nativeEvent.relatedTarget ||
-    (nativeEvent.fromElement ? nativeEvent.fromElement : null) ||
-    (nativeEvent.toElement ? nativeEvent.toElement : null) ||
-    null;
-
-  // Modifier keys
-  e.altKey = !!nativeEvent.altKey;
-  e.ctrlKey = !!nativeEvent.ctrlKey;
-  e.metaKey = !!nativeEvent.metaKey;
-  e.shiftKey = !!nativeEvent.shiftKey;
-
-  // preventDefault / stopPropagation
-  e.isDefaultPrevented = () => e.defaultPrevented;
-  e.preventDefault = () => {
-    if (nativeEvent.preventDefault) nativeEvent.preventDefault();
-    e.defaultPrevented = true;
+export function createSyntheticEvent(nativeEvent, currentTarget) {
+  let propagationStopped = false;
+
+  const event = {
+    nativeEvent,
+    type: nativeEvent.type,
+    target: nativeEvent.target || nativeEvent.srcElement || null,
+    currentTarget: currentTarget || nativeEvent.currentTarget || null,
+    timeStamp: nativeEvent.timeStamp ?? Date.now(),
+    defaultPrevented: !!nativeEvent.defaultPrevented,
+
+    isDefaultPrevented() {
+      return event.defaultPrevented;
+    },
+
+    isPropagationStopped() {
+      return propagationStopped;
+    },
+
+    preventDefault() {
+      nativeEvent.preventDefault?.();
+      event.defaultPrevented = true;
+    },
+
+    stopPropagation() {
+      nativeEvent.stopPropagation?.();
+      propagationStopped = true;
+    },
+
+    // Like React 17+ web SyntheticEvents: no pooling, persist is a no-op.
+    persist() {},
+
+    isPersistent() {
+      return true;
+    },
   };
 
-  e.stopPropagation = () => {
-    if (nativeEvent.stopPropagation) nativeEvent.stopPropagation();
-    e.isPropagationStopped = true;
-  };
-
-  e.persist = () => { e.isPersistent = true; };
-
-  // Key/mouse/pointer related
-  e.key = nativeEvent.key || null;
-  e.code = nativeEvent.code || null;
-  e.which = nativeEvent.which ?? nativeEvent.keyCode ?? null;
-
-  // Mouse / Pointer button state normalization
-  // - "button" often is 0/1/2 for mouse; for pointer events it's also present.
-  // - "buttons" is a bitmask of which buttons are down (often important for drag).
-  e.button = nativeEvent.button ?? null;
-  e.buttons = nativeEvent.buttons ?? null;
-
-  // Pointer identity + type (critical for multi-touch / pointer capture)
-  e.pointerId = nativeEvent.pointerId ?? null;
-  e.pointerType = nativeEvent.pointerType ?? null;
-  e.isPrimary = nativeEvent.isPrimary ?? null;
-
-  // Coordinates: React/SyntheticEvent uses these directly (React provides them too)
-  e.clientX = nativeEvent.clientX ?? 0;
-  e.clientY = nativeEvent.clientY ?? 0;
-  e.screenX = nativeEvent.screenX ?? 0;
-  e.screenY = nativeEvent.screenY ?? 0;
-
-  // pageX/pageY might be derived; keep if present
-  // (Using pageX/pageY only if you need it; most drag uses clientX/Y.)
-  e.pageX = nativeEvent.pageX ?? null;
-  e.pageY = nativeEvent.pageY ?? null;
-
-  // movementX/movementY exist on some mouse events; harmless if absent
-  e.movementX = nativeEvent.movementX ?? 0;
-  e.movementY = nativeEvent.movementY ?? 0;
-
-  // Pressure/tilt (Pointer Events)
-  e.pressure = nativeEvent.pressure ?? null;
-  e.tiltX = nativeEvent.tiltX ?? null;
-  e.tiltY = nativeEvent.tiltY ?? null;
-  e.width = nativeEvent.width ?? null;
-  e.height = nativeEvent.height ?? null;
-
-  // If the native event has a pointer capture API, you can forward bind/capture calls.
-  // (These are methods on the EventTarget, not on the event, but keeping fields is enough.)
-  e.pointerEventsSupported = POINTER_TYPES.includes(e.pointerType);
-
-  // For input-like events normalize value and checked
-  try {
-    const tgt = e.target;
-    e.value = tgt && ("value" in tgt) ? tgt.value : undefined;
-    e.checked = tgt && ("checked" in tgt) ? tgt.checked : undefined;
-
-    // Some input events have selectionStart/selectionEnd etc.
-    e.selectionStart = tgt && ("selectionStart" in tgt) ? tgt.selectionStart : undefined;
-    e.selectionEnd = tgt && ("selectionEnd" in tgt) ? tgt.selectionEnd : undefined;
-  } catch (err) {
-    e.value = undefined;
-    e.checked = undefined;
-    e.selectionStart = undefined;
-    e.selectionEnd = undefined;
-  }
-
-  // Touch lists (useful for touch events; sometimes pointerType === "touch" uses pointer events instead)
-  // Keep references only if they exist.
-  e.touches = nativeEvent.touches || null;
-  e.targetTouches = nativeEvent.targetTouches || null;
-  e.changedTouches = nativeEvent.changedTouches || null;
-
-  // composedPath helper
-  e.path = typeof nativeEvent.composedPath === "function"
-    ? nativeEvent.composedPath()
-    : [e.target];
-
-  // Additional keyboard extras when present
-  e.repeat = nativeEvent.repeat ?? false;
-  e.location = nativeEvent.location ?? 0;
-
-  return e;
+  // Forward event-specific properties (such as WheelEvent.deltaX/deltaY)
+  // and native methods that are not explicitly defined above.
+  return new Proxy(event, {
+    get(target, property, receiver) {
+      if (Reflect.has(target, property)) {
+        return Reflect.get(target, property, receiver);
+      }
+
+      const value = Reflect.get(nativeEvent, property, nativeEvent);
+      return typeof value === "function" ? value.bind(nativeEvent) : value;
+    },
+
+    has(target, property) {
+      return Reflect.has(target, property) || property in nativeEvent;
+    },
+  });
 }
 
-export function releaseSyntheticEvent(e)
-{
-  if (e && !e.isPersistent) {
-    e.nativeEvent = null;
-    e.type = null;
-    e.target = null;
-    e.currentTarget = null;
-    e.timeStamp = 0;
-
-    e.defaultPrevented = false;
-    e.isPropagationStopped = false;
-
-    e.isPersistent = false;
-
-    e.isDefaultPrevented = null;
-    e.preventDefault = null;
-    e.stopPropagation = null;
-    e.persist = null;
-
-    e.bubbles = false;
-    e.cancelable = false;
-    e.composed = false;
-    e.detail = undefined;
-    e.relatedTarget = null;
-
-    // modifier keys
-    e.altKey = false;
-    e.ctrlKey = false;
-    e.metaKey = false;
-    e.shiftKey = false;
-
-    // pointer/mouse fields
-    e.key = null;
-    e.code = null;
-    e.which = null;
-
-    e.button = null;
-    e.buttons = null;
-    e.pointerId = null;
-    e.pointerType = null;
-    e.isPrimary = null;
-
-    e.clientX = 0;
-    e.clientY = 0;
-    e.screenX = 0;
-    e.screenY = 0;
-    e.pageX = null;
-    e.pageY = null;
-
-    e.movementX = 0;
-    e.movementY = 0;
-
-    e.pressure = null;
-    e.tiltX = null;
-    e.tiltY = null;
-    e.width = null;
-    e.height = null;
-
-    // input-like
-    e.value = undefined;
-    e.checked = undefined;
-    e.selectionStart = undefined;
-    e.selectionEnd = undefined;
-
-    // touch lists
-    e.touches = null;
-    e.targetTouches = null;
-    e.changedTouches = null;
-
-    e.path = null;
-    e.repeat = false;
-    e.location = 0;
-
-    if (_pool.length < MAX_POOL_SIZE) _pool.push(e);
-  }
+export function releaseSyntheticEvent(event) {
+  // Clear currentTarget after dispatch, but don't invalidate the event.
+  if (event) event.currentTarget = null;
 }
 
+export function wrapListener(fn, opts = {}) {
+  const { stopPropagationOnTrueReturn = false } = opts;
 
-// Main wrapper factory
-// fn: function(syntheticEvent) { ... }
-// opts: { capture: bool, passive: bool, once: bool, stopPropagationOnTrueReturn: bool }
-export function wrapListener(fn, opts = {})
-{
-	const { stopPropagationOnTrueReturn = false } = opts;
-
-	return function handler(nativeEvent) {
-
-		const currentTarget = this || nativeEvent.currentTarget || null;
-		const sEvent = createSyntheticEvent(nativeEvent, currentTarget);
+  return function handler(nativeEvent) {
+    const event = createSyntheticEvent(
+      nativeEvent,
+      this || nativeEvent.currentTarget || null
+    );
 
-		try {
-			const result = fn(sEvent);
+    try {
+      const result = fn(event);
 
-			// If user returns true and opted in, stop propagation
-			if (stopPropagationOnTrueReturn && result === true) {
-				sEvent.stopPropagation();
-			}
-		} finally {
-			// Release back to pool unless persisted
-			releaseSyntheticEvent(sEvent);
-		}
-	};
+      if (stopPropagationOnTrueReturn && result === true) {
+        event.stopPropagation();
+      }
+    } finally {
+      releaseSyntheticEvent(event);
+    }
+  };
 }
 
-// Convenience: add/remove wrapper-managed listener
-export function addWrappedEventListener(target, type, fn, options = {})
-{
-	const handler = wrapListener(fn, options);
+export function addWrappedEventListener(target, type, fn, options = {}) {
+  const handler = wrapListener(fn, options);
+
+  target.addEventListener(type, handler, options);
 
-	target.addEventListener(type, handler, options);
-	// Return a remover
-	return () => target.removeEventListener(type, handler, options);
+  return () => target.removeEventListener(type, handler, options);
 }