x4js 2.0.2 → 2.0.4

package/scripts/build.mjs

@@ -1,351 +0,0 @@
-#!/usr/bin/env node
-
-/**
-* @file build.mjs
-* @author Etienne Cochard 
-* @copyright (c) 2024 R-libre ingenierie, all rights reserved.
-* @version 1.2
-**/
-
-import * as fs from "node:fs"
-import * as path from "node:path"
-import * as url from "node:url"
-import * as http from "node:http"
-
-import chalk from "chalk"
-import esbuild from "esbuild"
-import { WebSocketServer } from 'ws';
-import Watcher from "watcher"
-
-import { sassPlugin } from "esbuild-sass-plugin";
-//import { hostname } from 'node:os'
-
-console.log( chalk.green("\n\n-- X4Build 1.2 -------------------") );
-
-const releaseMode = process.argv.some(a => a == "--release")
-const hmrMode = process.argv.some(a => a == "--hmr")		// hot module replacement
-const watchMode = process.argv.some(a => a == "--watch" )	// watch modifications
-const serveMode = process.argv.some(a => a == "--serve")	// watch modifications
-
-
-function readPackage() {
-
-	let cpath = process.cwd();
-
-	// check here
-	let pth = path.join(cpath, "package.json");
-	if (fs.existsSync(pth)) {
-		const raw = fs.readFileSync(pth, "utf-8");
-		return JSON.parse(raw);
-	}
-
-	throw new Error("cannot find package.json");
-}
-
-const def_settings = {
-	"entryPoints": ["src/main.ts"],
-	"outdir": "./bin",
-	"copy": [],
-};
-
-const pkg_settings = readPackage();
-const settings = { ...def_settings, ...pkg_settings.x4build };
-
-console.log( chalk.green("    release mode ..", releaseMode ) );
-console.log( chalk.green("    hmr ...........", hmrMode ) );
-console.log( chalk.green("    watching ......", watchMode ) );
-console.log( chalk.green("    serve files ...", serveMode ) );
-console.log( chalk.green("    output dir ....", settings.outdir ) );
-console.log( chalk.green("    entry point ...", settings.entryPoints ) );
-console.log( chalk.green("    copying .......", settings.copy ) );
-
-console.log( chalk.green("----------------------------------") );
-
-
-
-
-const js_hmr = ` // X4 Hot Module Replacement v1.1
-{
-	const ws = new WebSocket( "ws://127.0.0.1:9998", "hmr" );
-
-	ws.onmessage = ( ev ) => {
-		if( ev.data=="reload-css" ) {
-			const gen_id = Date.now( );
-			document.querySelectorAll( "link[rel=stylesheet]").forEach( link => {
-				link.href = link.href.replace(/\\?.*|$/, "?" + gen_id)
-			} );
-		}
-		else {
-			location.reload(); 
-		}
-	}
-}`
-
-/** custom plugin to copy element after the build */
-
-const post_plugin = {
-	name: 'post-cmd',
-	setup(build) {
-
-		build.onEnd(result => {
-			if (result.errors.length) {
-				console.error(`build ended with ${result.errors.length} errors`)
-			}
-			else {
-				settings.copy?.forEach((desc) => {
-					const { from, to } = desc;
-
-					if (fs.existsSync(from)) {
-						fs.cpSync(from, path.join(settings.outdir, to), { recursive: true });
-					}
-				});
-			}
-		})
-	},
-}
-
-let buildcnt = 1;
-
-async function build() {
-
-	console.log(chalk.cyan(`building (${buildcnt++})...`));
-
-	try {
-		/** @type {esbuild.BuildOptions} */
-		const options = {
-			target: "node12",
-			logLevel: "error",
-			entryPoints: settings.entryPoints,
-			bundle: true,
-			charset: "utf8",
-			outdir: settings.outdir,
-			keepNames: true,
-			platform: "node",
-			format: "esm",
-			minify: releaseMode,
-			plugins: [ 
-				sassPlugin( {
-					type: "css",
-					filter: /\.scss$/,
-				}), 
-				post_plugin
-			],
-			assetNames: "assets/[name]-[hash]",
-			loader: {
-				".svg": "dataurl",
-				".jpg": "file",
-				".png": "file",
-				".woff": "file",
-				".woff2": "file",
-			}
-		}
-
-		if (!releaseMode) {
-			options.sourcemap = "inline";
-		}
-
-		if (hmrMode) {
-			options.banner = { js: js_hmr }
-		}
-
-		await esbuild.build(options);
-	}
-	catch (e) {
-		console.error(chalk.bgRed.white("build failure, waiting for correction"));
-		console.log(e.message);
-	}
-}
-
-// :: WEBSOCKET SERVER FOR HRM ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-if (watchMode) {
-
-	const wsServer = new WebSocketServer({
-		port: 9998
-	});
-
-	// all connected clients (1)
-	const clients = [];
-
-	wsServer.on('connection', (ws) => {
-		clients.push(ws);
-
-		wsServer.on('error', (err) => {
-		});
-
-		wsServer.on('message', function message(data) {
-			console.log('received: %s', data);
-		});
-	});
-
-	const sendClientMessage = (msg) => {
-		clients.forEach(ws => {
-			ws.send(msg);
-		});
-	}
-
-	// file watcher ------------------------------------------
-	const selfPath = url.fileURLToPath(import.meta.url);
-	const cPath = process.cwd();
-
-	const watcher = new Watcher("./", {
-		recursive: true,
-		ignoreInitial: true,
-		ignore: (targetPath) => {
-			if (targetPath.startsWith(cPath)) {
-				targetPath = path.join(".", targetPath.substring(cPath.length));
-				targetPath = path.normalize(targetPath);
-			}
-
-			if (targetPath.startsWith("bin") || targetPath.startsWith("node_modules") ) {
-				//console.log("skip watch", targetPath);
-				return true;
-			}
-
-			return false;
-		}
-	});
-
-
-	watcher.on('all', async (event, targetPath, targetPathNext) => {
-		
-		if (event == "change" || event == "add") {
-			// one of our copy path ?
-			if (targetPath.startsWith(cPath)) {
-				let pth = "." + targetPath.substring(cPath.length);
-				pth = path.normalize(pth);
-
-				//console.log( targetPath );
-				if (settings.copy?.some(desc => {
-					const from = path.normalize(desc.from);
-					if (pth == from || pth.startsWith(from)) {
-						return true;
-					}
-				})) {
-					await build();
-					return;
-				}
-			}
-		}
-		
-		if (event == "change") {
-			// somebody changed this file, so leave
-			if (targetPath == selfPath) {
-				process.exit(0);
-			}
-
-			// depending of the extension, we send the correct type of refresh
-			switch (path.extname(targetPath)) {
-				case ".svg":
-				case ".css":
-				case ".scss": {
-					await build();
-					sendClientMessage("reload-css");
-					break;
-				}
-
-				case ".html":
-				case ".ts":
-				case ".js":
-				case ".jsx":
-				case ".tsx": {
-					await build();
-					sendClientMessage("reload-js");
-					break;
-				}
-
-				case ".json": {
-					if (path.basename(targetPath) == 'package.json') {
-						build();
-					}
-					break;
-				}
-			}
-
-			//console.log ( event ); // => could be any target event: 'add', 'addDir', 'change', 'rename', 'renameDir', 'unlink' or 'unlinkDir'
-			//console.log ( targetPath ); // => the file system path where the event took place, this is always provided
-		}
-	});
-}
-
-// :: WEB SERVER ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-function serve() {
-
-	// maps file extention to MIME types
-	// full list can be found here: https://www.freeformatter.com/mime-types-list.html
-	const mimeType = {
-		'.ico': 'image/x-icon',
-		'.html': 'text/html',
-		'.js': 'text/javascript',
-		'.json': 'application/json',
-		'.css': 'text/css',
-		'.png': 'image/png',
-		'.jpg': 'image/jpeg',
-		'.wav': 'audio/wav',
-		'.mp3': 'audio/mpeg',
-		'.svg': 'image/svg+xml',
-		'.pdf': 'application/pdf',
-		'.zip': 'application/zip',
-		'.doc': 'application/msword',
-		'.eot': 'application/vnd.ms-fontobject',
-		'.ttf': 'application/x-font-ttf',
-	};
-	
-	const server = http.createServer( {
-		hostname: "127.0.0.1"
-	});
-
-	server.on('request', (req, res) => {
-		//console.log(`${req.method} ${req.url}`);
-
-		// parse URL
-		const parsedUrl = url.parse(req.url);
-
-		// extract URL path
-		// Avoid https://en.wikipedia.org/wiki/Directory_traversal_attack
-		// e.g curl --path-as-is http://localhost:9000/../fileInDanger.txt
-		// by limiting the path to current directory only
-		const sanitizePath = path.normalize(parsedUrl.pathname).replace(/^(\.\.[\/\\])+/, '');
-		let pathname = path.join(settings.outdir, sanitizePath);
-
-		if( fs.existsSync(pathname) ) {
-			// if is a directory, then look for index.html
-			if (fs.statSync(pathname).isDirectory()) {
-				pathname = path.join( pathname, 'index.html' );
-			}
-
-			// read file from file system
-			fs.readFile(pathname, function (err, data) {
-				if (err) {
-					res.statusCode = 500;
-					res.end(`Error getting the file: ${err}.`);
-				} 
-				else {
-					// based on the URL path, extract the file extention. e.g. .js, .doc, ...
-					const ext = path.parse(pathname).ext;
-					// if the file is found, set Content-type and send data
-					res.setHeader('Content-type', mimeType[ext] || 'text/plain');
-					res.end(data);
-				}
-			});
-		}
-		else {
-			// if the file is not found, return 404
-			res.statusCode = 404;
-			res.end(`File ${pathname} not found!`);
-			return;
-		}
-	});
-
-	server.listen(3000);
-	console.log( chalk.yellow("listening on http://127.0.0.1:3000") );
-}
-
-build();
-
-if( serveMode ) {
-	serve();
-}
-
-

