x4js 2.0.13 → 2.0.14

package/scripts/prepack.mjs

@@ -0,0 +1,346 @@
+#!/usr/bin/env node
+
+import * as fs from 'node:fs';
+import * as path from "node:path"
+import chalk from "chalk"
+import * as ts from 'typescript';
+
+import { execSync } from "node:child_process";
+
+function readJSON(fname) {
+	let cpath = process.cwd();
+
+	// check here
+	let pth = path.join(cpath, fname);
+
+	if (fs.existsSync(pth)) {
+		const raw = fs.readFileSync(pth, "utf-8");
+		return JSON.parse(raw);
+	}
+
+	throw new Error(`cannot find ${fname}`);
+}
+
+function readPackage() {
+	return readJSON("package.json");
+}
+
+
+
+
+class DTSGenerator {
+
+	output = null;
+
+	emit( lvl, code ) {
+		this.output.write( '\t'.repeat(lvl)+code );
+	}
+
+	/**
+	 * 
+	 */
+
+	genMethodSig(node, source, ctor) {
+
+		const name = ctor ? "constructor" : (node.name ? node.name.getText(source) : 'new');
+
+		const typeParameters = node.typeParameters
+			? `<${node.typeParameters.map(param => param.getText(source)).join(', ')}>`
+			: '';
+
+		const parameters = node.parameters?.map(param => {
+			const paramName = param.name.getText(source);
+			const paramType = param.type ? param.type.getText(source) : 'any';
+			return `${paramName}: ${paramType}`;
+		}).join(', ');
+
+		const returnType = ctor ? '' : `: ${node.type ? node.type.getText(source) : 'void'}`;
+
+		this.emit( 2, `${name}${typeParameters}( ${parameters} )${returnType};\n` );
+	}
+
+	/**
+	 * 
+	 */
+
+	genPropSig( node, source ) {
+		const name = node.name ? node.name.getText(source) : 'unknown';
+		const type = node.type ? node.type.getText(source) : 'any';
+		const isOptional = node.questionToken ? '?' : '';
+		this.emit( 2, `${name}${isOptional}: ${type};\n` );
+	}
+
+	/**
+	 * 
+	 */
+
+	genClassSig(node, source) {
+
+		const cname = node.name.getText(source);
+		const modifiers = node.modifiers ? node.modifiers.map(mod => mod.getText(source)).join(' ') : '';
+
+		const heritage = node.heritageClauses ? node.heritageClauses.map(clause => {
+			const typeText = clause.types.map(type => type.getText(source)).join(', ');
+			return clause.token === ts.SyntaxKind.ExtendsKeyword ? `extends ${typeText}` : `implements ${typeText}`;
+		}).join(' ') : '';
+
+		const typeParameters = node.typeParameters ? `<${node.typeParameters.map(param => param.getText(source)).join(', ')}>` : '';
+
+		this.emit( 1, `${modifiers} class ${cname}${typeParameters} ${heritage} {\n` );
+
+		ts.forEachChild(node, (x) => {
+
+			if (ts.isPropertyDeclaration(x)) {
+				const name = x.name ? x.name.getText(source) : 'unknown';
+				const type = x.type ? x.type.getText(source) : 'any';
+				const isOptional = x.questionToken ? '?' : '';
+				this.emit( 2, `${name}${isOptional}: ${type};\n` );
+			}
+			else if (ts.isMethodDeclaration(x)) {
+				this.genMethodSig(x, source, false);
+			}
+			else if (ts.isConstructorDeclaration(x)) {
+				this.genMethodSig(x, source, true);
+			}
+			else if (ts.isPropertySignature(x)) {
+				this.genPropSig( x, source );
+			}
+			else {
+				//debugger;
+			}
+		});
+
+		this.emit( 1, "}\n\n" );
+	}
+
+	/**
+	 * 
+	 */
+
+	genInterfaceSig(node, source) {
+		const name = node.name.getText(source);
+		const modifiers = node.modifiers ? node.modifiers.map(mod => mod.getText(source)).join(' ') + ' ' : '';
+		const heritage = node.heritageClauses ? node.heritageClauses.map(clause => {
+			const typeText = clause.types.map(type => type.getText(source)).join(', ');
+			return clause.token === ts.SyntaxKind.ExtendsKeyword ? `extends ${typeText}` : `implements ${typeText}`;
+		}).join(' ') : '';
+
+		const typeParameters = this.genTypeParams( node.typeParameters, source );
+
+		this.emit( 1, `${modifiers}interface ${name}${typeParameters} ${heritage} {\n` );
+
+		ts.forEachChild(node, (x) => {
+
+			if (ts.isPropertySignature(x)) {
+				const name = x.name ? x.name.getText(source) : 'unknown';
+				const type = x.type ? x.type.getText(source) : 'any';
+				const isOptional = x.questionToken ? '?' : '';
+				this.emit( 2, `${name}${isOptional}: ${type};\n` );
+			}
+			else if (ts.isMethodSignature(x)) {
+				this.genMethodSig(x, source, false);
+			}
+		});
+
+		this.emit( 1, "}\n\n" );
+	}
+
+	/**
+	 * 
+	 */
+	
+	genTypeParams( node, source ) {
+		return node ? `<${node.map(param => param.getText(source)).join(', ')}>` : '';
+	}
+
+	/**
+	 * 
+	 */
+
+	genTypeDefinition(node, source) {
+		const typeName = node.name.getText(source);
+		const params = this.genTypeParams( node.typeParameters, source );
+
+		// pb if complex types
+		//const typeDefinition = node.type ? node.type.getText(source) : '';
+
+		this.emit( 1, `type ${typeName}${params} = ` );
+
+		if (ts.isTypeLiteralNode(node.type)) {
+			this.emit( 0, `{\n` );
+				
+			node.type.members.forEach( member => {
+				if( ts.isMethodSignature(member) || ts.isConstructSignatureDeclaration(member) ) {
+					this.genMethodSig( member, source );
+				}
+				else if( ts.isPropertySignature(member) ) {
+					this.genPropSig( member, source );
+				}
+			});
+
+			this.emit( 1, `}\n\n` );
+		} 
+		else if ( ts.isUnionTypeNode(node.type) || ts.isIntersectionTypeNode(node.type) ) {
+			const operator = ts.isUnionTypeNode(node.type) ? ' | ' : ' & ';
+			const typeDefinition = node.type.types.map(t => t.getText(source)).join(operator);
+			this.emit( 0, `${typeDefinition};\n\n` );
+		} 
+		else if (ts.isArrayTypeNode(node.type)) {
+			// Gérer les tableaux
+			const typeDefinition = `${node.type.elementType.getText(source)}[]`;
+			debugger;
+			this.emit( 0, `${typeDefinition};\n\n` );
+		} 
+		else {
+			// Pour les autres types (primitifs, tuples, etc.)
+			const typeDefinition = node.type.getText(source);
+			this.emit( 0, `${typeDefinition};\n\n` );
+		}
+
+
+	}
+
+	/**
+	 * 
+	 */
+
+	genEnumDefinition(node,source) {
+
+		const ename = node.name.getText(source);
+			
+		this.emit( 1, `enum ${ename} {\n`);
+		
+		node.members.forEach( member => {
+			const memberName = member.name.getText(source);
+			const memberValue = member.initializer ? ` = ${member.initializer.getText(source)}` : '';
+			this.emit( 2, `${memberName}${memberValue},\n` );
+		});
+
+		// Assembler la définition complète
+		this.emit( 1, `}\n\n`);
+	}
+
+	/**
+	 * 
+	 */
+
+	visitNode(node, source) {
+		if (ts.isInterfaceDeclaration(node)) {
+			this.genInterfaceSig(node, source);
+		}
+		else if (ts.isClassDeclaration(node)) {
+			this.genClassSig(node, source);
+		}
+		else if (ts.isTypeAliasDeclaration(node)) {
+			this.genTypeDefinition(node, source );
+		}
+		else if (ts.isEnumDeclaration(node)) {
+			this.genEnumDefinition(node, source );
+		}
+		else {
+			ts.forEachChild(node, (x) => this.visitNode(x, source));
+		}
+	}
+
+	/**
+	 * rz=eally quick and dirty dts generator
+	 */
+
+	async build( output_path ) {
+
+		this.output = fs.createWriteStream(output_path, {});
+
+		this.emit( 0, `/** \n`);
+		this.emit( 0, ` *  ___  ___ __\n`);
+		this.emit( 0, ` *  \\  \\/  /  / _\n`);
+		this.emit( 0, ` *   \\    /  /_| |_\n`);
+		this.emit( 0, ` *   /    \\____   _|  \n`);
+		this.emit( 0, ` *  /__/\\__\\   |_|\n`);
+		this.emit( 0, ` * \n`);
+		this.emit( 0, ` * @author Etienne Cochard \n`);
+		this.emit( 0, ` * @copyright (c) 2024 R-libre ingenierie\n`);
+		this.emit( 0, ` *\n`);
+		this.emit( 0, ` * Use of this source code is governed by an MIT-style license \n`);
+		this.emit( 0, ` * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.\n`);
+		this.emit( 0, ` *\n` );
+		this.emit( 0, ` * AUTOGENERATED CODE, DO NOT MODIFY\n` );
+		this.emit( 0, ` * generated on ${new Date().toDateString()}\n` );
+		this.emit( 0, ` */\n\n\n` );
+
+		this.emit( 0, "declare module 'x4js' {\n\n");
+
+		const inputFiles = ["src/x4.ts", "src/custom.d.ts"];
+		const compilerOptions = readJSON("tsconfig.json");
+
+		compilerOptions.declaration = true;
+
+		const host = ts.createCompilerHost(compilerOptions);
+		const program = ts.createProgram(inputFiles, compilerOptions, host);
+
+		const cwd = process.cwd().replaceAll("\\", "/");
+		const mod_path = cwd + "/node_modules";
+
+		program.getSourceFiles().forEach((sourceFile) => {
+
+			let pth = sourceFile.fileName;
+			if (pth.startsWith(mod_path)) {
+				return;
+			}
+			else if( !pth.startsWith(cwd) ) {
+				return;
+			}
+
+			pth = pth.substring(cwd.length);
+			
+			this.emit(1,`// ---------------------------------------\n` );
+			this.emit(1,`// from ${pth}\n\n`);
+
+			this.visitNode(sourceFile, sourceFile);
+		});
+
+		this.emit(0,"}\n\n");
+	}
+}
+
+
+async function main() {
+
+	const pkg = readPackage();
+
+	console.log(chalk.yellow("-- prepack ------------------------"))
+
+	fs.mkdirSync('lib/src', { recursive: true });
+	fs.mkdirSync('lib/styles', { recursive: true });
+	fs.mkdirSync('lib/types', { recursive: true });
+
+	console.log(chalk.green("building esm..."));
+	execSync("node scripts/build.mjs --release --outdir=lib/esm");
+
+	console.log(chalk.green("building cjs..."));
+	execSync("node scripts/build.mjs --release --cjs --outdir=lib/cjs");
+
+	console.log(chalk.green("creating .d.ts..."));
+	
+	const generator = new DTSGenerator( );
+	await generator.build( "lib/types/x4js.d.ts" );
+
+	console.log(chalk.green("copying dependencies..."));
+
+	fs.cpSync('lib/esm/x4.css', 'lib/styles/x4.css');
+	fs.renameSync('lib/esm/x4.js', 'lib/esm/x4.mjs');
+
+	fs.cpSync('src/', 'lib/src/', { recursive: true });
+	fs.cpSync('README.md', 'lib/README.txt');
+
+	console.log(chalk.yellow("-----------------------------------"))
+}
+
+main( );
+
+//(async function tt( ) {
+//const generator = new DTSGenerator( );
+//	await generator.build( "output.d.ts" );
+//})( );
+
+
+

