x4js 1.6.5 → 2.0.1

package/package.json

@@ -1,59 +1,67 @@
-{
-	"name": "x4js",
-	"version": "1.6.5",
-	"description": "X4js core files",
-	"main": "lib/cjs/x4js.js",
-	"types": "lib/types/x4js.d.ts",
-	"style": "lib/x4.css",
-	"files": [
-		"lib/**/*"
-	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/rlibre/x4js.git"
-	},
-	"keywords": [
-		"typescript",
-		"framework",
-		"sap",
-		"web",
-		"desktop",
-		"application"
-	],
-	"scripts": {
-		"build": "node ./build.js",
-		"build-dts": "dts-generator --project . --out lib/types/x4js.d.ts",
-		"mkdoc": "typedoc --tsconfig tsconfig.json --readme none",
-		"prepack": "node ./build.js"
-	},
-	"author": "etienne cochard",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/rlibre/x4js/issues"
-	},
-	"homepage": "https://x4js.org",
-	"module": "lib/esm/x4js.js",
-	"exports": {
-		".": {
-			"import": {
-				"types": "./lib/types/x4js.d.ts",
-				"default": "./lib/esm/x4js.mjs"
-			},
-			"require": {
-				"types": "./lib/types/x4js.d.ts",
-				"default": "./lib/cjs/x4js.js"
-			}
-		}
-	},
-	"devDependencies": {
-		"dts-generator": "^3.0.0",
-		"esbuild": "^0.17.8",
-		"fs-extra": "^11.1.0",
-		"less": "^4.1.3",
-		"typescript": "^4.9.5"
-	},
-	"dependencies": {
-		"global": "^4.4.0",
-		"typedoc": "^0.25.3"
-	}
-}
+{
+	"name": "x4js",
+	"version": "2.0.1",
+	"description": "X4 framework",
+	"author": "etienne cochard",
+	"main": "main.js",
+	"types": "lib/types/x4.d.ts",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/rlibre/x4.git"
+	},
+	"bugs": {
+		"url": "https://github.com/rlibre/x4/issues"
+	},
+	"keywords": [
+		"typescript",
+		"framework",
+		"sap",
+		"web",
+		"desktop",
+		"application"
+	],
+	"scripts": {
+		"build": "node scripts/build.mjs --watch --hmr --serve",
+		"build-release": "node scripts/build.mjs --release --serve",
+		"build-dts": "dts-generator --project . --out lib/types/x4.d.ts",
+		"prepack": "node scripts/prepack.mjs"
+	},
+	"homepage": "https://x4js.org",
+	"module": "lib/esm/x4js.js",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./lib/types/x4js.d.ts",
+				"default": "./lib/esm/x4js.mjs"
+			},
+			"require": {
+				"types": "./lib/types/x4js.d.ts",
+				"default": "./lib/cjs/x4js.js"
+			}
+		}
+	},
+	"devDependencies": {
+		"chalk": "^5.3.0",
+		"dts-generator": "^3.0.0",
+		"esbuild": "^0.24.0",
+		"esbuild-sass-plugin": "^3.3.1",
+		"typescript": "^5.6.2",
+		"watcher": "^2.3.1",
+		"ws": "^8.18.0"
+	},
+	"x4build": {
+		"entryPoints": [
+			"src/main.tsx"
+		],
+		"copy": [
+			{
+				"from": "src/assets",
+				"to": "assets"
+			}
+		]
+	},
+	"dependencies": {
+		"@fontsource/montserrat": "^5.1.0"
+	}
+}

package/scripts/build.mjs

@@ -0,0 +1,351 @@
+#!/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

@@ -0,0 +1,15 @@
+import * as fs from 'node:fs';
+
+async function main( ) {
+
+	fs.mkdirSync( 'lib/styles', { recursive: true} );
+	fs.mkdirSync( 'lib/src', { recursive: true} );
+	fs.mkdirSync( 'lib/esm', { recursive: true} );
+	fs.mkdirSync( 'lib/types', { recursive: true} );
+
+	fs.cpSync( 'src/', 'lib/src/', { recursive: true} );
+	fs.cpSync( 'README.md', 'lib/README.txt' );
+	
+}
+
+main( );

package/src/assets/house-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M298.6 4c-6-5.3-15.1-5.3-21.2 0L5.4 244c-6.6 5.8-7.3 16-1.4 22.6s16 7.3 22.6 1.4L64 235l0 197c0 44.2 35.8 80 80 80l288 0c44.2 0 80-35.8 80-80l0-197 37.4 33c6.6 5.8 16.7 5.2 22.6-1.4s5.2-16.7-1.4-22.6L298.6 4zM96 432l0-225.3L288 37.3 480 206.7 480 432c0 26.5-21.5 48-48 48l-64 0 0-160c0-17.7-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32l0 160-64 0c-26.5 0-48-21.5-48-48zm144 48l0-160 96 0 0 160-96 0z"/></svg>

package/src/assets/radio.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
+	<circle cx="2.5" cy="2.5" r="2.5" fill="currentColor"></circle>
+	<circle cx="2.5" cy="2.5" r="1.25" fill="white"></circle>
+</svg>

package/src/components/base.scss

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

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