x4js 2.0.13 → 2.0.14

package/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/src/core/core_router.ts

@@ -0,0 +1,237 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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/src/core/core_styles.ts

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