package/scripts/prepack.mjs

@@ -1,43 +0,0 @@
-import * as fs from 'node:fs';
-import * as path from "node:path"
-import chalk from "chalk"
-
-import { execSync } from "node:child_process";
-
-function readPackage() {
-
-	let cpath = process.cwd();
-
-	// check here
-	let pth = path.join(cpath, "package.json");
-	if (fs.existsSync(pth)) {
-		const raw = fs.readFileSync(pth, "utf-8");
-		return JSON.parse(raw);
-	}
-
-	throw new Error("cannot find package.json");
-}
-
-async function main( ) {
-
-	const pkg = readPackage( );
-
-	console.log( chalk.yellow("-- prepack ------------------------"))
-
-	console.log( chalk.green("building...") );
-	execSync( pkg.scripts["build-release" ]);
-
-	console.log( chalk.green("creating .d.ts...") );
-	execSync( `npx ${pkg.scripts["build-dts"]}` );
-
-	console.log( chalk.green("copying dependencies...") );
-	fs.mkdirSync( 'lib/src', { recursive: true} );
-	fs.mkdirSync( 'lib/types', { recursive: true} );
-
-	fs.cpSync( 'src/', 'lib/src/', { recursive: true} );
-	fs.cpSync( 'README.md', 'lib/README.txt' );
-	
-	console.log( chalk.yellow("-----------------------------------"))
-}
-
-main( );

