x4js 2.0.13 → 2.0.15

package/lib/src/core/core_dragdrop.ts

@@ -25,7 +25,7 @@ interface DropInfo {
 }
 
 type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
-type FilterCallback = ( el: Component ) => boolean;
+type FilterCallback = ( el: Component, data: DataTransfer ) => boolean;
 
 /**
  * 
@@ -84,7 +84,7 @@ class DragManager {
 	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
 
 		const dragEnter = (ev: DragEvent) => {
-			if( filterCB && !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -98,7 +98,7 @@ class DragManager {
 		const dragOver = (ev: DragEvent) => {
 			//console.log( "dragover", ev.target );
 			
-			if( filterCB && !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;

package/lib/src/core/core_element.ts

@@ -42,7 +42,7 @@ export class CoreElement<E extends EventMap = EventMap> {
 	}
 
 	private __stopTimer( name: string ) {
-		const clear = this.#timers.get(name);
+		const clear = this.#timers?.get(name);
 		if (clear) { clear(); }
 	}
 
@@ -84,6 +84,23 @@ export class CoreElement<E extends EventMap = EventMap> {
 		}
 		
 		this.#events.addListener( name, listener );
+		return {
+			off: ( ) => {
+				this.#events.removeListener( name, listener );
+			}
+		}
+	}
+
+	/**
+	 * detach
+	 */
+
+	off<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ) {
+		console.assert( listener!==undefined && listener!==null );
+
+		if( this.#events ) {
+			this.#events.removeListener( name, listener );
+		}
 	}
 
 	/**

package/lib/src/core/core_events.ts

@@ -91,6 +91,34 @@ export class EventSource<E extends EventMap = EventMap > {
 				listeners.push(cb);
 			}
 		}
+
+		return ( ) => {
+			this.removeListener( name, callback );
+		}
+	}
+
+	/**
+	 * stop listening to an event
+	 * @param eventName - event name
+	 * @param callback - callback to remove (must be the same as in on )
+	 */
+
+	removeListener<K extends keyof E>(name: K, callback: (ev: E[K]) => any) {
+		
+		if (!this._registry ) {
+			return;
+		}
+
+		let listeners = this._registry.get(name as string);
+		if (!listeners) {
+			return;
+		}
+
+		const cb = callback as EventCallback;
+		const idx = listeners.indexOf(cb);
+		if (idx !== -1) {
+			listeners.splice(idx, 1);
+		}
 	}
 
 	fire<K extends keyof E>(name: K, evx: E[K]) {

package/lib/src/core/core_i18n.ts

@@ -97,7 +97,7 @@ export function addTranslation( name: string, ...parts: any[] ) {
 
 function _patch( obj: any, by: any ) {
 
-	for( let n in by ) {
+	for( const n in by ) {
 		const src = by[n];
 		if( typeof src === "string" ) {
 			obj[n] = src;
@@ -303,7 +303,15 @@ let fr = {
 
 		copy: 'Copier',
 		cut: 'Couper',
-		paste: 'Coller'
+		paste: 'Coller',
+
+		filedrop: 'Déposez un fichier',
+
+		keyboard: {
+			next: 'Suivant',
+			numeric: '123',
+			alpha: 'Abc'
+		},
 	}
 };
 
@@ -359,7 +367,15 @@ let en = {
 
 		copy: 'Copy',
 		cut: 'Cut',
-		paste: 'Paste'
+		paste: 'Paste',
+
+		filedrop: 'Drop a file',
+
+		keyboard: {
+			next: 'Next',
+			numeric: '123',
+			alpha: 'Abc'
+		},
 	}
 };
 

package/lib/src/core/core_react.ts

@@ -0,0 +1,79 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file core_react.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ *
+ * to use you must:
+ * 
+ * 1. add this to your tsconfig.json
+ * 		"compilerOptions": {
+ * 			...
+ * 			"jsx": "preserve",
+ * 			...
+ * 		}
+ * 	
+ * 2. be sure that esbuild has this:
+ * 		jsxFactory: "x4create_element",
+ * 		loader: { ".ts": "tsx" }
+ * 		
+ * 
+ * after that, all things like that will be ok
+ * 
+ * 	import { x4_create_element }  from "x4react"
+ * 	const xx = <h1>This is a title</h1>
+ * 
+ */
+
+import { Component } from './component.js';
+import { Constructor, isString } from './core_tools.js';
+
+
+/**
+ * x4 is reactive ?
+ * hard jsx :)
+ */
+
+export class x4_react {
+
+	static create_element( tag: string, props: any, ...content: any[] ): Component;
+	static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...content: any[] ) {
+		
+		props = props || {};
+
+		let el: Component;
+
+		// --- simple div ------------------------
+		if( isString(tag) ) {
+			el = new Component( { tag } );
+			Object.entries( props )
+				.forEach(([name, value]) => {
+					if (name.startsWith('on') && name.toLowerCase() in window) {
+						el.dom.addEventListener(name.toLowerCase().substring(2), value)
+					}
+					else {
+						el.setAttribute(name, value )
+					}
+				});
+		}
+		// --- Component ------------------------
+		else {
+			el = new tag( props );
+		}
+
+		if( content && content.length ) {
+			el.appendContent( content );
+		}
+
+		return el;
+	}
+}

package/lib/src/core/core_router.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EvError } from './component.js';
+import { EvChange, EvError } from './component.js';
 import { EventMap, EventSource } from './core_events.js';
 
 type RouteHandler = ( params: any, path: string ) => void;
@@ -30,7 +30,7 @@ interface Route {
 	handler: RouteHandler;
 }
 
-function parseRoute(str: string | RegExp, loose = false): Segment {
+export function parseRoute(str: string | RegExp, loose = false): Segment {
 
 	if (str instanceof RegExp) {
 		return {
@@ -60,7 +60,7 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 			const ext = tmp.indexOf('.', 1);
 
 			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
-			pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
+			pattern += o >= 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
 			if (ext >= 0) {
 				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
 			}
@@ -72,11 +72,12 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 
 	return {
 		keys,
-		pattern: new RegExp( `^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i' )
+		pattern: new RegExp( `^${pattern}${loose ? '(?=$|/)' : '/?$'}`, 'i' )
 	};
 }
 
 interface RouterEvents extends EventMap {
+	change: EvChange;
 	error: EvError;
 }
 
@@ -116,7 +117,7 @@ export class Router extends EventSource< RouterEvents > {
 
 		this.m_routes = [];
 		this.m_useHash = useHash;
-
+		
 		window.addEventListener('popstate', (event) => {
 			const url = this._getLocation( );
 			const found = this._find(url);
@@ -124,6 +125,8 @@ export class Router extends EventSource< RouterEvents > {
 			found.handlers.forEach(h => {
 				h(found.params,url);
 			});
+
+			this.fire( "change", { value: this._getLocation() } );
 		});
 	}
 
@@ -140,6 +143,10 @@ export class Router extends EventSource< RouterEvents > {
 		return this.m_useHash ? '/'+document.location.hash.substring(1) : document.location.pathname;
 	}
 
+	/**
+	 * 
+	 */
+
 	navigate( uri: string, notify = true, replace = false ) {
 
 		if( !uri.startsWith('/') ) {
@@ -152,7 +159,7 @@ export class Router extends EventSource< RouterEvents > {
 			//window.history.pushState({}, '', 'error')
 			console.log( 'route not found: '+uri );
 			this.fire( "error", {code: 404, message: "route not found" } );
-			return;
+			return false;
 		}
 
 		if( this.m_useHash ) {
@@ -171,12 +178,21 @@ export class Router extends EventSource< RouterEvents > {
 		}
 
 		if( notify ) {
-			found.handlers.forEach( h => {
-				h( found.params, uri );
-			} );
+			//found.handlers.forEach( h => {
+			//	h( found.params, uri );
+			//} );
+			
+			found.handlers[0]( found.params, uri );
 		}
+
+		this.fire( "change", { value: this._getLocation() } );
+		return true;
 	}
 
+	/**
+	 * 
+	 */
+
 	private _find( url: string ): { params: Record<string,any>, handlers: RouteHandler[] } {
 		
 		let matches = [];

package/lib/src/core/core_state.ts

@@ -0,0 +1,62 @@
+/**
+* @file core_state.ts
+* @author Etienne Cochard 
+* @copyright (c) 2025 R-libre ingenierie, all rights reserved.
+**/
+
+
+type StateData = boolean | number | string | Date | any;
+type State = Record<string,StateData>;
+
+export class StateManager {
+	
+	private _state: StateData;
+	private _subscribers: Map<string,any>;
+	private _currentTracking: Set<string>;
+
+	constructor(initialState: StateData ) {
+		this._state = initialState ? { ...initialState } : {};
+		this._subscribers = new Map();
+		this._currentTracking = new Set( );
+	}
+
+	getState( path: string, defaultValue: StateData = null) {
+		// Optional tracking for reactivity
+		if (this._currentTracking) {
+			this._currentTracking.add(path);
+		}
+		// Fast path-based access
+		const parts = path.split('.');
+		let current = this._state;
+
+		for (const part of parts) {
+			if (current?.[part] === undefined) {
+				return defaultValue;
+			}
+
+			current = current[part];
+		}
+
+		return current;
+	}
+
+	setState(path: string, value: StateData, context: any = {} ) {
+		// Update state
+		const parts = path.split('.');
+		let current = this._state;
+
+		for (let i = 0; i < parts.length - 1; i++) {
+			const part = parts[i];
+			if (!current[part] || typeof current[part] !== 'object') {
+				current[part] = {};
+			}
+			
+			current = current[part];
+		}
+
+		current[parts[parts.length - 1]] = value;
+
+		// Notify subscribers
+		this._notifySubscribers(path, value);
+	}
+}

package/lib/src/core/core_styles.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { pascalCase, isString } from './core_tools.js';
+import { isString } from './core_tools.js';
 
 export const unitless: Record<string,1> = {
 	animationIterationCount: 1,
@@ -82,8 +82,8 @@ export function isUnitLess( name: string ) {
 
 export class Stylesheet {
 
-	private m_sheet: CSSStyleSheet;
-	private m_rules: Map<string, number> = new Map( );
+	readonly m_sheet: CSSStyleSheet;
+	readonly m_rules: Map<string, number> = new Map( );
 
 	constructor() {
 		
@@ -91,7 +91,7 @@ export class Stylesheet {
 			for(let i=0; i<document.styleSheets.length; i++) {
 			  	let sheet = document.styleSheets[i];
 			  	if(sheet.title === name ) {
-					return <CSSStyleSheet>sheet;
+					return sheet;
 			  	}
 			}
 		}
@@ -101,7 +101,7 @@ export class Stylesheet {
 			const dom = document.createElement( 'style' );
 			dom.setAttribute('id', 'x4-dynamic-css' );
 			document.head.appendChild(dom);
-			this.m_sheet = <CSSStyleSheet>dom.sheet
+			this.m_sheet = dom.sheet
 		}
 	}