package/src/components/base.scss

@@ -0,0 +1,25 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file base.scss
+ * @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.
+ **/
+
+@use "./shared.scss";
+
+.x4box {
+	@extend .box;
+}
+
+.x4flex {
+	@extend .flex;
+}

package/src/components/boxes/boxes.module.scss

@@ -0,0 +1,54 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file boxes.module.scss
+ * @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.
+ **/
+
+@use "../shared.scss";
+
+.x4hbox {
+	@extend .hbox;
+	&.align-start {
+		align-items: start;
+	}
+}
+
+.x4vbox {
+	@extend .vbox;
+}
+
+.x4stackbox {
+	display: flex;
+	
+	&>* {
+		@extend .fit;
+		position: relative !important;
+	}
+
+	&>*:not(.selected) {
+		display: none;
+	}
+}
+
+.x4gridbox {
+	display: grid;
+}
+
+.x4masonrybox {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-auto-rows: 10px;
+
+	overflow: hidden;
+}

package/src/components/boxes/boxes.ts

@@ -0,0 +1,278 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file boxes.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 { class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
+import { Component, ComponentContent, ComponentEvents, ComponentProps } from "../../core/component"
+
+import "./boxes.module.scss";
+
+export interface BoxProps extends ComponentProps {
+	tag?: string;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+}
+
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	constructor( p: P ) {
+		super( p );
+	}
+}
+
+
+/**
+ * stack of widgets where only one widget is visible at a time
+ */
+
+type ContentBuilder = ( ) => Component;
+
+interface StackItem {
+	name: string;
+	content: Component | ContentBuilder;
+}
+
+interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
+	default: string;
+	items: StackItem[];
+}
+
+interface StackItemEx extends StackItem {
+	page: Component;
+}
+
+@class_ns( "x4" )
+export class StackBox extends Box<StackedLayoutProps> {
+	private _items: StackItemEx[];
+
+	constructor( props: StackedLayoutProps ) {
+		super( props );
+
+		this._items = props.items?.map( itm => {
+			return { ...itm, page: null as any};
+		});
+
+		if( props.default ) {
+			this.select( props.default );
+		}
+		else if( this._items.length ) {
+			this.select( this._items[0].name );
+		}
+	}
+
+	addItem( item: StackItem ) {
+		this._items.push( {
+			name: item.name,
+			content: item.content,
+			page: null
+		});
+	}
+
+	select( name: string ) {
+		let sel = this.query( `:scope > .selected` );
+		if( sel ) {
+			sel.setClass( "selected", false );
+		}
+
+		const pg = this._items.find( x => x.name==name );
+		if( pg ) {
+			if( !pg.page ) {
+				pg.page = this._createPage( pg );
+				this.appendContent( pg.page );
+			}
+
+			sel = pg.page;
+			if( sel ) {
+				(sel as any).activate?.( );
+				sel.setClass( "selected", true );
+			}
+		}
+
+		return pg?.page;
+	}
+
+	/**
+	 * 
+	 */
+
+	private _createPage( page: StackItemEx ) {
+		
+		let content: Component;
+		if( page.content instanceof Function ) {
+			content = page.content( );
+			page.content = content;	// keep it
+		}
+		else {
+			content = page.content;
+		}
+		
+		content?.setData( "stackname", page.name );
+		return content;
+	}
+
+	/**
+	 * 
+	 */
+	
+	getPage( name: string ) {
+		const pg = this._items.find( x => x.name==name );
+		return pg ? pg.content : null;
+	}
+}
+
+// :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+export interface GridboxProps extends BoxProps {
+	rows?: number | string | string[];
+	columns?: number | string | string[];
+}
+
+@class_ns("x4")
+export class GridBox<P extends GridboxProps=GridboxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+
+	constructor( props: P ) {
+		super( props );
+
+		if( props.rows!==undefined ) {
+			this.setRows( props.rows );
+		}
+
+		if( props.columns!==undefined ) {
+			this.setCols( props.columns );
+		}
+	}
+
+	setRows( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateRows", r );
+	}
+
+	setCols( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateColumns", r );
+	}
+
+	setRowCount( n: number ) {
+		this.setStyleValue( "gridTemplateRows", `repeat(${n})` );
+	}
+
+	setColCount( n: number ) {
+		this.setStyleValue( "gridTemplateColumns", `repeat(${n})` );
+	}
+
+	/**
+	 * @param t "a a a" "b c c" "b c c"
+	 * user item.setAttribute( "grid-area", "a" );
+	 */
+
+	setTemplate( t: string[] ) {
+		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
+	}
+}
+
+
+// :: MASONRY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+
+interface MasonryProps extends Omit<BoxProps,"content"> {
+	items: Component[];
+}
+
+@class_ns("x4")
+export class MasonryBox extends Box<MasonryProps> {
+
+	constructor(props: MasonryProps ) {
+		super(props);
+
+		this.addDOMEvent( 'resized', () => {
+			this.resizeAllItems( );
+		});
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	resizeItem(item: Component) {
+		const style = this.getComputedStyle();
+
+		const rowHeight = parseInt(style['gridAutoRows']);
+		const rowGap = parseInt(style['rowGap']);
+
+		let content = item.query('.content');
+		if( !content ) {
+			content = item;
+		}
+
+		if (content && (rowHeight + rowGap)) {
+			const rc = content.getBoundingRect();
+			const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
+			item.setStyleValue('gridRowEnd', "span " + rowSpan);
+		}
+	}
+	  
+	resizeAllItems( ) {
+		const els = this.queryAll( ".item" );
+		els.forEach( itm => {;
+			this.resizeItem( itm );
+		} );
+	}
+
+	setItems( items: Component[] ) {
+		const els = items.map( x => {
+			return new Box( {
+				cls: 'item',
+				content: x
+			} );
+		});
+		
+		this.setContent( els );
+	}
+}
+