package/src/components/base.scss

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

@@ -1,37 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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;
-}
-
-.x4vbox {
-	@extend .vbox;
-}
-
-.x4stackbox {
-	&>* {
-		@extend .fit;
-		position: relative !important;
-	}
-
-	&>*:not(.selected) {
-		display: none;
-	}
-}
-

package/src/components/boxes/boxes.ts

@@ -1,125 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 { Component, ComponentEvents, ComponentProps } from "@core/component"
-
-import "./boxes.module.scss";
-
-export interface BoxProps extends ComponentProps {
-}
-
-/**
- * 
- */
-
-export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
-}
-
-
-/**
- * 
- */
-
-export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-}
-
-/**
- * 
- */
-
-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
- */
-
-interface StackItem {
-	name: string;
-	content: Component;
-}
-
-interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
-	default: string;
-	items: StackItem[];
-}
-
-interface _StackItem extends StackItem {
-	page: Component;
-}
-
-export class StackBox extends Box<StackedLayoutProps> {
-
-	private _items: _StackItem[];
-
-	constructor( props: StackedLayoutProps ) {
-		super( props );
-
-		this._items = props.items?.map( itm => {
-			return { ...itm, page: null };
-		});
-
-		if( props.default ) {
-			this.select( props.default );
-		}
-		else if( this._items.length ) {
-			this.select( this._items[0].name );
-		}
-	}
-
-	select( name: string ) {
-		let sel = this.query( `.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.setClass( "selected", true );
-			}
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private _createPage( page: _StackItem ) {
-		
-		let content: Component;
-		//if( page.content instanceof ComponentBuilder ) {
-		//	content = page.content.create( );
-		//}
-		//else {
-			content = page.content;
-		//}
-		
-		content?.setData( "stackname", page.name );
-		return content;
-	}
-}
-

package/src/components/btngroup/btngroup.module.scss

@@ -1,29 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.model.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.
- **/
-
-.x4btngroup {
-	align-content: start;
-	margin: 5px;
-	gap: 4px;
-
-	&.align-right {
-		justify-content: end;
-	}
-
-	&.align-center {
-		justify-content: center;
-	}
-}

package/src/components/btngroup/btngroup.ts

@@ -1,106 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.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 { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '@core/component';
-import { EventCallback } from '@core/core_events.js';
-import { isString } from '@core/core_tools';
-import { _tr } from '@core/core_i18n'
-
-import { Button } from '../button/button';
-import { Box } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { EvBtnClick } from '../dialog/dialog.js';
-
-import "./btngroup.module.scss"
-
-
-type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";	// - = flex
-export type BtnGroupItem = predefined | Button | Label;
-
-interface BtnClickEvent extends ComponentEvent {
-	emitter: predefined;
-}
-
-interface BtnGroupEvents extends ComponentEvents {
-	btnclick: BtnClickEvent;
-}
-
-interface BtnGroupProps extends Omit<ComponentProps,"content"> {
-	align?: "left" | "center" | "right";	// left default
-	vertical?: boolean;					
-	items: BtnGroupItem[];
-	reverse?: boolean,
-	btnclick?: EventCallback<EvBtnClick>;
-}
-
-export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
-
-	constructor( props: BtnGroupProps ) {
-		super( props );
-
-		if( props.align ) {
-			this.addClass( "align-"+props.align );
-		}
-
-		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
-
-		if( props.items ) {
-			this.setButtons( props.items );
-		}
-
-		this.mapPropEvents( props, "btnclick" );
-	}
-
-	/**
-	 * 
-	 * @param btns 
-	 */
-
-	setButtons( btns: BtnGroupItem[] ) {
-
-		this.clearContent( );
-
-		const childs: Component[] = [];
-
-		btns?.forEach( (b: string | Component) => {
-
-			if( b==="-" ) {
-				b = new Flex( {} );
-			}
-			else if( isString(b) ) {
-				let title: string;
-				const nm = b as predefined;
-
-				switch( b as predefined ) {
-					case "ok": 		title = _tr.global.ok; break;
-					case "cancel": 	title = _tr.global.cancel; break;
-					case "abort":	title = _tr.global.abort; break;
-					case "no":		title = _tr.global.no; break;
-					case "yes":		title = _tr.global.yes; break;
-					case "retry":	title = _tr.global.retry; break;
-				}
-
-				b = new Button( { label: title, click: ( ) => {
-					this.fire( "btnclick", {emitter:nm} )
-				} } );
-			}
-
-			childs.push( b );
-		});
-
-		super.setContent( childs );
-	}
-}