x4js 2.0.18 → 2.0.21

package/lib/src/core/core_react.ts

@@ -1,79 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.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

@@ -1,237 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file core_router.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 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.
- **/
-
-import { EvChange, EvError } from './component.js';
-import { EventMap, EventSource } from './core_events.js';
-
-type RouteHandler = ( params: any, path: string ) => void;
-
-interface Segment {
-	keys: string[],
-	pattern: RegExp;
-}
-
-interface Route {
-	keys: string[],
-	pattern: RegExp;
-	handler: RouteHandler;
-}
-
-export function parseRoute(str: string | RegExp, loose = false): Segment {
-
-	if (str instanceof RegExp) {
-		return {
-			keys: null,
-			pattern: str
-		};
-	}
-
-	const arr = str.split('/');
-
-	let keys = [];
-	let pattern = '';
-
-	if( arr[0]=='' ) {
-		arr.shift();
-	}
-
-	for (const tmp of arr) {
-		const c = tmp[0];
-
-		if (c === '*') {
-			keys.push('wild');
-			pattern += '/(.*)';
-		}
-		else if (c === ':') {
-			const o = tmp.indexOf('?', 1);
-			const ext = tmp.indexOf('.', 1);
-
-			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
-			pattern += o >= 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
-			if (ext >= 0) {
-				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
-			}
-		}
-		else {
-			pattern += '/' + tmp;
-		}
-	}
-
-	return {
-		keys,
-		pattern: new RegExp( `^${pattern}${loose ? '(?=$|/)' : '/?$'}`, 'i' )
-	};
-}
-
-interface RouterEvents extends EventMap {
-	change: EvChange;
-	error: EvError;
-}
-
-
-/**
- * micro router
- * 
- * ```
- * const router = new Router( );
- * 
- * router.get( "/detail/:id", ( params: any ) => {
- * 	this._showDetail( detail );
- * } );
- * 
- * router.get( "/:id", ( params: any ) => {
- *   if( params.id==0 )
- * 		router.navigate( '/home' );
- *	 }
- * });
- * 
- * router.on( "error", ( ) => {
- * 	router.navigate( '/home' );
- * })
- * 
- * router.init( );
- * ```
- */
-
-
-export class Router extends EventSource< RouterEvents > {
-
-	private m_routes: Route[];
-	private m_useHash: boolean;
-
-	constructor( useHash = true ) {
-		super( );
-
-		this.m_routes = [];
-		this.m_useHash = useHash;
-		
-		window.addEventListener('popstate', (event) => {
-			const url = this._getLocation( );
-			const found = this._find(url);
-		
-			found.handlers.forEach(h => {
-				h(found.params,url);
-			});
-
-			this.fire( "change", { value: this._getLocation() } );
-		});
-	}
-
-	get(uri: string | RegExp, handler: RouteHandler ) {
-		let { keys, pattern } = parseRoute(uri);
-		this.m_routes.push({ keys, pattern, handler });
-	}
-
-	init() {
-		this.navigate( this._getLocation() );
-	}
-
-	private _getLocation( ) {
-		return this.m_useHash ? '/'+document.location.hash.substring(1) : document.location.pathname;
-	}
-
-	/**
-	 * 
-	 */
-
-	navigate( uri: string, notify = true, replace = false ) {
-
-		if( !uri.startsWith('/') ) {
-			uri = '/'+uri;
-		}
-
-		const found = this._find( uri );
-
-		if( !found || found.handlers.length==0 ) {
-			//window.history.pushState({}, '', 'error')
-			console.log( 'route not found: '+uri );
-			this.fire( "error", {code: 404, message: "route not found" } );
-			return false;
-		}
-
-		if( this.m_useHash ) {
-			while( uri.at(0)=='/' ) {
-				uri = uri.substring( 1 );
-			}
-			
-			uri = '#'+uri;
-		}
-		
-		if( replace ) {
-			window.history.replaceState({}, '', uri );
-		}
-		else {
-			window.history.pushState({}, '', uri );
-		}
-
-		if( notify ) {
-			//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 = [];
-		let params: Record<string,any> = {};
-		let handlers: RouteHandler[] = [];
-
-		for (const tmp of this.m_routes ) {
-			if (!tmp.keys ) {
-				matches = tmp.pattern.exec(url);
-				if (!matches) {
-					continue;
-				}
-
-				if (matches['groups']) {
-					for (const k in matches['groups']) {
-						params[k] = matches['groups'][k];
-					}
-				}
-
-				handlers = [...handlers, tmp.handler];
-			} 
-			else if (tmp.keys.length > 0) {
-				matches = tmp.pattern.exec(url);
-				if (matches === null) {
-					continue;
-				}
-
-				for ( let j = 0; j < tmp.keys.length;) {
-					params[tmp.keys[j]] = matches[++j];
-				}
-
-				handlers = [...handlers, tmp.handler];
-			} 
-			else if (tmp.pattern.test(url)) {
-				handlers = [...handlers, tmp.handler];
-			}
-		}
-
-		return { params, handlers };
-	}
-}
-

package/lib/src/core/core_state.ts

@@ -1,62 +0,0 @@
-/**
-* @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

@@ -1,214 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file core_styles.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 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.
- **/
-
-import { isString } from './core_tools.js';
-
-export const unitless: Record<string,1> = {
-	animationIterationCount: 1,
-	aspectRatio: 1,
-	borderImageOutset: 1,
-	borderImageSlice: 1,
-	borderImageWidth: 1,
-	boxFlex: 1,
-	boxFlexGroup: 1,
-	boxOrdinalGroup: 1,
-	columnCount: 1,
-	columns: 1,
-	flex: 1,
-	flexGrow: 1,
-	flexPositive: 1,
-	flexShrink: 1,
-	flexNegative: 1,
-	flexOrder: 1,
-	gridRow: 1,
-	gridRowEnd: 1,
-	gridRowSpan: 1,
-	gridRowStart: 1,
-	gridColumn: 1,
-	gridColumnEnd: 1,
-	gridColumnSpan: 1,
-	gridColumnStart: 1,
-	msGridRow: 1,
-	msGridRowSpan: 1,
-	msGridColumn: 1,
-	msGridColumnSpan: 1,
-	fontWeight: 1,
-	lineHeight: 1,
-	opacity: 1,
-	order: 1,
-	orphans: 1,
-	tabSize: 1,
-	widows: 1,
-	zIndex: 1,
-	zoom: 1,
-	WebkitLineClamp: 1,
-  
-	// SVG-related properties
-	fillOpacity: 1,
-	floodOpacity: 1,
-	stopOpacity: 1,
-	strokeDasharray: 1,
-	strokeDashoffset: 1,
-	strokeMiterlimit: 1,
-	strokeOpacity: 1,
-	strokeWidth: 1
-}
-
-export type ariaValues = {
-	"aria-activedescendant": 1,
-	"role": 1,
-}
-
-export function isUnitLess( name: string ) {
-	return unitless[name] ? true : false;
-}
-
-/**
- * 
- */
-
-export class Stylesheet {
-
-	readonly m_sheet: CSSStyleSheet;
-	readonly m_rules: Map<string, number> = new Map( );
-
-	constructor() {
-		
-		function getStyleSheet( name: string ) : CSSStyleSheet {
-			for(let i=0; i<document.styleSheets.length; i++) {
-			  	let sheet = document.styleSheets[i];
-			  	if(sheet.title === name ) {
-					return sheet;
-			  	}
-			}
-		}
-
-		this.m_sheet = getStyleSheet( 'x4-dynamic-css' );
-		if( !this.m_sheet ) {
-			const dom = document.createElement( 'style' );
-			dom.setAttribute('id', 'x4-dynamic-css' );
-			document.head.appendChild(dom);
-			this.m_sheet = dom.sheet
-		}
-	}
-
-    /**
-     * add a new rule to the style sheet
-     * @param {string} name - internal rule name 
-     * @param {string} definition - css definition of the rule 
-     * @example
-     * setRule('xbody', "body { background-color: #ff0000; }" );
-     */
-
-	public setRule(name: string, definition: any ) {
-
-		if( isString(definition) ) {
-			let index = this.m_rules.get( name );
-			if (index !== undefined) {
-				this.m_sheet.deleteRule(index);
-			}
-			else {
-				index = this.m_sheet.cssRules.length;
-			}
-
-			this.m_rules.set( name, this.m_sheet.insertRule( definition, index) );
-		}
-		else {
-			let idx = 1;
-			for( let r in definition ) {
-
-				let rule = r + " { ",
-					css = definition[r];
-
-				for (let i in css) {
-					
-					let values = css[i];	// this is an array !
-					for (let j = 0; j < values.length; j++) {
-						rule += i + ": " + values[j] + "; "
-					}
-				}
-
-				rule += '}';
-
-				//console.log( rule );
-				
-				this.setRule( name+'--'+idx, rule );
-				idx++;
-			}
-		}
-	}
-
-	/**
-	 * return the style variable value
-	 * @param name - variable name 
-	 * @example
-	 * ```
-	 * let color = Component.getCss( ).getVar( 'button-color' );
-	 * ```
-	 */
-
-	public static getVar( name: string ) : any {
-		if( !Stylesheet.doc_style ) {
-			Stylesheet.doc_style = getComputedStyle( document.documentElement );
-		}
-
-		if( !name.startsWith('--') ) {
-			name = '--'+name;
-		}
-
-    	return Stylesheet.doc_style.getPropertyValue( name ); // #999999
-	}
-
-	static guid: number = 1;
-	static doc_style: CSSStyleDeclaration;
-}
-
-/**
- * 
- */
-
-export class ComputedStyle {
-	m_style:CSSStyleDeclaration;
-
-	constructor( style: CSSStyleDeclaration ) {
-		this.m_style = style;
-	}
-
-	/**
-	 * return the raw value
-	 */
-
-	value( name: keyof CSSStyleDeclaration ) : any {
-		return this.m_style[name];
-	}
-
-	/**
-	 * return the interpreted value
-	 */
-	
-	parse( name: keyof CSSStyleDeclaration ) : number {
-		return parseInt( this.m_style[name] as any  );
-	}
-
-	/**
-	 * 
-	 */
-
-	get style( ) {
-		return this.m_style;
-	}
-}
-